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

Hello Front-End Web Development (FEWD)

Preview

Start a free Courses trial
to watch this video

Sign up for Treehouse

Introducing our project

4:05 with Anwar Montasir

Let’s get ready to build a personal profile card. To introduce this project, I’ve loaded a demo version in the browser, and it looks like it’s found on a website called treehouse-app.com. I’ve included my name and job title, as well as a profile picture and a few bits of descriptive information. And the word Treehouse is a link taking me to Treehouse’s homepage. But how does this all work? We know there must be some HTML and CSS here, but how did this page end up in my browser looking and functioning as it does?

Further reading

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

    Let's get ready to build a personal profile card. 0:00
    To introduce this project, I've loaded a demo version in the browser. 0:04
    And it looks like it's found on a website called treehouse-app.com. 0:08
    I've included my name and a job title as well as a profile picture and 0:14
    a few bits of descriptive information. 0:18
    And the word Treehouse is a link taking me to Treehouse's homepage. 0:22
    But how does this all work? 0:28
    We know there must be some HTML and CSS here, but how 0:30
    did this page end up in my browser looking and functioning as it does? 0:34
    The short answer to that question is whenever you type a web address 0:40
    into a browser, the browser acts as a client requesting web page 0:45
    contents like text, images and videos from a web server. 0:50
    Web servers store and deliver website content as well as the databases 0:55
    back-end developers create to store long-term information. 1:00
    So the profile card I've loaded comes from a web server that can be 1:05
    accessed using the address treehouse-app.com. 1:10
    Uploading web content to a server can be accomplished in a variety of ways. 1:15
    But fortunately, we don't have to worry about that just yet. 1:21
    We'll be creating our profile card using a Treehouse workspace in which 1:25
    teachers like me provide web files for students like you to follow our lessons. 1:30
    You can access the starter workspace for 1:36
    our profile card by pressing the Launch Workspace button. 1:39
    The first thing that I'd like you to notice is how the files are organized 1:44
    within my workspace. 1:48
    I've provided an HTML file called index.html with a bit 1:50
    of starter code that we'll examine in our next video. 1:55
    And a CSS file called style.css, which is blank. 2:00
    There's also a folder named images that contains one photo, 2:05
    a jpeg of a one time Treehouse mascot named Mike the Frog. 2:10
    Perhaps you'd like to replace Mike the Frog with an image file 2:15
    from your computer. 2:19
    That's doable, but we want to make sure our filename is web safe. 2:21
    If our file name contains spaces or punctuation other than hyphens, 2:26
    underscores and periods, our web browser could have trouble understanding it. 2:30
    I'm searching my computer to find a photo of me. 2:37
    And I'm seeing that Anwar Montasir profile.jpg has spaces 2:41
    that I should get rid of. 2:45
    I'll right-click on the file and choose rename, 2:47
    and I'll replace those spaces with hyphens. 2:51
    You might notice I'm also switching to only lowercase letters. 3:01
    This isn't mandatory, but most developers like to stick with lowercase file names. 3:06
    Back in my workspace, I'll make sure I have the images folder selected. 3:14
    I'll then choose File from the top navigation menu and select Upload File. 3:19
    Now I need to select my renamed profile image from my computer. 3:26
    And now you'll have two photos to choose from in your images folder. 3:34
    Clicking the eyeball icon in the upper 3:40
    right corner of the workspace launches a preview of our web page. 3:42
    And like my finished demo, you'll see that your page is 3:48
    found at an address including treehouse-app.com. 3:53
    Unlike my finished demo, however, your page is empty. 3:57
    We'll add some content in the next video. 4:01

    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