1 00:00:08,661 --> 00:00:13,590 Hi, I'm Colleen Van Lent and I'm happy to welcome you to Introduction to HTML5. 2 00:00:15,175 --> 00:00:18,825 I am very excited to teach this course because I love the idea that we 3 00:00:18,825 --> 00:00:22,915 finally will have some course that really will explain the basics to as many people 4 00:00:22,915 --> 00:00:24,195 as possible. 5 00:00:24,195 --> 00:00:26,965 I love working with people and I love working with technology and 6 00:00:26,965 --> 00:00:30,870 I think the best thing we can do is have as many people involved as possible 7 00:00:30,870 --> 00:00:34,900 to really make sure that we're building things that everyone can use. 8 00:00:34,900 --> 00:00:37,370 In this course, we will be covering the basics. 9 00:00:37,370 --> 00:00:40,100 I really can't emphasize enough that we will be starting 10 00:00:40,100 --> 00:00:42,340 at the very basic building blocks. 11 00:00:42,340 --> 00:00:46,160 We'll start off talking about what's called syntax and semantics. 12 00:00:46,160 --> 00:00:50,195 What are the actual codes that people write In order to make a webpage 13 00:00:50,195 --> 00:00:51,330 a webpage? 14 00:00:51,330 --> 00:00:54,950 Are there any special meanings behind any of these words that can convey special 15 00:00:54,950 --> 00:00:59,820 information to those who may not be able to access the web the same way I do? 16 00:00:59,820 --> 00:01:03,080 Perhaps, someone who uses special accessibility tools. 17 00:01:03,080 --> 00:01:05,260 After we cover the syntax and semantics, 18 00:01:05,260 --> 00:01:08,980 we're going to talk more about the accessibility idea that I just eluded to. 19 00:01:08,980 --> 00:01:13,430 This idea that if we're going to build a webpage, what do we need to do 20 00:01:13,430 --> 00:01:16,900 to make sure the most people as possible can access the information? 21 00:01:18,830 --> 00:01:21,950 We're also going to be talking about getting started in technology and 22 00:01:21,950 --> 00:01:22,850 writing code. 23 00:01:22,850 --> 00:01:26,060 When I mean talking about getting started I mean really talking about 24 00:01:26,060 --> 00:01:28,760 getting started, right down to you and 25 00:01:28,760 --> 00:01:31,490 I are gonna walk through together on how we're going to create a file. 26 00:01:31,490 --> 00:01:35,140 One of the things I think that really trips people up when their starting to 27 00:01:35,140 --> 00:01:39,440 learn computer science or any type of technology based criteria, or curriculum, 28 00:01:39,440 --> 00:01:43,610 is that professors or instructors say let's get started, here's your homework. 29 00:01:43,610 --> 00:01:44,970 Go ahead and do it and 30 00:01:44,970 --> 00:01:48,280 everyone just kind of stops cuz they're not sure where to get started. 31 00:01:48,280 --> 00:01:49,370 I really want to be there for 32 00:01:49,370 --> 00:01:51,760 you to show you how to get started and get off on the right foot. 33 00:01:52,940 --> 00:01:55,050 Let's talk about what we'll cover in this course. 34 00:01:55,050 --> 00:01:57,330 In Week One the focus is on questions. 35 00:01:57,330 --> 00:01:59,880 It's not on coding, it's on questions. 36 00:01:59,880 --> 00:02:04,840 I want you to understand what happens when you type something into the URL. 37 00:02:04,840 --> 00:02:09,210 If you type in www.introwebdesign.com, 38 00:02:09,210 --> 00:02:12,340 how is this page magically appearing in front of your browser? 39 00:02:13,710 --> 00:02:17,480 I also want to talk to you about what types of tools you are going to need 40 00:02:17,480 --> 00:02:18,150 in order to code. 41 00:02:18,150 --> 00:02:21,090 We're gonna talk about editors and browsers and 42 00:02:21,090 --> 00:02:24,210 other different software tools because I want you to know right from the start 43 00:02:24,210 --> 00:02:26,230 what you're going to need in order to succeed in this class. 44 00:02:27,380 --> 00:02:29,760 Finally, we're really going to talk about HTML5. 45 00:02:29,760 --> 00:02:31,620 What happened to HTML1? 46 00:02:31,620 --> 00:02:33,550 What happened to HTML2? 47 00:02:33,550 --> 00:02:38,240 What is this evolution of what's going on with web design and the languages we use? 48 00:02:38,240 --> 00:02:40,920 In Week One, again, almost no coding. 49 00:02:40,920 --> 00:02:43,930 Really, just giving you an idea of how the web works and 50 00:02:43,930 --> 00:02:47,030 why it's important for you to be able to interact with people and 51 00:02:47,030 --> 00:02:50,660 with code that's being used to create your sites. 52 00:02:50,660 --> 00:02:54,370 Week Two, we're gonna talk a little bit of theory, and then, unfortunately for 53 00:02:54,370 --> 00:02:56,990 some people, a lot of code. 54 00:02:56,990 --> 00:02:59,750 There's this idea of something called the Document Object Model, 55 00:02:59,750 --> 00:03:02,160 upon which all webpages are built. 56 00:03:02,160 --> 00:03:06,220 If I can get you to understand just a little bit about that, then later on, 57 00:03:06,220 --> 00:03:10,110 if you decide to go off and use WordPress or some other software to make your own 58 00:03:10,110 --> 00:03:14,310 website, you're gonna be able to really understand what's going on so much better. 59 00:03:14,310 --> 00:03:18,850 We're gonna talk about things called contextual tags and headings and 60 00:03:18,850 --> 00:03:21,810 different things we can use to make our site have different meanings and 61 00:03:21,810 --> 00:03:22,470 different appearances. 62 00:03:22,470 --> 00:03:27,960 We're going to talk about links, images, lists, tables, 63 00:03:27,960 --> 00:03:31,890 and also multimedia in case you would like to add any video or audio to your site. 64 00:03:33,440 --> 00:03:36,210 Week Three, we're really going to put it all together. 65 00:03:36,210 --> 00:03:40,390 At this point, you should know just enough about HTML5 where you'll be dangerous. 66 00:03:40,390 --> 00:03:44,610 Where you can create something that works but doesn't work all the time. 67 00:03:44,610 --> 00:03:47,190 In Week Three, we're gonna put it together, and I'm gonna talk to you about 68 00:03:47,190 --> 00:03:51,200 some of the things that are often overlooked, such as validating your code. 69 00:03:51,200 --> 00:03:54,690 How can we make sure that the code that you wrote doesn't just look good, 70 00:03:54,690 --> 00:03:56,260 it's syntactically correct? 71 00:03:56,260 --> 00:03:57,640 It's going to work everywhere. 72 00:03:59,130 --> 00:04:01,800 Again, when we validate your code, we'll talk about the syntax but 73 00:04:01,800 --> 00:04:04,980 we'll also talk about accessibility, which is hey, 74 00:04:04,980 --> 00:04:07,570 we validated your code to make sure the rules are there. 75 00:04:07,570 --> 00:04:11,470 Let's also validate and make sure that the meaning is there, as well. 76 00:04:11,470 --> 00:04:14,860 Finally, we'll talk about what's called domain name registration and 77 00:04:14,860 --> 00:04:18,550 web hosting because it's a lot more fun to make websites if you can actually put it 78 00:04:18,550 --> 00:04:21,360 out there on the internet and let your friends and family see it, as well. 79 00:04:22,830 --> 00:04:26,350 Finally, we'll work on a final project where you'll put together a lot of 80 00:04:26,350 --> 00:04:28,000 different things that you've been learning. 81 00:04:28,000 --> 00:04:32,610 You are going to create what we call, syntactically valid multipage website. 82 00:04:32,610 --> 00:04:35,990 Your site will have at least two to three pages. 83 00:04:35,990 --> 00:04:39,450 After you've done your coding, you'll run it through to make sure it validates and 84 00:04:39,450 --> 00:04:41,210 it's very accessible. 85 00:04:41,210 --> 00:04:46,560 Your final project is actually going to be something that's a little bit ugly, 86 00:04:46,560 --> 00:04:49,930 I'm gonna admit to right now because we're not going to be talking about styling, 87 00:04:49,930 --> 00:04:51,530 we're not talking about different things. 88 00:04:51,530 --> 00:04:54,940 I really just want you to understand the HTML5 language and 89 00:04:54,940 --> 00:04:56,660 that's all about content. 90 00:04:56,660 --> 00:04:57,680 Let's talk logistics. 91 00:04:57,680 --> 00:04:59,600 Let's talk about who this class is for. 92 00:04:59,600 --> 00:05:03,590 Who am I aiming for for my star student? 93 00:05:03,590 --> 00:05:06,509 I'm really looking forward to teaching the complete beginner. 94 00:05:07,730 --> 00:05:11,490 This class is not for those people who were building a computer down in their 95 00:05:11,490 --> 00:05:13,100 basement when they were 12 years old. 96 00:05:13,100 --> 00:05:15,670 You are very welcome to hang out with us but 97 00:05:15,670 --> 00:05:22,090 we are really here to talk about how we, through persistence, can create a website. 98 00:05:22,090 --> 00:05:25,730 One of the things that I'm kind of anti about is the word passion. 99 00:05:25,730 --> 00:05:28,690 Now, I'm passionate about teaching you this material but 100 00:05:28,690 --> 00:05:31,900 I don't really feel like you need to be passionate about technology or 101 00:05:31,900 --> 00:05:35,300 passionate about computing to really get a lot out of this class. 102 00:05:35,300 --> 00:05:37,450 Instead, it's about persistence. 103 00:05:37,450 --> 00:05:40,640 I'd like you to just hang in there and learn enough that you can go off and 104 00:05:40,640 --> 00:05:42,550 really help people build better technology. 105 00:05:43,830 --> 00:05:47,880 A little bit about of who I am, I have a PhD in computer science which is 106 00:05:47,880 --> 00:05:52,690 really the least important part of my qualifications to teach this class. 107 00:05:52,690 --> 00:05:55,600 Instead, I have two decades of teaching experience and 108 00:05:55,600 --> 00:05:57,970 I've taught a wide range of different students. 109 00:05:57,970 --> 00:06:03,150 My emphasis is always been on education and I'm somewhat famous for 110 00:06:03,150 --> 00:06:06,280 running around the classroom helping people debug their code, 111 00:06:06,280 --> 00:06:09,480 finding out what's going on here, finding out what's going on there. 112 00:06:09,480 --> 00:06:11,860 This whole idea of teaching this class is 113 00:06:11,860 --> 00:06:14,940 novel to me because I am sitting here not moving. 114 00:06:14,940 --> 00:06:19,000 The important part is that I really do care about people succeeding and so 115 00:06:19,000 --> 00:06:22,680 I am hoping that I can help you take your skills to the next level. 116 00:06:22,680 --> 00:06:24,020 Here is that what everyone wants to know. 117 00:06:24,020 --> 00:06:27,730 In this class, what kind of workload will there be and how will you be evaluated? 118 00:06:27,730 --> 00:06:30,380 There are going to be weekly videos. 119 00:06:30,380 --> 00:06:32,600 Some of them are like this, a lecture format. 120 00:06:32,600 --> 00:06:34,950 You should really feel free to watch them anywhere but 121 00:06:34,950 --> 00:06:38,550 I also like to include some videos that are going to be much more demo format. 122 00:06:38,550 --> 00:06:42,600 By that, I mean you really want to watch the video with a computer next to you, so 123 00:06:42,600 --> 00:06:45,530 you can type along and test it out and try it. 124 00:06:45,530 --> 00:06:47,440 There will be weekly readings. 125 00:06:47,440 --> 00:06:50,370 Most of them will be from a free online textbook but 126 00:06:50,370 --> 00:06:53,470 there may be some other online articles I include as well, if I 127 00:06:53,470 --> 00:06:56,950 happen to come across something that's very timely for what we've been learning. 128 00:06:56,950 --> 00:07:00,610 There will be weekly assessments, typically, in the form of quizzes. 129 00:07:00,610 --> 00:07:05,490 There will be that final project and I put in here warning, it will be ugly. 130 00:07:05,490 --> 00:07:08,270 I don't mean that the process will be ugly. 131 00:07:08,270 --> 00:07:09,810 I think you'll find it very straightforward. 132 00:07:09,810 --> 00:07:12,870 It's just again, I can't emphasize enough that 133 00:07:12,870 --> 00:07:17,410 this class is about the language HTML5, it's not about creating beautiful sites. 134 00:07:17,410 --> 00:07:21,690 It's about you really learning just the building blocks and it's always so 135 00:07:21,690 --> 00:07:25,240 much easier to build something ugly the first time than build something beautiful. 136 00:07:26,690 --> 00:07:29,110 How will you succeed in this class? 137 00:07:29,110 --> 00:07:32,650 In a perfect world, you would be coding with two or three other people and 138 00:07:32,650 --> 00:07:35,280 you'd be talking and you'll never be coding alone. 139 00:07:35,280 --> 00:07:39,560 I'm hoping that you'll create a community, probably through the message boards. 140 00:07:39,560 --> 00:07:41,140 I need you to work smart. 141 00:07:41,140 --> 00:07:44,300 One of the things that kills me is when people say I spent three or 142 00:07:44,300 --> 00:07:46,000 four hours working on this. 143 00:07:46,000 --> 00:07:48,350 I never want to hear that from a student. 144 00:07:48,350 --> 00:07:52,060 Instead, I feel that if you've ever run into a problem when you're coding, 145 00:07:52,060 --> 00:07:56,440 you should stop after 10, 15, 20 minutes max and go walk away. 146 00:07:56,440 --> 00:07:59,690 Go get help from someone, take a break, think about something else. 147 00:07:59,690 --> 00:08:02,230 It's all about working smart, not necessarily hard. 148 00:08:03,860 --> 00:08:06,990 Next, you really need to learn to look things up on your own. 149 00:08:06,990 --> 00:08:11,020 There is no way I can teach you everything you need to know about HTML5, 150 00:08:11,020 --> 00:08:14,190 and you wouldn't want me to, it would be very boring. 151 00:08:14,190 --> 00:08:16,880 Instead, you need to feel the confidence to go out and 152 00:08:16,880 --> 00:08:20,810 use search engines to look up the topics that you're interested in. 153 00:08:20,810 --> 00:08:23,920 My job is to give you those key words and key ideas so 154 00:08:23,920 --> 00:08:25,730 you know what it is you want to search for. 155 00:08:27,050 --> 00:08:30,420 Finally, you really need to practice, practice, practice. 156 00:08:30,420 --> 00:08:34,520 You will not succeed in this course unless you've written the code yourself and 157 00:08:34,520 --> 00:08:38,120 really tried to muster your way through some of the mistakes and 158 00:08:38,120 --> 00:08:39,220 typos that you're going to have. 159 00:08:40,970 --> 00:08:42,160 Let's just review. 160 00:08:42,160 --> 00:08:45,590 Once again, this class is for beginners, and I'm excited to have you join us. 161 00:08:46,930 --> 00:08:50,080 When you're done with this class, you will have the ability to write and 162 00:08:50,080 --> 00:08:51,780 understand HTML5 code. 163 00:08:51,780 --> 00:08:53,860 You're not leaving as a developer but 164 00:08:53,860 --> 00:08:56,120 you are going to leave as someone who understands code. 165 00:08:57,220 --> 00:09:00,610 Finally, one of the key things that I'm gonna stress throughout this whole course, 166 00:09:00,610 --> 00:09:04,590 is that you will understand the importance of accessibility in technology. 167 00:09:04,590 --> 00:09:08,850 If when this course was done, I had even one student who said, hey you know what, 168 00:09:08,850 --> 00:09:12,950 I'm gonna go on and I might not be a coder but I am gonna go work with somebody else 169 00:09:12,950 --> 00:09:16,980 to help make their code more accessible, I would be thrilled with that. 170 00:09:16,980 --> 00:09:18,340 Welcome to the course and 171 00:09:18,340 --> 00:09:23,129 I hope you have a lot of fun as you learn more about HTML5.