Landing Page CSS & HTML

[00:00:00]
>> Let's start on the homepage, this orange page here, our desktop version. We're gonna start with desktop. And we'll move into mobile towards the end. The first big thing that I see when I'm looking at this is we've got an orange background. So let's do it. Let's set an orange background.

[00:00:17]
So the first thing that I'm gonna do, so style on our body element here, we're gonna say background-color, and you can copy that hex code. Of course, you can grab it from the design file, and you're gonna put it in like that. I'm also gonna set the text color to white.

[00:00:39]
Why are you mad at me? I have two hash symbols. And we'll set color to #ffffff, which is white. And then that read me I also linked to the plugin for this. If you're wondering why it's showing up as a physical color, that is because I have installed, where did my plug-in go, this one, color highlight.

[00:01:07]
So feel free to install that and then you can actually see the physical color associated with that hex value right there. Okay, so I've set a background color and a color on our body. Let's open this, so I'm gonna right-click on our index.html file, and I'm gonna say open with live server.

[00:01:27]
And it's going to open our webpage here. This looks pretty beautiful already. Remember, I said that CSS adds beauty and a nicer user experience. Well, this is the prime example of that. We've got our orange background, and we've got our white text for most of it. Again, this concept is known as inline styling, remember we're setting the style inline on this element.

[00:01:53]
But there's a second way to add CSS and this is known as embedded CSS. So to do this, we can add a style tag in the head. So I'll add a style tag. If you see me typing something, and it just like magically appears that there is now an element.

[00:02:10]
This is something called Emmet. So as I type, like if I type a P for a paragraph, you can see this pop-up, Emmet Abbreviation. That's the tool. I believe it already comes with Visual Studio Code, but if not, you can search for it in the marketplace. Emett Abreviation, I'm gonna try to type all the tags out so you can follow along.

[00:02:29]
But in case I forget, that's what's going on there. So style, got our style. Embedded CSS, right. So now, instead of declaring it in line, I can say select the body element, instead of background color. To this, which auto completes for me that orange. And we wanna set the color to white and I can remove this inline style now, right?

[00:02:55]
And when I go back we can see it looks the same as it did previously. So this is the second way that we can add CSS to our HTML. So it works, but again it's gonna quickly become unmanageable if we're making a production level application. We write everything in each individual HTML file.

[00:03:13]
So the solution to that is external style sheets. This is the most widely recognized way to write CSS. So the first thing we're gonna do in the root of our project here is we're gonna create a new folder. Now, we're gonna call it Styles. Inside that styles folder, I'm going to create a new file called index.css.

[00:03:38]
And I'm gonna copy this style rule here that I've just defined, can remove those style tags now. I'm gonna put it into this index.css file, and now you can see on save it formatted for me it's beautiful. But now we actually need to link to this file, otherwise the HTML file has no idea that now we've got styles.

[00:03:59]
So to do that, we use this element called link. I am gonna use the Emmet Abbreviation for this because I don't wanna forget the attributes here. The link element takes a rel attribute, which is hey, this is a style sheet and a link to the style sheet. So we're gonna say this is in our current folder we wanna go into the styles folder.

[00:04:21]
And it point to the index's CSS file. So now we have our external CSS stylesheet, and we've linked to it in the head. And again, everything is working as expected. If we go back here, we can see we don't want our links to be blue and purple. We want them to be white, so let's change that.

[00:04:43]
Let's go back to our CSS file here, I'm gonna declare a link selector or type selector for the links, right. So the color, well, we've already declared the color on the body element is white. So I'm just gonna inherit, this is how inherit works. It's saying, hey, find my parents that has a declaration for the color value.

[00:05:05]
Let's inherit. When we save, you can see now our links are white. We also don't want them to be underlined. This is a default styling of links. So we can go ahead and remove that. We'll say text decoration. We can also set this to inherit. And now, our links are no longer underlined.

[00:05:27]
It goes also be text decoration none. That's another value you can use here. So text decoration none. Either works. Just it's nice to see how inherit works sometimes. Okay, so Times New Roman is not the sexiest of fonts is it? So if we go back to our style guide here, we've got two font families.

