Day: January 11, 2025

Music Hi, my name is Kevin and I’m an educator and content creator with the goal of helping people fall in love with CSS. I created this course to explore all the different ways.

We can use modern CSS to create really awesome websites In this course.

You’re gon na be learning how to create and deploy a multi page website based on a Figma design.

We’re gon na, be breaking down the design and creating a plan of attack before we dive into the code, And then we’re gon na explore how we can write maintainable CSS with the help of a lot of modern features We’ll also Be looking at, how we can, make sure our website, is accessible And we’ll, be using version control, as we go through everything, including merging, branches while we, add new features to the site, And how.

We can progressively enhance things with modern CSS features as well Use.

These modern CSS features to go and build some amazing websites.

The other thing I need to think about now, actually, because we were working on our site header And we’re gon na be getting into more pieces along the way Is the site header a layout, Even though, and actually we could even call this site header Layout, if you wanted to instead of inner just to be more clear, I use inner cuz it’s what I’ve always used, but if you like layout cuz, creating a layout that works So because it is something where we’re controlling a layout.

The first thought would be let’s put it in my layouts layer, cuz, it’s a layout, But as much as possible.

I like using my layouts layer for generic layouts.

These are things I could just plug and play and use absolutely anywhere, Whereas if it’s something that’s specific for one use case, and it should only be used within this one area that’s where I like actually coming in and creating a New layer, So we’ll come in here. I’m gon na collapse.

The base one again just to clean things, up a little bit collapse them all.

And after my layout, but before my utilitites cuz, I like having my utilities as the last layer to give it.

The highest importance is to do a layer of components which are just sort of these one off pieces.

This is my site header, I’m only doing site header stuff Or it’s, my site footer or it’s, gon na be the card or other things like that, And so I can do my site header.

I don’t know if I need to style anything on that right now, so I’m not gon na put that selector.

We might need to have it after.

We probably will, But I’m just going to do the inner right there throw display flex on here.

So we get two columns and you can see right away that they’re going next to one another.

And then I can do a justify content. Whoops justify content of space between If you get mixed up between the different spacing things or even justify versus the line items, It’s the same as a lot of beginners when very early days, when you’re using margin and padding it’s easy To mix them up, Try one if it’s the wrong one, you do the other one.

It’s easy enough to switch between stuff, as you’re learning them, But I want the space between so it pushes them as far apart as possible.

Then we could do the same thing insie there just for navigation.

I think everybody is used to doing that.

So in my nav I have my ul that’s in therewe could so I can select my primary navigation And in this case I’m just gon na use nesting cuz.

I find it a little bit easier If you prefer not to use nesting.

This selector could just be your primary navigation UL like that, So primary navigation, UL and I can do a displa flex gap 1rem And that comes together And Flexbox is really awesome.

I made a logo there.

There we go.

Flexbox is really awesome because it just stuff happens when we use it Everything’s going next to each other. It looks really good The problem with Flexbox.

Is it sort of tricks us into looking like it’s responsive? But what happens is when you get to these smaller screen sizes.

It just causes overflow, Because the elements flex they go next to one another.

They don’t do anything from there And then we feel like we need to come in with media queries or come in with other solutions, But as much as possible talking about intrinsic layouts.

So the idea here is with your flex.

We can do a flex wrap.

I’ll wrap on that.

So now, when this runs out of room instead of getting stuck there, it’s gon na wrap and go underneath, And it’s really really simple.

The one thing is, they do get really close to each other, So you could also put in a gap here.

Whatever space you feel like is appropriate just so it wraps before they actually touch each other cuz. It looks kind of ugly if they’re touching each other, And just like that.

We have something that works across different screen sizes without having to come in with a media.

Query decide where a breakpoint is stress about any of that.

The browser just figures it out, based on the space that’s available, I would actually argue putting the Flexwrap on the UL – is also a good thing Just so, if ever those once that wraps like here, these can also wrap as well.

