Introduction to HTML: Build a Portfolio Website | Jenn Lukas | Skillshare

Introduction to HTML: Build a Portfolio Website

Jenn Lukas, Front-end Developer and Consultant

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
26 Lessons (2h 37m)
    • 1. Trailer

      1:07
    • 2. Welcome to Class!

      1:03
    • 3. Defining our Project Content

      7:38
    • 4. Gather our Tools

      6:01
    • 5. What is HTML?

      6:37
    • 6. HTML Tags and Common Elements

      4:06
    • 7. HTML Attributes

      3:15
    • 8. HTML Page Structure

      6:53
    • 9. Head Element

      8:24
    • 10. Body Element

      2:18
    • 11. Creating and Previewing Our First Page

      9:01
    • 12. Convert our Content into HTML Markup

      3:54
    • 13. Heading Elements (H1-H6)

      8:56
    • 14. The Image Tag and Absolute/Relative File Paths

      11:14
    • 15. List Elements

      6:10
    • 16. Links

      2:53
    • 17. Blockquote

      1:43
    • 18. Inline Elements

      4:29
    • 19. HTML Entities

      2:07
    • 20. Code Formatting

      4:44
    • 21. Marking up our Homepage

      14:50
    • 22. Identify Remaining Content Types as HTML Elements

      20:43
    • 23. Link Separate Pages Together

      6:40
    • 24. Troubleshooting

      6:33
    • 25. Uploading Content to a Web Server

      3:07
    • 26. Next Steps

      2:38
39 students are watching this class

Project Description

Create a semantic HTML-only portfolio site.

ASSIGNMENT

Your assignment is to create a semantic HTML-only portfolio site.

Why? If you're a small business owner, learning HTML will help you better communicate with developers you've hired. If you're a web designer, learning HTML will help you better understand how your designers come to life. If you're a blogger or marketer already using a framework or CMS to publish content, learning HTML will give you the power to tweak your code and layouts. Most of all, building a site from scratch is fun and empowering.

I've provided the lessons, files, and resources to make this project fun, organized, and easy for you. So, get coding, share your work with the class, and let's learn!

DELIVERABLE

Create a semantic HTML-only portfolio site, and share your progress in the online class project gallery to exchange feedback with other students. Your site should be 4 pages, as demonstrated in the lessons. A completed project in the gallery may include:

  • site map
  • content outline/notes
  • project assets: words, images, videos, etc.
  • screenshots of HTML sturcture, including metadata
  • screenshots of HTML browser preview
  • screenshots of final valid, functional, HTML-only website

RESOURCES

  • Explore step-by-step resources, samples, and more below.

Once you've completed this assignment, you'll be ready for my next Skillshare class! Introduction to CSS: Add Fundamental Styles to a Portfolio Website

Student Projects