1 00:00:00,630 --> 00:00:01,630 Welcome back. 2 00:00:01,630 --> 00:00:04,920 I hope you had fun experimenting with your first webpage and 3 00:00:04,920 --> 00:00:07,120 it's starting to look really good. 4 00:00:07,120 --> 00:00:10,450 In this video, I'm going to go over what HTML and 5 00:00:10,450 --> 00:00:15,120 CSS are, and how they're going to help you code a webpage. 6 00:00:15,120 --> 00:00:19,150 In the following videos, I'm going to walk you through each line of code, 7 00:00:19,150 --> 00:00:19,890 step by step. 8 00:00:21,050 --> 00:00:22,270 As we proceed, 9 00:00:22,270 --> 00:00:26,350 you will hear me throw out a bunch of terms you may have never heard before. 10 00:00:26,350 --> 00:00:29,150 The vocabulary of coding is important to learn over time. 11 00:00:30,360 --> 00:00:33,410 Learning the appropriate terms will help you speak intelligently about 12 00:00:33,410 --> 00:00:37,970 programming to your peers, teachers, your future employers and 13 00:00:37,970 --> 00:00:40,340 help you search with more speed and accuracy on the web. 14 00:00:41,340 --> 00:00:45,000 When you're ready, it will also help you collaborate with other designers and 15 00:00:45,000 --> 00:00:46,220 developers around the world. 16 00:00:47,610 --> 00:00:51,940 If at any time, you're finding that my videos are moving a little too slow or 17 00:00:51,940 --> 00:00:54,810 a little too fast, feel free to speed me up or 18 00:00:54,810 --> 00:00:59,240 to slow me down by using the timer icon in the video console. 19 00:01:00,420 --> 00:01:05,390 If you need some additional help, you can start by looking in the teachers notes, or 20 00:01:05,390 --> 00:01:07,840 checking the forum where either I or 21 00:01:07,840 --> 00:01:10,520 another student at Treehouse will answer your questions. 22 00:01:11,770 --> 00:01:13,720 Before moving on to the code, 23 00:01:13,720 --> 00:01:17,474 [SOUND] let's briefly go over [SOUND] what HTML and CSS are. 24 00:01:17,474 --> 00:01:22,460 HTML and CSS are the basic building block of any website. 25 00:01:22,460 --> 00:01:25,595 To imagine what this looks like, lets say that you're building a house. 26 00:01:25,595 --> 00:01:29,537 [SOUND] If HTML is the carpenter that builds the house, 27 00:01:29,537 --> 00:01:31,825 CSS is the interior designer. 28 00:01:31,825 --> 00:01:32,950 Responsible [BLEEP] for 29 00:01:32,950 --> 00:01:37,605 styling the home, selecting color schemes, window treatments, carpet, and lighting. 30 00:01:37,605 --> 00:01:40,190 [BLEEP] HTML, or 31 00:01:40,190 --> 00:01:45,160 Hyper Text Markup Language, forms the structural foundation of any webpage, 32 00:01:45,160 --> 00:01:50,350 but there are many other languages that fall into the realm of web development. 33 00:01:50,350 --> 00:01:54,000 To build this project, we're also going to be learning some CSS, 34 00:01:54,000 --> 00:01:56,900 or Cascading Style Sheets. 35 00:01:56,900 --> 00:02:01,830 This language will help us modify things like fonts, color, and page layout. 36 00:02:01,830 --> 00:02:06,078 This is great, but I bet you're still [SOUND] wondering what HTML does, and 37 00:02:06,078 --> 00:02:08,044 what it looks like in the browser. 38 00:02:08,044 --> 00:02:12,830 Let's picture you're creating a newspaper, and that you need to organize it. 39 00:02:12,830 --> 00:02:17,340 First you need to put the title of the newspaper in bold letters at the top. 40 00:02:17,340 --> 00:02:21,010 Then you need to add a few sections for different topics. 41 00:02:21,010 --> 00:02:24,448 Each of these sections [SOUND] need a large headline followed by 42 00:02:24,448 --> 00:02:25,911 a few smaller headlines. 43 00:02:25,911 --> 00:02:29,590 Then, we need to add a few paragraphs and photos. 44 00:02:29,590 --> 00:02:32,670 You'll find that building the structure of a web page is very similar. 45 00:02:32,670 --> 00:02:37,640 Now that we know a little more about HTML and 46 00:02:37,640 --> 00:02:43,580 CSS, in the next four videos, you're going to be learning about each line of code. 47 00:02:43,580 --> 00:02:47,200 Feel free to jump back and forth between the videos and the code. 48 00:02:47,200 --> 00:02:51,280 And continue editing the code as you learn about new features. 49 00:02:51,280 --> 00:02:55,330 I've also weaved in a few code challenges and quizzes to assess your understanding. 50 00:02:55,330 --> 00:03:02,070 Do your best, but you can always re watch the videos or retake a quiz at any time. 51 00:03:02,070 --> 00:03:04,450 Just think, if you can make it through this course, 52 00:03:04,450 --> 00:03:06,780 you're gonna be well on your way to becoming a programmer.