Style Guide & Q&A

[00:00:00]
>> So let us get started then with building our website. And so just briefly here, if you click on here in the chapter listing from the home page, if you click on prerequisites, this is going to talk a little bit about the technology. I've talked to you about most of this before.

[00:00:17]
I've given you some points about how you might customize this website for yourself. Again, sort of the baseline knowledge that I expect you to have coming into this course is what you would get out of the front-end master's boot camp. And that was something that I recorded with Brian Holt several years ago now, but what you would have learned there is still absolutely relevant, especially in the HTML and CSS space, and that would give you a baseline of HTML and CSS coming into this.

[00:00:45]
In terms of technology, we're gonna be working in, as I mentioned, VS Code, which is a free code editor. We can talk about that in a little while, if you wanna use something else, yeah, that's totally fine as well and we're gonna be using CodePen. The way we start building websites these days is we start with a so called style guide.

[00:01:04]
These style guides may be super complicated if you are building a really big meaty website for a major corporation, in our case this is going to be rather lightweight. We wanna set up some basic styling that's in place. We're going to set up things like colors and fonts and font sizes and maybe some base styling on some of our HTML elements.

[00:01:27]
So that is where we're going to start, you will find here a link to the beginning CodePen. If you click on that, this will open the CodePen in another window. Hopefully you have a CodePen account, if not, you may wanna take a moment to sign up for this.

[00:01:44]
What you can do down here at the very bottom of the page, there is a button down here in the very, very lower right corner that says fork, and that you can then fork this particular code pen into your account. That makes your very own copy of it so that you can make changes to this particular page.

[00:02:04]
As you see here across the top, we have HTML, CSS, and JavaScript that you can write here inside of CodePen. This is not my preferred arrangement for CodePen. I generally like to put the code on the left side of the page. And if you're like me, you can change this layout as well.

[00:02:21]
You gonna go to the thing up here in the upper right, it looks kind of like a cupcake. It says change view, where I'm going to click on the left side here. So the cupcake flipped over on its side and I just find this easier to look at, I can see my webpage better.

[00:02:38]
And the other nice part is that I can grab my bar here in the middle and make my screen larger and smaller. As we get into the responsive side of things, that'll be important.
>> When should I use raw CSS and when should I reach for a framework or library?

[00:02:54]
>> When should you use raw CSS? For every single website you build. Anybody else want more opinions? [LAUGH] I am not a fan of Tailwind, I am really not a fan of Bootstrap. Particularly, I'm not a fan of Tailwind. I think Tailwind gets rid of the most important parts of CSS notably the cascading inheritance, which you can take massive advantage of when the building websites and Tailwind gets rid of all of that.

[00:03:23]
So to me Tailwind is like me coding with one hand tied behind my back. So I don't recommend any of those particular frameworks. Back in the day I used to do more with Bootstrap. Bootstrap was helpful back before we had two great tools for layout. Now we have Flexbox and grid and you can join me in my course on Flexbox and grid right here at front-end masters.

[00:03:46]
Once you understand how Flexbox and grid work, you don't need any of these CSS frameworks in order to write those particular layouts. So that is my opinion on that particular item.
>> And I'll just add to it, I'm not refuting anything what you're saying. I'm just saying in a professional context, your team might choose to use Tailwind, they might choose to use whatever.

[00:04:09]
And having that foundational knowledge is going to help you, no matter what tool or framework, even if you do find yourself in a bootstrap situation cuz there's plenty of websites built with that, or whatever, Tailwind or whatever, the framework of the day. So yeah, having a foundation is the key to being successful in any type of situation you're thrown into.

[00:04:36]
>> And that is absolutely true. What Mark is saying is that the key here being the framework of the day. So I know a lot of you wind up learning some framework. Well, my framework would have been macromedia dream weever three when I started out. Guess how much good that's doing me today.

[00:04:53]
Zero, and you know what? Tailwind may seem like it's inevitable and it'll be here forever, but I promise you what's gonna die one day. And when it does, what are you going to do? If you know the fundamentals, always, if you know the fundamentals of HTML, CSS and JavaScript, you can learn any framework that comes along.

[00:05:11]
So that is why we are here today and learn the fundamentals of HTML and CSS.
>> If one were to build a website entirely on their own, what would be the advantages of having a style guide even when you are solo or with a small team.
>> Yeah, so one of the nice things about starting with a style guide is that this is going to give you kind of your baseline settings for the rest of the website.

[00:05:37]
So again, because we've set up here's our base colors, our base spots are base styles for the website. We wind up doing a ton less work later because we're gonna leverage inheritance and the cascade here in CSS from our base into later portions of our design. We don't have to keep writing the same code over and over again.

[00:05:57]
That is why we start off with a base, even if you're building a website using Only HTML and CSS. It's still extremely helpful to have those base settings in place.
>> Do you recommend using VS code or an editor on your local machine, or are we gonna focus on CodePen throughout the entire day or should we?

[00:06:18]
>> Okay, so, the methodology that I'm going to use here is I think better for beginning students. If you are really into code you already have like all of the command line things all set up and all the GitHub things set up and all the rest of the tools that you people use for building websites, you absolutely can start and use all of those with VS code, no problem at all.

[00:06:43]
But if you are starting as a beginning beginner, if you don't have a whole lot of experience in working with code, I find that code pen is such a great tool for starting out because we can write our code, see the effect on the webpage immediately here. And what you'll see us do over the course of today, is that we're gonna take our design, we're gonna break each one of those sections into an independent problem here in CodePen and solve for each one of those sections independently.

[00:07:09]
So we'll wind up with a whole bunch of CodePens. Then in chapter six, we'll take each of those sections and we'll combine them in VS code into a single webpage. So, the idea here is to demonstrate how you can take what seems to be a mind-blowingly huge problem, how the heck am I gonna code this webpage?

[00:07:29]
How you can break it down into very small pieces, how you can solve for each of those small pieces, then reassemble those into a full webpage later. And that is the the pedagogy behind what I'm doing today.