Style Guide & Q&A

[00:00:00:344]
>> Jen Kramer: So, let's get started then with building our website. And so just briefly here, if you click on here in the chapter listing from the homepage, if you click on prerequisites, this is gonna talk a little bit about the technology. I've talked to you about most of this before, I've given you some points about how you might custom this website for yourself. [00:00:22:051] Again, sort of the baseline knowledge that I expect you to have coming into this course is what you would get out of the Frontend 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:885] 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 want to use something else, that's totally fine as well, and we're going to be using CodePen. The way we start building websites these days is we start with a so called style guide. [00:01:04:919] 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 gonna 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:261] 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 code pen 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:096] 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:364] As you see here across the top, we have HTML, CSS, and JavaScript that you can right 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:620] You're gonna go to the thing up here in the upper right, it looks kinda 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:339] 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.
>> Student: When should I use raw CSS and when should I reach for a framework or library? [00:02:54:417]
>> Jen Kramer: So, I know a lot of you wind up learning some framework. Well, my framework would have been Macromedia Dreamweaver 3 when I started out, guess how much good that's doing me today? Row, and you know what? Tailwind may seem like it's inevitable and it'll be here forever, but I promise you that what's gonna die one day, and when it does, what are you going to do? [00:03:13:992] If you know the fundamentals, always, if you know the fundamentals of HTML, CSS, and JavaScript, you can learn anything framework that comes along, okay? So, that is why we are here today and learn the fundamentals of HTML and CSS.
>> Student: 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? [00:03:37:799]
>> Jen Kramer: 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. So again, because we've set up, here's our base colors, our base fonts, our base styles for the website, we wind up doing a ton less work later. [00:03:56:912] Because we're gonna leverage inheritance in 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, 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. [00:04:19:309]
>> Student: 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?
>> Jen Kramer: 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 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. [00:04:49:639] You absolutely can start and use all of those with VS Code, no problem at all. 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 CodePen is such a great tool for starting out. [00:05:03:694] 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:05:20:362] So, we'll wind up with a whole bunch of code pens. Then in chapter six, we'll take each of those sections and we'll combine them in VS Code into a single web page. 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 web page? [00:05:39:848] 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 web page later. And that is the pedagogy behind what I'm doing today.
>> [BLANK AUDIO]