Code Your First Website with HTML 5 & CSS 3 for Kids & Beginners

Kevin Kennedy, Product Designer

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
35 Lessons (1h 46m)
    • 1. Learn to code basic websites overview

      0:56
    • 2. Course requirements

      1:24
    • 3. HTML Overview

      1:25
    • 4. Basic HTML Structure

      4:39
    • 5. Nav tags

      0:44
    • 6. H1 to H6 heading tags

      3:33
    • 7. Paragraph tags

      3:15
    • 8. Creating a line break

      2:13
    • 9. Adding a link

      5:08
    • 10. Adding an image

      5:37
    • 11. Creating an image with a link

      2:30
    • 12. Using the div tag

      3:27
    • 13. Creating unordered and ordered lists

      5:19
    • 14. Creating forms

      4:17
    • 15. Creating tables

      4:55
    • 16. Creating comments in HTML

      4:26
    • 17. CSS overview

      0:58
    • 18. CSS syntax

      2:03
    • 19. Background color

      5:15
    • 20. Creating an id

      5:10
    • 21. Creating classes

      2:05
    • 22. Creating a border

      3:11
    • 23. Border radius

      5:01
    • 24. Padding

      5:24
    • 25. Margin

      3:26
    • 26. Font size

      2:05
    • 27. Font weight

      2:21
    • 28. Text transform

      1:38
    • 29. Text color

      1:15
    • 30. Aligning the text

      2:56
    • 31. Font family

      2:20
    • 32. Font style

      1:15
    • 33. CSS comments

      3:43
    • 34. Final project

      0:59
    • 35. Conclusion and next steps

      0:59

Project Description

Goal

The goal of the final project is to create a personal or portfolio website​ that can be used to showcase who you are, or something that you’ve achieved​!

Start by writing out the basic HTML structure. Then be sure to include all of the following:

HTML

  • A website title
  • At least one image
  • A few paragraphs about you or your accomplishment
  • Create at least one link to another website
  • At least one list, table, OR form
  • Create at least 2 HTML comments

CSS

  • Set the background color
  • Change the color of some text
  • Change the size of your most important text
  • Create a border around your photo
  • Make your title (or some important text) all capital letters
  • Change the font to Helvetica
  • Create at least 2 CSS comments

Student Projects

2 comments