Skip to content
Sabaqاردو

Learn HTML and CSS: Full Course for Beginners (freeCodeCamp)

By freeCodeCamp.org

Course audio
Course audio: English
Level
Beginner
Length
97 lessons · 5.4 hours

What you'll be able to do

  • Structure pages with semantic HTML
  • Style layouts with CSS and flexbox
  • Publish a website for free

About this course

A friendly, project-first HTML and CSS course from freeCodeCamp, taught by Per Borgen of Scrimba and split into its 97 chapters: tags, images and nesting, building a news article and a Google look-alike, proper document structure, your first CSS, margins and centring, Google fonts and colour palettes, flexbox headers, and publishing a site with GitHub Desktop, ending with a solo project, a hometown homepage. About 5.5 hours. The best first course if you want to build websites.

Before you start: None

Syllabus

97 lessons · 5:21:44 in total

  1. 1Introduction1:32
  2. 21: Welcome to the HTML & CSS Course2:40
  3. 32: HTML Tags3:21
  4. 43: Write a news article2:10
  5. 54: The image tag5:00
  6. 65: Nesting2:50
  7. 76: Internet superpowers - Change the BBC news!5:01
  8. 87: Interactive elements - Button2:03
  9. 98: Interactive elements - input tags -- Experiment with input types 100%5:00
  10. 109: Let’s build Google!3:51
  11. 1110: Aside - Anchor tags4:36
  12. 1211: Add an anchor tag to Google.com1:39
  13. 1312: Proper document structure5:46
  14. 1413: Aside: Lists3:58
  15. 1514: Build a personal Website8:48
  16. 1615: Deploy your Personal Website3:15
  17. 1716: HTML Recap1:36
  18. 181: Let’s learn CSS!0:47
  19. 192: Write your first lines of CSS!4:17
  20. 203: Write your first lines of CSS! Solution3:36
  21. 214: Let’s destroy wikipedia - recording1:57
  22. 225: Link to the CSS file2:39
  23. 236: Set the width of the elements2:09
  24. 247: Inline vs block elements2:18
  25. 258: Margin top1:16
  26. 269: Divs rule the world2:05
  27. 2710: CSS classes3:57
  28. 2811: Aside - Learn margins via flags5:57
  29. 2912: Add space between our elements1:08
  30. 3013: Aside - Centering with margins3:27
Show all 97 lessons
  1. 3114: Centering our content1:22
  2. 3215: Aside - padding5:22
  3. 3316: Aside - Border and border-radius5:10
  4. 3417: Aside challenge - style Twitter button5:03
  5. 3518: Fix the input field4:46
  6. 3619: Center the button2:20
  7. 3720: Style the button4:31
  8. 3821: Why we can’t have two block-level buttons4:29
  9. 3922: Aside - Flexbox3:43
  10. 4023: Centering both buttons with flexbox2:55
  11. 4124: Google clone recap2:40
  12. 422: Fix the image path2:56
  13. 433: Add alt attribute4:28
  14. 444: Make image smaller1:16
  15. 455: Add a border and padding3:50
  16. 466: Aside - flexbox child containers3:41
  17. 477: Flex item containers1:40
  18. 488: Add a utility class3:13
  19. 499: Justify the items2:09
  20. 5010: Center the card2:00
  21. 5111: Aside - inheritance4:18
  22. 5212: Center the text via inheritance3:01
  23. 5313: Add colors3:25
  24. 5414: Web-safe fonts5:09
  25. 5515: Aside - margin/padding shorthand4:03
  26. 5616: Use the margin & padding shorhands1:17
  27. 5717: Deploy your Digital Business Card4:50
  28. 5818: Business Card Recap2:38
  29. 592: Add a background image from unsplash4:00
  30. 603: Center elements and Style button3:18
  31. 614: Add a Google font4:22
  32. 625: @font-face2:05
  33. 636: Aside - spans3:58
  34. 647: Add an underline using a span1:50
  35. 658: Use an ID for the logo4:24
  36. 669: Replace the jpg with a webp2:34
  37. 6710: Choose a color palette from an image2:53
  38. 6811: Add the terms & conditions section3:59
  39. 6912: Aside - text shadow6:00
  40. 7013: Improving the readability with text shadows2:00
  41. 7114: Space - Exploration recap1:45
  42. 721: Let’s build a Birthday GIFt site1:11
  43. 732: Add basic header styling3:34
  44. 743: Set the colors1:26
  45. 754: Add shadow on text3:21
  46. 765: We have a problem that flexbox can fix2:36
  47. 776: Aside - align-items6:03
  48. 787: Aside - flex-direction4:29
  49. 798: Turn the header into a flexbox1:44
  50. 809: Fix date and age design4:10
  51. 8110: Create the first gift5:20
  52. 8211: Replace the img with a div4:18
  53. 8312: Aside - make elements change on hover2:54
  54. 8413: Add the hover effect2:09
  55. 8514: Create the next GIFt4:22
  56. 8615: Create two more GIFts2:36
  57. 8716: Create the final GIFt3:23
  58. 8817: Add the footer3:40
  59. 8918: Add a background gradient3:28
  60. 9019: Personalize the Birthday GIFt Site1:39
  61. 9120: Use GitHub Desktop to publish your Birthday GIFt Site5:19
  62. 9221: Deploying your Birthday GIFt Site1:01
  63. 9322: Use VS Code to edit your Birthday GIFt4:51
  64. 9423: GIFt site recap1:53
  65. 951: It’s time to go solo!2:18
  66. 962: Solo Project - Hometown Homepage4:07
  67. 973: Congrats on completing the course!1:50

What to take next

Related courses

Videos by freeCodeCamp.org, played from their official YouTube channel. Subscribe on YouTube

Official upload by the teacher or institution on their own channel, shown with YouTube's embedded player.

Lessons last checked Oct 2026. Course summary and lesson structure by Sabaq.

Part of: Web development from zero

Report a problem or a rights request