Introduction

[00:00:00]
>> Hey, everybody. I'm Jen Kramer, Director of Learning Design and Technology at AnnieCannons. We are going to be building a portfolio site using only HTML and CSS. And this course is designed mostly for people who have less experience with HTML and CSS. They need to beef up those particular skills and come up to date with what's going on, what are the latest things that we're doing in the HTML and CSS space.

[00:00:28]
I'm going to walk you through the whole entire website. We're gonna break it down into small pieces. We're gonna work on small pieces one at a time. All the way through is a series of CodePens, which is an environment where you can write HTML and CSS write there inside of your web browser, nothing to set up.

[00:00:46]
And then we will reassemble those in VS code, which is your code editor, where you can create whole web pages. And we'll create both a homepage and an inside page. The actual assets that we'll be using to put this together or my courses here at Frontend Masters. So I'm building a website.

[00:01:05]
It's all about me in the work that I've done here at Frontend Masters. But if you would like to substitute your own work, I strongly encourage that. So, be prepared to think about what kind of work you might wanna include in a site like this. Some screenshots, maybe a little bit of text and swapping your own stuff, and you'll have a website that will be absolutely perfect to you.

[00:01:27]
Or you can follow along with the stuff that I've given you, and just concentrate on learning HTML and CSS. Either way, this is gonna work out great.
>> Chad online says, I'm excited to learn CSS.
>> Yay, we're excited to learn CSS. It's totally awesome. And this website is going to walk you through everything that you're going to need for this particular course.

[00:01:47]
We have a listing of all of the chapters that are here on the side that we will be working through one at a time, and you can read a little bit more about the course over here on the left-hand side. Let me show you the site we're gonna build before we get started.

[00:02:02]
Right here from the home page, there's a button that says view the website that will create. We have a space themed website, cuz who doesn't love space? So here is the website. You'll see that we have sort of an opening area where you can identify yourself and talk about what you do.

[00:02:21]
We're gonna go on to a featured project, maybe have a great big huge screenshot here. We talk about the kinds of technologies that you use to build that along with the description of that particular item. Then we're gonna have some projects that we're proud of. Maybe you have like three projects that you're really proud of.

[00:02:41]
And you'll notice that we have these cool little overlays here to give us the title of that project, and again, some of the technologies used for it and some smaller screenshots down here on the bottom. Scroll down a little further, we've got a contact area, and then down the way down here on the bottom we have a footer here with information about how to contact you.

[00:03:06]
Just to show you real quick what this is gonna look like at different breakpoints cuz, of course, we have to make this work on different types of devices. So we do have this setup to go to a tablet kind of layout where things are more stacked on top of each other.

[00:03:24]
Very nice. All right, and then, of course, we're going to go to mobile, and at mobile will be really, really small. Notice we have a lovely hamburger button here with a full working hamburger menu and guess what? It's all CSS. No JavaScript in this site at all. So I will show you how to make this cool thing happen.

[00:03:49]
And again, everything is all stacked on top of each other all the way down to the bottom. There is also an inside page, which we'll build right at the end of the course. If you click on the link here in the navigation that says Magenta Lime, this will take you to the Magenta Lime page.

[00:04:06]
This happens to be the project that we built as part of the practical CSS layouts course, which is a more advanced CSS layouts course. Here we are with a video to start us off. And then we have some additional images from that website here underneath. And of course, that's also mobile-compatible.