Bro Code HTML & CSS Tutorial: study plan and how long it takes
The Bro Code playlist is 37 videos and 4.1 hours long. Here's how long it takes at different paces, a week-by-week schedule built from the real videos, and a planner that turns it into your own daily plan.
37 videos · 4.1 hours · Bro Code
Bro Code's HTML and CSS course covers the essentials in 37 short videos: HTML elements, media, lists, headers and footers, then CSS borders, overflow, backgrounds, pagination, image galleries and animations.
At about four hours it's a fast introduction you can finish in a week.
Who it's for: Beginners who want a quick, no-fluff introduction to HTML and CSS.
How long does it take?
The full playlist is 4.1 hours across 37 videos. Here's roughly how many days that is at different daily watch times and speeds, counting video time only:
| Daily time | At 1x | At 1.5x | At 2x |
|---|---|---|---|
| 30 min a day | 9 days | 6 days | 5 days |
| 1 h a day | 5 days | 3 days | 3 days |
| 2 h a day | 3 days | 2 days | 2 days |
Make your own schedule
The playlist link is already filled in. Press Plan, set how much time you have each day and your speed, and you'll get a day-by-day schedule with a finish date and a calendar file. It reads the live playlist, so new videos are included.
Week-by-week schedule
A sample plan at 30 minutes a day and normal speed, using whole videos so none is split across days. That's 2 weeks in total. For a different pace, start date or speed, use the planner above.
Week 1Videos 1–31 · 3h 5m
Day 1 · 27m
- 1HTML tutorial for beginners 🌎11m
- 2Learn HTML hyperlinks in 4 minutes 👈4m
- 3Learn HTML images in 6 minutes! 🖼️6m
- 4Learn HTML audio in 5 minutes! 🔊5m
Day 2 · 27m
- 5Learn HTML video in 4 minutes! 🎥5m
- 6Learn HTML favicons in 2 minutes! 🗿3m
- 7Learn HTML text formatting in 3 minutes! 💬4m
- 8Learn HTML span & div in 4 minutes! 🏁5m
- 9Learn HTML lists in 6 minutes! 📄7m
- 10Learn HTML tables in 4 minutes! 📊5m
Day 3 · 29m
- 11Learn HTML buttons in 5 minutes! 🔘5m
- 12Learn HTML forms in 10+ minutes! 📝18m
- 13Learn HTML headers & footers in 5 minutes! 🤯6m
Day 4 · 27m
- 14Get started with CSS in 8 minutes! 🎨8m
- 15Learn CSS colors in 4 minutes! 🖌️4m
- 16Learn CSS fonts in 7 minutes! 🔤7m
- 17Learn CSS borders in 4 minutes! 🖼4m
- 18Learn CSS shadows in 3 minutes! 👥3m
Day 5 · 24m
- 19Learn CSS margins in 5 minutes! ↔️5m
- 20Learn CSS float in 4 minutes! 🎈4m
- 21Learn CSS overflow in 3 minutes! 🌊3m
- 22Learn CSS display property in 4 minutes! 🧱4m
- 23Learn CSS height and width in 6 minutes! 📏7m
Day 6 · 28m
- 24Learn CSS positions in 6 minutes! 🎯6m
- 25How to include a CSS background image 🏙️3m
- 26Learn CSS combinators in 4 minutes! ➕5m
- 27Learn CSS pseudo-classes in 7 minutes! ☟8m
- 28Learn CSS pseudo-elements in 5 minutes! ✔6m
Day 7 · 22m
- 29Learn CSS pagination in 8 minutes! 🕮9m
- 30Learn CSS dropdown menus in 6 minutes! 🔻7m
- 31How to create a CSS navigation bar in 6 minutes! 🧭6m
Week 2Videos 32–37 · 58m
Day 8 · 24m
- 32CSS website layout in 9 minutes! 🗺️9m
- 33How to create a CSS image gallery in 5 minutes! 📷6m
- 34Learn CSS icons in 8 minutes! 🐤9m
Day 9 · 19m
- 35Learn CSS flexbox in 10 minutes! 💪10m
- 36Learn CSS transformations in 9 minutes! 🔄9m
Day 10 · 15m
- 37Learn CSS animations in 15 minutes! 🎬15m
Tips for finishing
- Build a small personal page as you go and add each new element or property to it.
- Follow it with a deeper CSS course for Flexbox and Grid layouts.