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:
- A Blog Post With Every HTML Element by @patrickweaver
- A Complete Guide to CSS Concepts and Fundamentals by @taniarascia
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 by Madision Kanna
- Learn HTML & CSS – Full Course for Beginners by @perborgen
- CSS Tutorial – Full Course for Beginners by Dave Gray
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 by Dan Cătălin Burzo
- Responsive Images in CSS by Chris Coyer
- Create Responsive Image Effects With CSS Gradients And aspect-ratio by Stephanie Eckles
Forms
- A Guide to HTML & CSS Forms (No Hacks!) by Daniel Schwarz
- How to Build HTML Forms Right series by @austingil
- Form Input Validation Using Only HTML5 and Regex by Monty Shokeen
SVG
- A Friendly Introduction to SVG by Josh Comeau
- An Interactive Guide to SVG Paths by Josh Comeau
- SSSVG
- CSS with SVG: Real World Usage by Craig Buckler
- Introduction to SVGs: A Beginner's Guide to Scalable Vector Graphics by @hunormarton
- Easy SVG Customization And Animation: A Practical Guide by Adrian Bece
CSS Fundamentals
- The CSS Cascade by Amelia Wattenberger
- CSS Selectors: A Visual Guide by Syntax Podcast
- Practical Uses of CSS Math Functions: calc, clamp, min, max by Stephanie Eckles
- Learn Box Alignment by Ahmad Shadeed
CSS Flex and Grid
- What The Flexbox? by @wesbos
- CSS Grid by Wes Bos
- Using CSS Grid the right way by Violet Peña
- Ten modern layouts in one line of CSS by Una Kravets
- Responsive Layouts, Fewer Media Queries by Temani Afif
- Building a Scrapbook Layout with CSS Grid by Michelle Barker
- Techniques for a Newspaper Layout with CSS Grid and Border Lines Between Elements by Marco Troost
- Highlights From Building a Magazine Layout by Ahmad Shadeed
- CSS Grid Experiments by Jules Forrest
- CSS Grid Experiments by Olivia Ng
Creativity
The following YouTube channel is great for learning how to create creative components with CSS:
- Online Tutorials by Muhammad Irshad
while these articles are about CSS animations:
- How to make CSS Animations by Patricia Silva
- CSS Animation by Olivia Ng
- Transitioning to Height Auto by Keith J. Grant
- CSS underline overlay animations by Temani Afif
- Creative list styling by Michelle Barker
- The Mad Magazine Fold-In Effect in CSS by Thomas Park
- Scroll-driven draw animation by Brad Woods
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:
- Why Does Email Development Have to Suck? by Hristiyan Dodov
- My Wonderful HTML Email Workflow by @joshwcomeau
- Good Email Code by Mark Robbins
References and Examples
A reference is like a glossary. Earlier I have mentioned Almanac of CSS Tricks. Here are other useful ones:
- References by HTML Dog
- HTML Reference by Jeremy Thomas
- CSS Reference by Jeremy Thomas
- CSS Reference by Codrops
The following give you examples both on good and bad HTML code:
News
- 2025
- 2024
- The latest in CSS and web UI: I/O 2024 recap by Una Kravets
- 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)