Introduction

[00:00:00]
>> Welcome everyone to practical CSS layouts I'm Jen Kramer and I am here to talk about taking your CSS layouts to the next level. This course is going to cover building three kinds of websites, I'm gonna show you what those are going to look like here in just a moment.

[00:00:17]
And the goal for this is to exercise the part of front end development that gets undervalued consistently. Two thirds of the front end consists of HTML and CSS. Only one third of the front end consists of JavaScript. Today we're gonna be working with the two thirds. And one of the reasons I love teaching for front end Masters is that their values align with mine in that fundamentals are critically important.

[00:00:43]
So if you know how to code HTML, CSS and JavaScript from scratch, you can build literally anything. You don't have to keep up with the latest frameworks. And so that is what we will be doing today. We will be working with HTML and CSS, we're gonna write it all from scratch.

[00:01:01]
We are gonna be working inside of code pen. If you don't have a CodePen account, I would recommend that you sign up for one at codepen.io, and I will be giving you code pins along the way. Those you can fork to your own account and then you can follow along with me as I write code.

[00:01:20]
Why are we doing it in CodePen? Because I think it's a great teaching environment and particularly for HTML and CSS. Every time I make a change It's immediately reflected in the CodePen environment, so you can see what the web page looks like. We are not slowed down by workflow additions or anything else that you might bundle up with your web development process.

[00:01:44]
It gets you out of that mindset of all these automatic things that are happening in the background to focus you exactly on what's happening in the code. You know exactly what the HTML and the CSS, and we'll even do a tiny little bit of JavaScript, what those are doing.

[00:02:02]
Trust me, I'm not writing any JavaScript. We are going to get JavaScript from other places. But you'll see that in action as well. The website for the course is available at practical.css.education, this is the course website. You can see here that we have a chapter listing down here that will talk you through all of the things that you need to know about this particular course.

[00:02:29]
If you click on the link for chapter one, this is where we're at. This is the prerequisites and the setup. And this is where I will show you what the site is gonna look like, that we're going to build, links to CodePen, that kind of thing. When we get into the next chapter, you'll have references here for example, here we're working with colors.

[00:02:50]
Here's all the hex codes that you're going to need to do that. Here's the link to the CodePen, where you're gonna put those in place. Here's what the very first page we're going to build, this is what it's gonna look like, that kind of thing. It's all here available on the website, practical.css.education.

[00:03:09]
So we will be building three websites in this course that I've affectionately called easy, medium and hard. And that's only because that reflects their levels of complication. There are websites for a fictitional band called Magenta Lime. And I picked a band because there are certain kinds of topics that lend themselves to being all about emotion as opposed to trying to sell you something.

[00:03:36]
So pretty much every corporate website we've ever built has been all about trying to get you to buy something, or call them or whatever that call to action happens to be. When you build websites for movies or bands, other things, it's about feeling and emotion. And so we can be a little bit crazier with our designs.

[00:03:53]
We can be a little bit more innovative in what it is that we're doing. So this is Magenta Lime and the easy version, on the left hand side, you'll see the mobile layout here. So just some basic a little bit of text, some pictures and some reviews. When we go to tablet we are going to change our layout a little bit as we often do, and when we get to desktop we'll change our layout again.

[00:04:20]
So this is the quote easy version of this. If you are relatively new to CSS, this is gonna be a great place for you to start. This is something that you'll probably find kind of challenging. If you have been in this field for a while, you may find this a little bit too easy.

[00:04:35]
Don't panic, there's more. So we're gonna take the work that we did on that easy site, and then we're gonna apply it and take things to the next level with our medium site. So we have mobile, tablet and desktop here for the Magenta Lime of sight. And so here we're going to do a bunch of things.

[00:04:53]
We're gonna skin an audio player, that actually will play music. We're going to work on a tracklist that we have here. And if you take a look very closely, we have these crazy little bits of layout that are here. So this is the reviews and the images, we go from mobile there on the top to the tablet there on the bottom.

[00:05:14]
And then over to this desktop layout where it'll be a column over on the side. So we have some interesting kind of layout issues that we're going to encounter along the way here as well. And then finally we're gonna get to the difficult, so-called difficult site. The track list that you see here on the right-hand side is the mobile layout.

[00:05:38]
You can see that track list there, that collapses, all right? When it goes over to the tablet layout here, you'll see that track list shows up on the left side of the album cover, and it will open from the side. Instead of opening down, as it does on mobile, it'll open from the side and we change the text of the button.

[00:05:58]
So there's a bunch of crazy things that's going on with that. And of course, you'll also see those diamonds, see those diamonds there? Those cool images? We are gonna lay that out as well, we're gonna use Flexbox to do that. So, we got some crazy layout things that are going on in here as well.

[00:06:13]
Yes.
>> Are we covering anything about animations or transitions?
>> Well, we'll be a little bit of animations in transitions. It is not a focus of the course but we will use them. There is a separate course in the front end masters library that focuses on animations and transitions, and if you want to know them in detail you should check that out.

[00:06:31]
Okay so, let me just go over some basics here code pen if this is new for you. You'll wind up in a pen, it will look like this., okay? So you'll have three boxes across the top that will have HTML, CSS, and JavaScript. You click the little, it looks like a cupcake to me, I don't know, cupcake button up here at the top.

[00:06:51]
And we are going to switch the view here, I usually like to put my code over on the left hand side. You can choose to do whatever you want. You can, of course, adjust these windows, so I'm just gonna hide the JavaScript window because there's nothing there that we need.

[00:07:09]
And I prefer to do work this way because then I can see my CSS right. Applied here, we do this all day long in CSS, [LAUGH]. And so this is, will give us a quick view of how the things are gonna look on mobile, tablet, and desktop. To fork it down here at the bottom, there's a button that says fork.

[00:07:34]
And so if you click that button, it will fork it. It will actually save it to your account if you've created an account. And from that point on, it's saved for in your account forever. There's some other features here that I like to use, specifically the adding to collection feature.

[00:07:52]
So there is a so-called collection, that's available. This link is inside of the website, and so, wow, that was, I clicked on the wrong thing there. You try that again? This is, this one. So this is a collection of all of the CodePens here, front end masters, practical CSS layouts.

[00:08:13]
These are all the code pens. Start and finish states for everything that we're going to do today.