Project HTML & CSS

[00:00:00]
>> I hope you had some Wordle of a time, making your Word Master. You and I we are gonna code this together kinda piece by piece. I'm gonna spend most of the time on the JavaScript, I feel like you're well equipped at this point to do that HTML and CSS.

[00:00:18]
So I'm basically just gonna copy and paste that from my correct code, but we'll go through the JavaScript piece by piece. So, I'm just gonna create a new file folder on my desktop. This will be, WordMasters, and we're gonna put word-masters into VS Code. Okay, I need three files here, I need a index.html, And we'll put a nice little shell in here for that.

[00:00:52]
This will be called, Wordy Masters, I've decided now that it's Wordy Masters. We'll have a style.css, and we'll have a, I don't know, what do you wanna call it, wordy-masters.js. Here in the index.html, I do a link CSS this. So it'll actually generate that correctly automatically. If you wanna see what I did, it's called Emmet.

[00:01:26]
It's built into VS code. I can just start typing if it's a valid HTML document and say link, and then I just chose CSS right here, and it just generates the correct tag for me. It's kinda nice. Same thing here with scripts, you just go script source here, and this is just gonna go to, you can actually even to have lets say, wordy-masters.

[00:01:49]
Help you choose the correct one. Okay, we have a nice kind of, A script tag there. Nice little skeleton going. So, let's just go ahead and go grab this from the solution, cuz I think this is gonna be not the most interesting part of this. Copy this, And I gotta make sure this is gonna be to style.css, and this is going to be to, I called it wordy-masters cuz I have decided to change.

[00:02:32]
Okay, so let's just talk through what I did with my HTML. All of the head looks familiar to you. You might be wondering why put ./, or don't put ./, they mean exactly the same thing. So you can either put in the ./ which just means, in this directory, I want style.css, or you can put styles.css that both works as well.

[00:02:59]
I have a header here called the navbar with the brand on it. I have my loading spinner here. And what I'm gonna do while I'm coding this, is I'm just going to add something called hidden, which is a class that I'm going to make. Which is going to set its visibility to be invisible, and then when I remove it it'll be showing it, so it just makes it easy to make it show up and go away.

[00:03:25]
And then I have here, I called it the scoreboard. In retrospect, I don't know why I called it a scoreboard, just could have called letters though. And then I just have 29, or actually I have 30 spaces, right? Cuz I have six guesses, and I have five per row.

[00:03:44]
Now, you could just as equally, you saw what I did in my calculator, I put them into division of rows. This time it made sense to me, it does well, these are all going to be exactly the same size, and I can use this to my advantage to be able to get the correct ones, so I put them all just in the same div.

[00:04:06]
Okay, and they're all empty cuz none of them have any guesses in them at the moment. And then that's it, that is all of my HTML. So that's good. Let's go grab the style.css here. And again, I'm gonna just copy and paste this one as well. We'll walk through it but then we'll hand code off the JavaScript together Okay, box sizing, we're pretty familiar with that.

[00:04:40]
You might have seen this, this is just a really common way of using built-in fonts to the operating system. So when we did open Sans for the previous project, your browser has to go out, talk to Google, download a font. That's not free, it's not exactly super expensive for someone to do that.

[00:05:02]
And when I say expensive, meaning it doesn't take a long time, but it takes some time, right? If you do this, everything is built in to a user's browser. So I end up doing this one a lot. This is probably the font that I end up using the most.

[00:05:21]
Apple's system, it just says, use the font that macOS has built into it, which I believe is currently called San Francisco, is the name of the font. BlinkMacSystemFont, so if this is in Chrome, it's saying, use San Francisco. Then if the user has a one in built into a called Segoe, which is Windows' default font.

[00:05:46]
Then Roboto, then Oxygen, then Ubuntu, these two I think are from Linux. I believe Roboto is built into most operating systems. So it's just going through like a list. It's, do you have this font? Do you have this font? Do you have this font? Eventually it'll eventually land on Sans-Serif, which is, look, just give me a font that doesn't have serifs, which is the little accents at the end.

[00:06:12]
You can see Open Sans is here, right? Helvetica Neue, that's another one that's fairly common. But that's how font family is, just check if they have this one. If they don't, try this one, then try this one, then try this one. Almost everyone will have, Down here to Ubuntu.

[00:06:34]
99% of your users will have one of these. Okay, that's all. You don't have to use this one either, you could have made it. I know you could just use Helvetica Neue, that's a really good font, you could use that one directly, there's a bunch of them. Okay, I used this for the scoreboard, I used grid template columns.

[00:07:01]
And I just said, look, there's gonna be five things in each one of these and just spaced them equally, and you end up with this, right? One, two, three, four, five, right? So just to drive that home, if I come in here and I edit this to be, 1fr one more, right, it'll add one more.

[00:07:25]
Or if I do this it'll be four to a line, But we want five to a line, so, That is the power of grid. Okay, I make everything uppercase, that's fine. Here's a correct class, the background is dark green and the color's white. If they're close, then I add a class called close.

