CODE A GRATIS GLOBAL SERVICE
⌕ SEARCH GRATIS GLOBAL ↗
FREE GUIDE

Learn HTML & CSS Free

HTML and CSS are the two building blocks of every website, and you can learn both completely free using courses, interactive games, documentation and communities built by the web development world. This guide collects the best free ways to go from your first tag to building real, responsive layouts.

10 SECTIONS · 80 RESOURCES · STATUS: [ ALL LINKS FREE ]
► INSIDE THIS GUIDE 10 SECTIONS
01

Free Online HTML and CSS Courses

13 RESOURCES
Responsive Web Design Certification freecodecamp.org

A free, project based certification covering semantic HTML, forms, accessibility, Flexbox, and CSS Grid, ending in a real exam.

Foundations: Web Development theodinproject.com

The Odin Project's free, project based path that teaches how the web works and builds HTML and CSS fundamentals from scratch.

Intermediate HTML and CSS theodinproject.com

The Odin Project's follow-up course for going beyond basics into more advanced layout and styling techniques.

Learn HTML and CSS (Scrimba) scrimba.com

An interactive free course where you edit the instructor's code directly in the browser while building five real projects.

HTML & CSS Crash Course with Kevin Powell (Scrimba) scrimba.com

A free four hour interactive course that builds your first web pages while explaining core concepts as you go.

Intro to HTML/CSS: Making Webpages (Khan Academy) khanacademy.org

About eight hours of free talk-throughs, coding challenges and projects covering common HTML tags and CSS selectors.

Learn HTML (Codecademy) codecademy.com

A free beginner course covering the HTML basics needed to structure and edit web pages.

Learn CSS (Codecademy) codecademy.com

A free, roughly six hour beginner CSS course that teaches how to visually style plain HTML.

Learn CSS (web.dev) web.dev

Google's free evergreen CSS course covering the box model, cascade, flexbox, grid and more, with interactive demos and self-assessments.

HTML and CSS Tutorial (W3Schools) w3schools.com

A free combined tutorial that teaches HTML markup and CSS styling together with editable, runnable examples in every chapter.

HTML, CSS, and JavaScript for Web Developers (Coursera, Johns Hopkins) coursera.org

A university course you can audit for free to learn the fundamentals of HTML, CSS and JavaScript together.

HTML5 and CSS Fundamentals (edX, W3C) classcentral.com

A W3C authored course on edX that can be audited for free and covers HTML5 and CSS fundamentals from the standards body itself.

W3Cx: CSS Basics (edX) edx.org

A free-to-audit CSS fundamentals course from the World Wide Web Consortium covering styling, selectors and layout basics.

02

Free HTML and CSS Video Lessons and YouTube Channels

11 RESOURCES
Kevin Powell youtube.com

Over a thousand free videos almost entirely focused on CSS, from fundamentals to advanced modern layout techniques.

CSS Fundamentals playlist (Kevin Powell) youtube.com

A structured free playlist that walks through CSS fundamentals from the ground up.

Traversy Media youtube.com

Over a thousand free tutorials and crash courses from Brad Traversy, including foundational HTML and CSS crash courses.

HTML & CSS playlist (Traversy Media) youtube.com

A dedicated free playlist covering HTML and CSS topics step by step from Traversy Media.

freeCodeCamp.org YouTube Channel youtube.com

Free, full length HTML and CSS tutorials and crash courses, including multi-hour beginner to pro walkthroughs.

The Net Ninja youtube.com

Over 2000 free programming tutorials including dedicated CSS, Flexbox, Grid, animations and variables playlists.

CSS Tutorials For Beginners playlist (The Net Ninja) youtube.com

A free beginner focused CSS playlist for people who already know basic HTML and want to start styling pages.

Web Dev Simplified youtube.com

Free, efficient and practical tutorials, including a fast CSS crash course covering syntax, the box model and best practices.

DesignCourse youtube.com

Free tutorials mixing design sense with HTML and CSS coding, taught by a full-stack developer with a strong design eye.

Learn HTML and CSS from the CEO of Scrimba (freeCodeCamp) freecodecamp.org

A free full length HTML and CSS video course taught by Scrimba's founder, hosted on freeCodeCamp's YouTube channel.

Learn CSS in this free 6-hour video course (freeCodeCamp) freecodecamp.org

A free six hour CSS video course covering the language in depth, published through freeCodeCamp's news site and YouTube channel.

03

Free Online HTML and CSS Tutorials

