Introducing our project

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 set up Workspace

Sign up