Course Overview

[00:00:00]
>> So let's go through all of the things that we're gonna be covering today and get a sense for what this is. First of all, there is a course website and the course website is getting started with all one word getting started with dot CSS dot education. And if you go there, you will find this website where it says getting started with CSS.

[00:00:25]
And you'll notice down here as we scroll down a little bit, there's a listing of the seven chapters, the things that we're going to look at today, a little bit about our course objectives, and a little bit of background about the workshop itself. Before I go into all of that, let me show you the finished portfolio site that we're going to build today, it looks shockingly like the website that I just showed you and you'll see here, we have a navigation bar.

[00:00:50]
You have your name on its portfolio site, we have a little bit of introductory text up here on the. Then we have a series of projects that perhaps you've encountered along the way. By the way you'll have an opportunity to customize the site with your own content so as we scroll on through here that's what that looks like we have a little bit of information about contact me.

[00:01:12]
And then we have some links down here on the bottom, this website is currently all about me because I'm Jen Kramer. I would hope that you want to change all this information to be all about you so to have your name, your interests and your projects and I'm going to give you an opportunity to do that along the way.

[00:01:29]
We'll also have an about page and so here you'll have an about page that looks kind of like the projects. And by the way it's all responsive of course so if I narrow up my screen here you'll see that we have a navigation bar that's going to reformat itself.

[00:01:46]
And underneath that we have some projects that will reform themselves as well, okay, so that is what we're going for today and if I was a beginning beginner looking at that. I would probably feel pretty intimidated at this moment in time because that seems like a pretty advanced site for someone without a lot of background knowledge and HTML and CSS.

[00:02:09]
The trick behind this type of project is always to think about how are we going to break this into pieces. Start with one of the simplest pieces of this puzzle, work that particular problem and in fact we're gonna work it in isolation. So we don't have to worry about all of the other considerations that are there on the page.

[00:02:28]
In fact, we'll do that using code pen, I love code pen as a tool for teaching, because there's no environment to configure. It's just gonna give us some HTML and CSS blocks, also gives us a JavaScript block, but we're not gonna use that one. And we can write our code, and immediately see it rendered on this side.

[00:02:48]
So we'll do that, we'll break this into pieces, we'll look at just the text here for the opening introductory text. We'll look at the navbar in isolation, we'll work at these projects, probably getting to that this afternoon. And thinking about how we're gonna make this work, including this interesting overlap thing that we have going on here.

[00:03:05]
And you'll do some things yourself along the way you'll wind up coding some of these things all on your own without my assistance.