Introduction

[00:00:00]
>> Hi everybody, this is Jen Kramer Welcome to CSS projects, I'm so glad that you're here today. And there is a website to follow along with this course it is at projects.css.education, which will explain all of the instructions for all of the projects that we are going to work on today.

[00:00:20]
So, let me tell you about this course in general. So, today we're gonna be working through six different layout projects. We're gonna do a style guide, and then five additional projects that will use that style guide in terms of putting together parts of a coffee website, it's the Coffee Masters website.

[00:00:42]
The course is designed in a bunch of different ways, first of all, it is designed to address different difficulty levels of difficulty. So I have suggestions as we go about how to make these projects a little bit easier or a little bit more difficult as you go along the way.

[00:00:59]
I have some next level suggestions in there about how you can take these designs to the next level if you wanted to do that. I don't have answers for those next-level ideas, but they are things like, if you want to put this in your portfolio and take it to the next level, these are some ideas that you could do to do that.

[00:01:16]
No JavaScript is required for anything that we're going to do today, it is all HTML and CSS, and we're going to work in CodePen to do that. I adore CodePen because you focus on HTML and CSS, you do not work, focus on workflows, command lines, frameworks, any other nonsense.

[00:01:35]
You're gonna focus on the actual code, HTML and CSS. It's two thirds of the Front-end, if you would call yourself a Front-end developer, you should know HTML and CSS without frameworks involved. And then as I said, as part of that first project, we're gonna work on some base styling.

[00:01:53]
And I hope for some of you who are towards the 1 and 2 end of CSS, this is an eye-opening experience. What you wanna do is you wanna write styles such that they cascade down into the rest of your design, and ensures that you will have consistency through your design, If you set this up first.

[00:02:12]
Even if it will never go live, you've set these styles and you will then continue to leverage those as you go into the rest of the layout projects that we're going to cover. Any questions so far?
>> They're asking if if we can use a framework like tailwind, or like the person taking the course, would use a framework.

[00:02:38]
>> You can do whatever you want, but I would encourage you to write HTML and CSS because you ought to learn HTML and CSS. Tailwind is not CSS, and by the way, those of you who are learning Tailwind to the exclusion of CSS, these frameworks don't have a long lifetime.

[00:02:57]
I remember when Bootstrap was the thing, and it was never gonna go anywhere ever again, okay, so Tailwind was the successor. We're already seeing people talking about what comes after Tailwind, frameworks will not stay forever. So either you're gonna continue to chase a framework for the rest of your life, or you can learn the fundamentals, and you will always know the next framework because you already know how the fundamentals work.

[00:03:21]
So If that is the Front-end Masters philosophy and it is my philosophy, it's the reason I love teaching here, you got to know the fundamentals.
>> Absolutely, you're gonna be much faster if you know actual CSS.
>> Yes, that's right
>> Peter asks, are we gonna tackle the latest CSS features?

[00:03:38]
>> Yes, well, today we've got Flexbox, grid, overflow, object fit, object position, of course the usual kinds of stuff with colors and paddings and margins and all kinds of other craziness. So I use variables typically for colors and fonts because I find students understand that sort of innately.

[00:04:01]
If you wanted to do more with variables, you certainly could do that, yes, and I'm sure that you could actually do a whole lot more with variables than what I do here. In fact, I've showed that in my advanced CSS layouts course about how you can basically use media queries as a way of just changing values of variables to change your layouts.

[00:04:20]
We're not gonna go to that level here today, but you could definitely take things to that level if you wanted to.
>> There was just some discussion around good ideas on how to learn to practice, and some people mentioned maybe looking at designs in Dribbble and trying to replicate them.

[00:04:41]
Obviously, this course is the entire point of it, but
>> That is the entire point of this course, yes, we will have a whole series of these designs, I'm gonna give them to you, and you will try to replicate them. And that starts from the style guide and works the whole way through the course, you'll see here in just a moment.

[00:04:59]
All right, so there are four steps to each of these projects. These four steps are how you do HTML and CSS work. You can take these four steps, put them in your back pocket, take them to work tomorrow and apply them if you know these four steps you are an HTML and CSS master.

[00:05:17]
It will automatically bump you up one level in your HTML and CSS knowledge this is how we do it, okay, so first of all, we're gonna study the screenshots. We're gonna have a little bit of discussion about what you see between these screenshots, things we might wanna keep in mind, things we might wanna plan for as we work through laying out the design.

[00:05:38]
Then you're going to code semantic HTML, so this is not 25 layers of div, plus a spam, okay. This is we're going to work with articles and sections, figures, paragraphs lists of the appropriate type all kinds of things like that. And we're not gonna worry about how those things are gonna be grouped with divs and spans because that is part of the styling process, we'll add that as needed as we move through.

[00:06:08]
Then you're gonna code the mobile layout, so the mobile layout is the first thing that you code, MobileFirst, that's what it means. And so you should make sure that your mobile design is working correctly before you move on. We're not gonna bounce between different break points, we're gonna start with a mobile design.

[00:06:28]
We're gonna make sure the mobile design is working correctly, and then we move on to however many additional breakpoints there happened to be. So don't bounce between breakpoints, make sure you've got that mobile clear, and make sure your HTML starts off semantic, and you should be able to create some amazing layouts.

[00:06:51]
So these are the four steps and we're going to go through these four steps time six today so by the time you leave here [LAUGH] You should be in good shape for knowing these four steps yes
>> I have a I have a question about the MobileFirst.
>> Sure.

[00:07:05]
>> What is the benefit to doing MobileFirst before worrying about desktop?
>> So MobileFirst has its origins back when mobile was just starting to be a thing, around 2010, 2011. And Luke W, who is a well-known UX guy, talked about MobileFirst in two contexts. One context is how do we plan a website, and the other context is how do we code the website?

[00:07:31]
So how do we plan it? If we plan it for MobileFirst, there's only so much you can fit on a teensy tiny screen, which were even smaller back then. So, in other words, we don't start by working on a desktop screen where we have lots of room and then try to make it work on a mobile device.

[00:07:46]
We start on a mobile screen, put only the things that we need to put on that mobile screen, and then we can spread them out as we move forward to other devices. So generally speaking, you will find things like Bootstrap, and other various kinds of frameworks from foundation, UI kit.

[00:08:03]
There's a whole bunch of them, are written MobileFirst for this particular reason.