Hello, everybody. Welcome to Introduction to CSS3. In the next four weeks, we're gonna learn how to take plain simple HTML5 code and turn it into something really beautiful. So what will be doing over the next four weeks? Well, the main focus will be on learning about cascading style sheets. We're gonna talk about why they are a better way to style than what people used to use in the early 2000's and late 1990's. Next you're going to learn the syntax. Once you know that it's a better way to use it, how can we make sure that you're writing really good code? Once you've figured out the syntax, we'll go on and we'll also talk about development tools. When you do web design, it's very rare that you just sit there and you code, and you don't look to the left, or look to the right, or go look on the web. Instead, you're going to be using other tools to see how you can change your code without actually having to write the code beforehand. Finally, as always, we'll be talking about accessibility issues. It's always fun to add colors and animations and cool things to our page. When we do that, we want to make sure that we don't do it at the cost of accessibility. We wanna make sure everyone can see everything on our page. So let's talk about what we're going to do on each of the four weeks. In week one, the focus is really on just getting you started, getting your feet wet and getting you a little bit of confidence in knowing that you can do this. We're gonna start by talking about the three common methods for styling code. And once we cover them, we're gonna talk about how these methods interact, which ones are better in different situations. And different things that you can feel confident knowing how you can best style your page in any specific situation. Next we'll talk about the basic styling of fonts. By the end of week one, I really want you to be able to take a web page and change something really obvious. Can you change the text so that it's cursive, or underline, or a different color? Finally, we'll very briefly talk about placing elements on the page. This is going to be an important element of our entire four weeks. Is trying to figure out how you can put your header over here or an image over there. And it can be tricky but that's okay. Because we're gonna repeat it week after week. In week two, I'll talk about something called the box model. This is a very common concept for any web developer, because we talk about how every element on your page is actually a box. Next, we'll talk about styling links and lists. We all love the links in our page. The web is the web because we have links, so how can we make them look really cool? Next, we'll talk about advanced selectors. In the beginning of the course, we'll be very careful about styling simple elements such as styling a list or styling a paragraph or styling a header. Next, we're gonna wanna talk about what if we only want to style some of the links, not all of the links? Finally we'll talk about browser capabilities. Just like when you learned about HTML5, you learned that some browsers support some tags while others don't. In the same way, browsers treat CSS differently. And I want you to know how to best react to that. In week three, we talk about pseudo classes and elements. These are kinda this cool idea of how we can make different things happen when we hover over a page. It also talks about how we can style just certain things like the last paragraph in the page or the first paragraph. We'll also talk about transitions. This is a way of changing the look of one of the elements on your page, which is very similar to the idea of transforms. Transforms are how we can rotate things on the page, skew them, making them bigger and smaller, and doing different things like that. Finally, again we'll talk about positioning, how we can make things go in a certain spot and stay there all the time. We've all seen really annoying pop-up menus and different pop-up ads. Now you can make your own annoying pop-up ad. In week four, we're not really gonna cover new material. Instead it's going to be samples, samples, and more examples and samples. In particular, I wanna show you different ways that we can style a table and different ways for styling a navigation menu. The bulk of week four will really be spent working on your final project. So I want you to know right off who this class is for and if you're ready and are interested in taking it. First of all, you don't wanna take this class unless you know about HTML5 already. You may be taking a course on it. You may be just going online and reading about it, but you need to feel comfortable if I mention things such as tags or elements or validation. Next, this class is for people who have persistence. You will never code your pages the right way the first time. Even the second time, sometimes the third, fourth, and fifth time. It's really about enjoying the whole process of really wanting to get something to work and feeling little victories when it does happen. Finally, this class is for those who are willing to do more than what I'm going to to do in these lectures. There's only so much information I can give to you. It's up to you to practice it, tweak it, change it, and try to really see what happens beyond what I'm showing you. So if you wanna know a little bit more about me and why I'm choosing to teach this class, here's a little bit of background information. I have a PhD in Computer Science. But to be honest, that's really the least important part. What I really have is two decades of teaching experience. And during this time, I've taught a wide range of students and a wide range of topics. And I found that I really enjoy explaining things in different ways, and I really enjoy reaching out to students who maybe have more questions. My emphasis on education has always been running around the classroom, helping students debug, meeting with them one on one. The workload for this course will be pretty straightforward. Every week there'll be a very short quiz, typically multiple choice questions. More importantly, you're going to have weekly peer-graded assignments. Because I can talk all I want about CSS3, but until you start typing things in and playing with it, there's not really any other way to learn it. So every week, every student will have the same HTML. You'll create your own unique look for it. The final peer-graded assignment, the one in week four. It'll be fairly substantial in order for you to create something that you can really be proud of and that'll have your own unique stamp to it. So let's talk about how you can succeed in this course. In a perfect world, you get together with friends, you'd code together, you'd learn from each others' mistakes, and you'd also learn from each others' successes. So while we don't have that one on one experience, make sure you use the message boards. Not only to ask questions but to see what other questions people are putting. You can learn a lot that way. I really can't stress enough that I don't want you to feel like I'm trying to trick you, or that I'm giving some sort of gotcha problems. If you're ever working on something and you're stuck on it for more than 15 minutes, move on. This is CSS, it's styling. There's always something you can change, and you can find something else that you prefer to work on. Make sure that you're looking things up on your own. There's no way I'll be able to teach you everything you need to know. And, that's why you can go on the Internet and look at different resources, and see if there's something out there that you would like to recreate. Finally, it's really important that you practice this as much as you can. If you do the minimum required for this course, and you're happy with that, that's great. I'm glad that you're able to learn something. But if you really want to be a web developer, it's so important that you're enjoying what you're doing, and you're going off on your own, and you're creating something beautiful whenever you can. So I welcome you to the class, and I can't wait for you to join us as we learn more about cascading style sheets. Thanks.
