Course Introduction

Quick reference

• 00:05 Welcome to Intro to CSS for Web Development.
• 00:07 My name is John Elder and I'll be your instructor today.
• 00:09 In this course I'm gonna teach you everything you need to know to start using
• 00:12 CSS for web development.
• 00:14 CSS is a core fundamental part of front end web development.
• 00:18 Together with HTML and JavaScript,
• 00:19 those three things really make up what we think of today as front end development.
• 00:24 It's basically essential to build any website.
• 00:26 In fact, you can go to any website in the world and right click on it and
• 00:31 click view page source and then scroll down.
• 00:34 And you can see right here, we have the CSS that is used to make this webpage and
• 00:39 if you look here it's often jumbled together like this and
• 00:42 hard to see for different reasons, mostly to speed up the page a little bit.
• 00:46 But you can see, go to any website and you can see what CSS they're using.
• 00:50 In fact you can even go to Twitter, or Google, or Facebook, anything,
• 00:53 view the page source, scroll down a little bit to see the CSS style sheet and
• 00:58 click on it, and boom you can see exactly how they're doing whatever they're doing.
• 01:02 So if you're interested in designing and
• 01:04 building websites, you absolutely have to know CSS these days.
• 01:07 Now, there's a lot of frameworks, and
• 01:08 we're gonna talk about some of the frameworks that you can use that take care
• 01:11 of a lot of the CSS stuff for you, but even with those,
• 01:14 it's still just a hugely important thing for you to learn CSS on your own and
• 01:18 that's what we're gonna learn in this course.
• 01:19 So, what exactly are we gonna learn in this course?
• 01:22 Let's go over the format pretty quickly.
• 01:24 So, basically we're gonna start out with a very quick introduction to CSS, what it
• 01:27 is, what you can expect from it, how to create basic CSS, and that sort of thing.
• 01:32 Then we're going to move right into setting up a cloud development
• 01:35 environment, and in this course, we're using something called C9,
• 01:38 where we're going to be writing all of our code in.
• 01:40 It's a nice online cloud development environment and
• 01:42 you'll learn all about that right away.
• 01:44 Next after that we'll dive right into CSS syntax.
• 01:47 You'll learn what is CSS, what does it look like when you write it out?
• 01:50 What's the basic syntax?
• 01:52 And then we'll jump right into learning how to use CSS on a website,
• 01:56 I'll show you three ways to use CSS.
• 01:58 After that we are going actually start learning CSS.
• 02:01 We'll start out with basic things like colors, backgrounds, borders, margins and
• 02:05 padding, height and width.
• 02:07 We'll talk about the box model, which is very important, and
• 02:09 we'll get into things like outlines, text formatitng, fonts, links, lists, tables.
• 02:14 You can sort of just see all the different things we are going to be doing, classes,
• 02:17 combinators, align, float and clear and all the good stuff.
• 02:20 After that, after we get our basics down, we'll jump into intermediate CSS and
• 02:24 we'll do sort of slightly more fun things like rounding corners,
• 02:27 doing border images, gradients, shadows, rounded images, buttons, pagination and
• 02:32 all kinds of good stuff like that.
• 02:33 Once we have our intermediate stuff out of the way, we're going to jump right in and
• 02:36 do responsive mobile design.
• 02:39 Responsive is making a website look good on a cell phone.
• 02:42 So if you resize a website, boom, it kind of changes, changes its basic format, and
• 02:47 that's what we're going to learn in the next section.
• 02:49 We'll talk about grid views, media queries, responsive images, and
• 02:53 then we'll start to talk about different frameworks.
• 02:55 And in this course,
• 02:56 we're gonna look at the Bootstrap framework at the very end of the course.
• 02:59 And Bootstrap is a very popular CSS framework,
• 03:02 it does a lot of the heavy lifting for you and a lot of people use Bootstrap.
• 03:06 In fact, last I heard almost 15 million websites are using Bootstrap.
• 03:10 So, I'll show you how to set it up and the basic usage.
• 03:13 But more importantly for this course, I'm gonna show you to modify Bootstrap.
• 03:17 We'll actually be able to go in and change it around and
• 03:20 use our own CSS with Bootstrap.
• 03:22 That makes Bootstrap much more powerful and it gives you a hands on ability to
• 03:26 do anything you want with it, versus most people who just have to copy and
• 03:30 paste stuff from Bootstrap, you'll be able to get in there and modify stuff.
• 03:33 That's pretty much the breakdown of the course.
• 03:35 We start out with basic CSS, get your feet wet,
• 03:38 then we'll move into a little bit more intermediate stuff and then basically
• 03:40 we'll end the course talking about responsive design and Bootstrap.
• 03:43 So it should be a pretty good course,
• 03:44 I think we're gonna get a whole lot out of it and let's jump in and get started.

Lesson notes are only available for subscribers.