Setup HTML & CSS

[00:00:00]
>> So the first thing that we wanna do here is we're going to just build the simplest possible Jamstack site. And so it's gonna be no dependencies, no frameworks, we're not gonna use any anything. We're gonna write an HTML file, and we're gonna put it in the browser.

[00:00:15]
So in this basic folder, we can delete this gitkeep. That's just you have to have a file and a folder else get one let you put it up there. And then I'm gonna create a new file and I'm gonna call this index.html. And in here, let me close this down.

[00:00:35]
I'm gonna set up let's see, we want to doc type and then we need to set language of English. When was the last time that you actually wrote your own HTML page? Like I never do this anymore if you done one recently?
>> Yes.
>> Yeah. Yeah I like this to me is so it's so fun because I just never really do the structural stuff anymore because there's always a boilerplate.

[00:01:01]
There's always something that sets this up for you. So it's kind of fun to dive in and look at what all this stuff means. So then we're gonna add a meta tag, we need to add a charset. So we'll do UTF-8, we need to set up the viewport so that it works on smaller screens.

[00:01:22]
And we'll set the content to width, device width and then we'll set the initial scale to 1.0. After we've got that we're going to tell it to try to use edge stuff if we can. I'm not sure if this is still a thing that is useful. I haven't talked to anybody on the edge team to know if this is still a meaningful thing to do, but just in case let's give it a shot.

[00:01:55]
And so we'll say ie=edge. I've often wish that that would work, that you could just like put something in here and say, I wish my browser worked like this and it would just work. Then we're gonna add a title and we can call this My First JAMstack Site.

[00:02:16]
We'll say website. Okay, so once we've got the heading here, we're going to add a body tag will add a main tag. And then let's set up a heading will say Hello Frontend Masters and then down here. Say like, I like to write codes sometimes Now I'm excited to be here, so let's use an exclamation point.

[00:02:47]
We can actually just open this in the browser and what I'm gonna do because I don't want to, we could just open this in our file system, but the problem is is that browsers have like cross origin request stuff. So instead, I'm just gonna use a little utility.

[00:03:04]
So in the command line, I can just run npx serve. Let me move into the basic so we're gonna move into basic first make sure you're actually in this jamstack-intro/sections/basic. And once you're there, you can run npx serve.
>> Does it have to npm install?
>> Nope, npx will kind of manage all of that for you.

[00:03:29]
And so, once that is finished running, this opened up on localhost:5000. So I'm gonna open that over here and there we go, we got a website. It's now being served, you've written a JAMstack Site but let's take this a little bit further. Let's actually get into what a more, like what an app might look like.

[00:03:49]
Like what if we wrote a tiny little app? So start, let's save our work. And then I'm gonna check out a new branch, and we'll call this fem-progress. And I'm going to check things here, so I have this. This is like a little GIT hack. If you run git status-sb, it simplifies the diff to show you like what's new and what's not tracked and all that it's way easier to look at than git status, which is like huge and hard to read.

[00:04:29]
So I've alias that. So instead of having to type out git status SP I can just type S. And it does that I learned that trick from Christmas Guardian it changed my life. So I'm going to add all this and we will get commit will say basic HTML.

[00:04:49]
Okay, so now that we've got some HTML, we can move on and let's write some styles. We'll keep our styles pretty simple here but I'm gonna add a style sheet in the basic folder, we'll call it style.css. And let's just write some fairly straight forward boiler plate, we'll set the text color on the whole side to a nice kind of dark grey, we'll set the font family to sans- serif, make the font size a little bit bigger, we can make the margin 0, so that, that just removes some kind of like browser defaults.

[00:05:36]
Then, on our main tag, we want to give it some breathing room on the top and bottom and then centre it left and right. We will set a max width of 90 viewport width units. I need to look up what VW stands for. That's what it means in my brain.

[00:05:52]
But I think the port width but it effectively means that will be 5% off the left and right. And then we'll set the words to 50 characters, which is kind of a fun like, it uses the text size for width, which is cool, it's really helpful if you wanna get your line length legibility, so that depending on how big someone zooms the window it will still not be like ultra narrow, or way too much text per line.

[00:06:22]
And then because we want our headings to be a little bit visually emphasized, will make them just slightly darker. So this is our style sheet. And to actually use this in the site, we need to include it. And so we're going to go into Our HTML again. All right, so let's go into our HTML.

[00:06:45]
And now we're going to add a link tag. So it's going to be the relationship is a style sheet. And that lives at style.css. If I run npx serve again. I can reload the page. And now we got some basic styles in place. Okay, good deal, right like we were starting to see this come together.

[00:07:12]
It's starting to look very professional. I could put this in my portfolio right now let's save our work. Well, you got to start shutting down a little bit faster than that. So I'm going to get at everything. We will just check to make sure that's all we updated.

[00:07:29]
Git commit basic. So I'm using the semantic release, like git commit fashion, I think this is the angular commit conventions. I do it out of habit, not because it's something that I think you should do, but it does make like change logs really easy, if that's something you're into.

[00:07:52]
Let's add styles, and then I'm gonna push actually, let me get this setup so that we can origin in progress okay. So.
>> There's a typo and initial scale.
>> There is. Okay.