HTML Archives | Hello Sunil

How to Lazy Load Images and Video for Better Website Performance – 2024 Updated

Lazy loading is a technique that defers loading of non-critical resources at page load time. Instead, these non-critical resources are loaded at the moment of need. Where images are concerned, “non-critical” is often synonymous with “off-screen”. If you have used Lighthouse and examined some opportunities for improvement, you may have seen some guidance in this… Continue reading How to Lazy Load Images and Video for Better Website Performance – 2024 Updated

How to Create a Sticky Footer in CSS

The purpose of a sticky footer is that it “sticks” to the bottom of the browser window. But not always, if there is enough content on the page to push the footer lower, it still does that. But if the content on the page is short, a sticky footer will still hang to the bottom… Continue reading How to Create a Sticky Footer in CSS

CSS Inline vs Inline-Block vs Block

The inline, inline-block, and block layout values are all possible values for the CSS display properties. Many newbie frontend developers usually struggle with understanding the difference between the three, and it’s a common frontend developer interview question. In this article we are going to discuss the real difference between Inline vs Inline-Block vs Block. So,… Continue reading CSS Inline vs Inline-Block vs Block

How To Make a Sidebar Sticky On Scroll

Have you ever been on a website where an element “sticks” to the screen and follows you as you scroll down the page? This is what I call a sticky sidebar. In the past, this functionality was frequently accomplished through JavaScript calculations to detect the scroll position and to toggle an element’s position to absolute or fixed. Presently, the W3C… Continue reading How To Make a Sidebar Sticky On Scroll

How to Combine Background Image With Gradient Overlay

CSS gradients allow us to display smooth transitions between two or more colours. They can be added on top of the background image by simply combining the background-image URL and gradient properties. Adding a background image to a div tag is easy using CSS. Here it is; We have put some other rules on the… Continue reading How to Combine Background Image With Gradient Overlay

Front-end Developer vs. Web Designer – Real Difference?

It’s no surprise that people not involved in web development tend to confuse these two professions. Both of them work on the same task: roughly, to establish interaction between users and websites. An uneducated customer makes funny mistakes sometimes. They ask a web developer things like: There is nothing wrong with that (when it happens… Continue reading Front-end Developer vs. Web Designer – Real Difference?

How to Setup Custom Fonts with CSS & @font-face

Custom fonts changes how typography looks on your website. Using the correct font can be a super big impact on how your website feels to visitors. @font-face is a CSS at-rule used to define custom fonts. Once added to a stylesheet, the rule instructs the browser to download the font from where it is hosted,… Continue reading How to Setup Custom Fonts with CSS & @font-face

How to Customize mailto Link

Email is a great way for a website to establish contact with its visitors and acquire new subscribers. Among the different existing tools, the mailto link is efficient and easy to implement. This clickable text to send a message directly to a defined email address offers some interesting customization options. But if you are looking… Continue reading How to Customize mailto Link

How to Create Email Social Share Button – NO PLUGINS ONE LINE HTML ONLY

When you visit any prominent blog such as ThoughtCo you might have seen the following social share buttons. Just hit the email share button and quickly it pops up your default email client with share link. If you wonder how to get this feature without using any external plugins then this article is for you.… Continue reading How to Create Email Social Share Button – NO PLUGINS ONE LINE HTML ONLY

How to add the Print Option on a Web Page

CSS give you considerable control over how content on your web pages is displayed on the screen. This control extends to other media as well, such as when the web page is printed. It’s worth considering why you would want to create a print link in HTML after all, most users already know how to… Continue reading How to add the Print Option on a Web Page

(Pro Tip) Create Social Share Link Without Any Tool

If you are developing a website, it is imperative to have social sharing buttons to increase social engagement which in turn will result in higher traffic. There are lot of widgets already available for this purpose. But you may not be satisfied with any of them (reason may be its non-impressive style or poor functionality).… Continue reading (Pro Tip) Create Social Share Link Without Any Tool

Tag: HTML