Styling Our Page || JavaScriptFrameWork

Опубликовано: 14 Октябрь 2024
на канале: Coding Master

Our html pages look pretty boring and obviously this is no css course,

I got one if you want to learn more about css though but that's just a little side note

but this is no css course but still, it's important to understand how you can serve css in your

node apps too

because typically, you have css and also javascript code in your apps.

Now let's start simple,

I'm on the slash page here, so on shop.html and let's add some styling here with good old style tags

in the head section and this is not the way we'll keep it,

this is just so that we can work on it and auto-update this because importing an external style file

wouldn't work at the moment to spoil the fun already.

Now as before, you can skip this lecture

if you don't want to write the style together with me and you'll find it attached to the next lecture,

otherwise let's do this together.

So let's start styling this and let's start with the header.

Now I won't target the element directly instead

this will be my main navigation or my main header,

let's give it a class, main header

header,

this will be the main header nav and if you're wondering about the strange css class name, I'm using

a styling system named bem,

more on that can be learned in that css course I mentioned or of course you can google css bem,

it's a certain way of naming your classes to avoid double class names

basically, here I'll have my main header, whoops, header item list and here I'll have my main header

items like this and you can of course name this however you want.

So these are a bunch of css classes that should help us with styling,

now let's start with the header.

The header should have a width of 100% to take the full width of the page and let's say it should

have a height of 56 pixels

or if you want to work in rem which has certain advantages, we could also go with 3.5rem.

Now let's also give it a nice background color and here you're really free, I'll not stick to red but now

I can hover over this and use this nice color picker and pick any color you want,

now I'll try to pick a nice yellow golden-ish orange color, something like this

maybe, if you click on rgb it will also convert this to a hex code

so let's use that and of course the class is not header but main header. And now if I save this and go

back and reload,

we got that, looks better. Now

there is some padding in the body so

let's actually define that we want to have no padding and no margin,

I think it's a margin, that we don't want to have that, let's add this, looks almost better.

We still got some margin here at the top,

this is coming from our list in here though, that some margin call isn't doing its job here,

now let's also get rid of that. By now

also styling our main header

item list.

So let's copy that,

add a class here,

set the list style to none and remove any margin and padding

we might have here, that looks better. Now

obviously the items are not looking nice,

for this I will actually change the display here to flex to use flexbox for the list and then style

our items here a bit, on these items

for now I'll remove all margin and padding they might have, reload.

Now thanks to flexbox they're sitting next to each other,

now let's also style our links in there.

So main header item,

any nested anchor tag should have no text decoration and a color of white maybe, looks a bit better.

Now

vertical centering would also be nice

and for that I'll go back to the main header, excuse me, back to the main header nav here, let's add a class

for that too.

And here I'll first of all use a height of 100% because this is a child element of the main

header and therefore it should take all its height and this will also be display

flex now and we can center items vertically with align items centered now.

With this if I save that and reload this page,

now this is centered,

now let's add some padding to our main header.

For this let's go here, add a padding, top and bottom

I don't need padding but left and right maybe 1.5rem, something like this,

on mobile phone also still ok I'd say.

Let's also change the global font by the way

so in the body

I'll set the

font family to sans-serif for now,

looks a bit nicer than the serif font I think

and now I want to have some space in-between my navigation items there so

let's actually go to the main header item and let's add a margin to the left and right of 1rem, like

that

and for now, this will do.

#NodeJS #JavaScript #JavaScriptframeWork