Hopefully you’re not on nobody of your users is on a screen this narrow, but it just makes it a bit more robust And you don’t have to worry about it, which is always really handy.

The other thing I’ll say with wrap.

If you’re using, it is when things wrap, the visual spacing looks different when it’s between the rows and between the columns.

So the visual space between Discover and Mushroom Guide looks pretty narrow compared to the visual space between the Discover and the FAQ.

Even though it’s actually the same amount of space, It’s using the gap of 1rem part of that’s, just how Font rendering works there.’s often a little bit of extra space on the top and the bottom of fonts, And there’s just this trick of the eye thing that happens So the combination of both of them, the spacing, always looks a lot bigger.

So usually I’ll use the shorthand here. 0.

5, maybe And then same thing here: 0 5rem, So it’d be 0 5rem on the top and the bottom And then a 1rem on the left and the right just so visually.

It looks a little bit more balanced out It’s, not something you need to do, but most of the time when I have wrapping, I do find I have the top and bottom wrapping end up being smaller.

The only exception to this was, if it’s, not text, if it’s, things that have background colors and padding on them, then you’d want consistent, spacing all the way around, But it gives us a nice mobile navigation without having to stress about It or do anything I use this on my personal site, It’s so much lower, friction and so much less work to getting something working.

The last thing I will do is just do very quickly.

I said we probably need it site header.

You could even do this on the inner but padding block 1rem to add some just so it’s not touching the top of our screen And giving us a little bit of space on the bottom as well.

I love Bento layouts, they’re quite popular right now.

This isn’t the fanciest one in the world, but we also have to make a decision along the way.

If we look at the design, we have the really small size Where they’re, just stacked. Nothing too fancy it’s already working, And then we have the large size that we have now that looks something like this.

We could also build in a middle ground.

This would be somewhere Again if you’re, actually working with the designer a discussion with them, because they didn’t provide it, for you could be really useful.

But if you don’t have anything in the middle, then you just get to decide what to do And we’ll build in a simple little middle, where it’s two columns, and then we’ll go up to the three here And my Faq is right here, So I did the wrapper and then I put all my cards in there.

So I will come right here.

After my wrapper.

We could call it faq bento, You could just call it.

Faq faq grid a name that makes sense to you.

You might be wondering why I’m saying bento: It’s just the name that people give this type of layout, because it looks like those bento boxes.

You can get for food where they have these types of shapes in them. So if you look up bento layout for inspiration or design or anything, if you want to build a layout like this, If you look up Bento, you’ll see all sorts of awesome layouts that use this sort of mixed spanning grid thing.

So I can put that at the very top shrink, all my cards down, so they’re not getting in my way and then after that last card close that div.

So I have the Bento grid and then I have these four coming in there.

If we go back to my styles, faq bento – and we can come up with something fun here – And this is again talking about the utility classes versus components that are reusable versus just one off things.

This is definitely I wouldn’t wan na have to build something like this with the utility class.

I find it just doesn’t work.

We know that it needs to be grid cuz.

I said so LAUGH.

So we’re gon na do a grid with a gap on there, And I can see if it’s working just cuz.

I should get my gap in between them And again. Don’t be scared of doing a really big number.

Just so, you can see if it’s actually working And at small screen sizes.

We’re done that’s it now we wan na come in with larger screen sizes, And up until now we’ve been using the media query of 760.

So we’ll start there, But I’ve a feeling that we might need to change this, but we’ll just say the width is greater than 760 And we want to come in with a more complicated grid.

Now so we can add some columns.

Let’s do grid template columns or let’s do the biggest one cuz.

We know what that’s gon na be, And then we can fill in the middle ground after actually cuz.

I think that makes more sense At the large screen size.

We need three columns is the way I see it.

It can be sometimes hard to know this one’s not too complicated. Sometimes you only need like six columns to be able to do what the grid looks.

