Category: HTML & CSS
-
CSS View Transitions: The Complete Developer Tutorial
Smooth page and UI transitions, built into the browser, with little to no JavaScript. This tutorial covers exactly how the View Transitions API works, the difference between same-document and cross-document transitions, real browser support in 2026, and the accessibility details most guides skip.
-
The European Accessibility Act: What Frontend Developers Actually Need to Do
A practical EAA compliance tutorial for frontend developers — 10 real accessibility issues, WCAG 2.1 AA fixes, and code examples to ship compliant sites.
-
Build a Scroll-Driven Animated Progress Bar & Fade-In Image in Just 5 Minutes
In this tutorial, I’ll show you how to build a scroll-driven animated progress bar and a fade-in image effect in just 5 minutes. You’ll learn how to use the powerful animation-timeline property in CSS to create smooth animations with minimal code.
-
Website Accessibility Optimization: The Complete Developer’s Guide
Improve your website accessibility optimization with 10 proven fixes. Boost SEO rankings, enhance user experience, and meet WCAG standards in this 2026 guide.
-
Truncate Multiple Line With CSS
Truncating a single line is very easy with CSS, but if you want to truncate multiple-line is a bit harder in the old days, until -webkit-line-clamp being introduced by Webkit.
-
High Performance CSS Animation
Ensuring your page’s animation running at 60fps (frame per second) is the key to a silky smooth animation. When an animation begins to run, the browser executes your script and start to figures out what it need to paint and composite on the screen. So it is important to know how browser handles animation in order to optimize your script.
-
Build Google’s Material Design Spinner in 10 Minutes!
In this tutorial, you will learn to build a Google’s Material Design progress bar (Indeterminate indicators) for your website & web application.
-
Build Responsive Image Gallery Using CSS Calc()
In this tutorial, we will learn to leverage CSS Calc() function to fit 3 images relatively in a row with 10 pixels margin between them.
-
Reduce Rendering Time for Page Speed Optimization
Specifying the image dimension will definitely increase the browser rendering & painting performance…
-
Replacing jQuery Animation With CSS Hardware Accelerated
We’ll discuss the techniques here,: replacing JQuery animation / transition with CSS Hardware Accelerated transition.
-
Create an Off-Canvas Menu in just 5 minutes
This tutorial will show you how to build a Facebook app-like slide-out navigation for your web app using CSS & JQuery.
-
Build Intelligent Layout Using CSS Calc() Property
The CSS calc() property allows us to calculate a length value using arithmetic expression, which means we can use it to define the sizes of div, the values of padding, the widths of margin, and so forth.
-
Design Your Own Responsive Web Template
2012 has been a unusual year in PC market. Pc sales are lower than they were in the previous years. Accoding to the global market research company, Tablets and Smartphones sales are expected to exceed notebook in this year. Nowadays, users no longer just use desktop to view websites. They now use a variety of […]
-
Solving CSS Float’s Problem
A technique to address the problem of CSS float.