1 00:00:00,390 --> 00:00:04,370 Let's get ready to build a personal profile card. 2 00:00:04,370 --> 00:00:08,900 To introduce this project, I've loaded a demo version in the browser. 3 00:00:08,900 --> 00:00:14,290 And it looks like it's found on a website called treehouse-app.com. 4 00:00:14,290 --> 00:00:18,607 I've included my name and a job title as well as a profile picture and 5 00:00:18,607 --> 00:00:21,200 a few bits of descriptive information. 6 00:00:22,200 --> 00:00:26,810 And the word Treehouse is a link taking me to Treehouse's homepage. 7 00:00:28,480 --> 00:00:30,470 But how does this all work? 8 00:00:30,470 --> 00:00:34,270 We know there must be some HTML and CSS here, but how 9 00:00:34,270 --> 00:00:38,586 did this page end up in my browser looking and functioning as it does? 10 00:00:40,081 --> 00:00:45,235 The short answer to that question is whenever you type a web address 11 00:00:45,235 --> 00:00:50,204 into a browser, the browser acts as a client requesting web page 12 00:00:50,204 --> 00:00:55,530 contents like text, images and videos from a web server. 13 00:00:55,530 --> 00:01:00,163 Web servers store and deliver website content as well as the databases 14 00:01:00,163 --> 00:01:05,490 back-end developers create to store long-term information. 15 00:01:05,490 --> 00:01:10,229 So the profile card I've loaded comes from a web server that can be 16 00:01:10,229 --> 00:01:14,034 accessed using the address treehouse-app.com. 17 00:01:15,684 --> 00:01:21,370 Uploading web content to a server can be accomplished in a variety of ways. 18 00:01:21,370 --> 00:01:24,590 But fortunately, we don't have to worry about that just yet. 19 00:01:25,600 --> 00:01:30,431 We'll be creating our profile card using a Treehouse workspace in which 20 00:01:30,431 --> 00:01:35,750 teachers like me provide web files for students like you to follow our lessons. 21 00:01:36,760 --> 00:01:39,208 You can access the starter workspace for 22 00:01:39,208 --> 00:01:42,810 our profile card by pressing the Launch Workspace button. 23 00:01:44,720 --> 00:01:48,328 The first thing that I'd like you to notice is how the files are organized 24 00:01:48,328 --> 00:01:50,440 within my workspace. 25 00:01:50,440 --> 00:01:55,387 I've provided an HTML file called index.html with a bit 26 00:01:55,387 --> 00:02:00,138 of starter code that we'll examine in our next video. 27 00:02:00,138 --> 00:02:04,260 And a CSS file called style.css, which is blank. 28 00:02:05,400 --> 00:02:10,294 There's also a folder named images that contains one photo, 29 00:02:10,294 --> 00:02:15,580 a jpeg of a one time Treehouse mascot named Mike the Frog. 30 00:02:15,580 --> 00:02:19,344 Perhaps you'd like to replace Mike the Frog with an image file 31 00:02:19,344 --> 00:02:20,290 from your computer. 32 00:02:21,320 --> 00:02:26,300 That's doable, but we want to make sure our filename is web safe. 33 00:02:26,300 --> 00:02:30,651 If our file name contains spaces or punctuation other than hyphens, 34 00:02:30,651 --> 00:02:35,840 underscores and periods, our web browser could have trouble understanding it. 35 00:02:37,780 --> 00:02:41,550 I'm searching my computer to find a photo of me. 36 00:02:41,550 --> 00:02:45,903 And I'm seeing that Anwar Montasir profile.jpg has spaces 37 00:02:45,903 --> 00:02:47,705 that I should get rid of. 38 00:02:47,705 --> 00:02:51,887 I'll right-click on the file and choose rename, 39 00:02:51,887 --> 00:02:55,871 and I'll replace those spaces with hyphens. 40 00:03:01,913 --> 00:03:06,210 You might notice I'm also switching to only lowercase letters. 41 00:03:06,210 --> 00:03:11,816 This isn't mandatory, but most developers like to stick with lowercase file names. 42 00:03:14,286 --> 00:03:19,650 Back in my workspace, I'll make sure I have the images folder selected. 43 00:03:19,650 --> 00:03:25,260 I'll then choose File from the top navigation menu and select Upload File. 44 00:03:26,670 --> 00:03:32,333 Now I need to select my renamed profile image from my computer. 45 00:03:34,243 --> 00:03:37,960 And now you'll have two photos to choose from in your images folder. 46 00:03:40,120 --> 00:03:42,808 Clicking the eyeball icon in the upper 47 00:03:42,808 --> 00:03:47,430 right corner of the workspace launches a preview of our web page. 48 00:03:48,690 --> 00:03:53,179 And like my finished demo, you'll see that your page is 49 00:03:53,179 --> 00:03:57,610 found at an address including treehouse-app.com. 50 00:03:57,610 --> 00:04:01,247 Unlike my finished demo, however, your page is empty. 51 00:04:01,247 --> 00:04:04,450 We'll add some content in the next video.