-
How to setup Svelte Project Development environment using Vite?
Firstly, make sure that the latest version of NodeJS is installed on your computer. If it’s not installed you can install it from here or if you’re on Linux you can use the following terminal command to install NodeJS : After, NodeJS has been installed properly cd into the directory of your choice and type…
-
How to uninstall and reinstall NodeJS on your Linux Ubuntu system using the terminal?
First open up the terminal using the keyboard shortcut Ctrl+Alt+T. Next type the following command to uninstall any previous versions completely from your system : This will remove all the previous files and folders for NodeJS (including NPM). You can run the following commands to check whether its done: Next, to reinstall the latest version…
-
Create a button which displays a pop-up and pop-out window using CSS and JavaScript
We’ll create a button which shows a pop-up and pop-out window when you click on the button. For this we’ll use a JavaScript function which will be linked to the HTML using onClick keyword on the HTML linked to the button. Here’s the code : Next, the code block below, note that the popupWindow() function…
-
Dark Mode Toggle button using HTML, CSS and JavaScript
Here’s a simple way to create a toggle button to switch between light mode and dark mode using HTML, CSS and JavaScript function. In the above CSS code block, we’ve created the default light mode background for the body. We’ve also created another dark-mode class which will be activated dynamically using the JavaScript function. In…
-
A box-shadow template to use anywhere inside your CSS project
Here’s a box-shadow template which you can use in any of your CSS projects : So, the order is just this : Here’s another more complex one with double box shadows which stacks layer on layer to make it look deeper : Try and edit these to experiment anywhere you want on your project.
-
JavaScript Promises using Resolve and Reject
JavaScript has a special class called Promise. In order to create a promise, you’ll have to create an instance of the promise class. The promise constructor needs only a single argument which is a function (though you can add two arguments as well). The promise needs to be created with the function. The function is…
-
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…