Like My suggestion is anywhere, you see a gap.

Just draw a straight line going through, So I see I have two vertical gaps, so I know I need three columns.

I’m also gon na need two rows.

I tend not to declare grid template rows unless I really need them.

So we’ll see if we can get away without it this time around, So we can say, repeat: 3 1fr cuz.

I know I want three columns and that means when we hit that break point, we get our three columns coming in awesome.

It’s a good start.

If you use grid template areas, you can control most of the layout changes that are happening without touching the children at all and just manipulating everything here on the faq bento.

So, even at the small screen sizes I’m gon na do a grid template areas. This is one of those weird CSS things where I’m gon na.

Do it on a separate line, but I’m gon na write card one and it’s, weird cuz, it’s in quotation marks And I don’t know why they decided to do the quotation marks the way they did.

It works well, but it’s this other thing with grid that’s different from anywhere else.

You would do things card three and a card four, And what this is basically doing is saying.

I’m gon na have one two three four rows.

The top row is gon na have the name of card one.

The second row is gon na have the name of card two.

The third row is card.

Three.

The fourth row is card. Four, Then, what I can do here when I have this larger screen size and I have three columns.

Well, I can come and look at that – And I can say you’re just drawing it out, basically so grid template areas.

Once again, I like being on a separate line once again, But now this is where it gets a little bit different.

Cuz I say card one is gon na go in my first column in my second column, but in the same row I need the card two.

So card two, It’s all within the same set of quotation marks, but with a space between them to differentiate that, by being in the same quotation, marks it’s saying it’s the same row.

But now I’m defining two different column names there, And then we need this third one over here For that.

Third, one before we decide which card that is, let’s go.

Look at the smaller layout cuz that’s actually my fourth card.

That’s all the way at the bottom, according to how we wrote our HTML cuz HTML, followed this layout that’s right here.

So that means here oops let’s go find the layout again. That means here this is actually card four, so I can come here and write card four, And then we can come down onto another line.

Put another set of quotation marks, And now I’m working on this second row that’s down here at the bottom.

We have card three and then we have the second column.

The second column also needs the same card in there, so I can just say card three again And then we’re in the last column.

We have card four at the top.

I want card four also to go all the way to the bottom, so I just write card four, And that would be fine, but whenever I do a layout like this, I always wan na think of what, if I took one of these out and added a New thing in there Or what? If I just wanted to switch the position of two cards, So they come back and they go actually Kevin.

We really like this one here to go here and just gon na shuffle them all in a different order.

I don’t wan na have to move them in the HTML and then remember which class names they all need to have.

So this is one of the few cases where I think the best option is actually using nth child.

So that way, whatever order they are inside there, they’re just gon na get positioned into the right place, and it becomes very easy to do So in here. I’m gon na do nth child 1 guts, a grid area, and this is where it’s kinda, weird cuz, you don’t use quotation marks anymore.

You just write grid area.

Oneth Up here is plural cuz.

We’re defining multiple areas.

We’re, creating the template of all the different areas Over here is just grid area, singular cuz, we’re assigning it to one of those areas And then, as you might guess, 2, 3, 4, 2, 3, 4 and 1, 2, 3, 4, And now each One of them has been assigned based on the order that they are, and if I did that properly, you should see there we go.

Our layout is sort of coming together.

There’s some issues with it granted, but at least everything is going where I expected it to So.

These two first ones just sit in the top one.

This one stretches all the way down, and then this other one is living over here.

So here, where we have our filter cards, we can bring in that document startViewTransition And then in here we want to do an arrow function like that, and then we can filter our cards. Sorry that should be strapped, no, it doesn’t and then we just close the parentheses there at the end, And now when we come and we filter our cards, you can see that it’s fading, Let’s go to Summer.

It fades over instead and let’s go back to All and All, and you can see the cards sort of fade in and out.

This probably be more obvious.

