Programming · Beginner

HTML & CSS

The two languages every web page is made of, in the order that stops CSS feeling like guesswork.

Lessons
32 lessons
Total runtime
37 hours of video
Modules
9 modules
Optional lessons
20 optional
Start course

Free. No account.

About this course

Almost everyone learns CSS twice. The first time is by trial and error — add a property, refresh, see if it moved, undo it if it did not. That works for about a fortnight and then collapses, because the language is not arbitrary and the guessing was never going to scale. This course is the second time, done first.

HTML comes first and comes quickly. It is a small language with a short list of ideas, and an hour with Traversy is genuinely enough to write a real page. The freeCodeCamp course after it is there for people who want the exhaustive version; skipping it costs you nothing you cannot pick up later from a reference.

Then CSS, and here the sequence is doing real work. Layout is taught before decoration, and flexbox and grid each get two teachers rather than one — a short version to see the shape of it, then a longer one that explains why it behaves that way. Both modules are worth the repetition. Layout is the part people guess at for years, and the guessing stops the moment somebody explains what the browser is actually being asked to do.

Responsive design arrives last, which is deliberate. It is much easier to understand once you have layouts that already work, and much more confusing when bolted on as a mysterious extra. About five hours of required video, most of it in fifteen- and twenty-minute pieces, with roughly thirty more available in the optional lessons — animation, accessibility, and a full site built from scratch. Build a page alongside it — reading CSS teaches you very little.

What you'll be able to do

  • Write semantic HTML for a real page rather than a wall of divs
  • Explain the box model, positioning and the cascade well enough to predict what a rule will do
  • Build a layout with flexbox, and know when grid is the better tool
  • Make a page work on a phone without reaching for a framework
  • Read somebody else's stylesheet without being surprised by it

Curriculum

32 lessons · 37 hours

The Markup

2 lessons · 3h 2m

  1. 01CompletedHTML Crash Course For Absolute BeginnersTraversy MediaVideoAn hour, and afterwards you can write a page. HTML is a small language and this covers most of the part you use daily — the rest is a reference lookup when you need it.1h 2m
  2. 02CompletedHTML Full Course - Build a Website TutorialOptionalfreeCodeCamp.orgVideoOptional. The thorough version of the same ground, including forms and tables at length. Take it if you would rather be shown everything than look things up later.2h

Styling

5 lessons · 8h 16m

  1. 03CompletedCSS in 100 SecondsFireshipVideoWhat CSS is for and what a rule is made of, before anything asks you to write one.2m
  2. 04CompletedLearn CSS in 20 MinutesWeb Dev SimplifiedVideoEnough syntax to start styling immediately. Deliberately shallow — its job is to get you writing rules today, so the longer course lands on something you have already touched.20m
  3. 05CompletedCSS Crash Course For Absolute BeginnersTraversy MediaVideoThe proper pass: selectors, the box model, inheritance and specificity. Specificity is the one to slow down for — nearly every mysterious CSS bug is a specificity bug.1h 25m
  4. 06CompletedLearn CSS Position In 9 MinutesWeb Dev SimplifiedVideoFive values that people copy from forum answers for years without knowing which one they need. Nine minutes ends that.9m
  5. 07CompletedCSS Tutorial – Full Course for BeginnersOptionalfreeCodeCamp.orgVideoOptional, and long. A reference course rather than a sitting — useful to have open beside you while building, not to watch end to end.6h 20m

Layout: Flexbox

3 lessons · 1h 5m

  1. 08CompletedLearn Flexbox in 15 MinutesWeb Dev SimplifiedVideoThe shape of flexbox in a quarter of an hour. Most day-to-day layout is flexbox, which makes this the highest-value fifteen minutes in the course.15m
  2. 09CompletedLearn flexbox the easy wayKevin PowellVideoThe same tool explained rather than demonstrated — main axis, cross axis, and why flex-basis is not width. This is the one that makes flexbox stop being trial and error.22m
  3. 10CompletedFlexbox Crash CourseOptionalTraversy MediaVideoOptional third pass, applied to real components. Worth it if the first two left you able to follow along but not to start from a blank file.28m

Layout: Grid

3 lessons · 1h 14m

  1. 11CompletedLearn CSS Grid in 20 MinutesWeb Dev SimplifiedVideoGrid is for two dimensions, flexbox for one. Twenty minutes to see that difference in practice rather than as a slogan.20m
  2. 12CompletedLearn CSS Grid the easy wayKevin PowellVideoTracks, lines and areas, with the fr unit explained properly. Grid has more vocabulary than flexbox, and this is where it gets learned.26m
  3. 13CompletedCSS Grid Layout Crash CourseOptionalTraversy MediaVideoOptional. Grid used to build whole page layouts, which is where it earns its keep over flexbox.28m

