Hello, everyone.
Now, in order to access each of our articles, we have to manually type the executive order into our
browser.
So we need to do something so that we can click on the link to access that particular article.
So for that, we will post our article list page so that it actually displays a list of our articles.
And if we click on the article, it will take us to that particular article.
So for that, we need to go to the airport and we need to come inside our article list company and now
we need to import tactical content.
So you're right.
And I think the content from the article content and now we need to map all the articles, but before
that, we will do some styling.
So we need to add some glasses.
OK, so after this X1 tag, I'll take that last name that is going to be container padding from top
and bottom for Max Portal.
And let's close those live and inside this baby will take one motive and we need to add some class names.
OK, so last name and that is going to be Serap and minus margin.
Minus margin for and that's closer.
Close this as well.
And now we will map the articles.
So this is I articles about math and the articles.
Then we will be indexed so we can use this as a team and they can add a function.
And inside this we will do and we will add that is going to be index and we will add class names.
So I think that is going to be fighting for medium device, which will be our focus.
So I do something like this and now inside this.
Okay, we need to close this too.
And now inside the system, I'll take one more do with the last name.
I will be full border to border, but we need for border color study border three two hundred border
opacity will be 60.
So rounded energy and overflow.
OK, so overflow.
Let me close those.
And now inside this, do I will take the link so Ling Ling component is a capital and if I click on
this, it will automatically import this component.
Also, there has been no mistake.
This is article content.
So let's see this and I'll pasted.
Yeah, OK.
We don't need to have this to say this article but map.
So there is a link component and this will add a plot so to and then we need a to and you're allied
article buddy slash article slash and then a dollar sign the legalises open post article name that's
losers incompetent and inside this link component we need you again.
So we have not added image.
OK, so we need to add images years.
But before that let's complete this photo image to last name.
That is going to be L.G..
Out of that image is going to be forty eight by thirty six.
So many ways the hype will be thirty six will be full of color and object center and so forth.
That is going to be article start coming this way.
Need to create in our article content.
But before that let's finish it off and take this long and explode this image.
OK, let me see this.
So now we need these images.
OK, so for that I will add one more property, which is something that is going to be splashed by the
flash images flash blog one comma.
And I copy this.
And I know this will be a blow to.
This inmate's name will be blocked.
They say this and we need to create images in this public folder.
So inside the public folder, create a new folder and remain with US images.
And I've already seen some images in my desktop.
So let's go to my desktop.
These are images which, as you will get all these images in my GitHub link.
OK, so let's open that.
So now let's go to the poll and I was back on the images and this image is Florida, so let me drag
this in.
This image is Florida.
So now we have like one, two, three.
And they made this photo like this.
You will get all this from I.
OK, now, not only if I go to the browser and if I refresh these images on the more visible, let's
go back to article dot com in spending.
Is this fact and it is in the public for the rest of the year that we'll see.
OK, but let's finish it off first.
We need some better graphic background and after this link component, we will do with that last name
citing six.
Let me this.
And intent is to feel confident he will be next.
Remain in the park, so to speak, and then we need a back splash article, Slash's dollar record,
and then we need to write an article, not name, OK?
And we will lose funding from you.
We need to close this back, OK?
And inside this thing, confident they can beat back so extreme.
And so this is the time we need to give the article title.
So article title.
And we need to add some cases classes in this as through actual class name.
And that is going to be title, font, text, large font medium.
These are all tailwinds versus classes if you want to check it on their official website.
Nine hundred and margin bottom will be OK.
Let me save this fight and let's check it in the browser so you'll be getting the links.
OK, if I click.
So it will go to that particular page by click on this link.
It will go to that particular place.
But still we are not getting the images so that I need to check and we need some text.
OK, so document stated in the paragraph after this link component, I will take up the tag and instead
the speed that I will enter content.
So article not content on the zero element be any such thing and that is going to be from zero to one
twenty five words.
OK, and after this I ellipses so we can make the user feel that that is some more text.
Let's go back and as you can see, we have we have added some text here and the ones that have entered
you can see da da da.
So let's make it 120.
So this looks much better now.
OK, we can use a little bit more.
So now the entire box is looking good, but we are using the images.
So let's go back now.
What we need is a little more button.
Okay, so for that after that we tag the can to learn more.
So div.
OK, but also we need to add some Cyesis classes so let's do it.
So class name that is going to be leading relaxed in bottom three.
That's it.
And then we need to do that.
That last name that is going to be selects item center.
So that is and done internally.
Take the components so long.
Last name that is going to be in Biegel.
Five hundred then we have in flexed then we need items in medium device margin bottom will be through
in the larger device.
Margin bottom will be zero then we need a box.
So to an inside that will go back to slash article slash record Arctic Circle name.
OK, and now we will close this link tag and inside this we will learn more.
Dun dun dun.
OK, if we say this, if I go back years ago and since you have written learn more and you click on
this, it will take to the space more.
So now what we need is the images which are missing.
So let's work on that.
So that is the final thing which we wanted to do for the those images that one dot jpg misspelled.
But let's copy this you.
Let's say this and go back.
Now, as you can see, we are getting all the images as well, if I click on that immediately, because
that particular article.
So now we have to have something which is dynamic, so if you add more content here.
OK, if you add more content, let's say two fourth one, so it will automatically come here.
OK, so we don't have to manually read all the pages.
So this is how it works.
So we have successfully created the article list page.
OK, so this indigo color is missing.
So let's check it out.
So if I go to Africa on this Flight 17, people say this is something that full text Indigo 500.
So text Indigo, five hundred acres in length.
Let's let's check it out now you can see the link, what is below the to more taxes and a different
color.
If I can speak to that particular speech, the just looking much better.
So this is how we have to the on this page the subject for this review and in the next video.