Instructor: Let's now finally go back to coding.
And so, in this lecture and the next one,
we're going to build a beautiful accordion component.
And it's going to be based
on this accordion example that we saw in the last lecture.
So, we're going to build something very similar
which will look like this one on the right side.
So, let's go do that.
And, as always, when we start a new section,
we need our starter files.
So, here in starter.
Now we need folder number six.
And so, actually, this is only two images,
but, well, we will need it.
All right, so folder number six,
here let's create a new window.
And another trick would actually to be simply dragging
this folder here onto that icon.
So you can do that.
So, like this, it will then open up a new window
already with that folder selected.
Or, of course, you can also just create a new window
and then open the project folder from there.
So like we have been doing up until this point.
So, both way works
and I actually prefer the first one that I showed you.
And so now let's start by creating an HTML file right here.
And we're going to create six components in this section.
And so I'm not going to call them index html
but instead I'm calling this one 01accordion
like this .html, all right.
And since we are having so many files,
I will actually keep each of these components here
self-contained inside of each HTML file.
So what that means is
that I will not create an external CSS file
for each of them,
but, instead, we will simply use the style tag right here.
So, to create the html,
we have been always using it manually,
but now let's actually have VS code generated for us.
So, exclamation mark, tab, and there we go.
So now the first thing is to change this
to accordion component.
And then remember, we can simply declare
or write the style tag in here.
So that will then create a style element
in which we can style our page.
All right, now I will actually use a similar visual style
than the project that we created in the last section.
So, therefore, what I'm gonna do now is to open the CSS file
of that one in order to copy some very simple styles.
So, let's go here to the open menu.
And then on the desktop we have the previous section.
And then actually I need the HTML as well,
so that I can grab this link here for the inter font.
So please go ahead and do the same thing now.
So, copy this link element here
which will include the inter type face, so font.
So that is done.
And now in the CSS we can get some of this stuff.
So, our spacing system, these colors, the universal selector
this reset so we don't have to write it all over again
because, by now, you already know how it works.
And then here, this body element as well.
So let's take that.
And so with this, we saved ourselves some time.
This here, we might actually not.
Well, actually, let's leave it there.
And then here I'm indenting this a little bit
to make it look better.
Let's get rid of some spaces and of this comment as well.
And here, actually we don't want that border in this body.
All right.
And now let's create a simple diff element here
with the class of accordion.
And now I will just write something here.
Let's say test.
Okay and so now we have something very basic setup.
So, we have some very simple styles for the body.
And so, let's test that by clicking here on go live.
So there we have our page with the live connection.
And if, for some reason, that didn't work on your computer,
you can simply also open the HTML file directly.
All right, but so this did work.
And so let's start by actually defining a width
for this accordion element.
So, our entire component will basically be this right here.
So let's select this element based on this class
and I will give it a fixed width of 700 pixels.
And I also want to center it.
And remember for that we can use the trick
of setting the left and right margins
to auto and the top and bottom to something else.
So let's say top and bottom, 100 pixels, and then again
left and right, we set them to auto
and that will automatically center this element
inside of its parent.
So, in this case, that is the body.
Just to see that, let's give it some background color
and, well, any color works.
All right, nice.
So let's actually turn that off again.
And now we can start filling up our HTML here a little bit.
And for that, let's actually take a look
at what we have here.
So, basically, the final result, which is this.
So you see that, basically,
this accordion has three elements.
So this first one and the third one are closed right now
and the open one looks like this.
Now, of course, we will not be able to add the functionality
here, so when we click here somewhere,
of course this box does not open.
So for that we would need JavaScript,
but, of course, that's not what we're gonna do
here in this section.
But, anyway, to get started we will actually only build
this element right here.
So, basically, only the open state like this.
So here we have a number, then we have this title here,
so some kind of text, then this I icon pointing downwards.
And then here we have a box in there.
So this box here contains this text and then this list.
And so, basically, it is this box
with this content here that is hidden right here
and right here.
Alright, so later we will then hide, basically,
this content here or actually here and here
and we will leave it visible right here in this box.
Okay, so the plan is to now create these four elements.
So this number, this text, this icon,
and then a box with this paragraph and this unordered list.
All right and then after that we will style them
and only then in the end we will care about the layout.
So the first thing is this number
and I'm simply going to use a generic paragraph element here
for all this text.
So that's zero two, and, of course,
it needs some kind of class as well.
So number then another P element with the class of text.
So let me just copy what I have there.
So how long do I have to return my chair?
All right, then we have that I icon.
And for that, let's actually use the hero icons again.
So heroicons.com, I think.
Okay, and now let's just search for that one.
Yeah, so it's the chevron down.
So copy SVG and let's paste that here
as the third child element.
Give it a save.
And, while it's already here in our page,
let's give it a better class name.
Let's just say icon.
And then, finally, we need this hidden box here.
So let's actually call that a hidden box.
So, since it is a box,
I will simply use the generic diff element.
So this one doesn't need any semantic meaning.
And so a diff is just fine.
So, hidden box.
And inside of that there is some kind of paragraph.
And while this one maybe does need a class
let's just leave it like this.
And here we need some blind text.
So I'm not going to copy that text, of course,
because remember that in VS code
we can write lorem like this
and then that will generate a bunch of blind text for us.
So just like this, let's see.
Now that looks kind of like the same amount of text
but if it's too much, we can just cut it a bit later.
And so now let's create that unordered list.
And remember it is unordered
because these here are simple bullet points.
And so in there each of them is a list item.
And now let's here again use lorem
and I will now cut this part here
and put that into the next one.
So paste that here now.
And now we'll do the same again
because that content, of course, is a bit too long.
Okay, and maybe let's leave that.
And so your content is going to look a little bit different
than mine now, but that's not really a problem
because this is always random.
Okay, so that looks good for now.
As far as the HTML goes, or actually we should wrap all
of this content here inside yet another one.
So right now inside of the accordion
we have number, text, and so on and so forth.
However, what we actually want in the accordion
is these three elements.
So these three items basically.
So this first, the second, and the third item,
of course, are individual elements.
So elements inside of the accordion.
But we right here have these elements as direct children.
And so that's not correct.
So let's simply create another diff called an item.
But this we don't want here, we want it at the very end.
All right, so that's better.
And now let's dial all of this.
And now it's time to use again
that trick that I showed you before.
So remember for that we just select something
then we can hit option or alt on our keyboard.
And then if I double click here again
it will select the next class.
And so like this
we don't have to copy paste them multiple times,
we can just do it all at once.
So again, I'm now hitting the option or alt key,
double click on this class, then on this class
and finally this one here.
All right, now I copy it.
And here inside of my style, I can now paste that.
And so now I can do this here a lot easier.
Okay, so almost done
because this is always like a lot of work
selecting all of these elements in the very beginning.
But now we're done with that
and so let's style them one by one.
And I'm gonna start basically with the visual styles
so of the number, the text, and this icon here.
And let's start with the icon actually
because it is taking up a lot of space.
So let's make it really small.
So remember that these icons were designed for 24 pixels
and so I'm actually respecting that size.
And now the color
remember we can manipulate it using the stroke property
and we have our color of value up here
Okay and that looks a lot better already.
Okay, let's take a look at our original here.
And so next up, let's dial the number and the text
and let's use the font size of 24 pixels here.
So number, font size, 24 pixels.
And let's also make it a bit bolder
because this is an important piece of content.
And so we make it bold
in order to give it some more emphasis.
Now, and also the text color.
Let's make it green at this point, even though,
a bit later, we will actually make this in a different way.
So let's copy these.
Or actually if it's exactly the same style as the text here
let us put the selector here as the second one in this list.
So remember, as we learned way back
we can basically create a list of selectors.
And so now this declaration block here will apply
to this one and to this one, right?
Give it a save.
Now we cannot see it, but there you go.
Great, now next up,
let's style this text here and this unordered list.
All right and I didn't give them a class.
So let's just say hidden box
and then select the P as a child there.
And here, all I want to do is to
improve the line height and set it to 1.6
and also give it some margin to the bottom.
So let's say 24 pixels.
Okay, so that looks better.
And now finally, also the ul.
Okay, so we want to set a lighter text here on these.
And so, in order to do that,
we don't have to select each of them
but instead we can simply set that color
on the parent and then that will move down.
And so that will then be inherited.
Now about that lighter color, this one here
let me actually get that from the open color again.
Open colors.
So that is this one.
And let's use this one here, let's say.
All right, well that's a little bit too much
on the light side, so let's go with this one.
Yeah, that looks better.
Maybe it is not really the best choice here
in terms of accessibility, but, well,
let's just leave it as this for now.
We're gonna worry about that in some other project.
So in the next section, actually.
Now here, we need to then also set some margin on the left.
So, basically, in order to align this a little bit
so the bullet points with the P, with the paragraph,
so margin left and now 16 pixels, that might work.
That looks aligned.
Well, maybe it needs to be a little bit more.
Yeah, that's correct.
So here we broke a little bit our system
but in this case it was necessary
because only with that value it's now perfectly aligned
and actually not yet.
I think now it's perfect.
All right, now next we want to create some space here
between these items.
And so now it's time that I will finally
show you something new in CSS,
and, in particular, in Flexbox.
Now, you might be wondering, "Why is going to use Flexbox?"
I mean we don't really want these elements
side by side, right?
And that is totally correct.
However, we can still use Flexbox by doing something new
which I hinted at when we first learned Flexbox,
but we never did it.
So let me start by explaining why I would use Flexbox
for something like this.
And then also how.
So, in order to create the space between these elements here
I would now have to select all of them and then add a margin
to the bottom to all of them except for the last one.
So again, I would have to select them now.
I can actually do that very quickly,
margin bottom of 12 pixels like this.
And then I would also have to select the last one
and set it back to zero, right?
However, we can have all of this in a much easier way,
which is by using Flexbox and then setting the gap property.
However, that gap is usually horizontally.
And also if we set something to Flexbox
it will put the elements side by side, right?
However, there is a really nice and very important trick
which is that we can set the flex direction
of the container to column.
So let's remove all of this here, all right.
And then right here, let's set this to a flex container.
So, display flex.
And so by default, again,
the elements will be set side by side like this, right?
But, as I mentioned,
we can now say flex direction and set it to column.
So by default it is row.
And now if we set column
it will simply look exactly like before.
All right?
However, if we now define the gap property,
so gap, let's say 12 pixels, then see what happens.
So you see that now the gap property, basically,
was applied vertically.
So between these elements like this
and no longer horizontally, right?
So that is the power of flex direction.
And let's actually take a look
at a graphical explanation to make really sure
that you understand this very important concept.
Now, here as an example,
I'm actually using the accordion element,
but, of course, that's not important.
The principle is exactly the same.
So anyway, right here we can see what Flexbox is by default.
So the main axis is basically horizontally.
And the elements are side by side right now
because we have display set to flex
and we also have some gap there of 24 pixels.
And so that's why there is some space horizontally
between the items.
However, if we now set flex direction to column,
then what happens?
So you see that now, basically,
the elements are stacked one after the other
because the main axis rotated by 90 degree.
And so now the main axis no longer goes from left to right,
but from top to bottom or, in other words,
the main axis is now vertically and no longer horizontally.
On the other hand, the cross axis,
which used to be vertically, is now horizontally.
And so now everything is different.
Everything in Flexbox has now turned
by 90 degrees, basically.
So what this means is that now aligned items
no longer aligns the items vertically, but horizontally
and, in the same sense, justify content now no longer
aligns the items horizontally, but vertically.
And finally, of course, as we already saw in practice
the gap property now acts
like margin bottom and no longer like margin right.
Okay so this is really important for you to understand
as this feature is actually one of the main features
of Flexbox.
It gives Flexbox even more power
than we already thought that it had now, right?
So I hope that this made sense.
And so let's now go back to our code.
And to see this explanation, basically, again,
let's inspect that here.
So, right here,
we now see the gap there between the elements, right?
And we can even turn this on
and then it stays permanently just like in CSS grid.
And of course if we took out the flex direction to column
then they would be side by side
and this space here would be horizontally, right?
Now, let's also just try to use align items here
because, as you saw, this now should work differently.
So remember that usually align items would align
our flex items vertically, right?
But what do you expect will happen now as we center them?
Well, you see now they got aligned horizontally.
So again, if we turned flex direction off here
then you see that the alignment would be vertically, right?
So this one is taller and these are a bit smaller
and we see that they are vertically aligned.
But, by turning this on,
then everything rotates 90 degree basically
and now the alignment is horizontally.
So you see that all of them here
are like basically centered.
So, along the cross axis,
which now is going from left to right.
So here where I'm moving my mouse, right?
So now, of course, we don't want that here in this example
but this was just to demonstrate how the cross
and the main axis did actually rotate.
And, actually, I think this is too much space,
and that is because I did not reset the line height.
So, many times what I do is to set the line height
here on the body to one.
And so basically resetting it.
So since this is about text, this property,
it will get inherited.
And so we can put it in a body.
And so now the space that we had, or some of it is gone
and it looks better like this, all right?
So we have some decent visual styling going on here.
And so, for now in this lecture, that's it.
And so in the next one,
we will take care of finally building the layout
and then also add the two other elements to our accordion.
So, take a small break and then I'll see you back here.