Introduction to HTML: Build a Portfolio Website Premium class

Jenn Lukas, Front-end Developer and Consultant

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

      1:07
    • Welcome to Class!

      1:03
    • Defining our Project Content

      7:38
    • Gather our Tools

      6:01
    • What is HTML?

      6:37
    • HTML Tags and Common Elements

      4:06
    • HTML Attributes

      3:15
    • HTML Page Structure

      6:53
    • Head Element

      8:24
    • Body Element

      2:18
    • Creating and Previewing Our First Page

      9:01
    • Convert our Content into HTML Markup

      3:54
    • Heading Elements (H1-H6)

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

      11:14
    • List Elements

      6:10
    • Links

      2:53
    • Blockquote

      1:43
    • Inline Elements

      4:29
    • HTML Entities

      2:07
    • Code Formatting

      4:44
    • Marking up our Homepage

      14:50
    • Identify Remaining Content Types as HTML Elements

      20:43
    • Link Separate Pages Together

      6:40
    • Troubleshooting

      6:33
    • Uploading Content to a Web Server

      3:07
    • Next Steps

      2:38

About This Class

Learning how to code is all the rage and rightfully so. Everyone from Mayor Bloomberg to Snoop Dogg is ready to get their nerd on. The first step to getting your website up and running is learning HTML. 

b7deaec0

There's no shortage of reasons to start learning HTML. Here are just a few:

  • Hiring a developer or work with one already? Learn some of the lingo and what goes into creating a website so you can better communicate with them.
  • Are you a web designer? Find out what goes into making your designs come to life in a browser.
  • Are you already using a framework or CMS to publish your content or blog? Learning HTML will give you the power to tweak your code and layouts.
  • Building a site from scratch is fun and empowering!

I freaking love HTML! We'll skip a lot of computer history and get right into how to translate content into code. The more people with this knowledge, the more great content can be shared on the web. Whether your current or future site is your portfolio, a great new blog, or pictures of your pets, I can't wait to share this class with you so you can start sharing your content, too! 

c8c0d387

What You'll  Learn

  • Project Introduction and Setup. We'll start off with the basics such as creating a site map and opening your first HTML document.
  • HTML Fundamentals. You'll use essential HTML tags to structure your page, add metadata, and add body elements.
  • Marking Up Our Content. You'll use more advanced mark ups to attach different values to your content.
  • Connecting Our Pages. You'll link through all of your pages to create a fully navigable site.
  • Finishing Touches. Finally, you'll learn troubleshooting tips to ensure that your site runs smoothly. 

147ec17c

What You'll Make

We'll create the HTML for four page portfolio website featuring some of the most common aspects to an online portfolio that can be used for a plethora of different subject matters and professions. We'll break down what content is needed on each page and how that is translated into our HTML code. 

This site will be HTML-only, which means text only without any pretty colors or styling. HTML provides the building blocks for the rest of the web process. A strong foundation, like the one we'll create in this class, will be used for all future phases of the portfolio website. After this, the next steps are adding design and style with Cascading Style Sheets (CSS) to add more pizzazz and personality to your site. First things first though, and that's what we'll look at here and have some fun while doing so! There may or may not be pictures of cats involved. 

199 of 201 students recommendSee All

Its really nice to learn many new things. over all this was a pretty interesting class. Thank you MAM
Gurmeet S.

Action is the foundational key of success

This class is a great way to cover the basics of HTML. I first came feeling a little intimidated, but the project was given in small, manageable chunks that let you have fun learning along the way. I feel very confident continuing to learn front end development because of this instructor's approach. Highly recommended!
Eric Venturoso

"Merit Copywriting: We Win With Words"

awesome

5,969

Students

25

Projects

Jenn Lukas

Front-end Developer and Consultant

9033399c

I'm a multi-talented front-end consultant and freelancer developer in Philadelphia and the founder of Ladies in Tech. I write for The Nerdary, am a columnist for .net magazine, and have contributed to The Pastry Box Project. I have spoken at a variety of conferences including SXSW, An Event Apart, and CSS Dev Conference.

My past experiences range from creating Navy training simulations to leading the front-end team at Happy Cog as Interactive Development Director. I was named one of Mashable’s 15 Developer/Hacker Women to Follow on Twitter, and you can find me on Twitter posting development and cat-related news. When I'm not crafting sites with the finest of web standards, I teach HTML and CSS for GirlDevelopIt and  co-host the Ladies in Tech Podcast