My name is Kevin.

And just in case you don't know me normally confined me over on my own YouTube channel where I talked mostly about CSS with weekly tips, tricks and tutorials.

I am so extremely excited to be here on free code camps Channel to bring you this tutorial or we're going to be looking at how to build out this page.

Now, this page has a lot of fun things to build out, and we're gonna have a lot of fun with it, because for me, I'm a CSS evangelist.

I love CSS, and one of my big goals with this not only is to build up the school page with you, but I also hoping to not only show you some of the cool things you do a CSS.

We're gonna call Paige.

We're going to see some cool CSS stuff.

But I'm also CSS gets a bad rap in a big goal of mine is too.

I hope you see the light a little bit.

I'm a big fan of it.

I'm hoping my enthusiasm comes through and wears off on you a little bit and helps you fall in love with CSS and see that?

Maybe it's not as bad as you might have thought it was.

If you're one of the you know, if you get a little frustrated by it every now and then we're gonna be building this out with just some plain old HTML and CSS and a little bit of JavaScript.

And near the end, it's a really simple build.

Um, structuring this way, it's all gonna be static files.

But I want to allow you to do what you want with it.

So if you're if you're coming from like reactor of you and you're looking for a portfolio, you could take everything you're learning in this and apply it to making something like that.

Or maybe you want to just up the game a little bit with a static site generator.

You want to build this with Jekyll or upgraded with eleventy or something like that and just make something really cool.

I want to leave the door open for as many people as possible.

So whether you're just trying to get something together, you're just comfortable with each moment.

CSS will be good to go.

But if you do have these, you know if you do want to take this and do something bigger with it, or bring in the language Is that you know, you should have no problem at all doing that now.

One thing is really important.

Before we get into it, though, is I am assuming you already know a little bit of HTML and CSS.

Um, this is not an introduction to each dementia.

Four people have already started using it in your building a portfolio now.

So hopefully you've done a little bit of stuff along the way to put into that portfolio s.

So we are going to be looking at using flex box and grid and custom properties and doing lots of fun things.

And while we're doing it, I'm going to do my best to explain why I'm choosing these options and how they're working out all of that.

But they're not in depth tutorials into any of those topics, because then this would just drag it out forever.

We do want to keep it a secret.

Spices we can.

I'm not gonna skim through it too much.

But assuming you already have some knowledge on these topics now, if you've never used one of those things that custom properties air grid before.

Don't let that scare you away.

They're not that scary.

They're not that complicated on.

Hopefully, they're a nice introduction in this project for you to get started with them.

And you could take what you learn here and start applying it outside of this project as well.

Now, if you want to be able to access this project, you can use the link that you're seeing right here on the screen.

Right now, that link will bring you to an Adobe X D file and I want to show you a few things with that file.

So it's going Take a look at it right now.

So when you click that link, you're gonna be brought to this page right here where you're gonna see the mobile and desktop options to look at.

You can choose the one you want to look at.

Let's go check.

The mobile went out first.

Now, one thing I don't like about this is it brings you to this comment view.

So you want to leave me a comment?

You're more than welcome to, but you can see here.

It's even flashing at us.

It's telling us that we want to come and look at this.

Specs One here.

If I go in the special and see, I can see the colors that have used to get the hex codes of stuff you want.

You can see the fonts that have used the font waits that had used and all of that information, and you can come through and look through everything there is in here.

You can click on things to get information.

You can copy the text that I've used, you can get the text properties, the font sizes of individual things.

Everything you need for all of it is here.

Now, there's obviously like the top of the left property.

Hopefully, you're not gonna be using.

Those are even the width and the heightened all of that.

But you can get the individual properties actually should have been looking up here.

You can see the font, the weight, the size, all of that stuff.

And if ever you need to go back, you click on portfolio website and then we can go and look over here at the full screen version of it, and you can get all the different things that you need to get from that.

So mace and easy to do, and you'll also right now it's not set up.

You'll also be able to download the assets from all of this as well.

So if you want the images that I've used is.

But ideally, you'd be using your own images anyway and not necessarily be, since this would be your portfolio site.

But if you want the sizes or stuff like that, the link should unlock all of that for you, and you should be able to download the assets if you want them.

So now we know everything we need to know to get started.

What are we waiting for?

Let's go.

All right, so here we are about to start the project.

I'm so excited because I love starting new projects.

So what we're going to be doing in this is just setting the very basics of it up, and one part of that just really quickly is I have supplied all of the images here in the Images folder, so those are the ones I will be using.

If you don't want to be falling along within scramble.

You want to be doing this on your own in your own court editor having your own full house.

What you can do is, um, in your script editor.

You can click on the little gear icon that you see there.

When you click on that, you'll get some options.

One of the Mr Download, the Zip, and when you download that, it will give you all of the images, along with any code that I have on the screen when you hit that download zip.