Making It Work Everywhere

6 lessons · 3h 56m

  1. 14CompletedLearn how to use CSS Media Queries in less than 5 minutesKevin PowellVideoThe syntax, quickly. It arrives after layout on purpose — a media query is only useful once you have a layout worth changing.5m
  2. 15Completed5 simple tips to making responsive layouts the easy wayKevin PowellVideoThe argument that most responsive work is avoidable if the layout is written flexibly to begin with. Fewer breakpoints, less to maintain.13m
  3. 16CompletedIntroduction To Responsive Web DesignOptionalfreeCodeCamp.orgVideoOptional. A full project built responsively from the start, for when you would rather watch the decisions being made than read the rules.1h 57m
  4. 17CompletedA Practical Guide to Responsive Web DesignOptionalKevin PowellVideoResponsive design taught as a default rather than an adjustment — start with something that works everywhere and add breakpoints only where the layout actually breaks. This reframing saves an enormous amount of media-query wrangling.23m
  5. 18CompletedResponsive Design Made EasyOptionalKevin PowellVideoThe longer version, with modern CSS doing most of the work — clamp, min, max and intrinsic sizing instead of breakpoints. Genuinely changes how much CSS you have to write.43m
  6. 19CompletedMedia Queries and Container QueriesOptionalKevin PowellVideoContainer queries let a component respond to its own space rather than the window's. They are the biggest change to layout since Grid, and this explains when each kind of query is the right one.35m

Beyond the Basics

4 lessons · 1h 25m

  1. 20CompletedCSS Variables - An introduction to CSS custom propertiesKevin PowellVideoWhere a stylesheet stops being a list of rules and starts being a system. Custom properties are also how every theme toggle you have ever used works.13m
  2. 21CompletedThe 6 Most Important CSS Concepts for BeginnersOptionalKevin PowellVideoThe cascade, inheritance, specificity, the box model. Almost everyone learns CSS properties before learning these, which is why CSS feels arbitrary for so long — half an hour that fixes that.29m
  3. 22CompletedCSS Position Deep DiveOptionalKevin PowellVideoAbsolute, relative, fixed and sticky, and the containing blocks that decide what each one is positioned against. The nine-minute lesson above is the summary; this is the reason it works.28m
  4. 23CompletedSmart Design Patterns with Container QueriesOptionalKevin PowellVideoComponents that rearrange themselves depending on where you drop them. This is what modern component-based CSS looks like when it is done well.15m

Motion

3 lessons · 1h 47m

  1. 24CompletedLearn CSS Animations In 20 MinutesOptionalSlaying The DragonVideoTransitions and keyframes, which is the whole of CSS animation. Twenty minutes here removes most of the temptation to reach for a JavaScript library.21m
  2. 25CompletedCSS3 Animation & Transitions Crash CourseOptionalTraversy MediaVideoMore examples and more time on transforms, which is where animation stops being a fade and starts being movement.36m
  3. 26CompletedCSS Animations & Transitions — 20 ExamplesOptionalByteGradVideoTwenty worked examples rather than an explanation. Useful as a pattern library once you know the syntax and need ideas.50m

Accessibility

3 lessons · 2h 32m

  1. 27CompletedThe Only Accessibility Video You Will Ever NeedOptionalWeb Dev SimplifiedVideoSemantic HTML, keyboard navigation, focus states and ARIA — in that order, which is the right one, because most accessibility problems are caused by using a div where a button belonged.38m
  2. 28CompletedHow to Handle Accessibility Like a Senior DevOptionalWeb Dev SimplifiedVideoThe judgement half: which problems matter, how to test with a screen reader, and when ARIA makes things worse rather than better.21m
  3. 29CompletedLearn Accessibility — Full a11y TutorialOptionalfreeCodeCamp.orgVideoThe thorough version, working through the WCAG guidelines with real examples. Reference material for when a specific requirement lands on you.1h 33m

A Whole Site

3 lessons · 13h 15m

  1. 30CompletedBuild a Responsive Website with HTML & CSSOptionalKevin PowellVideoStarts by reading the design and planning the markup, before a line of CSS is written. That first half hour is the part no other tutorial shows you and the part that actually matters.50m
  2. 31CompletedCreate a Clean, Modern NavigationOptionalKevin PowellVideoNavigation is the component everyone builds badly first — this one is responsive, accessible and keyboard-usable, which is three lessons in one.25m
  3. 32Completed19 Web Dev Projects — HTML, CSS, JavaScriptOptionalfreeCodeCamp.orgVideoTwelve hours of small builds. Not a course so much as a supply of practice — dip in whenever you want something to make rather than something to learn.12h

Credits

Every lesson in this course was made by one of these channels. Tubeversity sequenced them; it did not make them. If a course is useful to you, the people below are the ones who earned it.