[00:07:56]
I chose golden rod, that seems like a nice shade of yellow, a little dark. And then wrong, I made a kind of a light gray. And then invalid, it does this flash animation. So it goes from 0 to 5%, it goes from whatever color it was to crimson, so that's like a quick flash to red.

[00:08:24]
And then it spends the rest of time flashing back to gray which is CCC. So you get this nice flashing effect whenever you add a invalid class. And then this is the loading spinner, Which is using literally the exact one that I showed you in the css animations section.

[00:08:45]
Hidden, so let's talk about hidden for a second, going back over here. So notice this has the hidden here and it has visibility hidden. What's the difference between display none and visibility hidden? Visibility hidden, it still takes up space even if you can't see it. If it's display none it totally removes everything.

[00:09:07]
Let me show you what I'm talking about. So right now if I unhide this you'll see the spinning thing, right, the loading indicator? But notice it's not moving, right? So it's still taking up the space in the DOM, it's pushing everything down, which is what I want, right?

[00:09:21]
I don't want it to jank up and down. So if I do display none, Let's do this rather this way, display none. Notices it jumps up and, I'll just get rid of the the visibility here. Okay, notice it jumps up and down, Right, cuz when I say display none it stops taking up space in the DOM.

[00:09:50]
Whereas with visibility hidden, It just makes it invisible but it still takes up space. Does that makes sense? So, nice little trick there to nicely show something and then hide it later. And for the swirl here, I literally just used an emoji, right? There's a spiral emoji here that I used.

[00:10:17]
You could have totally made this, I don't know, a dog or something like that. Whitespace, what are you doing? I would like dog, please. There we go. So you can have a dog loading spinner instead of a spiral. It's literally just making whatever's in that div spin. Okay, and then down here this is the same rainbow animation that we used before as well.

[00:10:50]
And I called this winner, so if I inspect elements on this, and I add additional class here called winner, now notice that it is rainbow type. So you'll find you do this a lot with JavaScript and CSS and things like that. Rather than directly manipulating the styles, I just add a class, right, or I'll take away a class.

[00:11:16]
That way all of my styles still stay in my CSS, right? But they're kind of conditionally applied by whether it has the class or not. Okay, that is all of my, HTML and CSS. Let's just open this now. We're on the desktop and I made wordy-masters. There you go.

[00:11:49]
And by default, this is what it looks like. Notice by default, I don't hide the spiral, that's because whenever someone loads the page for the first time, it still needs to grab the word, right? It needs to load the page and then it needs to hit the API to grab the word.

[00:12:02]
So by default the user is loaded into a loading state, right? So that's why I don't hide that right away. Okay, So, let's go ahead and start writing some code. We're in wordy-masters.js.
>> There is a quick question.
>> Yeah, yeah, go ahead.
>> When I write HTML, and after that I write CSS, then I write JavaScript and I switch between those, there's some delay and making my mindset, right, for what I'm using the language.

[00:12:46]
Do you have any tips to avoid that, or just avoid the delay in your mindset?
>> Totally.
>> Writing each language.
>> It's a good question. I mean, basically it's context switching, right? You have all this stuff in your brain and then you're thinking in terms of raw HTML and then you have to context switch to CSS.

[00:13:11]
And kinda have throw away the context in HTML and regain context in CSS, that is inefficient, right? Where there's some inefficiency and loss in your context switching. It's the same principle of, you are working on something and maybe you're working on homework and then someone says, hey, can you help me for five minutes?

[00:13:28]
So you go do something and come back, and you've lost your entire train of thought, right? Same principle here. It's tough cuz some of it is just necessary. One thing that you can do, rather than just try and holistically write all of the HTML at once and all the CSS at once, you can rather tackle it in terms of small problems.

[00:13:52]
So maybe you start by just writing the header first, right? Where is I'm just gonna work on this part and you do all of the HTML and CSS for that small piece at a time, and then that way you're always thinking about headers, right? And HTML and CSS at the same time you're taking a smaller problem and you're just working on that.

[00:14:13]
That can certainly help, I don't know, otherwise some of it's just necessary. But it's gonna come down to your personal preference. The way that I code in the way that works for me is not gonna be the same way. So, there was a while that my wife learned how to code and it was really interesting to watch her.

[00:14:33]
She would very heavily go into the CSS first before thinking about any of the JavaScript. And I'm immediately thinking about the JavaScript as soon as they hop into anything. So, just like some people are visual versus audio learners, I think people have different styles of writing code, and you kinda just have to experiment with various different ways.

[00:14:55]
Some just kind of high level advice is if you watch me code and what I'm doing is really working for you, just copy what I'm doing. Just steal my workflow and work on it and then you'll find, well, Brian does this but I don't like this, so I'm gonna change this.

[00:15:12]
And you kind of steal my way and then you just modify it until it works for you. And then you should watch a bunch of courses, cuz for example, Sarah Drasner codes a very different way than I do. And mine is not any better or hers is not any better, they're just different, but you might like the way that Sarah does things better than I do.

[00:15:30]
So you might check out some of her courses to gain some of that context.