So if you do want to download it later on, when I have some work than to compare to what you've done, you can also do that if you run into any issues or something like that, if you are coating it on your own.

Or if you were completely in the script editor and then you want to download all the files at the end, you can do that.

This could be something you're doing with your own images.

You don't have to be using mine.

You know, if this is for your portfolio, please use your own images and set everything up the way you want to be setting it up.

So we do have a few things we're going to have to do to start this up.

So the basic document structure here, we're going to need our doc type html and we need an HTML open and html closed just like that.

Now, if you want, you can also come on your HTML and set the language to be English.

Or if you're setting up your sight for another language, of course you can go ahead and do that to whatever language your website is in.

It's not 100% essential to do that, but it does help things.

Know what language you're?

What's a dozen?

Of course, we're going to need a head so we can do our opening close head and we're gonna need a body and we can close our body like that.

So for the rest of this video, we're gonna be working in the head and then in the next one will graduate off into the party of our document.

So if we come and look here, the first thing we do is a meta tag for the car set of ut F meet Ah, that's just pretty much standard.

And there is one more meta tag we're gonna need here which is our view port.

So name is equal to view port and we're gonna do some content in here and are content is going to be equal to with equals the vice with coma, the initial scale is equal to 1.0.

This is to make sure that your website actually functions properly on small devices as well as big ones.

If you do not include this and you open your website on a phone or a tablet or any other mobile device, it will be like the desktop site zoomed out on your phone, which will just look terrible.

Eso This just ensures that everything will work responsibly and everything will be great.

And here we can do our title.

Ah, even calling mine Dev Jane Port Folio website.

The last couple of things that I'm gonna do here as I'm gonna add a couple of links, one of them is going to be to normalize, which this is actually already brought in by scrim bus.

If you're downloading through that little gear icon that I showed you, it will come.

It generally comes off a normalized in there already cause scramble by default uses normalized if you don't know what normalize is.

It's a CSS file That pretty much helps even out all the differences between the different browsers because there's not huge ones.

But there are some differences between them.

Still, it irons out some bugs, tries to make them all behave in the same way.

It just makes it a little bit easier tohave the website looking the same in all of our browsers.

And the other thing that I'm gonna bring in right now is the link to fund.

Awesome is you can actually copy this directly from the scream editor here.

But both of these I have got from cdn Js dot com.

So if you want to get other links two things you can always do that.

Now I have linked to the all thing year of fun.

Awesome.

I'm not gonna be doing a deep dive into what font awesome is, but we're using it for the social icons down at the bottom.

You only really need to access the brands one.

But I'm putting me all here just in case on your site.

You do wanna have access to more of them, but if you only need the brands you could always change that over either go to fund.

Awesome.

They will give you a unique link to use.

That's for if you only want the brands or, of course, from CD and Js.

You can also get that Brian's link.

We're also going to need to get into the Google funds as well as our own.

CSS file has added links here as well.

I'm not gonna be doing that.

I'm gonna wait until we're writing our own CSS before we go ahead and do that.

So because we will be waiting until then to put both of those in for now, we are completely done.

We're going to be moving into the bodies, setting up the header in the next video.

Look forward to seeing you there.

All right, so here's the entire project that we will be building.

And just as a reminder, you can access everything you need for this by clicking the link that is on the screen right now that will bring you to the adobe X d sort of link file thing that I have.

So it gives you access to all the text, the colors, the font information and fun size is the fund families all of that, if you want to follow along with how I've set it up.

But of course, you could just follow along with what I'm doing as well, but it can also make it so you can see it on your screen while we're coating because that could be convenient.

If not, I have also broken the different sections down into different slides that I'll be referencing back to as encoding things up.

But for this 1st 1 where we're doing the head or only header as the logo and the navigation in it, which is hidden away right now.

So I'm not gonna be opening this up too often in this video.

But both of those are there.

And again, if you do need to get that link, I mean a link to it in the description of every video.

So if ever you didn't click on it or you close the tab, you'll easily be able to access it again.

So let's come in here into my body, and the first thing we'll do is put in a header, and I'll close that header off and inside of my head.

Er, we're going to have a couple of things.

I'm intuitive class of logo and close, Def.

And inside of there, I'm gonna put an image.

SRC is gonna go to my image folder dev jane dot PNG Um, I'm gonna put in all tag on this, so it's for my alter text.

I'm gonna leave it blank, though, and a lot of people think that if you have all that, you have to put something on it.

You need to have the altar there.

It's important that you have your alternative text, but if it's something decorative and a logo, it's generally decorative.

You can have that just is a blank like that is perfectly fine.

You don't need to put logo cause if the person hears logo, it doesn't help them if they cannot see it in the first place.

So we can just leave it like that.

There is no problem whatsoever.

And then let's come down to here.

And I've put this in a div because maybe you want to set this up is an S o b g, or do other things with it.

So, you know, we could do a lot of different things and I were always styling the Div that it's inside.

Maybe this is text is different options that you can do.