If I make this bigger, so let’s do it like that and then there we go.

Looks nice and pretty And we have the view transition working no match it still sort of fades around instead, which is just a really nice way to enable this a little bit nicer of an animation happening Now.

The animations are fine when they’re filtering.

This way it looks kinda nice they fade in and out, instead of it just absolutely changing right away.

But this is the type of situation where you can very easily make things look a lot nicer And that’s, because we can add some movement going around if one of the elements moves And that’s, because right now, what’s happening is let’s say I go to Spring and I have my False Morel that’s right here and then I go back to All that.

False Morel is still on the page, but it’s moved all the way down to here And right now.

It’s just fading between one and the other cuz. The browser is not aware that it’s the same element.

If that makes sense, It’s, updating there’s a whole bunch of new stuff there and it just fades everything into place.

But I could actually tell it that’s the same element and that, instead of fading from there, it’s actually gon na move it from one place to the other.

For this to work, every element needs to have a unique view: transition name And view transition name is a CSS property and it’s one of those things that’s a little bit frustrating if you’re, not using JavaScript Cuz.

If you’re not using JavaScript, it means you’re just doing nth.

Child 1 view transition name nth child 2 view transition name.

It can get old really fast With JavaScript and if you are using view transition names unless it’s for one very specific thing, I would strongly recommend doing it with some JavaScript, like we’re gon na do now for all of our cards.

So for this we already have our cards and we have a ForEach going right here, but I don’t want to include it in this ForEach statement.

Cuz, this ForEach is getting every time we filter our cards.

So, every time I change to summer, we’re firing that again cuz, we’re filtering through the cards that are there And I don’t wan na make the browser re put all of the names on there every time cuz. That just seems like overkill, So just at the beginning, when the page loads, we can have this come on all of the cards and then they’ll just be there all the time, and it just does it once.

Instead of every time we filter our cards.

So we can say cards ForEach.

Once again, we just say in here we’re gon na say card, But we’re gon na look for two things: we’re gon na do a card and the index cuz.

When you do a forEach, you can keep track of every time it loops through, and it knows the number that’s coming in there And we can do our fat arrow, our curly braces and do some stuff with these.

So for this we’re going to say: const mushroomid is equal to I’m gon na put back ticks here just so it makes it a little bit easier to write what we’re doing.

So we can say that we have our mushroom and then we can come in with a dollar sign And then, by doing this we have a string here and then inside of this we can put some JavaScript So in right.

There whoops So in right there between the two parentheses, I can say index 1.

The reason I’m doing 1 is cuz.

The first index would be 0, so just count from 1 and go up And then so that’s gon na keep track of the ID ForEach one. Then we just have to do card style, viewTransitionname is equal to and then we put whatever we want it to be.

So once it again, I’m gon na use back, ticks here and just say mushroom card, and then I can put a hyphen put.

The dollar sign put in the parentheses or the curly braces and then put in my mushroomid.

Nothing should look like it.’s changed, But if we come and take a look at each one of our cards, we should see let’s put this back on the side.

Let’s be a bit easier to see And we can grab that card and I can see there’s a view, transition name and mushroom card mushroom 2.

Maybe it’s not the best name in the world.

It really doesn’t matter.

So LAUGH, I guess we could maybe take this mushroom off and just have it as card There we go so now we have view transition name card mushroom, 1, the next card.

After that will be our view – transition name card mushroom 234.

As long as every one of them is a unique ID, it really doesn’t matter, You just need them all to have their own view, transition name and then, just by doing that now you’ll see that they actually slide around. When we’re filtering them Cuz, the page is able, or the browser is able to keep track that okay, these are the two same things when we’re going from the old state to the new state, So, instead of just doing a cross fade animation.

When it actually takes a picture of the before and the after state, So in that, when it’s doing the transition now, it can actually move the thing across which is magic.

Music, .

As found on YouTube

Traffic Blaster AI Reseller Diamond