hi my name is Jordan Hudgens and I'm
gonna walk through how you can build out
a fully professional website using HTML
CSS in JavaScript in just one hour in
addition to the video I'm also gonna
give you access to the source code that
I'm gonna be using so that you can use
it on your own projects together we'll
be building this portfolio website some
of the skills that you're going to learn
are going to be html5 css3 javascript
flexbox CSS grid animations navigation
fonts and how to use images many of the
HTML tutorials I've seen focus on
teaching the fundamentals first and
those are important but I've discovered
that many students actually learn better
by taking a project-based approach so
what we're going to be doing is building
out a professional HTML website and
you're going to learn the fundamentals
while you're building the project I'll
be following along in the comments
section so if you have any questions or
any recommendations or anything like
that please feel free to post those in
the comments and I'll get back to you
whenever I can and lastly if you enjoyed
the video and you feel like it helped
you on your coding journey please like
the video subscribe and we'll be adding
more to this channel so with all that
being said let's dive into the code so
let's go ahead and get started writing
code now right here I have the finished
version of the website that we're going
to be building out and in order to do
this we have just a couple prerequisites
so I'm gonna come down to some the text
editor and I created a prerequisites
file it's pretty basic because HTML CSS
and JavaScript
can all be compiled and can all run
inside of the browser then it doesn't
matter what operating system that you're
on I'm on a Windows machine but for my
day-to-day devel
meant I'm usually on a Mac or running
Linux Oh in for what we're building out
you can use any operating system the
only things that you're going to need
are a code text editor and then a web
browser so as long as you have these two
and the fact you're watching this right
now in YouTube tells me you already have
a web browser so for the text editor if
you do not have one then I wrote down a
list of potential options my personal
favorite is vs code and if you want
access to that you can just go to google
and type vs code download and it's
completely free and it's available in
all operating system so you can just
download it here
so I recommend right now if you do not
have a text editor to pause the video
come back after you have downloaded that
and installed it on your system so now
with all of this in place let's take a
look because a lot of people can teach
you the fundamentals they can give you
step-by-step tutorials what I want to do
though is describe exactly what my
workflow is because anyone can learn
syntax you could go read a book on HTML
and CSS and learn this syntax what I
actually want to show you is my own
strategy when I'm building the website
so if someone came to me and gave me any
kind of website I would go through this
exact process I'm going to show you here
and so hopefully that will help you
because my guess is as much as you will
probably build out some portfolio
application in some form or another the
reason why you're going through this is
so that you could build out any kind of
website and you could implement any
design and so my goal for this video is
to show you that process and then along
the way teach you HTML CSS and all of
those kinds of cool tools so right here
and looking at the finished product I
know I'm gonna have to do a few things
so let me start writing this out in list
format
so I'm I know I'm gonna have to and I'll
say these are my dues first I'm going to
have to build the project so that is
going to entail things such as you're
creating the folder structure adding
files connecting files doing things like
that so that's gonna be step one then
from there if we take a look back here
at the website if you look at some of
the components of this website you can
see at the very top we have a nav bar
right here so that's probably gonna be
one of the first things I build out so
I'm gonna say we want to build the nav
bar and as you saw it has two links and
a name so that is what we're gonna do on
the nav bar then from there the majority
of our time is going to be spent on this
grid so you can see we have 12 grid
items here so it's a four by three grid
over three by four depending on how you
read it so we're going to next build out
the portfolio item grid and that's going
to use images titles and descriptions
and as you may have noticed it also is
going to implement animations and so the
way we're going to accomplish that is by
using JavaScript so this is where we're
gonna implement JavaScript now we also
as you can see have another page so this
is our about page here so we're going to
also build out the about page and that
is just going to have a image it's going
to have a split column layout and then
from there it just has some content
okay so as you can see right here these
are four steps to building the website
and if you were coming to me as a client
and asking me to build this site the
very first thing that I would do when I
was handed is a design or I knew what I
needed to go build is exactly what I
just walked through I would walk through
the basic steps here because as you may
have noticed this gives me a little bit
of a to-do list so it's not incredibly
detailed you couldn't just go take this
and start building it but it gives me a
structure because I've discovered that
if I am just handed a project and I try
to go build it then I'm going to
procrastinate on it and I'm not going to
be very efficient but if I have a
clearly defined structure for what I
need to do then it makes it so I can
break that task into a bunch of smaller
tasks and then I can go and build the
system so this is what we are going to
do so let's start off with the very
first one which is to build the project
and the way we can do that is I'm just
gonna open up the Windows Explorer here
and I'm gonna put this in the desktop so
here I'm gonna go and say new folder and
you can call this application whatever
you want I'm just gonna call it
portfolio HTML site and that's it now
what we can do in sublime are in vs code
in sublime text and some of those others
it's going to be similar you go up to
file and then go to open folder and then
from there you can see on the desktop I
just click on this folder and what
that's going to do is it's going to open
it up as a project so this is going to
have everything that we need and so here
I'm going to give our very first step so
here I'm going to add the index dot HTML
file now if you're in one of the other
code editors and you can usually just
right click where you want to place that
and then you want to call this
index.html
and now with this file open what you can
do is start actually typing HTML code in
here now I have a little user snippet
and what a users snippet is is if you've
never used it before is it gives you the
ability to store snippets of code so
blocks of code and then you can call
them whenever you want so you don't
always have to type it in manually and
so I have created this little HTML one
and so if I click that then it gives me
this entire little set of code items now
not all of this is necessary for what we
need so I'm going to get rid of the ones
that aren't needed and then you are
going to be able to if you do not have
any user snippets on your system then
you can just pause the video right now
and type this out this is a basic HTML
skeleton so this has the doctype and if
you ever see code that looks like this
where it says doctype HTML that tells
you that this is a html5 website then
you have head tags which we'll talk
about a little bit later and then body
now this body this is where we are going
to place the majority of our code for
the home page so let's just this out
just to make sure that it's all working
so I'm going to use what's called a
heading tag so I'm gonna type in h1 and
then inside of this tag I'm just gonna
say hi there now I'm gonna hit save and
assuming everything works and what I can
do is just come here and then click ctrl
o or if you're on Mac command o and then
go and find wherever you save that file
so here it's the portfolio directory and
index and if I open it up you can see it
says hi there so everything there is
working properly so I'm going to and
also you can see this gives you the path
to the file right up here I'm
going to copy this and then go back here
you don't need to do that part but I
want to have the finished version and
what we're working on open at the same
time so that that way we can continually
go back and check to make sure that
everything that we're doing is lining up
with the final version so that is the
first part of it now that is only going
to get us so far though obviously I'm
gonna get rid of that heading tag and
now let's go up and if you remember some
other points that were needed were that
we need to have the ability to have
other files so this is going to be index
but we also want to have that about page
if you remember that so I'm going to say
new file about HTML and so now inside of
here I'm gonna do the same thing I'm
going to add that HTML snippet here and
I will get rid of the ones that aren't
needed and then inside of here I'll just
say about me and then let's add a
heading here and now let's do a h2 which
means it's gonna be very similar to the
first heading we saw it's just gonna be
a little bit smaller and it'll just say
about me coming soon eventually we'll
add more to this and now if you switch
over to the browser hit open again now
you can see we have this other file if I
open it up says about me coming soon but
it's a little bit smaller so that's kind
of what a heading tag represents so this
no longer has anything because we got
rid of that h1 so that is the majority
of our structure now the next thing that
we need to do is we need to add some
styles so as you may have noticed we
have a lot of styles going on here we
have all kinds of things that help with
alignment with colors with sizing images
that's all done by CSS so what we're
going to do is we're going to create
a CSS file that our entire application
is going to be able to use so let's go
back to our home page and I'm also going
to close out of the about because we're
not gonna use that one for a while and
now in the body I am going to just have
another placeholder here this time I'm
gonna say dot and then from there let's
just say placeholder because it doesn't
really matter we'll get rid of this in a
second and say I'm in a div now a what a
div does is it gives you the ability to
place components on the page so even if
you're in BS code and you hover over it
even gives you a little summary of what
it div is what it is is it's an HTML
element that allows you to properly
manage all of the elements on the page
so if you want to put some content or an
image or anything like that in a
specific spot on your site then placing
it in a div gives you the ability to not
only organize the code but also to
select it you're gonna be seeing a lot
of what I call and what is called
selecting as we go through this course
so right here I say I'm in a div and I
said this has a class of placeholder
when we say we have a class this means
that this gives us the ability to now
select this placeholder so in other
words it gives us kind of like a
benchmark or a target on the page that
we can go and we can say okay I want to
go and I want to grab this value so and
I gave you the cool little shortcut
where you could say placeholder like
that but in case you're not using a text
editor that allows for that you can just
type all that out manually so you can
say div class equals and then we'll say
another class here and here I'll say I'm
in
another class so now let's hit save and
I'm going to refresh this you can see
where it says I'm in a div and now it
says I'm in another class so both of
those are there but if you right click
and click on inspect what you'll see now
is you actually see the code and this is
the browser developer tool so chrome has
this Firefox has it pretty much all of
them have it I personally prefer what
chrome offers but this gives you the
ability to take a look at the code and
as you're gonna see it also gives you
the ability to test out styles which is
very helpful there are many times when
I'm building out websites that all spend
quite a bit of time just adding styles
and working on and working through the
developer tools here before I go back
and actually apply the changes now if
you do make any of those changes here
just know these are not permanent
whatsoever so for example if you went to
google.com here you can right click on
this button so that little Google search
button right here and you see where it
has a bunch of height items where it
says ok height is 36 pixels well you can
say well what it look like if that
wasn't the case or what would it look
like if this that was actually 236
pixels now you may write here if you've
never done any kind of web development
or whatever you may think that I just
changed Google's code that is not
accurate whatsoever this is only the
code that was sent to the browser so
whenever we went to Google Google com
that server sent us the HTML CSS and
JavaScript code when it's here in the
browser we can do anything we want with
it but that doesn't change it for
anybody else so this is simply the
browser developer tools allowing you to
make changes and so that's something
that as you start building out website
you'll discover is quite handy so what I
want to do the whole reason when adding
these little placeholder items here is I
want to add some CSS styles and I want
to make sure they're working so let's
now switch back to the code and I'm
going to come to index and I'm gonna
type out link and then you also can
obviously type this out manually I'm
simply doing this to save time and so
from here I'm gonna say Styles dot CSS
get save and so now what we have to do
is create this file here so I'm gonna
come here and create a new file make
sure that this is typed exactly the same
way so if you say style and styles and
it's not going to know where to find it
so I'm gonna say styles and so this is
gonna give me a new file here and now
what I can do is I can use CSS to select
elements on the page and then make
changes to those styles so let's test
this out the way that you can select an
item if it is a class so right here you
can see that we have two classes where
it's a class with placeholder a class of
another class the way you select it is
with a period and then the name so I'm
gonna say dot placeholder and now what I
can do is let's just test it out by
saying background color is red and then
now let's come here and let's pick out
our another class and this is
case-sensitive so if I did something
like another class this would not work
and so now what I can do is let's add
something else so this is going to be
light C green as the background color so
now if I come back here and hit refresh
you can see that that has applied the
styles so what has gone on right here
and you can see it's placed inside of
the developer
tools as well so what's going on is the
CSS file was added and you can click on
head here and you can see that now we
have this styles.css file inside of that
file we have a couple selectors one
found that there is a class named
placeholder and then it said for that
placeholder element on the page I want
you to apply a background color of red
then it found a style rule that said if
you find a class
it's called another class then I want
you to make the background color on that
light see green and that's exactly what
it did so we now know because of that we
now know that that is working and our
architecture is all set up
now just in case you're curious on what
would happen if you say you had the
wrong file name so I just changed that
to style now hit refresh and those
styles are gone now in the head it still
has this call but now it's pointing to a
file that doesn't exist so that was a
whole reason why I added those
placeholder items here even though we're
not going to use them is because without
them then we wouldn't be able to be a
hundred percent certain that the styles
were getting applied properly and now
the final item that we need to have all
of our architecture done is to add the
images you may have noticed if you go
and look at the final version here you
may have noticed that we have these
twelve images well those don't come out
of thin air so I'm going to add those
directly into our project so let me open
up the Explorer here and inside of the
project directory I'm going to just copy
over from over here I'm just gonna copy
an image directory now in the show notes
I'm gonna give you access to the images
so you can just come and download those
yourself so that you'll be able to
follow along or you can use your own
images and just in case if you're
curious on how I
all of these these are all free to use
and if you go to unsplash.com this is a
great resource for being able to search
for any kind of images and they're all
free to use so you can type in coding
and there are all kinds of cool coding
pictures that you can use for your own
project so that's definitely a good
resource if you're building out websites
for others so let's come back here and
now we have everything working now you
can see we have the images directory
this is going to have all of those
portfolio images and then it's also
going to have all of the logos now
obviously if you're building this out
for your own portfolio then you're most
likely going to want to have your own
images and your own logos these are just
projects I personally have worked on so
I'm including these for myself and
eventually I think I will probably take
portions of this portfolio and add it to
my own application my own personal
portfolio so I can use that so those are
all the files that we are going to need
so we have our first item on our
checklist completely crossed off we have
our files and our architecture all set
up so now with all of that in place
let's move on to the next one which is
the navbar so I'm gonna get rid of
everything here and I'm gonna start
building out that navbar and before I do
anything when I'm building out these
kinds of front ends I first just like to
have the content there because once I
have the content then I can rearrange it
I can see what I actually want to use
and then I can also see how all of the
code needs to be arranged so I know that
I have the two links if you remember we
have the two links and we can go and
verify that here so we have these two
links and then we have this little just
kind of a name this could be a logo or
anything but for right now I'm just
going to have it be text so I'm just
going to add first those things so I'm
going to create
it's a link in the way you can do that
is by giving a href and inside of an a
tag now if that sounds like a foreign
language do not worry and a tag is how
you define a hyperlink in HTML and href
is where the link points to so right now
it's gonna be index.html and I'm just
gonna say home now let's copy that and
let's point to our about file and then
here we can just say about and that's
all we need to do now let's switch back
and let's test this out just to make
sure it's working so there you go you
can see we have home and about now if I
click on about you can see it takes us
to the about page so in the very
beginning intro I told you we're going
to talk about routing that is as easy as
routing gets in HTML you really just
have to point to the file that you want
to reference and then it'll
automatically go there
so if I click home then it takes me
right back to where we were it takes me
to that index page now if you wanted to
point to an outside website so say you
wanted to say I want you to go to google
and you could just create a link and
instead of just passing the file name
you would pass the full reference so
this is called the absolute path so
you'd pass that and so now if you click
on Google now it'll actually take you
there so that's how you can work with
links and also how you can implement
routing in HTML so we have our home and
our about and then we just want to have
a name here so I'm going to put this
inside of a div and there I'm just gonna
give my name I'll do it in all caps
because that's what the designer said to
go with hit save and
if I come back here you can see it has
my name so yeah this doesn't look
anywhere near as good as this one but
that's where the CSS comes in and so if
you've never worked with HTML and CSS
just know that HTML by itself is going
to look exactly like this there's really
no style to pure HTML that's what you
need CSS for so we're believe it or not
with just the code that we have right
here we're going to be able to create
this navbar but it's gonna take a little
bit of work so let's get started on that
because I told you we're gonna be able
to get this website done in an hour so
we're gonna have to get rocking and
rolling here okay very first thing
whenever I'm building out a site that
I'm adding some structure to is I create
a container class so this gives me the
ability to manage the entire set of
elements on the page so I'm gonna create
a container class here and then I'm
going to close off this div at the very
end so if you had not noticed yet the
every div needs to have a closing div so
right here you can see that this is the
start of the div but anything that has a
start needs ever finish just like we
have that's why I added this div here at
the bottom if you forget to add a
closing div somewhere in the code you
are going to have some very weird styles
so that's why even though we have a lot
of code to add above this where all of
our portfolio items and everything are
gonna go you still want to make sure you
always are adding your closing divs or
else you're gonna run into some just
some very hard to debug kind of issues
so we have this container class and
that's where our entire application is
going to go now
the nav though needs to have its own div
so here I'm going to create a nother
class here and I'm gonna call this nav
dash wrapper now you can call these
anything you want
these are just the type of names I
personally use when I'm building out
applications so I'm going to once again
I want to put all of those nav items
there so we need to make sure that we
are adding the closing div in the right
spot and then I also am going to I
always indent this and that is the best
practice so don't have you know all of
your code lined up without any
indentation if you have elements that
are nested inside a parent div like we
have right here then you want to make
sure that those are indented so one
thing you may notice if you go back and
you look at the page right now nothing's
changed and the reason for that is divs
by themselves don't really do much the
only thing that they do is they will
give a line break which is a reason why
this name here is on a line below but
adding these wrapper divs didn't do
anything the only thing that's going to
add some different style there is when
we go and we go into our CSS file so
that is going to be our nav wrapper and
then inside of here
whenever you're looking at a page and
you're looking at a design you need to
build right here you can see that we
have our links on the left hand side but
then on the right hand side we have the
logo or the site name that kind of thing
whenever I see something like this my
first thought is okay how am I going to
arrange this in code and usually the
most logical approach is to create divs
that these groupings belong into so in
other words I'm going to create a left
column div and then I'm going to create
a right column div so let's wrap our
home and about inside of those so here
I'm going to say left and I'll just say
left side and then right here I'll close
that div off and then indent it and then
I'm gonna just
copy this and on this one it's gonna be
right side and then indent that once
again this won't have any changes on the
site but what we're doing here is we are
wrapping the code up in a way where it's
gonna make it much more straightforward
to select these elements on the page and
then add our own custom styles to them
so we are almost there except I just
have a couple more classes that we want
to add so these links aren't be all by
themselves either these links also need
to be in their own wrapper class so here
I'm gonna create a class called nav -
link wrapper notice this is a different
than nav wrapper this is a nav link
wrapper so it's specific to that and
then I'm just going to close that div
off and put that inside of it and I'm
gonna use the exact same div here or
this I should say the same class here
and then down below this one's gonna be
a little bit different now I'm going to
create a different class name because if
you notice we have different styles here
these links have a different look and
feel slightly than this brand so these
styles are gonna be related to links
these styles are going to be related to
text so I'm just going to call this
brand close that off indent it and that
is the full structure that we're going
to use for our navbar in HTML so now
that we have that I think that our page
is definitely at the spot where it needs
some Styles because this is starting to
look pretty ugly so now let's make some
magic happen with the Styles so I'm
gonna come here and let's get rid of all
of that code and now I'm going to start
with the nav wrapper I'm going to start
pretty much top to bottom so you can see
here we have the
wrapper up at the top and then from
there we move down to left side nav link
wrapper right side and brand so we're
gonna add styles to each of those and
that's going to give us a perfect
opportunity to learn about flexbox
flexbox is a tool inside of CSS that
allows us to align our elements on the
page in a much more straightforward
manner than it used to be possible so
let's start off by getting that nav
wrapper so I'm going to say nav -
wrapper and then inside of here I'm
going to say display colon and then flex
so what that is going to do is let's go
really quick to here and see exactly
what we have going on so now you can see
something kind of interesting
you notice how by just adding that one
style rule it moved the name that brand
class to the right hand side so the way
that flexbox works is it takes your
wrapper divs and so if you come here so
you can see with nav wrapper notice here
how inside of it even though you see a
lot of code here technically there are
only two dibs we only have our left side
and our right side now inside of left
side we have multiple dibs
but the way flexbox looks at things it
completely ignores everything inside of
the child elements so what we can do is
we can say I want you to apply flex
styles to nav wrapper which means that
just by default it is no longer going to
have the element stacking on top of each
other instead they're gonna be on next
to each other like left side and right
side exactly like how we have right here
so now that we have that in place we can
start to add some other styles so here
I'm going to say justify content and
then space between now this is going to
do some
being pretty cool it's actually going to
do pretty much exactly what it says it
is going to justify the content and the
way it's good justify it is by spacing
it out using all of the open space in
between so now if you come in hit
refresh you can see that it took all the
open space and it's now using that for
justifying that div so that is pretty
cool now let's come and let's also add
some padding and so for this padding I'm
going to go a thirty eight pixels I'll
hit save and what that's going to do
what padding does and you can see in our
little box right here you can see the
diagram for how padding works it has
margin in the far end of the box then it
has whatever your border is then it has
padding and everything inside of that is
your actual content so when I said I
want you to take what is right here and
I want you to add 38 pixels to it right
now as zero pixels so right this is
going to increase this by quite a bit
and if I hit refresh you can see that
now we have space where we didn't before
so that is the full set of styles for
the nav wrapper now let's go and add
styles to that left side class and here
we're gonna say display flex because as
you may have noticed right here these
two items are sitting on top of each
other but in the final version we want
to have them right next to each other so
display flex allows us to do that so if
you now hit refresh you can see they are
right next to each other so we've seen
how we can select single items but now
let's see how we can actually traverse
down a tree so I'm going to just copy
this and I'm gonna start with our nav
wrapper and then I'm going to use the
greater than sign so I'm gonna say I
want you to start with the nav wrapper
class I want you to select that but I
want you to apply these styles to it
next I want you to go down to the left
side and then I want you to grab the
divs inside of there so how that's gonna
work in the HTML is it's gonna look at
the nav wrapper then it's gonna go down
to the left side then it's going to grab
any divs inside of there and whatever
styles I'm about to give are going to be
placed on those divs so that is the way
you can traverse a tree and CSS a you
grab each one of those objects and tell
it exactly which one you want to work
with so here I'm gonna add some margin
right so I'm gonna say 20 pixels because
you saw how they were right next to each
other and then I'm gonna do a font size
of 0.9 m this is so what the way M works
is it's a percent of what it normally
would be
so by default the font size is 1m so I'm
gonna say 0.9 which means about 90% so
now if we come back hit refresh you can
see that now we have this nice spacing
and the font size is there now you may
have noticed that right here with the
brand that I have it in all caps and
here we have all caps for home about and
the brand well I did that on purpose I
wanted to show you that you don't have
to actually type the code out in the
HTML in all caps you can use CSS to do
that as well so if you want you could
put in what's called a text transform
and then say uppercase now you have some
other options too you can see when I did
that yet a few other ones I think down
case was one and there are a few other
options but upper case is what we want
here now if I hit refresh you can see
that that automatically converted these
so that they were in their uppercase
state and we use CSS to do it HTML
itself was not change this still says
home about and it's in its normal case
so that is that it's our left side
now inside of the left side we have that
little nav link wrapper so let's add
some styles there so I'm going to say
dot nav link wrapper I'm gonna add a
height so this is gonna be a height of
20 two pixels then I'm going to do
something that may look a little weird
but I'm gonna explain it here in a
second I'm gonna add a border bottom
here that is of one pixel solid but then
it's transparent so in other words
you're not actually going to see it and
the reason for that is going to be made
apparent here in a minute and then we're
going to also see how animations work in
CSS so I'm going to add a transition and
this transition is going to call
whatever part we want to add the
animation to so I want to animate the
border so I'm gonna say transition
border bottom and then here I'll say for
this one 0.5 s which means half a second
now nothing's gonna happen here yet so
if I hit refresh all that's really gonna
change are the style elements what we're
doing is we're setting up the styles so
that they can have this kind of behavior
they can have that cool little fade in
the colors can change there's no jumping
anything like that so this is what we're
looking for instead of what we have
there right now so now that we have our
nav link wrapper let's come down and
let's start adding some more class
styles so now I'm going to say nav and
let me just copy this so nav link
wrapper but now at the end I'm gonna say
a space and then an A so what we're
doing here is we're saying inside of the
nav link wrapper I just want you to grab
the a link now we didn't have to go
through all of this kind of sin
tax just mainly because we're just using
a single selector we're just saying I
want the nav link wrapper with the a
link and so now inside of here I want to
add a little bit different color so here
the color I'm going to add is start with
a hash and then say 8a 8a just like that
and so that's giving us kind of a light
gray and then also if you may have
noticed right here this underlying looks
kind of ugly this is the basic HTML
underlined and you may have noticed here
we have this cool little underline that
is spaced out the way that you can
accomplish this is actually by telling
HTML to not have an underline at all and
then we're going to use the bottom
border attribute in order to manage that
style so what I want to do here is I
want to say text-decoration:none and
then here I'm gonna say transition color
and then I'm gonna say same thing point
5 seconds so half a second here so what
we're doing is we're setting it up so
that we can have two animations because
we want to animate the color we also
want to animate that border bottom so
now if we hit refresh the only
difference is the underline is gone and
then we also have changed the color so
we know everything is working but we
still have to implement the rest of
those styles okay and switching back
believe it or not we only actually have
two more style definitions to add in
order to finish the navbar so I'm going
to say here we want to now have our
hover States so as you may have noticed
that if you look at the final version
this set of styles changes based on the
hover action so in CSS you have the
ability to tell the browser when the
hover state occurs I want you to change
the styles so I'm going to say now link
wrapper and then add a colon and hover
that's a way that you tell CSS that you
want to use one of these they're called
pseudo States so we want to check for
when hover occurs and when that happens
this is where we're gonna change that
border bottom so now I'm going to say
border bottom one pixel solid and then
we can just say black saved and now
let's just come here and do the same
thing except it's not going to be the
border
bottom it's actually going to be the
color so here I'm and it's not going to
be on the wrapper itself and I'm gonna
explain why in a second so I'm gonna say
NAB link wrapper a and then inside of it
color and then black so this may look a
little bit tricky because technically
you may notice we have two different
hover States one for the link one for
the div itself but I'm going to show you
why that is here so if I hit refresh now
you can see that's working perfectly you
notice that we have the cool little
animation and we also have it fading in
and out as opposed to you know what we
had before where is just that ugly text
decoration so this is matching up
perfectly now if you notice also these
fonts are different the reason for that
is because we haven't imported the font
we're gonna go with at the end so right
now this is just the ugly basic HTML
font eventually we're gonna add in our
own custom one but that is working
perfectly so great job if you've gotten
to this point you now know how to build
out a full navbar using flexbox so now
that that is crossed off the list
let's move down and start building out
the portfolio item so this is going to
be what takes up the majority of the
screen real estate so this is going to
obviously be important part of it so
we'll come back here and I'm gonna
switch back and I'm actually going to
come to the very
hop far the reason why I didn't do this
in the beginning is because it really
wasn't the right time for it but at the
very top I'm gonna put might kind of
master styles here so I'm gonna select
the entire body what this is gonna do is
it's going to grab the body of the HTML
document and I want to add a margin of 0
pixels so what that's gonna do is by
default the body has a margin of I
believe it's 8 pixels and so in order to
get rid of that we have to override that
so now if you come back hit refresh you
don't see a huge difference because the
background is white but this did remove
that margin you could kind of see those
move back a little bit so that's why
we're we're removing it because if you
notice we want these images here the
portfolio item images butting up against
the side of the page so we need that now
we also are now going to be introduced
to CSS grid so CSS grid has a lot of
similarities to flexbox it is a tool
built in directly into CSS and it gives
you the ability to align items you know
there are a number of differences
between the two I definitely definitely
don't have time to go into all the
differences hopefully as you see as I'm
building this out some of those
differences will be made apparent my
kind of rule of thumb is I like to have
my layouts in grid and I like to build
out my small elements like my nav bars
using flexbox that's my personal
preference every one is a little bit
different but we are going to layout our
entire application using grid and so
that is where we're gonna grab that
container class that we created and now
I'm gonna say display grid and I'm gonna
say grid template columns 1fr now that
may look weird if you've never seen that
before what we're doing is we're saying
I want the container to use grid
then I want you to create these template
columns using 1f R which stands for
fractional unit so what that means is
that our entire layout now is going to
have is gonna be considered as having
columns even though you can't really see
them if I come here one of the nice
things about Google Chrome and Firefox
if you hover over do you see those
little dotted lines there that's telling
us that that is one of the columns so
just like how flexbox was able to take
those div elements and separate them out
grid does the same thing and when you
say 1fr that means a hundred percent it
means I want you to take up one
fractional unit which means this column
of the nav bar should go from n to n
just like our portfolio items should go
from n to n so that's how that works so
now everything that we add below here is
gonna be considered in that next row
down below it so that's that's all the
styles that we actually need to add to
our container class and so now let's
move all the way down and so now what
we're gonna do is be able to start
building out all of the portfolio styles
so I'm going to just kind of give us and
this is just kind of a best practice
here I'm gonna add some comments so I'm
gonna say master styles and then here
I'll say these are our nav styles and
then if you come all the way down to the
bottom these are gonna be our portfolio
styles hit save and now what we can do
is actually jump back into the index now
that we know where those styles are
gonna go and now we can go write notice
where nav wrapper notice where it has
its closing tag now what we can do is
come in so doing we can do the exact
same thing we did with our HTML on the
top nav bar now we can do that for the
portfolios
so I'm gonna create a wrapper here so
I'm gonna say content wrapper and then
inside of here I'm going to create
another rapper called portfolio items
wrapper now one thing to keep in mind
it's very important you keep your naming
consistent so here all of the portfolio
items are going to go inside of it I'm
also going to have this in its a
singular form so here I'm going to
create
let me give us a little more room so we
can see it and close this div off so I'm
indent it and here notice the difference
we have our content wrapper which is
just everything on the page so
everything below the navbar is going to
be in that content wrapper then the
portfolio items wrapper this is going to
give us the ability to have one spot we
can go to where we know this is what
stores the collection of portfolio items
then down below that we're gonna have
the portfolio item wrapper just like
this so we're having our kind of our
master one here's our master wrapper
then we have the collection wrapper and
then here we have the single one so if
it helps you to visualize how it works
if you look at the finished version the
entire page everything below the NAB is
inside a content wrapper inside of that
is the items wrapper that has all of
them and then each one of these so like
this quip one this dev camp one those
are each their own singular wrapper now
let me give us more space so we don't go
too far off the screen and so now inside
of here what I want to do is actually
build out what one of these is gonna
look like so I'm going to just say div
I'm gonna write this one all out and
I'll show you why here in a second so
I'm gonna say div class portfolio
- IMG - background now obviously you can
call these whatever you want
but I like my names to be very readable
and this tells me that a this div is
going to have a portfolio image
background now I'm going to add a inline
style so this inline style is going to
be a little snippet of CSS so this is
going to have a little bit of CSS code
so I'm gonna say background - image :
URL and then inside of here I'm going to
pass in parenthesis and the parenthesis
is going to be a path to the image I
want to grab so here I'm gonna say
images slash portfolio 1 dot jpg and
that's it and then from there I have to
close that off and then it automatically
closed the div for me so let's hit save
here and let's just make sure that this
is making it on to the page and we don't
have any URL issues so if I hit refresh
here it's not going to show up because
we haven't given it a height yet but
let's make sure it's in the HTML so I'm
gonna click on content wrapper items
wrapper item and then you can see we
have this background image right here
and it is pointing to the portfolio JPEG
it appears everything there is working
so if you're curious on why that didn't
show up it's because we're going to do a
little trick if you notice what we have
here where we have this code that is
layered on top of the image and we have
this cool little animation and this
fading that is something that HTML and
CSS route of the box
really does not do so we need to have a
way of implementing that kind of style
so the way I did it was creating a div
and it's only job is to have a image and
to have that image that as its
background now we're gonna have the text
in a completely separate div and so
let's add that part now so I'm gonna
come here and make sure you're out
of that portfolio item rapper
I'm sorry the the portfolio image
background and now let's create another
div here and this one let me just gotta
say image - text rapper and here I'm
gonna have one div that is gonna manage
to the logo so I'll just call that logo
rapper and then inside of here I'm gonna
have the image now I'm gonna you're
gonna see two ways of working with
images with HTML and CSS the first is
when you want a background image then
you use straight CSS code just like we
have right here with a call to the URL
of wherever it's at now if you're using
images inside of your HTML then you want
to use what is called the IMG tag and
then you pass in SRC which is short for
source and then you pass in the path so
for my first one
it was images slash logos slash quit dot
PNG and make sure you don't have any
spelling mistakes or anything like that
or else it will not find that and so
that is gonna be the logo wrapper and
then below that is going to be the
subtitle so here I mean it's gonna call
it subtitle and you can add whatever you
want in there now I personally because
this is my these are all my own actual
portfolio projects I'm just gonna go off
screen really quick and let me copy that
so I'll hit save and now we should
actually have that so switch over here
hit refresh and now you can see that
that's working now the image itself is
white so you can't see it on this white
background but now you can see that it's
at least there now what I'm gonna do is
I'm actually going to copy I'm gonna
pause the video right now and I'm going
to copy and paste all of these and
don't think that there it doesn't really
serve you any purpose to to watch me do
that so what I'm gonna do just so you
know so you can follow along is I'm
gonna take the singular portfolio item
wrapper I'm just going to go and I'm
just gonna copy until the its closing
div tag so I'm just gonna do this 12
times and then I'm gonna go and I'm
gonna call the appropriate logos now for
you it doesn't matter whatsoever which
one you use and I'm also gonna increment
this value so I'm gonna do portfolio 1 2
3 etc and update the subtitle so I'm
gonna pause the video do that so that we
have all 12 of them on the page when I
come back and we're back so all I did
like ice mentioned was I just added the
I just duplicated each one of those
portfolio item wrapper classes and
everything inside of them and then I
just updated the logo name and the
subtitle but none of this mattresses
this is specific to my personal
portfolio yours is going to be different
so you can really have just copied the
identical one 12 times so now that we
have that and you can just go verify
here that that's working so you can see
that has each one of the items there now
now we can start adding the styles so at
the very bottom here on portfolio Styles
I'm going to take the portfolio items
wrapper now make sure that you spell it
correctly it's portfolio items plural
wrapper and then inside of here we're
going to use CSS grid once again so I'm
going to say display grid and then from
here this is going to be a little
different we don't want each one of them
to take up from the full left side to
the right side so I'm gonna say grid
template columns which is what we use
before but now I'm gonna say 1fr one of
our 1fr so what this means is it's going
to give each
one of the columns and it's gonna have
three of them so we're gonna have three
columns here and it's gonna give each
one of them their own little full-sized
column so now let's hit refresh and now
you can see that it's moved them so they
are all in their own columns obviously
still a lot of work to do but notice how
easy that was within two lines of code
we were able to create an entire grid
layout I can tell you someone who's been
doing this for a very long time that it
used to be much more challenging than
that so that is something that I really
enjoy using now is tools like CSS grid
and flexbox
so now with that in place let's go and
let's grab the portfolio item wrapper
and here we're just going to add a
position to it so I'm gonna say position
relative and what that is gonna do is
it's going to allow us to have some more
flexibility with how we position each
one of the items inside of it so I
already mentioned how behavior like this
where you have text and images sitting
on top of other images by default HTML
and CSS don't really allow for that kind
of thing so we're gonna have to kind of
force that to happen and so the first
step in that is by adding a position
relative and then what we're going to do
is we're going to start styling that
image background so now I'll say
portfolio - I am G - background and this
is going to style the cover and just
some of those image related items so we
first want to have a height and a width
so the height is going to be 300 pixels
and the width is just going to be a
hundred percent so that means that each
one of those is going to be 350 pixels
tall and the width is going to adjust
automatically then I want to have a
background size of cover so what that's
going to do
is imagine a scenario where you don't
have images that are the same size which
is actually the scenario we're in each
one of those is sized differently we
want to make sure that we are cropping
the images so that they will all sit
nicely next to each other and so that's
what background size cover does then I
want to do background - position and
then I'll say Center and then lastly
background repeat' and we want to do
no-repeat so this is the reason why I
set a background image on each one of
those elements and why used inline style
so instead of us putting the images here
I did it right here and so now all of
our styles are going to apply to that
background so now if I come back hit
refresh you can see we are starting to
get somewhere so you can see that now we
have our background image and we're
starting to actually have something that
looks a little bit closer to what we
have here so we are on our way now we
still have some work to do we now need
to work with that text so notice how
that text was just sitting down below it
and that is the default behavior
remember whenever you have HTML and you
have two divs sitting next to each other
or below each other in the code the HTML
is just gonna say okay inside that div
you just slide on right underneath and
then it's gonna continue on we want to
say nope I want to position the HTML
right on top of this other diff and so
the way we can do that is first by
selecting it so I'm gonna say image text
wrapper and inside of it you know say
position absolute then and also one key
thing to note here because this can be a
little tricky if you've never done it
before
position relative is required for if you
want to have any position:absolute
elements nested inside of it so that's
why we had at that position relative
here because if we're going to use
position absolute which is
us saying we are forcing this element to
be someplace where usually it would not
go in order to do that it has to be in a
parent element that has a relative
position so I'm gonna say top zero which
means I want this to be positioned at
the very top and then I also now want to
use flexbox so yes a display flex and
now I'm gonna say Flex direction we'll
use column justify content we're not
going to use space between like we did
before now we're gonna say Center then
inside of there you'll say align items
Center we'll give it a height of a
hundred percent
we'll say text align is going to be
centered and then we'll add some padding
so I'll say padding left is going to be
a hundred pixels and then padding right
is going to also be a hundred pixels wow
that was a lot of stuff
so let's actually take a look at this
and then definitely feel free to review
each one of these items essentially what
we're doing is we're saying that this
image text wrapper is going to be
positioned at the very top wherever we
want
then inside of it all the elements are
going to use flexbox so we're going to
Center these items we're gonna use flex
or gonna Center them from left to right
and top to bottom
that's what align items does and so
justify content is going to do left to
right aligned items is top to bottom we
want it to take up the full parent
height so that whole hundred percent and
then we want every all the text inside
of it to be centered so now if we hit
refresh oh yes this is starting to look
better so now notice that this is
starting to finally actually look a
little bit more like this so we have our
images and now because we've used
absolute styles and positioning now we
have those images and texts sitting on
top of
that background image okay we are
getting much closer to being done so now
let's come back to the code and let's
style those images so now I'm going to
grab the end when I say style the image
I mean the logo image that's sitting on
top of it so I'm gonna say logo wrapper
I believe that's what we called it and
here I'll give it a width of 50% and
then a margin bottom of not the Lockean
just margin bottom of 20 pixels it's
save and if we come back and hit refresh
it looks like I forgot to actually
select the image logo wrapper image like
that and now if I come back there we go
so notice how much better it looks when
they're a little bit more shrunken down
like that no they're also now all
unified so now they have the same exact
size so this is starting to get really
close now you may notice that we're
about to get into the part where we're
adding that dark fade animation and the
subtitle doesn't actually start off so
we need to make the subtitle be
invisible in the beginning and then
animate it change its color and then
have it appear later on so let's see
where we're at right now right now it's
black and so what we're gonna want to do
is let's go first and let's first make
sure we have these colors and the style
right for the subtitle and then we'll
talk about how we can use JavaScript to
animate that so let's go come here and
the style let me really quick come back
to the index to see what we called that
so that is yeah that is just called
subtitle so here I'm gonna say subtitle
and then inside of the subtitle we're
gonna want the font weight so this is
how we can make things bold I'm gonna
say font weight is 600
and then the color let's go with that
light see green refresh and that's
looking a lot better now it's not
matching perfectly because we haven't
added the custom font yet but that is
what we're wanting from a style
perspective and then we're also going to
have to darken these as well so let's
see what else we need to do and one
other thing one little change I'm gonna
make so technically this works but we
are going to have to add a little
temporary note here so I'm gonna say it
needs to be more specific with selector
because remember this is gonna change
based on if someone's hovering over it
or not so I just want to make a little
note there just so I don't forget when I
come back to it so now let's talk about
how we can have those images get
darkened so I'm gonna create a class
here called IMG darken and we know it
what we want to animate it so I'll say
transition and we'll just say one second
and then I'm also going to use what is
called a filter so I'm gonna say filter
and then we'll go with brightness and
brightness is at let's go 10% okay this
is not going to do anything yet because
we have not applied this we haven't
called it in any of the index.html file
but what this will do or how we're gonna
use it is we're going to kind of use
this as our own special function so
we're going to have our JavaScript
dynamically add and remove this class
when someone is hovering over that so
that's going to be pretty cool that's
gonna allow us to have a lot of
flexibility with how we can do it
because if you tried to do this without
JavaScript then it's gonna be a very
tricky kind of feature to implement on
the CSS side it is possible but it's not
the way I would suggest so I will always
go with
just a little sprinkling of JavaScript
if you want to implement a feature like
this so now let's come up here and let's
add that specificity so here we know
this is the ending version so what I'm
gonna do is I'm gonna say dot IMG txt
wrapper and then we're gonna add it so
we're gonna say only for that hover
state then this is what we want to occur
so I'm gonna hit save there and now if I
hit refresh then this only turns green
and changes when I am hovering over it
so that's working pretty well now let's
come up and let's add the start state
for it so technically that should only
happen when someone is hovering so now
let's remove this hover value and let's
add the transition so add transition one
second
I want it to be nice and slow and then I
want the starting color to be
transparent so hit save here and now if
you hit refresh you can see that it's
not there but when you hover over you
can see that that's when it appears so
let's see and it's I'm seeing I'll let
you see that little jump so I'm thinking
that what in order to fix that I think
what I need to do is to have the font
weight also there as well so if I save
that and hit refresh there we go you see
how much smoother that is and the reason
for that is because the font weight was
starting here and it was starting at its
normal value so we were catching and we
were able to see that little transition
from normal all the way to the font
weight of 600 so that was the fix there
and now technically that is all of the
styles that we need so we still have
some for the about page just a few but
those are all the styles so now let's
hop over
and let's add the JavaScript code now
javascript code typically where you're
gonna see it is at the very very bottom
of the page and the reason for that is
because javascript works with selectors
very similar to the way that CSS does
but you would not want your JavaScript
code to run before all the entire page
is loaded so we're going to actually go
under the body tag here and that's where
we're gonna add our JavaScript code and
the way that you can tell HTML that you
want to run JavaScript is by creating a
script tag just like this make sure you
have a closing and opening one and then
just like that and now we're going to
select the portfolio item so we're gonna
grab all of the portfolio items on the
page now if you've never done this
before don't worry it is not like magic
whatsoever we can just come here and if
you come into the console you're gonna
be able to see how we can do that so I'm
going to just build out a little
selector here so I'm gonna say dollar
dot and then inside of a make sure you
use an apostrophe and then say dot
portfolio item wrapper and then you can
see that it pulls in that portfolio item
wrapper it pulls in the very first one
that it finds so that means that that is
working properly you can do a selector
now this is the syntax right here is
actually what the browser's allow you to
do in order to work with JavaScript code
now javascript has a little bit
different syntax but I wanted to do that
first one just so you could see what you
can do inside of the browser now what we
want to do is to store it in a variable
so the way you can do that and if you
are not familiar with JavaScript you've
never touched it before do not worry you
can just simply follow along and see the
process so I'm going to say Const
portfolio items what this means is I'm
creating a variable called
portfolio items and now we can say
document dot query selector all so I'm
saying that I want you to find all of
the elements on the page that have that
selector so we can even come here and
just copy this because this is we
already know this works so paste that in
here and now if I run that nothing gets
returned but if I click on portfolio
items we have this really nice little
node list and you see how it says twelve
that means that it selected all twelve
of these blocks here so that means it's
working and if you want to click and
expand it you can see it grabbed each
one of those portfolio item wrappers and
we have access to everything including a
very important element which is to add
an event listener so the same way that
we listen to the hover state in CSS we
can do that in JavaScript except with
JavaScript you have to be a little bit
more explicit so I just copied that code
here so that is exactly what we already
entered into the browser so we know that
works and now I'm going to loop over
these so I'm going to add an event
listener so I'll say portfolio items dot
for each and for each takes a function
so what a function is if you've never
worked with JavaScript functions is it's
just a process that runs and so we're
saying we want you to run this process
for each one of the portfolio items we
need to be explicit and say we want you
to work with all of them now when I say
portfolio item just like this I'm giving
what's called a iterator variable now
this may look really weird if you've
never seen it before but this is not a
special name I could say X right here I
but I wouldn't recommend it mainly
because if you did you wouldn't you
wouldn't really know what your talk
but I like being explicit with the name
so I'm gonna say portfolio item then you
do the equals greater than symbol so
that's called an arrow function in
JavaScript
followed by curly breaks braces and so
now everything inside of here every time
that the page loads is going to be run
and it's going to be run and applied on
those portfolio items so now I can say I
can grab one of the singular ones so as
it's iterating every time it goes
through for each it grabs that element
and then we can do whatever we want with
it
so now you can say portfolio item and
then dot add event listener so just like
we added our hover state here we don't
call it hover though the way JavaScript
goes about it is it's called the mouse
over event and mouse over event also
takes a function so we're gonna use our
fun little arrow syntax again so very
similar to the same syntax we had here
the only difference is for the for each
loop we passed in an argument this
portfolio item is called a iterator
variable but it's in the item slot here
we didn't have any arguments so we're
just running what's called an anonymous
function so we're saying
just go and run this process so here I'm
going to do this and let's just log it
out so I'm gonna say console dot log and
then let's grab the element so I'll say
portfolio item and let's just see what
we have when we do this so I'm gonna hit
save clear this out with clear console
now hit refresh now if you hover over
there do you notice now how you have
access and it is now every time you
hover over one of the images it's doing
exactly what we wanted so it is logging
this value out so the very last one that
we should hover on should be this one so
now if I click on this this tells me
exactly what's there and so
gives me access to all the elements
inside of it it gives me the portfolio
image background the image text wrapper
everything like that so that is perfect
that's exactly what we need because if
you remember the entire reason we're
doing this is because we want whenever
someone hovers in we want to add that
class that we created that I forget the
name of after reference at the image
dark in class I think yeah so we want to
add that and so now that we have access
to it we can
so let's come back here I'm gonna get
rid of the console.log statement and and
actually you know what I'm going let me
keep it up there for one second so you
can see this because as you may have
noticed this gives us a lot of data
gives us the full div but we only want
one of the items here so that part might
be a little bit trickier if you've never
done this before so I don't want this
next part I'm going to do to kind of
intimidate you whatsoever it is probably
the most challenging part of this entire
tutorial so if it looks weird to you or
anything like that don't worry it is all
we're doing is we're taking that HTML
object of that div in those classes and
we're using javascript to manipulate it
so what I'm gonna do here is I'm gonna
say portfolio item dot which is what we
just console logged dot child nodes so
what that means is if you remember we
had those child nodes which means those
nested divs we had those nodes come out
so if I want to I can just say console
log here and let's see how this works
okay so if I hit refresh now now you can
see we have this node list so this looks
a lot like an array it's a collection
and we have these indices here so the
first one is just text we don't want
that one so what we want is to grab that
element the portfolio item background it
had an index of
so what I can do here is let me just get
rid of this I'm gonna say portfolio item
dot child nodes I want to grab that at
one with the index of one and then I
want the class list so I'm going to say
class list okay and this will be the
last console what we do in awhile I
promise but I the other thing I did
promise you at the very beginning of
this tutorial is I'd walk through my
exact process and this is exactly what I
would do so if I were asked to build
this kind of thing out I would walk
through all of these steps where I would
console.log constantly I would run the
debugger like this and I would be able
to see all the values that are there
because as long as I know the values I
will not get stuck I've been doing this
for a long time and one of the biggest
challenges that I found is when I don't
know enough about the data that is when
I run into bugs so I try to always make
sure that I'm listening to the data and
what it's telling me
so let's come to the console here now if
we hover over you can see we have this
Dom token list now we have that
portfolio image background and we have
the value of it so notice how we've kind
of traversed this entire element we
first started off with grabbing all of
them then we narrowed it down we
filtered it down until we got the exact
div we wanted and then from there we
filtered it down even more and we said
just you know what just give me the
class list and so now that we have all
of that let's actually just take all of
that I'll keep that console log just in
case we want to see anything else now
I'm going to say class list dot add and
now this is where we finally get to call
that image darkened class so here I can
say image darken and so now let's hit
refresh and look at that now that is
working now when we're hovering over
these it
is actually making that happen so that
is fantastic now you may notice that it
is and it's acting a little tricky
because why because these images and are
stained dark well that is because we
need to add one more event listener so
I'm just gonna copy this and come here
and this time instead of adding event
listener mouse over I'm going to say
Mouse out just like that and I'm gonna
remove all these console.log statements
and now instead of classlist add I'm
gonna say remove it save now if you come
back here hit refresh now you can see
that when you mouse out now it is doing
exactly what we're looking to do that it
fades in goes out as you're navigating
all around the page so this is working
beautifully very nice job if you went
through that because now you not only
know how to work with animations and all
kinds of styles like that and create
your layouts you also now know how to
traverse the entire DOM all of these
HTML notes here and to apply dynamic
Styles based on the user behavior so
very good job with that we only have one
very small piece left and we're gonna be
done let's switch over to the about page
and now let's jump into the text editor
and we're going to actually build this
out now as you may have noticed we have
a lot of content here and with the way
that just vanilla HTML CSS sites work is
in order to get this on the other page
we're actually going to have to copy and
paste this now if you are working on a
larger application that uses a framework
such as Ruby on Rails or react or view
or something like that then what you'll
see is that you don't have to copy and
paste this you simply will have one
layout or multiple layouts for the
application and then you will
dynamically update the content inside of
it so this isn't something you'd have to
do if you're working with a framework
but because we're not we do have to do
this so I'm gonna first come here and I
mean just gonna do clear all this out
because if not then we would run the
risk of having two versions of HTML in
there which would be a little tricky so
now let's just copy and paste this and
then we'll remove everything we don't
need which is the majority of it so here
we'll change the title to about and we
still want the style reference and we
want the nav the home the about and all
that kind of good stuff and then we also
want to have the container so that
container was there at the top and we
want the content wrapper so we want that
I'm gonna get rid of everything else for
the portfolio items wrapper we don't
want that and we don't need that Java
Script so I'll delete that okay save and
now we are good to go so let's come back
here hit refresh and you can see that
this is working we have the home and
about links now we have this nav bar and
we can start adding what we need in this
page so this is our last element so
inside of here I'm gonna create a class
and I'm gonna call this one something a
little more generic because if you're
building this out for an application
that may have all kinds of pages then
you don't want to do something like call
this the about Us page or something
because and it'd be weird if you wanted
a two column layout for your contact
page or something so here I'm going to
say two column wrapper just like this
and then inside of here I want to have
the profile image and let's take a look
at this just don't forget anything so we
want to have the profile
image here and then on the right-hand
side we want to have that content so we
want to have then one class then we'll
just call this profile image wrapper and
then inside of here we're gonna have an
image but I'm gonna wait on adding that
until I've added the full structure and
then so right below profile image
wrapper let's have the dot profile
content wrapper and that's where we're
gonna add the content and for this for
the sake of this obviously you're gonna
have your own content that you'll put in
there but for mine I'll just copy mine
over so we have a image if you look
through the image directory and if you
go all the way down the bottom you see
we have this profile image so we can
call that so I'll say image and the
source is gonna be images profile dot
JPEG you don't need an alt tag for this
and now inside of here we're gonna have
our one heading and two paragraph tags
now we haven't dealt with paragraph tags
yet but what they do is pretty
self-explanatory they just give you
paragraphs or way of segmenting
different pieces of content we did see
an h1 tag before so that one is gonna be
relatively familiar I'm just gonna copy
this over and then inside of here I'll
just paste all of this in and let's give
us a little bit more room feeling a
little scrunched here so I'll say h1 and
then make sure that you close off your
h1 tag and now with the paragraph it's
the same thing so you're gonna have a
paragraph make sure you close it off and
then place that code inside of it
the very end close off that paragraph
tag and then we'll do the same thing
here
okay so now if I hit save let's go and
see what we're dealing with now so if I
hit refresh you can see okay kind of but
not really
so we have the image but it's taking up
a lot of space and this is the size of
the image this is the actual size that
we have and then we have this below it
so this obviously needs a few styles so
let's go and add those I'm going to come
down here at the very bottom and we're
gonna add in a comment this is gonna say
the about page styles so now what we can
do is let's add in the styles for that
two column wrapper first so two column
wrapper this is gonna use grid so we're
gonna say display grid and then well
inside of there we're gonna have two
columns so grid template columns and you
may have guessed that means we're going
to do one fr and one fr now we have that
profile image wrapper so with that one
we're gonna do is profile - image
wrapper we need to make sure we're
grabbing the image and then inside of
here just say that we want the width to
be a hundred percent let's see what this
is looking like now so now if I hit
refresh there we go that's looking much
better I'll close this off and you can
see that's giving us much more the
behavior we're looking for now we just
need to add a few styles here so let's
do that so we have that profile content
wrapper profile content wrapper and then
for that I'm just gonna add some padding
so padding of 30 pixels and then let's
style that h1 so profile content wrapper
h1 and then the color of this one will
be the light C green hit save refresh
and there you go so that is phenomenal
this is this entire site
looking's so good I'm really liking this
now the one thing that's missing is the
font so that font really needs to get
better so the way they great spot to
find fonts is at fonts google.com so I'm
going to have the one I already picked
out which is called the lotto but you
can use any one that you want and the
way you can grab it is click that little
plus button and it's gonna say of this
family selected here and it's all free
to use so it gives you the code that you
need to use right here which is very
nice and handy so I'm going to grab this
link and inside of both of these you
need to put it put it in the top of
index and the about and you need to use
it above the stylesheet is to paste that
in same thing here come up to the top
paste that in and so now we actually
have access to it so if you come to
styles and go all the way to the top of
the page inside of the body here what
you want to do is now you have the font
but you still need to call the font and
so inside of the body because we want
everything in the application to use it
you can say font family and then we'll
say lotto comma sans-serif what this
means is that we're telling our CSS that
we want you to use lotto by default but
if you can't access it and that could
happen so imagine that this URL that's
sending us the font is too slow then
we're saying that we want to have a
backup font right there of sans serif
so let's come here hit refresh now and
there we go now we actually are looking
like a real site so notice how much
difference the right kind of typeface
just makes a huge huge difference so
that's looking really good come here
click on about and this is working
beautifully as well now there's one
thing I just noticed that I forgot to
put in and only take a second to do
is that you notice how we don't have an
active state on these links so if you
come here on the final version we when
you're on the about page it has the
underline permanently there when you
come to home it's there right now we're
only getting that when it is a hover
State so what we need to do is to add
that active State in so I'm gonna come
here and come into NAB styles let's come
to just to the very bottom of these nab
styles and I'm going to create a new
class here called active - nav - link
and we're gonna add the boarder bottom
of one pixel solid black which we've
already been using before and then we
also need to do the same thing now with
the border but with the color for the
link so active nav link with an A and
now we can say color and then black and
then we have to do one other thing we
have to say this is important and the
reason for that is because we need to
override the default color behavior and
so this should be all we need to do that
okay that is going to be part of it now
we actually have to call it from the
HTML so whenever we're on the home page
right here then what we want is that
active nav link to be there and whenever
we're on the about page we want it here
so here it's gonna be active nav link
okay
let's see if that finishes us off so hit
refresh and there you go now you can see
this one's active if I click on home now
the home one is active and that's how
you can add active States and an active
class directly Chui that now you could
use JavaScript to do that but that would
take even longer so this is kind of a
quick and easy way of doing it
just fantastic job if you went through
this I know that was a very long time
but you literally within just
around an hour so and it would end up
being a little bit more than that but
just in a pretty short period of time
you built out a fully professional
website you have now all kinds of cool
things like animations you're using
images you have multiple pages you're
using modern technologies such as
flexbox CSS grid so that you're laying
these components out on the page
properly and you are ready to go you can
with these tools you can build any kind
of website and that's really one of my
top goals for this video is giving you
that because I can tell you I'm built
web applications literally all day and
so I am using these kinds of tools
constantly what I just showed you makes
up the majority of the HTML and CSS code
that I'm writing on a day to day basis
being able to Center items being able to
lay them out on the page so that they're
all in the spots where they need to be
applying styles using selectors those
are the kinds of things that you'll be
doing every day as a developer so great
job congratulations you have your first
website done and you're ready to move on
and build out any other site that you
can think of