All language subtitles for 3. A Quick HTML Dump

Now that our project is all set up let's open up our code editor find our app component HDMI file.

We're going to add in some each CML to create the first card.

So like just this one right here by itself we won't worry about the other two until we've really got

this first one put together.

I'm going to open up my code editor inside there I'll find once again the app directory inside there

I'll find the app component.

Each team will file.

Remember this is the file that we change anytime we want to change what the user sees on the screen

the inside of here we've got a lot of pre generated styling.

And each team L so we will select everything inside and delete it.

Now we can replace it with some H team l very similar to what we were looking at over here on the Bouma

documentation page.

Again we're not going to do an exact copy paste of this.

We're gonna have some stuff that looks very similar.

We're now going to write out a pretty good number of lines of HCM L in total.

I think we've got to write out like maybe about 30 or so.

So let's just get to it and get this part over with again inside my app component HDL file at the very

top.

I'll add in a deal with the class of card inside there.

I'll add in another div with the class of hard dash image gonna close both positives off right away.

Then inside the data with the card Image class I'll add in a figure with the class of image and is dash

or by RE and I'll close off the figure and finally inside of the figure I'm going to add an image.

And right now I'm going to leave at source property as empty.

But this is going to be the image that gets displayed at the very top of each individual card.

We'll figure out where we're going to pull these images from in just a moment.

So that's why we're going to leave it as empty for right now that's all we have to do for the card image

div.

So after that first inner div right there you go down to the right above the closing overall card div

and we'll add in the next big block I'm gonna put inside of here a day with the class of card dash content

I'm going to close off that div then inside there I'm going to add in a div with the class of media

dash content and close that one off inside of there we'll do a p tag with the class of title and is

dash for lows off the p tag.

And then inside of here we're going to put the title of our first card.

The title of our first card from our mockup over here.

It had said neat tree.

They're going to put a neat tree inside that first paragraph element well put in neat tree right there.

Next up we'll do the user name of the person who posted this thing so that's gonna go into a second

paragraph element a class of sub Idol and is Dash six oh close off the paragraph then I'll put a user

name inside of here.

So our user names are going to look like Twitter handles in general.

So we're going to have for this first one at nature I'll put in at Nature all right.

Now the very last thing outside of the div with media content.

So right after that closing element right there I'm gonna add in one more div with the class of content

and inside of here is going to be the actual description of the card and the image.

Essentially whatever is right here in the mockup I said saw awesome treat in my head today.

Sure we can use that.

I'll say saw this awesome tree bring my hike today and that should be at now at this point in time.

I encourage you to do a quick double check of all the each smell inside this file.

Make sure you've got all the appropriate closing elements.

Make sure you don't have any titles specifically around stuff like subtitle right here.

That is a word that for some reason my fingers never quite translate correctly into text once it's all

it's good.

I'll save the file flip back over to the application and we're going to see pretty much nothing.

Huh that's interesting.

Well if we look really closely at the very top left it looks like there's a broken image element right

there.

Remember right now we've got an image element without any source assigned to it.

But this is that image.

Let me tell you exactly what's going on here.

I default when bonus shows a card element or when we use I should say when we use Bouma to style this

card element it's going to apply a unlimited with to it.

Right now our card element is trying to stretch the entire with the screen if you actually scroll down

a little bit you'll actually see the rest of the card at the bottom.

There's our title there's the user name and there's the content in order to really make this thing display

correctly.

We have to do two different things.

First off obviously we need to put in a real image right here.

The other thing we have to do is apply a whip constraint to the image as well.

And I say it with constraints.

I really just mean we need to add some custom CSX that's going to try to fix the width of this card

to some particular value like maybe 300 pixels or something like that.

That's the next two things we need to tackle to get this thing working correctly then the next video

we're going to figure out how to add images into an angular project.

We're also going to figure out how to add in some custom CSX as well.