If you want to learn HTML and CSS you can do it with free resources. The web is full of free high-quality resources; the problem for a beginner is having a path. So I distilled the best free resources I know and I have added context to create a path with them.
The best overall resource I know is web.dev guides by Google:
Studying these three guides will give you the foundation of your knowledge. Maybe, you can warm up your brain by reading these all-in-one articles:
This is the first step. The next one is writing code. There are some videos that you can follow along:
- HTML / CSS Tutorial – Create an Order Summary Component
- Learn HTML & CSS – Full Course for Beginners
- CSS Tutorial – Full Course for Beginners
These videos are very long; I suggest you follow one or two before moving on to the third step.
Practice
If you think that the second step is where you practice, you are wrong. Practice means something else.
Practice means:
- find a web page you like
- recreate it using your knowledge
- if you get stuck at some point, use Google search to find a solution
- if you can't find a solution, then ask to ChatGPT or Google Gemini
- if you are still stuck, ask for help in a community (for example Stack Overflow)
Iterate these steps web page by web page, changing the type each time (you can recreate pages from a corporate website, then others from an ecommerce website and so on).
Avoid falling into the Tutorials Hell
Many developers, myself included, fall into the Tutorials Hell.
Watching a video and following the teacher will not make you a developer, because it will not teach you how to think like a developer.
You have to develop projects on your own to build a developer mental model and learn how to solve coding problems. If at the beginning, when you get stuck, you think that you don't have enough knowledge, so it's best to follow new tutorials, please don't do that. Go ahead building your project.
Continuous Learning
As you develop projects on your own, you should continue to learn new concepts as well as deepen the ones you already know.
There are two resources that I think are the best for this purpose:
Kevin and Ahmad are CSS experts and are great to teach. You should learn from at least one of them.
Following, I list additional high-quality resources from which you can get value.
First, web.dev has also:
- Learn Images
- Learn Forms
- Layout patterns
- Component patterns
- Animation patterns
- Articles on some topics including HTML and CSS
Google Search Results
Like I said, when I get stuck, I use Google search in the early stage to find a solution. I don't always click on the first result; I look for specific sources on a case-by-case basis:
- if I need a solution to a specific problem, I look for results from Stack Overflow
- if I need to remember something, I look for results from W3Schools
- if I need to deeply investigate something, I look for results from MDN
- an alternative to W3Schools and MDN that I like is the Almanac section on CSS Tricks
Responsive Images
- How to think about HTML responsive images
- Responsive Images in CSS
- Create Responsive Image Effects With CSS Gradients And aspect-ratio
Forms
- A Guide to HTML & CSS Forms (No Hacks!)
- How to Build HTML Forms Right series
- Form Input Validation Using Only HTML5 and Regex
SVG
- A Friendly Introduction to SVG
- An Interactive Guide to SVG Paths
- SSSVG
- CSS with SVG: Real World Usage
- Introduction to SVGs: A Beginner's Guide to Scalable Vector Graphics
- Easy SVG Customization And Animation: A Practical Guide
CSS Fundamentals
- The CSS Cascade
- CSS Selectors: A Visual Guide
- Practical Uses of CSS Math Functions: calc, clamp, min, max
- Learn Box Alignment
CSS Flex and Grid
- What The Flexbox?
- CSS Grid
- Using CSS Grid the right way
- Ten modern layouts in one line of CSS
- Responsive Layouts, Fewer Media Queries
- Building a Scrapbook Layout with CSS Grid
- Techniques for a Newspaper Layout with CSS Grid and Border Lines Between Elements
- Highlights From Building a Magazine Layout
- CSS Grid Experiments 1
- CSS Grid Experiments 2
Creativity
The following YouTube channel is great for learning how to create creative components with CSS:
while these articles are about CSS animations:
- How to make CSS Animations
- CSS Animation
- Transitioning to Height Auto
- CSS underline overlay animations
- Creative list styling
- The Mad Magazine Fold-In Effect in CSS
- Scroll-driven draw animation
Custom Emails
Custom email development is a tricky task because email clients aren't as good as browsers. If you need to learn this skill, the following are great resources:
References and Examples
A reference is like a glossary. Earlier I have mentioned Almanac of CSS Tricks. Here are other useful ones:
The following give you examples both on good and bad HTML code:
News
- 2025
- 2024
- 2023
Test Yourself
There are web apps that you can use to test yourself solving exercises. For example:
Recap
If you want to learn HTML and CSS:
- Build the foundation of your knowledge using Google guides
- Write code following other developers using YouTube videos
- Develop projects on your own
Then, keep learning using other resources that I have listed finding the ones that work best for you: maybe, you prefer written content over videos or an explanation style over another one.
Before You Go
- if you find this guide helpful, please share it
- if you find this guide very helpful, please donate (only) one dollar to me by PayPal
Top comments (0)