14 RESOURCES
Structuring Content with HTML (MDN) developer.mozilla.org

MDN's free structured tutorial on using HTML to properly structure a webpage's content.

CSS Styling Basics (MDN) developer.mozilla.org

MDN's free walkthrough of core CSS styling concepts, syntax and techniques for beginners.

HTML Dog Guides htmldog.com

Nine free step-by-step and reference tutorials split across beginner, intermediate and advanced HTML and CSS.

Learn to Code HTML & CSS (Shay Howe) learn.shayhowe.com

A free, comprehensive guide covering HTML and CSS fundamentals through all the common elements of front end design.

Learn to Code Advanced HTML & CSS (Shay Howe) learn.shayhowe.com

The free follow-up guide that goes deeper into modern front end development techniques beyond the basics.

Learn CSS! (CSS-Tricks) css-tricks.com

A free 23 chapter series that walks through every CSS fundamental from CSS-Tricks, a long-running web design resource.

A Complete Guide to Flexbox (CSS-Tricks) css-tricks.com

The definitive free reference explaining every Flexbox property with visual demos and browser support notes.

A Complete Guide to CSS Grid (CSS-Tricks) css-tricks.com

The definitive free reference on CSS Grid, covering every property for both the grid container and its items.

CSS Articles (Josh W. Comeau) joshwcomeau.com

A free collection of deeply illustrated articles on stacking contexts, Flexbox, units, subgrid and other CSS topics.

CSS Section (A List Apart) alistapart.com

Free, historically influential articles on CSS design, layout and web standards from a foundational web design publication.

HTML Category (Smashing Magazine) smashingmagazine.com

Free in-depth articles on HTML topics like semantic markup and Web Components from a respected design and dev publication.

CSS Category (Smashing Magazine) smashingmagazine.com

Free articles covering modern CSS techniques, layout and creative use of new CSS features.

CSS Layout Guide (Smashing Magazine) smashingmagazine.com

A free guide collecting Smashing Magazine's best writing on how CSS layout has evolved and how to master it.

Grid by Example (Rachel Andrew) gridbyexample.com

A free collection of short, focused examples and videos demonstrating the CSS Grid specification, from a CSS Working Group member.

04

Free Online HTML and CSS Practice and Interactive Exercises

11 RESOURCES
Flexbox Froggy flexboxfroggy.com

A free game that teaches CSS Flexbox through 24 levels of guiding frogs to their lily pads with real Flexbox code.

Grid Garden cssgridgarden.com

A free game from the same creator as Flexbox Froggy that teaches CSS Grid across 28 levels of growing a carrot garden.

CSS Diner flukeout.github.io

A free game with 26 levels that teaches CSS selectors by having you pick out items from a dinner table.

CSSBattle cssbattle.dev

A free platform with 250+ challenges where you recreate target images using the shortest HTML and CSS possible.

Codewars HTML Collection codewars.com

A free, ranked set of small HTML and CSS coding challenges with community solutions to compare against once solved.

Frontend Mentor frontendmentor.io

120+ real-world coding challenges with design files, many free, for practicing HTML and CSS by building actual interfaces.

100 Days CSS Challenge 100dayscss.com

A free, no-registration challenge series to sharpen CSS skills by building something new every day for 100 days.

CodePen codepen.io

A free online editor and community for building, sharing and exploring HTML, CSS and JavaScript snippets and projects.

JSFiddle jsfiddle.net

A free online code playground for quickly writing, testing and sharing HTML, CSS and JavaScript snippets.

HTML Exercises (W3Schools) w3schools.com

Free short exercises with instant feedback to check your understanding of HTML as you learn it.

CSS Exercises (W3Schools) w3schools.com

Free short exercises with instant feedback to check your understanding of CSS concepts and properties.

05

Free HTML and CSS Books and Documentation

7 RESOURCES
HTML: HyperText Markup Language (MDN) developer.mozilla.org

The authoritative free reference documentation for every HTML element and attribute, maintained collaboratively by the web community.

CSS: Cascading Style Sheets (MDN) developer.mozilla.org

The authoritative free reference documentation for CSS properties, selectors and features, with interactive examples.

MDN Web Docs Tutorials developer.mozilla.org

A free hub of structured tutorials from Mozilla covering web development topics for all skill levels.

Learn to Code Advanced HTML & CSS (free web edition, Shay Howe) learn.shayhowe.com

The free web version of Shay Howe's advanced HTML and CSS book, going deeper into modern front end techniques.

