Category: HTML
-
Favicon code for your HTML document
To add favicon code to your HTML document copy and paste the below code to your index.html file just below the title tag after the link code to your css file :
-
How to center divs exactly in the middle of the screen?
Here’s how it’s done using HTML and CSS. These are the basic codes to center the divs using CSS and you can further build up your own style from here. Notice that we’ve used height: 100vh which is 100 percent of the viewport height so that we can precisely center the containers vertically. You can…
-
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…
-
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…
-
All HTML & CSS hacks to make a Website Responsive
Using Percentages If you’re traditionally using pixels, your boxes or images will have a fixed size. For example, if you have a really large image embedded on you site, it might look good on a big screen, but, if you see the same image on a smartphone, the image falls off the screen. It looks…
-
Horizontally align HTML header elements using CSS
While there are various different ways to horizontally align items using CSS, the best way forward is to use the flexbox layout. In order to use CSS flexbox property efficiently, you have to use elements or tags inside of other elements or tags. The flex property works only if you have elements or tags like…
-
How to fix HTML Image Tag not working?
I’ve assumed that you didn’t make any typo errors while using the image source. I’m also assuming that you’ve properly linked to the image source whether it’s from the internet or a specific folder. This hack pertains to the images not loading from a directory where you have kept the images. So, the cheat is…