[00:05:49]
So we have Inter Bold and Inter Regular. So we gonna use Google Fonts for these. So if you wanna head over to fonts.google.com. So these are all free fonts that you can use. I use them quite often, especially for personal projects. And like I had mentioned, we're using Inter as our font family and then the weights are gonna be bold and regular.

[00:06:11]
So we can go ahead and search for those on Google Fonts. It's gonna be this first one here. So I'm gonna open it. So we wanted regular and we wanted bold. You can see here I've got both of them added. As you scroll down, you can see the different weights that you can select.

[00:06:28]
So like I could download every single font weight for this, but it's gonna bloat my file. I don't need them all, we just need regular and bold. So you can select them here, and they'll show up on the right panel. So, there are two ways that we can get custom fonts in.

[00:06:42]
Let's start with the first one which is to download them. So I'm gonna click this Download All button and I'm gonna unzip it. And when we go in, you can see we've got this static file with our font TTF files. So I want to take a bold and regular font weights and move them into a new folder called fonts.

[00:07:09]
So first let's go and create that folder so we can save our font files, New Folder, Fonts. And now I wanna drag them into this project. So I'm gonna get out of full screen mode here. So we've got Inter Bold and Inter Regular, and I'm just gonna drag them in like this.

[00:07:30]
Cool, so, they're both here now. Obviously, I don't render anything in Visual Studio Code, but now we've got our two files here. Let's go back into full screen mode. So, in order to use these 2TTF files, we need to create two font-based rules in our index file. So above this body selector, we're gonna use the font base, here.

[00:07:52]
So font base and inside the curly brackets we wanted to find that font family. In our case, it's Inter. Now because again, this is not space separated name, we don't need the quotations around it. You are welcome to add them as well. So our font family is Inter, and the source, the source file, is gonna be a URL, so it's in our fonts folder.

[00:08:16]
We need to go up a level, remember, cuz we're in our styles folder, so we go up one level to the root and we need to go into our fonts folder. And the file we want for the regular weight is the Inter-Regular.ttf. I am gonna do the same thing for bold, so feel free to do that.

[00:08:34]
I'm just gonna change these to the bold values, inter-bold and inter-bold, like that. So those are our two font based declarations. Let's update our font family here and see if it actually worked. So if we change the font family in our body element font-famil,y Interbold, let's see see if intervals works for us.

[00:09:05]
We can see it's loaded. So that's how you're going to use downloaded font files. If you're working on an enterprise app with proprietary fonts, this is probably the way to go unless they're on a CDN. But we can also use the Google CDN, so we don't have to download and have these files in our project, right?

[00:09:27]
They provide links here. So let's copy these two link elements or I guess why is it say three? Yeah, okay, there are three, copy these link elements, Put them in our, Project above our stylesheet here. So, when we go back here we can see it shows you how to actually declare this as a font family now, font family inter comma sensor.

[00:09:57]
Remember this is the fallback, global font or generic one. So to see if that's working, we can get rid of these font face declarations now. And change this to Inter. We'll do san-serif. It did in Google. And it's working. So notice that we don't have to have two font families defined like we did with the font base rule.

[00:10:29]
We can just change the font weight value to bold and it will work. So, instead of saying like inter-bold we can say it font weight, it's not bold and now it's bold. So that is one difference. So, you can actually go ahead and remove these files, we don't need them but I'm gonna leave them there just so you can see how to play with them.

[00:10:53]
If we go over to our speakers page, it doesn't look like the home page at all. We're missing the orange background, we're missing the font, the links are still blue and purple and underlined. So this is because we have to import the stylesheet on that HTML page as well, right?

[00:11:13]
So we could use the same index.css file on the speakers page, but if we go back to our design files, you can see the styles are pretty different across these two pages. Speakers is white background with orange text, and home is orange background with white text. So I'm gonna separate these into two different styles.

[00:11:32]
Style, what's the word I'm looking for? Files? Yeah, files. So I'll make a new file called speakers.css here. I'm just gonna import that into the speaker's HTML page, so I don't forget and wonder why styles are not being applied. So remember, it's the link tag rel style sheet.

[00:11:51]
And the href is going to be styles, speaker css, like that.