-
Web Page Alignment Basics using HTML & CSS
We’ll look at horizontal and vertical alignment basics using various HTML and CSS properties. Ways to horizontally align items using CSS Using text-align property This is used to horizontally align text within a block-level element, such as a <div> or <p> tag. Using the margin property This property is used to horizontally adjust the block-level…
-
How to install Bulma CSS Framework into your Web Dev Project?
First create an project folder and add the index.html file in it with the boilerplate code. Next write this line of code inside the terminal to initialize the project with package.json : Next, to install Bulma Framework inside your project type this inside the terminal : The above terminal command imports all the Bulma files…
-
How to create reusable Header and Footer using JavaScript?
There are a few different ways to create reusable header or footer in a website using JavaScript so that you don’t have to repeat the code. Let’s explore : Method 1 (using template tag) I’m using an HTML template tag to hold content first. Content inside this tag is hidden by default. You have to…
-
How to Implement Bootstrap via NPM for your Web Development Project?
This command creates a package.json file which contains some details about the project folder you’ve created. This is the first step in initialization of the process. This command installs all the bootstrap files and folders inside your project directory. Here’s the full code setup inside index.html to make you understand everything clearly : That’s how…
-
Asynchronous JavaScript, AJAX, APIs and JSON : An Intro
In order to understand what Asynchronous JavaScript is, we need to first know what synchronous JavaScript means. Every JS function or code runs in a certain rule of sequence. For example, in order to execute a multi-line code, a first set of instructions is executed just to go to the next step and the next,…
-
How to remove red wavy underline from text using HTML?
You might have seen wavy red underline under an editable text field or an input field when you misspell any word. By default, the red underline displays under your text every time you mistype anything. You need to use the HTML spellcheck attribute and set it to false in order to remove the underline. Here’s…
-
Whether a number is odd or even – JavaScript
Question How to find out whether a number is odd or even using JavaScript code? Solution 1 Solution 2 Note: Here I’ve used the Bitwise AND rule. Refer JavaScript Bitwise AND documentation to know why this works. In the above code, n & 1 returns odd and everything else returns even numbers as per the…
-
How to return highest and lowest numbers from a list in JavaScript?
Question : We are given a string of space-separated numbers and we need to return the highest and lowest numbers like so: Solution 1 We’ve written a function and first used split since the input numbers are in ‘strings’ format and then map() method to create new array to map through each of them. Next,…
-
React State : Basics with Real World Examples
React State is actually an object with encapsulated data which changes in response to instructions given to it using event listeners and handlers. For example, clicking the ‘add item’ button should take you to a screen where the item is added to a shopping cart, or clicking the ‘next page’ link should take you to…
-
Event Listeners and Event Handlers in React
Just like in vanilla JavaScript, React let’s you add event listeners or event handlers wherein if you hover on something or click something, then something else will be triggered. For example, you can write a JSX code in React where if you click a button, a pop-up message displays. Here’s how to add a simple…