HTML Tutorial (W3Schools) w3schools.com

A free, complete reference-style tutorial covering all HTML tags with runnable examples.

CSS Tutorial (W3Schools) w3schools.com

A free, complete reference-style tutorial covering CSS properties and selectors with runnable examples.

CSS Reference Browser Support (W3Schools) w3schools.com

A free reference showing which browsers support which CSS3 features, useful when deciding what to rely on.

06

Free HTML and CSS IDEs, Editors and Developer Tools

6 RESOURCES
Visual Studio Code code.visualstudio.com

A free, open source code editor for Windows, macOS and Linux with strong built-in support for HTML, CSS and web development extensions.

Firefox Developer Tools firefox-source-docs.mozilla.org

Free browser tools built into Firefox for inspecting, editing and debugging HTML and CSS, including a dedicated CSS Grid inspector.

What Are Browser Developer Tools (MDN) developer.mozilla.org

MDN's free guide explaining how to use the developer tools built into every modern browser to inspect and debug HTML and CSS.

Can I Use caniuse.com

A free tool showing up-to-date browser support tables for HTML, CSS and JavaScript features before you use them.

Specificity Calculator specificity.keegan.st

A free tool that calculates and compares the specificity of CSS selectors, supporting modern Selectors Level 4 syntax.

Google Fonts fonts.google.com

A free, open source library of over 1,400 web fonts you can add to any HTML and CSS project with a simple stylesheet link.

07

Free HTML and CSS Podcasts

3 RESOURCES
Syntax syntax.fm

A free, twice-weekly web development podcast from Wes Bos and Scott Tolinski covering CSS, JavaScript and modern tooling.

ShopTalk Show shoptalkshow.com

A free, long-running podcast about front end web design and development, with over 160 episodes tagged CSS.

The CSS Podcast thecsspodcast.libsyn.com

A free podcast from Google developer advocates breaking down individual CSS features and concepts episode by episode.

08

Free HTML and CSS Cheat Sheets and References

7 RESOURCES
Free Online Interactive HTML Cheat Sheet htmlcheatsheet.com

A free interactive HTML cheat sheet with live examples and a downloadable PDF version.

CSS Almanac (CSS-Tricks) css-tricks.com

A free, alphabetically organized reference of CSS properties, selectors, functions and at-rules with explanations and examples.

CSS Almanac Properties (CSS-Tricks) css-tricks.com

The properties section of the free CSS-Tricks Almanac, covering layout, visual, animation and text properties in detail.

CSS Selector Specificity Calculator (Polypane) polypane.app

A free visual tool for understanding and calculating CSS selector specificity scores.

BEM Methodology (GitHub) github.com

The free official documentation for the BEM naming methodology, covering key concepts, naming conventions and file structure.

Awesome CSS Resources github.com

A free, curated GitHub list of CSS and SCSS frameworks, tools and learning resources.

Awesome CSS Learning github.com

A free, tightly curated GitHub list limited specifically to the best CSS learning resources.

09

Free HTML and CSS Communities and Help

3 RESOURCES
The freeCodeCamp Forum forum.freecodecamp.org

A free, active forum with 250,000-plus members where beginners can ask HTML and CSS questions and get help within hours.

Codewars Discord Server discord.com

A free Discord community with a dedicated beginners channel for getting help with coding challenges and general questions.

HTML Dog htmldog.com

A free, long-standing site offering tutorials, references and articles that doubles as a resource hub and community touchstone for HTML and CSS learners.

10

Free HTML and CSS Project Ideas and Real-World Practice

5 RESOURCES
50 Projects In 50 Days (GitHub, Brad Traversy) github.com

A free collection of 50-plus small HTML, CSS and JavaScript projects you can build one at a time to practice real techniques.

Front-End Challenges (CSS-Tricks) css-tricks.com

A free hub of front end design-to-code challenges where you recreate provided designs using HTML and CSS.

Frontend Mentor Use Cases: Frontend Projects frontendmentor.io

Free real-world project briefs and design files for practicing HTML and CSS by building actual websites and interfaces.

How to Host a Portfolio on GitHub Pages for Free (GeeksforGeeks) geeksforgeeks.org

A free step-by-step guide to building an HTML and CSS portfolio site and publishing it live at no cost with GitHub Pages.

A Beginner's Guide to Web Accessibility: WCAG, Easy Checks and Semantic HTML dev.to

A free practical guide to applying accessibility and semantic HTML principles while building real pages.