When you’re designing a website, making sure things look and act just right is super important. With CSS, you have a bunch of tools to help you position elements just how you want them. Two of these tools are position: fixed and position: sticky. While they might seem similar at first glance, they serve different… Continue reading CSS Position Fixed vs Sticky: Understanding the Difference
Tag: CSS
Understanding CSS Positioning: Relative vs. Absolute
CSS positioning can be a bit tricky to grasp, but don’t worry, we’ll break it down step by step. In this article, we’ll explore the key differences between position: relative and position: absolute in CSS with plenty of examples and live demos to make things crystal clear. What Is Relative Positioning When you set an… Continue reading Understanding CSS Positioning: Relative vs. Absolute
CSS Variables – A Quick Start Guide
CSS Variables, also known as CSS custom properties, are gaining popularity for their powerful features and dynamic adaptability. Unlike traditional CSS, they reduce repetition and can be updated on-the-fly without preprocessors. In this guide, we’ll explore how to use them effectively to simplify your CSS workflow. Ready to get started? Let’s go! What are CSS… Continue reading CSS Variables – A Quick Start Guide
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
CSS Ellipsis (the 3 dots…) on Single OR Multiple Lines
UI Developers usually truncate the extra text in the line by applying text-ellipsis, which means showing the 3 dots (visually explains there is even more text, that can be handled by applying title attribute to the element and show the full text on hover). Ellipsis to One Line Text Applying ellipsis for one line is… Continue reading CSS Ellipsis (the 3 dots…) on Single OR Multiple Lines
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 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