Name: HTMLとCSSで価格比較ページを構築する (Build A Price Comparison Page With HTML And CSS)
Uploaded: 2021-01-14T10:24:25.000Z
Duration: 27 min 53 s
Description: VoiceTubeの動画で発音を聞きながら英語表現を覚えよう！学べる英語：

動名詞

Hello, everyone Today is gonna be a special video because we're jumping all the way back to the roots of Web have simplified and making an HTML and CSS design, which is gonna be for a price comparison table.

法助動詞 A2

And now this is a bit of a special design because I posted my original design on Twitter and I said, Hey, give me any suggestions I can to improve this.

未来形

And quite a few people suggested changes, and then one person in particular posted an entire mock up a redesign of it, and it looks amazing.

So I went through, made all the changes that are design is gonna look just like this mock up and it's gonna be incredibly fun to do, so I can't wait to get started now way.

Welcome back to Webb has simplified my name's Kyle, and my job is to simplify the web for you so you can start building your dream project sooner.

Make sure you subscribe to my channel for more videos just like this one.

And he had started, As you can see on the right hand side here I have the incredible design that was supplied to me over Twitter for this price comparison table and on the left, I have a visual studio code project which just has to spg icons which you confined in the get have repo left in the description.

Or you can go to feather icons, which is where I got these icons from now to get started, we obviously need to create an index dot html file and we could just put exclamation point to initialize it with all the default values that we're going to need.

Now we can just title this as price comparison table just like that.

And now inside of the body, we need to get started by creating the main section for all over content to come inside of.

I'm gonna call it here a class of price comparison because there's gonna be holding our price comparison.

You can imagine this is gonna be a section inside of a larger Web application because obviously, just the price application on its own is not very useful now.

Next thing we need to do is create these columns because this price comparison is going to contain our three columns.

So it's create these were just gonna make them gives.

And we're gonna call them Price column just like that.

So now we have a div with the class of Price column.

You can imagine this left side if here, if I zoom in, this is going to be our main price column we're gonna work on.

And as you can see inside this price column, we have our heading section, which is going to be this dollar sign text month, the name of the plan.

This really light, faint line here you can barely see.

It's a lot more visible in this purple and then below that, all of our futures and our button.

So inside here, the first thing that we need to do is you want to create our price header on this price header is going to contain all of that top information that I talked about.

So it's gonna have this dollar sign and all of this numbers.

So the first thing we're gonna have is our price section, and this is going to be this very top three numbers appear this number dollar sign and the month So inside of here we can just have a dollar sign instead of here.

The next thing we're gonna have is our number, which in our case is 10.

And then lastly, we're gonna have the per month.

And this is just gonna have slush and O, as you can see here now, if we say that and we open up of life server, you're gonna be greeted with a very ugly rendition.

We have this so far, but this is just the HTML.

We're just trying to get this show of our content out before we actually start implementing all of the CSS.

Now, the reason that I put this price section inside of its own div is that we can put it all on the same line and civic and properly style.

Everything inside of here toe look similar.

But outside of that Dave, while still inside of our price header, the next thing we need to do is have the burning for the plan.

Plan, name and the plane name for this one is just kind of basic.

And Now this section right here is going to comprise all of our price header information and before we start moving on all the features and the button, I think we should start with CSS for this and try to break it down piece by piece.

So let's create that styles Nazi SS right here.

We want to make sure that we include that source here.

So link and we'll do styles Nazi SS just like that.

One other thing to note is we're actually using to Google fonts for this application.

If you go to the Google Funds website and add Poppins and Lotto font, you can just copy this exact code right here.

They'll give it to you on their website and just paste it in.

And then you'll have access to both of these farms for us to use inside of our CSS.

Over here and now, the very first thing I like to do in every single project that I'm working on is to make sure I set the before the after and the all content selector tohave box sizing flips box sizing of border box.

This just makes styling, wits and heights of elements so much easier.

The next thing I want to do is actually we're very lucky and had this nice design guide over here telling us all of the different parts of our application.

So I want to set up some variables for all of these design elements.

Very first thing is our accent color, so we can create a variable called accent color.

Next thing, there's a dark color we don't really need to worry about.

This border of light color is only used in one place.

We don't need a variable saying with his background color, but our fonts over here are used in multiple places, so we can have here a heading funds family, and this heading fund family is going to be Poppins, and we're also going to have here a fallback of Sands.

Serif hopes to serve now, as you see over here, says the body found, is SF Pro.

I ended up going with Lotto because it's on Google funds, so it's a lot easier to use So we're gonna create a body front family, which is going to be blotto.

And of course, it's going to have a fallback, which is going to be Sand Saref.

Now, if we jump over back to our design right here, we can see exactly what we need to do and the first thing we want to do a style, our body.

So if we just select our body here, the first thing I wanna do is remove any margin and we have on the body.

And we also want to set the background color to this nice, faded background color.

And if we look here, we have this background color right here, so we can just say that's f ate half nine f b.

And if we save that and go back over here, you see, we have that very faint darkish back on course is very faint off white.

How we could go back and start looking at this again.

And if I zoom out, you'll notice over content is centered inside the page, which is something that I want to do as well.

So we can really easily do that by setting the men with the 100 view with the men height, toe, 100 view height.

This means the body will take up the full height and width of our page.

Then we can set the display here to flex.

We can set the justify content to center and the alliance items into the center.

And now, if we look back over here, you see, our content is going to be in the dead center of our page.

Lastly, all we have left to do is to set our fund family.

And we want to make sure that's our body find family.

Sarah fund has changed, and it just looks a little bit nicer.

Now, in order to continue styling to make this all look good, we need to make sure that we actually have three different price columns.

So we have one more and let's look back at what the numbers are gonna be.

So this last one is gonna be 50 and this is for enterprise, and this middle tier one is gonna be 20 and it's just hopes pro freshen l just like that.

Now, as you can see, we have all of our different text on the screen.

Obviously, it looks terrible, but we have this price comparison class that we can use that's wrapping our columns toe, actually lay them out side by side so we can select that price comparison and we can change it to display flex, and immediately are contents gonna be lined up side by side.

Next, we could just say that we again want this to be in the center so we'll say justify content center.

But this time we're gonna align our items stretch, and this is gonna make it so that our items are actually going to stretch to fill the same height.

So if one of these is shorter than the other one, they're all stretch out to be the exact same height of each other.

Also, we're gonna set here a wit of 100% and we're also gonna just give a little bit of margin around the sides of one r e m.

That's all we need to do for a price comparison and a lot of these changes we're gonna come into effect were started styling our price calling.

And if you remember right, that is the class that we gave to essentially all the content in each one of these columns.

This is where we're gonna define our background colors, our border radius, all of our spacing.

And the first thing that we can do is we can set the background color toe.

字幕リスト動画再生

HTMLとCSSで価格比較ページを構築する (Build A Price Comparison Page With HTML And CSS)

accent

content

stretch

slightly