Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll

Introduction to HTML and CSS

Preview

Start a free Courses trial
to watch this video

Sign up for Treehouse

Write the HTML

2:23 with Treasure Porth

Before we link our new page up to our main website, we should give it some content to display! In this lesson, we'll add a random image and some placeholder text to give our Resume some content and structure!

At the top of our Resume page, we want to add a fun image to demonstrate our new HTML skills. We can use the same random image generator used early in the course:

PlaceIMG

Unfortunately, as of June 2023 PlaceIMG has been shut down. Luckily there are a couple of alternatives you can use for your place holder images:

You can copy and paste the code snippet below to follow along with the video to generate a new picture on reload.

src="https://picsum.photos/400/400"

Feel free to customize your new resume.html file with as much information as you want. Experiment with some of the new tags and HTML elements you've learned so far in the course. Don't worry about the styling yet - we'll get to that next!

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

Sign up

    Related Discussions

    Have questions about this video? Start a discussion with the community and Treehouse staff.

    Sign up

    The document is all set up, and 0:00
    we're ready to write the body of our resume page. 0:01
    First we'll add an image. 0:05
    Remember that an image needs two attributes, a source, 0:06
    which is how you tell the browser where to find the image, and 0:12
    an alt attribute for screen readers and accessibility. 0:17
    Let's go back to placeimg.com and grab a placeholder image. 0:20
    I'm going to get a square image that's 200 pixels wide and 0:26
    200 pixels tall so that I can make it round with border radius, and 0:30
    I'm going to choose a picture in the Tech category. 0:34
    So now we can copy the link and paste it into the source attribute. 0:36
    In the alt attribute, 0:44
    I'm going to describe what the image will eventually be. 0:46
    Will be an image of Treasure Porth, Web Developer. 0:49
    Next write an h1 tag with your name and title. 0:55
    And an h2 that says, Summary of Qualifications. 1:06
    The Summary of Qualifications will be an un-ordered list. 1:14
    Remember that an un-ordered list begins with a pair of ul tags. 1:17
    And nested inside of those tags are however many list items that you want. 1:22
    Let's start with three list items. 1:27
    And we'll just make something up to go inside them. 1:36
    Experience as a freelance web developer, 1:41
    Experience with HTML, 1:49
    CSS, and JavaScript. 1:53
    And a Bachelor of Science in Economics. 2:00
    And that's all the HTML we're going to need for this web page. 2:09
    Let's take a look. 2:13
    This is looking okay, but we can certainly make it better with CSS. 2:17
    That's what we'll do in the next video. 2:19

    You need to sign up for Treehouse in order to download course files.

    Sign up

      You need to sign up for Treehouse in order to set up Workspace

      Sign up