hello my name is kevin and just in case
you don't know me normally you can find
me over on my own youtube channel where
i talk mostly about css with weekly tips
tricks and tutorials i am so extremely
excited to be here on free code cams
channel to bring you this tutorial where
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 going to 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 out this cool
page with you but i also
hoping to not only show you some of the
cool things you can do with css we're
gonna have a cool page we're gonna see
some cool css stuff but i'm also css
gets a bad rap and a big goal of mine is
to help you see the light a little bit
um 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 the css and see that maybe
it's not as bad as you might have
thought it was if you're one of those
you know if you get a little frustrated
by it every now and then we're going to
be building this out with just some
plain old html and css and a little bit
of javascript near the end it's a really
simple build i'm structuring it this way
it's all going to be static files but i
want to allow you to do what you want
with it so if you're so if you're coming
from like reactor view and you're
looking for a portfolio you can 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
upgrade it with a lemony 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
html and css we'll 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 languages
that you know you should have no problem
at all doing that now one thing that's
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 html and css it's
for people who've already started using
it and you're building your portfolio
now so hopefully you've done a little
bit of stuff along the way to put into
that portfolio so we are going to be
looking at using flexbox 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 and all of that but they're not
in-depth tutorials into any of those
topics because then this would just drag
out forever we do want to keep it as
concise as we can i'm not going to skim
through it too much but i'm assuming you
already have some knowledge on these
topics now if you've never used one of
those things like custom properties or
grid before don't let that scare you
away they're not that scary they're not
that complicated and hopefully they're a
nice introduction in this project for
you to get started with them and you can
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 xd file and i want to
show you a few things with that file so
let's go and take a look at it right now
so when you click that link you're going
to be brought to this page right here
where you're going to see the mobile and
desktop options to look at so you can
choose the one you want to look at let's
go check the mobile one out first now
one thing i don't like about this is it
brings you to this comment view so if
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 now if i go in
the specs you can see i can see the
colors that i've used so i get the hex
codes of stuff you want you can see the
fonts that i've used the font weights
that i've 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 and the left property hopefully
you're not going to be using those
or even the width and the height and all
of that but you can get the individual
properties actually we 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 nice 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 these
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
following along within scrimba you want
to be doing this on your own in your own
code editor or having your own files
what you can do is um in your scribble
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
them is to 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 done 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
coding it on your own or if you work
completely in the scrumba 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
and 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 um 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
doctype 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 site 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 your website is in
of course we're going to need a head so
we can do our open and closed head and
we're going to need a body and we can
close our body like that so for the rest
of this video we're going to be working
in the head and then in the next one
we'll
graduate off into the body of our
document um so if we come and look here
the first thing i'm gonna do is a meta
tag for the car set
of utf-8
that's just pretty much standard and
there is one more meta tag we're going
to need here which is our viewport so
name is equal to viewport
and we're going to do some content in
here and our content is going to be
equal to width
equals
device
width
comma
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 uh so this
just ensures that everything will work
responsibly and everything will be great
and here we can do our title uh i can
call you my dev jane
portfolio
website the last couple of things that
i'm going to do here is i'm going to add
a couple of links
one of them is going to be to normalize
which this is actually already brought
in by scrimbus if you're downloading
through that little gear icon that i
showed you it will come it generally
comes with a normalize in there already
because scrimba by default uses
normalize 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 to have the website
looking the same in all of our browsers
and the other thing that i'm going to
bring in right now is the link to font
awesome so you can actually copy this
directly from the scrimba editor here
but both of these i have got from
cdnjs.com
so if you want to get other links to
things you can always do that now i have
linked to the all thing here of font
awesome i'm not going to be doing a deep
dive into what font awesome is but we
are using it for the social icons down
at the bottom you only really need to
access the brands one but i'm putting
the all here just in case on your site
you do want to have access to more of
them but if you only need the brands you
could always change that over either go
to font awesome they can they'll give
you a unique link to use that's for if
you only want the brands or of course
from cdnjs you can also get that brand's
link we're also going to need to get
into the google fonts as well as our own
css file has added links here as well
i'm not going to be doing that i'm going
to 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 body setting up the header in
the next video i 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 xd
sort of link file thing that i have so
it gives you access to all the text the
colors the font information and font
sizes the font families all of that if
you want to follow along with how i've
set it up but of course you can 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 coding
because that can be convenient if not i
have also broken the different sections
down into different slides that i'll be
referencing back to as i'm coding things
up but for this first one where we're
doing the header only the header has the
logo and the navigation in it which is
hidden away right now so i'm not going
to 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'm going to 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 will do is put in
a header and i'll close that header off
and inside of my header we're going to
have a couple of things i'm going to do
a div class of logo
and close
div
and inside of there i am going to put an
image src
is going to go to my image folder dev
jane
dot png
um i am going to put an alt tag on this
so that's for my alt text i'm going to
leave it blank though and a lot of
people think that if you have alt you
have to put something on it you need to
have the alt 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 as a blank alt like that is
perfectly fine you don't need to put
logo because 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 as an svg or do
other things with it so um you know we
could do a lot of different things and
by you know we're always styling the div
that it's inside maybe this is text
there's different options that you can
do i am trying to make this as templatey
as possible
the next thing we need in here is a
button
i'm going to give this a class of nav
toggle because
the name sort of speaks for itself
that's going to be the toggle button
that we can click on to open and close
our navigation and i will give it an
area label of
toggle navigation
because
there's no label for it there's no text
that tells us what this button is being
used for so it is important to put
an area label on there to help out a
little bit for accessibility reasons and
inside of that i am going to do a span
class
of
hamburger
close span there's nothing actually in
there it's a blank it's just going to be
something we're going to style up and
make it look like our hamburger because
we're going to animate that and do some
fun things with it as well last but not
least in our header we're going to have
our nav itself and i give this a class
of nav and you might say that's a little
redundant and it kind of is but it's the
way i like to work so we're going to
stick with it if you don't want to have
it you don't need it but when i'm
writing my css for the most part i like
to be selecting classes
and just single classes i'm going to
make a couple of exceptions in here for
say the logo maybe and a few other
things yeah you're going to see that i
do like putting my classes on everything
and i'm going to be using a system
called bem as well and so it would be
nav double underscore list and i
realized that that might drive some
people a little bit crazy having the
double underscore there the reason i'm
doing a double underscore is with the
bem system this is saying that my this
list is a com a sub component of my
navigation here i will also never have
items and have links everything is gonna
have a class and it's gonna it just
makes it a little bit easier when you're
reading the css later to know if
something belongs as part of something
bigger or is it a modification of
something you're going to see we're
going to have a few examples of that
throughout this project and
it's maybe a little bit longer to do a
double underscore we're going to have
times where there's a double hyphen but
it is a choice that i'm making very
specifically because a i do think them
is i like bem but i also think it's
going to make it easy if you want to go
into the css later to modify it to
quickly be able to identify what you
want to change and to be able to change
it very fast
so in here we're going to have our li so
li class will be nav
item
and then in there we can have our links
a href we're going to set these all up
after so i'm just going to leave it as a
hashtag for the moment and that first
one can be our home section and i'm just
going to copy this
paste paste
paste
just like that and obviously if you
wanted to add or remove sections from
this it would be very very easy to do
and for our header that is everything
that we need so
in the next video we will explore the
introduction section or that main
section that has the picture with the
name in it look forward to seeing you
there
all right so i've decided we're going to
be doing the intro section as well as
this because both of them are relatively
simple so we're going to do both of
those in one shot before moving on to
the next one um looking at it here it
might look a little bit complicated but
you know with the green bar you might be
going how are we going to do that don't
worry about that looking at it we just
need to know what are the different
pieces of content we have here so let's
come here i'm going to put a comment at
the top this is going to be introduction
um just to try and make it a little bit
easier and it could be a bigger comment
if you wanted to and we're going to do a
section on this so section class is
equal to intro
and i'm also going to give this an id of
home
you don't
the the id could be different but it's
what we're eventually going to set these
up and actually we're here so we might
as well do it we can set my um link of
home right away to work on that so it's
the only reason i'm putting an id on it
i personally don't use ids for styling
things i only use ids for anchors like
this or sometimes for javascript
functionality and some other stuff but i
use my classes for styling i use ids for
anchoring because that's sort of what
they're good for
and close section
in this section we have a couple of
things we're going to have our h1
uh i will give this a class
and remember i told you everything is
going to have a class on it
so it is going to have a class of
section
title because it is a title of my
section but i'm also going to be
modifying that a little bit so we're
also going to call it my
section
title
intro and i realize again that that's a
little bit long people might not like
writing all of this and them is a choice
that i am making but in this case i do
think is a worthwhile case because it
makes it really obvious what's going on
so the double hyphen here is saying that
it's a modifier class so it's going to
modify this section title
to be a little bit different from the
default section title because there are
some changes that we do need to make to
that
so in my section title intro we do have
a bit of text in here so most of it i'm
going to copy and paste but for now i'm
just going to write hi
i am because here we do need our strong
tag and it's a short bit of text
jane smith
and close strong and we can
whoops there's my close of my h1 there
and then we can come in with a paragraph
class is equal to section
subtitle
and i'm going to do a section
subtitle
intro because it's going to need some
modifications on there and we can say
front and dev close paragraph
and last but not least we do need the
picture so we have an image
the image is in our image folder and the
name of it is dev jane01 so
dev
jane01.jpg
again you can feel free to replace these
with your own pictures
a different dimensions on these pictures
should work okay but if you do want to
use it just download everything you can
check the dimensions on the picture
itself and you should be good to go and
that is it for that section
so let's come down and do the next one
here which will be my services
um i like having just a comments at the
top of things or sometimes if we have
lots of closed divs i might put some
comments to say what those are actually
closing not that it's hard to navigate
but it just gives you a little visual
clue when you're scrolling through a
whole bunch of stuff where a new section
of content is starting
so here we can do my section class
equals my services could just be
services i guess and we'll do that for
the id services
and come back up into my uh links or my
yeah my links here for my navigation and
add services there so
this is going to link with the id down
here
and we can close that section off
and inside that section uh let's just go
quick take a quick look at what we want
so we have a title with a little
underscore on it so that's going to be
another little modifier class because
we're just going to do that as a pseudo
element on the title and then we need
three columns and a button down at the
bottom
we can have an h2
class
is equal to section
title
and that will be a section
title services uh what i do close h2
and so that's going to be the title the
we can control the color the underline
with the pseudo element all on there and
then we need to have three columns so
for the three columns here i'm going to
do a div class
of services so that's going to help us
create the three divs or the three
columns that we need and inside each one
of those i will have a div class
called service so it's my individual
service
we can close that div and inside each
one of those we'll have an h3
close h3 and each one will also have a
paragraph i'm going to put a comment
here close
close
service
because we will have a whole bunch of
divs and the indenting on that is a
little off
so copy
paste paste
and i'll come through and do the text on
that off screen afterward we do i forgot
to close my services so we can say that
that's my
close services and then here i need to
have an a href is equal to i don't know
what we'll call it yet that'd be my work
we can probably just call it work
and then the
class will be equal to btn
and
close a
and in their my work
uh so that is the structure that we're
are going to need for that section when
we're off screen i will come through and
put all the text in so when you start
the next video everything will be
exactly the same but the text will be
there and we can continue on with the
next section we have in the site
all of the text is in place i also
forgot the closing paragraph so those
are also there now and we can move on to
the next section of our site so that one
will be
let's just call it about me
and let's go take a look at what we're
going to need for this one so uh just
like the title up above it is pretty
simple uh there might be a few things in
here you may not be sure about but the
overall organization and structure of
this one's pretty simple the next one
will be too so we're just going to
finish off all the html in this one
because there isn't too much to do and
then we can get into the fun part which
is our css
so here we need a new section class will
be about me
and we can give it the id is equal to
about
i am canadian so boot
boot me uh let's might as well come up
right now and link that
about and i think this one will just
call it work so we'll put that in right
away
that's what we've already had that set
up for our link there so that is good
close section
and inside this section what do we have
we have another title so h2 we're going
to see this a lot class is equal to
section
title and then section
title
about
this one is who i am
close h2
we will throw our paragraph on here for
a subtitle so class is equal to
section
subtitle
and section
subtitle
about
close
a
closed paragraph
some people like using headings as
subtitles but in general it's kind of
frowned upon heading sort of the next
level of content so you have your h2
then if you had like a subsection to
your h2 and you had a several h3s that
would make sense a little bit like here
we have our what i do is the section and
then we have subsections we have design
and development we have e-commerce we
have wordpress so by having those
different sections in here that's more
what a heading is used for
it's less a title and then a subtitle so
just using a class on a paragraph is
generally um a little bit of a better
way to do it you could also if you
wanted to actually put in a new header
and
close header
for each one of these sections
for every single section like that as
well so you're saying this is the header
for that section i'm not going to bother
with that but if you wanted to it's you
know it it's very valid to work that way
as well um so in there we have that and
then i'm gonna have one more thing i'm
gonna have a div class
equals uh we'll call it about
me
body so it's like a subsection once
again that's why we have the double
underscore here we have about me and
then this is a subsection to that so um
or it's a component of
my about me so i'm putting a div that's
why we have the double underscore there
and then in that div we're going to put
in the paragraph or we have two
paragraphs of text close paragraph
um this is important that and you know
you could technically get up to five
paragraphs in here or have only one
paragraph if you wanted to and it
wouldn't cause any issues whatsoever um
but it's important that we group it all
together just to be able to handle
exactly where it's going to go inside of
this section
and then after that we have one more
thing we're going to need which is our
image
i don't know if it's really a bus but
we'll stick with that and that's image
dev jane.02.jpg
there we go so that is good closed
section
and as i mentioned we're going to finish
off all of the html for this one
so this is going to be my work
my work
uh this one's gonna be pretty simple so
ser section
class will equal my work
id we said would be work
um so in here we'll once again we're
gonna need our h2 class equals section
title i don't know if we're going to
need to have a
modifier class on that so i'm going to
leave it like that right now we might
need one to change the color of it
because the color of this one is going
to be white and that's a little bit
different
[Music]
we're going to see but
and actually i'm looking at it now
because these have a background on them
and this one doesn't we might be coming
back in here to make some small changes
later on
but for now let's leave it like this and
also i haven't put any text i'll do that
off screen so you don't have to see me
copying and pasting
class is equal to section
subtitle and the
part that's going to be the most
important here is we're going to put in
a div class we're going to give this a
class of portfolio
inside the portfolio we're going to have
each one of them is going to be an a
we're going to replace the href on this
eventually but for now we'll just put a
hashtag
with a class of portfolio
portfolio portfolio
double underscore item because it's the
individual item close a
and then inside each one of those links
we will have an image
src i'll put the first one portfol
can't spell portfolio today
portfolio01.jpg
alt i'm going to leave blank for now but
that could be something you fill in on
your own if you want to put a little
description of what the project is
and uh the class on each one of these
will be portfolio double underscore img
because it's the portfolio image
portfolio portfolio
item zero one i'm going to speed this up
as i do it because i think a little
comment on each one of these will make
it easier when you're setting everything
up
all right so that is done let's hit save
because i haven't saved yet and let's
see
hopefully everything is actually showing
up on here so it looks like everything
is there we didn't get any errors my
images are all loading in so we're off
to a good start on all of that i'm going
to close that off because we don't
really need it right now and last but
not least
footer awesome we're right at the end
the footer is pretty straightforward so
we can do footer close footer
and in here we're going to have a couple
of things we need an href of mail 2. i'm
going to hello at
dev
with a we'll put a comment down here a
head class is also gonna be footer link
and
that can just say hello at jane.dev
close a
uh replace replace with your own email
address
right uh so there you can just make sure
that this and this here are your own
email address if you are planning on
using this for your own site ul we can
have a class of social
[Music]
social list
close ul
i'm not doing this as like a footer
thing and bill this is my footer link
and actually that should be a double
underscore on there
i'm not doing this because technically
it could be something that could be used
in other places it doesn't necessarily
have to be in the footer
so i'm not calling it like footer social
list or something like that but it could
be if you wanted it to
we're gonna have an li with an a in it
close
bay
close l i
the list item itself will have a class
you guessed it of social
social
list item it's gonna be a lot like our
navigation class is equal to
social
list
link
um this is a place where you could have
another class on this also of like
unstyled list that you could use for
both of them and just remove you know
because both of them there's a lot of
similarities between the two lists and
then on top of that they'll have some
modifications to it so if you wanted to
take that approach to it instead of the
way i'm doing it here that would be
perfectly acceptable and result in a
little bit drier code in the long run
so i'd be all for that
um for now let's put some hrefs on these
they're just going to go to the generic
site so i'm going to speed this up while
i put them all on
all right and there we go and you'll see
before now i've just put an abc
we should have a d on that last one what
did i do wrong i put the d in the wrong
spot um so a b c d as the links because
when i put in the font awesome i bring
i'll explain a little bit of how that's
working uh just in case you want to
change it out for your own icons so when
we do the footer i'll go into more
detail on that for now that is
everything we'll probably be jumping
back into the html a little bit as we
write our css just in case there's a
thing or two along the way that we need
to add but for the most part that is
done that is the structure of everything
we need so from there we can go ahead
and start styling this up the fun parts
are starting in the next video
alright so we're going to be jumping
into actually styling things up which is
always the most fun if you want to get
the different font information the
weights the colors the sizes all of that
and just the colors in general that i
used in this you can click here once
again to get to that adobe xd link
now to get started on this in this video
we're just going to be setting up some
of the general things i'm going to be
doing a lot of css custom properties in
here if you're not super familiar with
them they're going to make sense pretty
quickly so we're going to be starting
with that we're going to be setting up
our basic fonts and getting all of that
set up in this one
so um the first thing we need to do is
actually create a css file so if you're
in your own code editor you can do that
how you're used to doing if you're
following along here in scrimba you can
right click in scrimba where it says
files and you can make a new file there
and actually before i do that i'm going
to make a new folder called css and then
inside my new css folder i'm going to
make a new file called style.css
and we can get started in here but
before we write anything nothing will
show up because we're not linked so i'm
going to come down here
and link to my own css file
css and just so we can make sure that
it's all working why don't we come into
there and say
body background is red and see if that
worked so i'll save that file i'll save
the changes i made there and now we can
see that my body is definitely coming in
as red so that is fantastic now really
quickly before we move on you might have
noticed there was a white background on
that if you did download these images
and you want to follow along with
exactly these ones you might have to
download again just there was a weird
white box on that that had a bit of a um
extra spacing on it because of the
shadow that i put on i have removed it
it is updated i'm really sorry about
that you can grab the new images now if
you are following along but again i'm
assuming that you're doing this using
your own images to replace these ones
but that has been fixed so if you want
to download the images again you can do
that sorry once again and we can now get
rid of our body background red on that
hit save and we can see that that has
disappeared now before we actually start
writing any css i am going to do one
more thing where i'm going to come in
here and put a link to the google fonts
that i used in my document or in my
design
so
update these with your own fonts if you
do now if you like the fonts i've used
these are the ones i'm going to be using
the first one is the source saws the
code version which is the
monospace font that was here i only use
the regular but i want to make it really
easy for you to update so if you did
want to switch this out for like the 300
or the 500 or whatever it is you can
just update the numbers here or add new
numbers to it and the same thing i'm
using the light and the black but if
ever you need it more you could just
change those numbers or you can go over
to google fonts just switch this out
completely with the ones you want to be
using we're also using a whole bunch of
custom properties so it's going to make
it really easy for you to update this
all the fonts throughout the whole site
but you might have to just switch out
that link right there
with the fonts you want to be using to
do it um so coming into here the very
first thing i am going to do is a star
comma star
before comma star
after
to set up my box sizing border box
because i do that on every single
project it just makes our life so much
easier
if you're not too sure about box sizing
border box it's just changing how
padding is calculated to make it within
a width instead of adding on to the
total width of something it just makes
our lives so much easier when we're
setting things up uh the other thing i'm
gonna do is come on here on my route to
set up some custom properties so the
first thing i'm do is have a font family
of um if this was my own project i'd
probably call it font family sauce and
then font family code or font family
mono or something like that because i do
want this to be something that could be
used for other purposes i am going to
call this font family primary
and a font family secondary uh just in
case you end up using different fonts
from what i'm using in here i do think
that makes the most sense to do um so my
primary one is my sources pro so we can
bring that in right there and my
code is
that one right there i'm just copying
and pasting these directly from google
fonts the next thing i'm going to do is
set up my font weight so i'm going to
have a font weight of regular uh which
is going to be my 300 and a font whoops
that should have a double hyphen
and here font weight of bold which will
be my 900 now if you're not used to
custom properties you haven't used them
this is not like them where i'm doing
this out of you know just for fun this
is how custom properties do you have to
work with the double hyphen on here
we're gonna have a color of a background
which is just gonna be my fff
we'll have a color
text
which is my 30 30 30.
um actually a lot of time i'll do that
but i'm going to call this color light
color dark because again we might want
to be doing this uh you might want to
change these colors around for your own
design and a color accent
which is my
16e 0
bd which is the main greenish color that
i use throughout this whole site and
we're going to set up some font sizes so
i'm going to say a font size of h1
of 3 rem i always set my font sizes in
rems font size h2 2.25 rem
font size
h3 will be 1.1
uh sorry 1 2 5 rem these are all things
i calculated already based on my mockup
and just playing around a little bit
with it we'll stick with one ram on my
body
and
the nice thing with font sizes are the
nice thing with um
if you've ever used something like sass
where you've set up using variables
variables are awesome they're amazing
but these css native ones are great
because you can actually change them
within a media query which is not
something you could do
inside of sas or less or any of those
other ones you might have been using
i'm going to be setting up a pretty
generic media query here of 800 pixels
but i do think it works well for this
design
but it could be something that you could
look at changing in your own if you find
that it's not working but i think it's
going to work well for what we're doing
here
and what i'm going to do is redefine my
font sizes here to make them bigger at
larger screen sizes
so we have our font size h2
3.75 ram
font size h3 will be 1.5 ram
and my font size body will be 1.125 rem
and that way at once we hit this
we don't have to redefine it within our
actual css these are being redefined
here so everything should just magically
change for us as long as it's been
properly set up using those so that we
can come all the way to here and i can
just put custom properties
update these for your own design
and whoops that's i'm so used to
we need comments that look like this
there we go uh custom properties there
we go and then we can do
uh general styles so in my general
styles what are we gonna do let's just
make some room here and then come back
up
so the first thing we're going to select
our body
and i'm going to set the background on
here of var
color
light
so let's hit save and the nice thing
with this with the custom property is
now if you decide to change the color of
it so you can see right now we have the
white background on there but if i
change this to let's say accent
it's going to change the background
color to everything to accent like that
where the accent color is coming in or
if we change it to dark we can quickly
change the color scheme of our whole
site so let's bring that back up to
light for now and then so we have light
on there our color will be our var color
dark so if you needed to change anything
you can just invert that and all of a
sudden you'd have a dark color scheme
which
we're going to sort of be using when we
get down to that at least to change the
font colors or when we get to my work
area we can easily set that dark
background on it just like that
uh other things on here we're going to
want to set we do have
a margin of zero
we'll put our font family on here uh
we're going to put our var
font family primary on there we're going
to have our font size var font size body
and now you can sort of see where that
fs or fw and all of that that i used
along the way why i did it i'm going to
line height i use a 1.6 as sort of a
default line height that i like to use
on everything
um so hit save and we come back we
should see a lot of those things coming
in the fonts are working and a few other
things we're getting there we're almost
done with the general setup another
general thing that i like to do is just
setting my images to have a display
a block which gets rid of some issues
that sometimes
come up with images and also setting a
max width
of 100 on them just so they don't grow
bigger and overflow at the side of their
parents
next up we're going to come and just set
up our basic type
typography
which is a word i have
way too much trouble pronouncing
sometimes we're not pronouncing but
spelling um for something i read a lot
so whenever h1 h2 and h3 are all going
to have a line height
uh line height of we're going to try 1.1
and adjust from there but because
they're going to be a bigger font sizes
in general if they break on two lines
they definitely need the smaller line
height on them and i'm going to put a
margin of zero for now that might have
to get revisited but in general the
headings um you want to get rid of the
margins and maybe keep a bit of a margin
top maybe a small margin bottom but
we're just going to do a bit of a reset
on there
and then on h1 i'm going to set a font
size of var and we're going to do our
font size
h1
and you can probably guess what we're
going to do for the other ones i'm just
going to copy this actually and we can
set that up with an h2
and that as an h3 and over here we can
have our h2 and my h3 so if we save that
we can take a look we should have some
nice big font sizes
everywhere except hmm that's really
small let's just go take a look i forgot
to put rem here
4.5 nothing will not work
so we'll have a nice big font size at
large screen sizes but when we get to
the smaller ones you can see it's
automatically adjusting when i change my
screen size and if we come lower down on
the site
again we should see those titles get
bigger and smaller automatically with
our media queries so that is really
really cool one of the things i love
about custom properties they do take a
little bit more time to actually set up
but then once you're using things and
creating things man it can just go so so
much faster so i think we're going to
end this one here we're going to skip
over the header and the navigation for
now we're going to come back to that in
a little bit because for now i just want
to start doing the general typography
but for our section titles and subtitles
and then we'll sort of go through the
site a little bit from there
all right so um as i mentioned we're
going to do a little bit more typography
we're going to have our section title
we'll give this a little bit of styling
which at the moment i'm not sure if we
need to do much on it and we're going to
have our section subtitle
i'm going to start with the subtitle
because there's a bit more of an i'm
going to play with that first and then
go back into the other one to modify it
a little bit so our subtitle here is
going to have a margin of 0 just because
i think it makes our life a lot easier
because remember we didn't do it as an
h3
this is actually a paragraph and because
it's a paragraph the font size on it we
do have to modify so the font size will
be my
var font size h3
and you can again start seeing where
these variables can be handy you don't
have to remember the pixel value you
don't have to worry about the media
queries or anything like that it just is
going to work and then we had our
section
subtitle
intro
we also had the section
subtitle
about that had similar styling on them
or they both had a background color on
them of the var
color accent
and the font family for both of those
will be my var
font family
secondary they're probably going to need
a little bit of padding on them but
we'll come back to the padding in a
little bit um we're gonna have to play
and modify a lot on these uh as time
goes just to get them to line up
properly in the spaces let's just go
take a look and see
i think that's working out pretty nicely
actually with how it is right now i'm
actually really happy with it i'm just
going to play with the spacing on it a
little bit just to see because i think
it's a little bit tight compared to what
the original design was but it's not too
bad you can see here the comma is
actually touching um that so i think
what we'll do is on my section title
we'll give it a little bit of a margin
bottom of like
0.25 m that'll probably be enough to
push it off
especially because it's a large font
size i always do margins and padding on
my text using m's i think it's the best
thing it's relative to the font size
that way and you can sort of
work with it so i think that's really
really cool and handy um here since
we're dealing with our section titles
and everything on my i like to keep all
my typography together
which is why i'm working this way
i'm going to say a font the font family
should be my
font and not my font family sorry my my
font weight on this one should be the
regular
uh which is awesome except this
obviously shouldn't be because that
should have a strong on it let me just
double check did i put that i do have
that on there so let's go and fix that
since this should be saying strong
typography
i'm gonna do it up here i know it's sort
of a typography but strong it's a bit of
a generic thing
font weight
is var
font weight bold there we go so we have
that working um
now the question is
i'm going to cheat a little bit this
isn't something i normally do or very
often do but i'm going to actually take
my
this
and say that the strong tag that's
nested in there is display
block just so the jane smith always ends
up on its own line instead of sometimes
being
on a different line like that so
i'm not a big fan of using compound
selectors but every now and then once
you know the rules you're allowed to
break them sometimes so this is one of
those times where i think it is
perfectly fine to go in there and break
it the font size on this does look a
little bit smaller than what the
original design called for so i might
play with that but we'll play around
with the overall look and if we still
find that it's too small
maybe we could even change both of them
to be the h2 size instead anyway we'll
see we'll come back to that once the
design is starting to come together a
little bit um but looking at the small
screen sizes honestly we're getting
close already uh to what we need there's
not a ton of work that needs to be done
at the small screens to get everything
here to work obviously these need some
fixing up
and overall there is some work to be
done but we are getting close um so what
we're going to do is we're going to end
this video here and then in the next
video we are going to go in and set up
the grid for this and make this work
apple small and large screens
now i know you might be wondering why
we're not doing the navigation first but
i'm gonna come back to the navigation at
the end and set that whole thing up
because we're gonna have to get into a
little bit of javascript and stuff to
get that working so i'd rather just
stick to css for now finish everything
else come back style that and then add
the javascript right at the very end
um so here what we can do is let's set
up a bit of a comment so we'll say intro
section and we can start styling it up
um so the first thing i'm do is i'm
going to give it a
position of
relative i'm not sure but i think we're
going to have some absolute positioning
coming onto here
so i'm doing that is a bit of a
precursor for that let's see now we have
i'm actually going to say we're going to
turn this off but let's just say um
for now i'm going to say nav has a
display of none just so it doesn't
really get in the way too much we'll
keep our logo at the top even though
that does have to be smaller
but at least it'll give us a bit of a
better idea of how everything is going
to be looking
once everything comes together at these
smaller screen sizes and i think
actually i'm going to come up before we
do anything else
typography i'm going to come here to
like my general stylings and i'm
actually going to give my sections
a generic padding so padding will be
let's start with
say 5m top and bottom 2m left and right
the two i might be a little bit big at
small screen sizes but we're going to
start with that and see what it does
the main idea here is it's just going to
keep things from touching the side of
the screen when we don't want them to
um so i'm actually not minding that
except the line height here i'm actually
going to shrink that down to one because
i find the spacing on the lines was way
too much i think that is looking not bad
but obviously we need to add a little
bit of spacing
on the bottom of that because it is
stuck onto there so that is my
section title
my subtitle
they're both going to need the spacing
so i think we can add our margin bottom
here of 1m
just to give us that nice little space
and at small screen sizes
i don't mind that too much this does
need a box shadow we're going to come
and do that afterward though
and where we do need this to change is
once we get into our media queries here
and when we start changing this
for the larger screen sizes
i know i set the fonts to change at 800.
i'm going to set this to change its 600
though
my stance on when media queries should
come in
600
as again this is a bit of a generic
thing your text might change your images
might change you're going to play around
with it a little bit um so i'm doing 600
is a bit of a generic one i like
designing from you know 300 and up 600
and up and 900 and up tend to be some
nice generic uh ones instead of focusing
on specific devices but your mileage may
vary with all of that um so the first
thing i'm going to do is actually we're
going to define a display
of grid on here and we're going to set
up a grid
i do like using
let's say grid
template
areas um i do like i love my grid
template areas so in my grid template
areas here i am going to go on another
line just because i find it makes it a
little bit easier and we're going to say
title
and then on the next one we're going to
do an image and subtitle like that
and then we can say my grid
template
columns
will be
i'm going to do a min content so it's
going to try and shrink that down as
small as it can we're going to set our
image up so hopefully that doesn't
actually disappear
because that is for my image and then my
text will be set to max content to try
and make that as big as possible
now obviously we need to get things
actually lining up where we want them to
be because that's going to cause a
little bit of an issue
so let's start off with my
intro
image
which i didn't actually put a class on
so here we can do class is equal to
intro image
that will help
[Music]
sorry about that so
uh our intro image will be our grid area
of img
and as i was a little worried about that
means my image is actually going to
disappear so let's fix that um we're
gonna actually say this has a min width
of 250 pixels just so it never
disappears and that's much better but
now my text is stuck to the side there
which is no good so here we can do a
grid column
gap of 1m just to create that spacing
that we want
and
the subtitle we might not actually be
able to use but we're going to leave it
there anyway
so that is
nice uh the only problem is we we don't
want to be stuck there we want it to
stick in the middle so i am also going
to do
a width
of min content which should shrink it
down and then give it a margin of zero
auto and so it should match the width of
the
whole div well or the section will match
the content that's inside of it and the
zero auto will keep it nice and centered
when we're at these bigger screen sizes
so we can see that it is working nicely
but the front end dev we have a bit of a
problem where it is stretching there
so that was my section
subtitle
intro now this is where things get a
little dicey because should this be here
or should it be up in the typography
section i'm going to argue that it
should be here because we're pertaining
to layout right now or not pertaining to
the type if you think it makes more
sense to leave it all in one spot
together i completely agree with you and
you can go ahead and do that because
we're only worrying about layout right
now i'm keeping this part of this stuff
down here where the rest of my intro
layout content is
so for this i'm going to start by doing
an align self as start which will stop
it from stretching down and it sort of
fits into that area a little bit nicer
and i'm also now going to say that my
grid
column
is negative 1 over 1 which will have it
stretch the whole length and going all
the way across which is great except now
it's going underneath this because by
default they don't want to overlap
so to get around that overlapping issue
we can are not the lack of wanting to
overlap i should say
we can do a grid row of two
because we have our grid row of one uh
our grid row one line and then our two
so it's there now our text is there we
want it on this side so we can also do a
simple text align to the right i notice
that we're pertaining to layout more but
at least there we go it is starting to
work um and starting to come together
now my original plan to get this to go
underneath like that was actually to use
um absolute positioning because absolute
positioning the grid work fantastically
together but i think we can actually
pull this off with relative positioning
um and of having to avoid absolute
positioning sometimes is a good idea so
what i'm thinking is on here we can do a
position of relative but my left is
going to be negative 2m
and if we go take a look see let's pull
this over so that's giving us that space
here maybe that's a little bit too much
so maybe we can do like a negative
1.5 um
and i think that'd be probably a little
bit closer perfect
uh the only problem now is the width
won't match and this is where if you did
use absolute positioning you can say
left
negative 1.5 and you can say right and 0
and it's going to line up perfectly
we can't actually do that when we're
using um
relative positioning
but we can do a little cheat and i love
doing things let's not cheat it's uh
what these types of things are made for
so my width is going to be a calc of 100
plus
1.5 m
um and that should make the width be 100
plus 1.5 m and then it lines everything
up nice and perfectly so i think that's
really cool and fun
i love doing stuff like that
um so that's working i think it's pretty
straightforward too by having these
together and usually i have width near
the top but i do think it means like
keeping these together means the makes
them work better and i am going to
increase the padding a little bit but i
think we're going to want to do this on
both of them so let's just come all the
way up here we set a background on that
so i think i'm going to set my padding
here
um padding of say 0.25
[Music]
one m let's just see what that ends up
looking like
yeah perfect so i like that now um it's
not lining up like my design where i
matched that but obviously if the title
changed i did front end dev but say you
wanted a different title that could
actually break it a little bit where
it's actually going to go underneath the
image
a tad so i think instead of changing
that if you wanted to play with the font
size you could very easily play with it
but i'm going to keep it as this smaller
font size because it's going to give
people more room if they had a longer
title without breaking it
i think that where the media queries
here are would prevent someone unless
you get a really long title from this
becoming an issue so the last thing for
now is we're going to stick it
underneath and add that box shadow onto
there so let's go and take a look at how
we can do that uh putting it underneath
is going to be easy enough
i'm actually just going to come on the
image and give this a position of
relative and
uh that should be enough but we can also
just to be safe give it a z index of two
just so we know that it's coming up on
top
and now for the box shadow i like doing
complicated box shadows because they can
be a little bit nicer looking
so what i'm actually going to do because
we do want to use it in more than one
place
i'm going to come up to
my custom properties here and create my
box shadow here so i'm just going to
call it bs which could be a number of
things but it will be box shadow um and
we're going to do one it's going to be a
small offset so 0.25 m 0.25 m so that's
to the right and down just a little bit
the blur will be a 0.75 m
and we'll give it an rgba of 000.25
except that should be our gb and that
should be good so now we can come down
and put it on our image but we don't
want to put it on this one we want to
put it on our image at all sizes so i'm
going to do my
intro image out here
and give it a box shadow of var
bs
and that should start by giving us a
nice subtle shadow i think just like
that it looks good um but i like always
coming in and adding a little bit to my
shadows so i'm going to do a comma and
then i'm going to break this onto a
second line but if you don't want to you
don't have to
i can continue right after
the shadows layer on it so if you're
doing more than one shadow you can
always start with the bigger
one first and then like smaller ones
after because it's coming sort of closer
to us if that makes sense uh the blur
will be smaller as well and rgba
of 000.15
and don't forget your m here uh so the
difference between the two of them will
be very subtle but it just gives you a
bit of a darker shadow that's a little
bit closer it's layering things and then
the next one's a little bit lighter so
it can be a little bit more realistic if
you look at things like material design
they often have two three shadows deep
just to help increase the realism of
their shadows so there we go i think
that's looking really really cool
it never gets too big too wide but
that's all right and then
you know as we go so it's a nice little
focus point it shrinks down and then it
shrinks once again and this bar going
all the way across like that to me works
well at the small screen sizes
but if that's bugging you and you really
don't want it to do that we could come
in
at our small screen sizes if this was
just a display
inline block
because then what that's going to do is
it's going to set the width to be the
size of itself so then here we can see
it's fitting exactly itself and then at
the big screen sizes it will jump back
to what we had so you know what i think
for the small screen sizes i'm going to
leave it like that but if you rather
adjust that to something a little bit
different by all means you know if you
rather that bigger bar that matches the
image size that is perfectly fine too
that is it for this one in the next
video we will jump down into this next
what i do section and style that one up
it should not be too much work and then
we can keep on going we'll style our
button at the same time
since we haven't done that yet
all right here we go with the services
or what i do section
which isn't too complicated to do if we
go and look at it right now um it's not
going to be all in place yet but we can
see that our text is sort of coming
there and when we get to the bigger
screen sizes we just need to break
across on all three so let's start by
setting the colors up first so my
services
i'm going to give this a background
color
of we'll do our var color dark
and a color of our color light
to start things off i know we have a
background image on this as well
i always set a background color and then
a background image afterwards because if
the background image ever fails for one
reason or another
it's always good to be able to get them
so we want to go back a step go to our
images and then it was called services
bg.jpg
and we can see there we go it is coming
in
with that going to do a background size
of cover to make sure that it never
repeats itself and i think that should
be pretty good actually um we can see
that it is coming in nicely just like
that it is a little bit uh bright and so
if you ever you know you want to we
could always do a background blend mode
on here too of multiply
uh
just to help darken the whole thing up
we're sort of losing the image maybe
more than we want so we could play with
the background color or the image i'm
actually going to leave it like this
because to me it's more important that
the text is super readable even if it
means the background's a bit darker than
what you intended it to be um whereas
here you can see it was like in that
example that i had so it's up to you
whether you want this multiply on or off
uh you know you can play with the color
this is where you could say instead of
color dark we do color accent
um and then you'd actually get like that
green color that's coming through so it
really depends on the layout that you're
doing it could be a fun um a fun thing
to play around with but i'm gonna i
think leave it like this for now and
again the reason we put both the color
and the image is just in case the image
doesn't load for some reason at least
people will still be able to read the
text
um i also always do my background color
and image and size if i need it as long
hand instead of the shorthand property
because the background shorthand drives
me crazy i like short hands that save me
time and i can put them in any order and
the background one i tend to find breaks
things
more than anything else
i'm also going to throw a text align
center on this whole thing because
everything on this on small and large
screens is centered so that is great
the section title services was a little
bit unique um so i'm going to stay here
for now section title
services
uh because the color of it is my var
color
accent
we're going to need a bit more of a
margin on it i think uh but before we do
the margin i'm just going to give it a
position of relative
because i have the pseudo-element that i
want to put on it so it's my let's just
copy this because it's a little bit
faster and my after
so that's i'm going to use my suit
element just to create this light line
that's coming in right there
so it's nice and easy to do we just have
to do
a content so if you don't know too much
about custom about custom properties i
was going to say about pseudoelements is
you need to give them a content or they
will not appear and either display block
or position i'm going to say display
block this time
width of about 25
a height of one pixel
um margin of
0.5 m so it's going to give us some
space on the top auto left and right and
1m on the bottom and this is why i
didn't put any margins on my title
itself because i think most of the
spacing that i need i can have my suit
element creating
for me and of course we need a
background on here um we could do two
different things
we'll do in my var
color
light though
the other option you could have if you
always wanted to match the title of the
services is we could put that to current
color
so if it's current color it's going to
match this color that we have on the
text there
i don't know if i like that 25
we might set a set width on that instead
of like 3m
just to have a nice little set width so
now it's green and green i prefer that
actually if it's white so i'm going to
switch that back
but if you do current color whatever
color you decide to put for this this
will automatically match
no matter what var
color
light i think is going to look a little
bit nicer
and we're going to lower the opacity on
it to opacity of 0.5 just so it doesn't
stand out as much it should be a little
design element maybe even a 0.25 will be
enough
um it should be more of a design element
than something that's really interface
that we can really see
so there we go i think that is good
maybe it could be a little smaller but i
think it looks nice
how it is so i'm going to leave it just
like that let's move it to two
as i said that now went to the smaller
screens it was a little bit too big so
there we go so at the small screens it
is done we still have to style our
button but the layout for this part is
completely done and if we go up to the
bigger screens well that's where we need
it to break into
multiple columns so what i'm going to do
is we're going to start with
a media query we might have to come back
up min width i'm going to do my 800
pixels again
and let's do my services
gets a display
oops this
play
flex on it so that should make three
columns right away
i'm also gonna give it a max width
though max width of say a thousand
pixels and a margin of zero auto the
thousand pixel max width that i'm
putting on that is a bit of a guess um
at this stage but i think it's going to
work nicely
um where i can't even get to there based
on my screen size right now but it's
just going to stop things from oh it is
we're getting there right around there
which is pretty much perfect
uh the only thing is we do need a little
bit of space between our individual
services
so this is where we could say that if i
have a service
plus a service
we can have a margin
left i'm trying to think service plus a
service margin
yeah left was right of say 2m
i'm also going to i'm wondering if they
should have a width on them or not let's
just set that like that and let's just
go take a look there we go we have a bit
of space between them now they're no
longer touching uh if you don't know
about this
the plus combinator that i did it's
saying it
the sibling so it's going to look at
this one and it's going to look at this
one so it's ignoring this but it goes
sort of the sibling so is there a
sibling yes it's adding a margin on the
left and then this one is the sibling so
it's adding the margin to the left of
that and then there's no more so it's
not adding it to any other ones and this
one is not getting a margin left so it
doesn't create this giant space on the
left side of that that we don't want to
have
so that is perfection and then it's sort
of like adding a gap um when i you know
with the grid we have gap flexbox gap is
coming it's in firefox but it's not in
the other ones yet so we're sort of
stuck doing it like that
so that's working well
um i think on small screens this is
working but then we get to these bigger
screens like here
the length of the text is a little bit
too long so what i am going to do is
here before we get to our media query
i'm going to say the individual service
also as a max
width of we'll try 500
and with that we'll need a margin
of zero auto to keep it centered as well
and if we go take a look now
uh i think that's a little bit better
it's just stopping it from getting too
big and it shouldn't affect it at this
size because they're never actually
getting bigger than 500 pixels
so there we go i think that's working
nicely and then click it's working
nicely there so i'm just going to worry
about my button now
and this is you do have the choice a
little bit here i'm not i'm going to
leave this here um
because again it's mostly dealing with
layout but i guess this one you could
argue should be up with my typography
i'm a little weird how i guess i work in
that i'm wondering if i should group it
all together but i am going to go all
the way up to here
for my
dot btn um so usually for my buttons i
usually have designs that have more than
one button so i'm just very buttons
but in this case i only had the one
button
to style up so all my styles are going
on here an inline
block
padding can be 0.5 m 1.5 m which sort of
gives it its size the background will be
my var
color accent
the color itself so the text color can
be color
uh dark
uh text decoration since it can be set
on a link will be none
i'm also going to do cursor pointer this
is in case you ever do put it on a
button instead of putting it on a link
that's important to have
font size i'm going to shrink it down a
little bit because i think it was a bit
too big i don't have a custom property
for that we're just going to shrink it
here we can do a text transform
upper case so it's always capitalized
and if you ever do all cap text it can
help
letter
spacing to do letter spacing on
something to help spread them out a
little bit uh we're
speaking of typography font weight i
think i use my var font weight bold on
this
and then we can also look at my
transition i'm going to do a transition
on my transforms
200 milliseconds ease
in out and the reason oops in
ease in out uh the reason that i'm
putting that on there is because on my
etn hover i want to put a transform of
scale
1.1
so when we do hover on my button it will
get bigger and smaller
the only thing is my
transition
transform not transform
and there we go now
uh there we go now we can have a nice
little transition when we hover on top
of it
but there is another thing i want to do
um and i'm actually going to do this on
all my links and on everything really so
where should we put it uh we'll do it
right here before my buttons i'm going
to say everything when it has a focus
state is going to get an outline on it
outline
will become
let's say three pixels
solid var
color accent
so this is going to apply to my button
but it's also going to apply to other
things now the only problem with it is
it doesn't really jump out at you when
you tab onto that right so you can see
if i'm here and i tab it gets a little
bit bigger
so to really make sure people can notice
it i'm also going to do an outline
offset
of say 3 pixels
so if i'm here and i tab it highlights
that i am tabbed on it
so it's not a hover state it's really
just for my focus state which is a
little bit different
um grabs the attention a little bit more
than my hover might do
so
that is what i'm going to do for all my
focus this will be on my links will be
on other things we're going to leave it
just like that because i'll talk more
about it once we start getting to our
links and a few other things i'm going
to come down one last detail though what
i don't like now is how close everything
is like how close my button is to
everything else there i could add a
margin top to my button but i do want to
think that maybe this would be something
that would be working in like the real
world or on other things and actually
here i think i wrote see my work we're
gonna change my button a little bit
um i did 1.5 let's make this like 2.5
because my button was quite a bit
wider
so i think that'll work better for my
padding
and i'm going to come to my section
how's it looking at the small screen
it's probably the same problem
it's a little bit where it's a little
bit it's way too tight
so on my
dot services
plural margin bottom of 2m
actually i'm going to bring that up to
like 4m
because i had quite a bit of space it
balances out between this space in this
space i think that looks a lot better
and so it's looking a lot better the
only problem is my margin is
disappearing here because over here i
did a margin zero auto so i'm gonna have
to change that to be a margin
left of auto and a margin right of auto
just so it doesn't overwrite that margin
bottom
along the way
and so it's always sitting at that same
spacing super duper that section is all
done i'm super happy with it and so now
we can move on to this next section
okay so we're going to be doing the who
i am or the about me section in this
video and we're going to be using grid
once again for it a little bit like we
did up above to be a super similar grid
but we're flipping it around a little
bit because if you remember uh when we
did that the image is on the left side
and is smaller and then um this area
will be quite a bit wider
than the other one and obviously the
image is on the other side but that
doesn't change things up too much um so
let's start off just with me about me i
think what we're going to do for now is
just give it a max width of 1000 pixels
like we did on this section above we'll
give it a margin of zero auto to keep it
that centered and let's go take a look
to see if that's had any impact on
things so the small screen sizes we
should be okay and then when we get to
the larger one at one point it does max
out on the size so the line length is
quite long now but since we're going to
be making that into two columns i think
it will look perfection
um so let's take a look it's right
around here now it depends on the size
of the image we use obviously on how
that's going to work out um but we want
to build in our media query i think
we'll do the same that we did previously
so add media
or i just realized i did um 800 pixels
for the services i'm gonna go with a 600
again for here so 600 pixels i'd said in
another video um that i usually do like
a six nine um in this case the 800 just
seemed to work better uh as a break
point for when this would switch over
than 900
if you prefer things all switching at
similar levels you could definitely
bring that up to a nine i just find it
um we're sort of wasting screen space um
you know we can go to three columns
around the 800 pixel point
some people like having really set media
queries i don't use a lot of media
queries i sort of do one per section
maybe two per second so you can also
deal with really big screens sometimes
you need to make some changes
but i like having media queries
that deal with my layout more than i
have media queries that just fill in
with the set sizes i think it makes a
lot more sense and i think this one's um
you know once we get to about the 600
pixels we can break that off into the
two columns and it will work really
really well all right so in this media
query i'm going to set um my
about me
and we're going to set up a display grid
on here
and my grid
template
columns and micro template columns we're
going to do a 1 fr for the main area and
then for my image itself i think for the
moment i'm going to lock it in at like
200 pixels maybe we'll play around with
that number a little bit but 200 um i
think will match pretty well with the
design that we have um it's gonna let
the image be bigger than that at
different screen sizes it could be a
number that you change for your own
layout depending on the image that you
want to use and i am using pixels here
and i am actually using pixels in my
media queries as well as you might have
noticed you might be wondering about
that some people try to avoid pixels
i do avoid them in my font sizes as
you've seen i use my rams
i use rams for font sizes because it is
if a user has set a custom font size for
their browser because they want things
to be bigger it does allow that to work
things zoom in and out nicely
but there's nothing wrong with using say
a pixel value on a max width it's not
going to cause any issues we're going to
need a gap on that but let's set things
up a little bit now on the last one i
did use my grid template areas but let's
go
let's take a look quickly here and how
we set it up so we have
about me
um i didn't once again i didn't give my
image a class which was what i was
thinking i'm going to do about me
image
because we do want to start by placing
that one where we want about me
image
and that one i'm going to give a grid
row last time i did it with
grid template areas this time i'm going
to say i'm going to say 1 over negative
1 which means it's starting at the top
and ending at the last row automatically
and my grid column
will start at grid at column line 2.
so that should fix
that up we also want my
uh we want the section
title
about
uh is going to be a grid
column
of one
and actually we can do that for my uh oh
that was my subtitle we can do the same
thing for our
section
title
so we have both of those let's hit save
i just have a little typo down here
let's change that to be um semicolon and
go and check it out title is okay
let's see this is where grid areas
sometimes make things easier and why i
like to use them in general
once again even though we're not going
to be able to use a grid area for this
one since it's overlapping
it could overall be a little bit easier
than using line numbers um it also makes
it easier as a template for people to
change things around so why don't we set
that up
with some grid
temp
grid template
areas
so we can have our title and the image
next to it
and i like putting these all in the next
line and indenting it just because it
makes it easier to overlap each one
uh the next would be my subtitle and my
image
and the last one would be my text and my
image i'm going to go back on this
actually and we can say that this is my
grid
area title
the image will be
grid area
image and it really does make it a lot
easier to manipulate this if you wanted
to change your grid just by changing how
the grid template areas are set up and
we can already see that it's much
falling pretty much in line with what we
want it to be doing
which is awesome and at the small screen
sizes it's working out nicely and then
we boop we get to the larger screen it
breaks into the two columns
a little bit more work to be done still
on this but i'm going to also add in
here a grid gap a grid column gap i
don't want to create any gaps on
my
rows so my grid column gap
i'll go with like a 2m maybe this time
1m could work nicely but i like keeping
a bit of space on there so that looks
good on my image i'm also going to add
we can come actually up to here about
me
image
you can add our box shadow box shadow
bar this is where it becomes nice the
first time you set up a custom property
it can seem like a waste of time but as
soon as you reuse it it is super handy
so there we go
um my
section
subtitle about we're going to want to
give that a graded column of 1 over
negative 1 so it goes from one side all
the way over to the other side
and
grid
row of two to keep it in the right place
so there we go now it is going
underneath my image right there so this
one's going to take a little bit more
playing around with in how we're going
to set it up to make sure that text
doesn't go underneath the image like it
is doing now
uh it's not terribly complicated and if
you do have an issue up top with how
that's working you could always use the
same method up there to fix it
so what we're going to do
first let's give it a position
of relative and we can do this very
similar to what we did last time i'm
going to give it a left of negative 2 m
and i'm going to give it a width of calc
100
in this case i'm actually into a plus 4
m
and
that's the reason i'm doing it like this
is because i do want it to stick out
both sides a little bit and maybe that's
going to be a bit too much
it works here but it's going to cause
some issues there
but we do want it to stick out both
sides
um so by doing it this way it's going to
stick out both sides which is cool but
we will have to build in the padding to
fix that so padding
can be i'm just trying to think 2m for
both sides so padding left of 2m
but then the padding right actually
padding left will be 2m the padding
right
i'm going to do
calc
of 200 pixels
plus
2m
and what that's going to
do is make it so my text we have this is
all padding on this side now so the text
will never touch the image you can see
it's getting really close but it's not
clicking now we have the 2m there i'm
actually going to boost this up to 4m
and what that's doing so now when we
look at it um what it's doing is it's
setting it up so the text can never go
into the image so on this side we have
our 2m then we have the 200 pixels and
then i had a grid gap of 2m so i'm
pretty much in the 4 is the inclusion of
both of those
so the text will never once we set it up
we'll never go underneath that image so
that can come in handy if you go to a
smaller screen size and we get this
where it's breaking over on two lines or
if you have a long title you had a short
title it's not going to change anything
in the long run
my only issue is that this isn't really
working right now with
how we've set things up so what i'm
actually going to do for now is my
padding left
my left will be negative one
this is going to be plus 2
and
this is going to go back down to 1. i
think we can leave that one
if we really wanted to we could
change that number to a 3 but i think
i'll leave it as a for it because i
don't think it's going to get in the way
and that's just going to make sure it is
sticking out but the reason i put the
padding on that side is just so all the
text is actually lining up if you don't
like that and you don't like the fact
that it's sticking off obviously you can
play around with that number a little
bit
but at least now it's working better at
the other sizes with the 1m
instead of the 2m
because we have 2m of padding it gives
it room that it can still live inside
without
causing any overflow and then obviously
at the small screens we don't have
anything to worry about
so that is looking pretty good but what
i want to do is one last thing um
we do want to reposition it on top of my
image i'm just going to come here onto
my image and give this a position
relative which should fix the issue but
once again i'll give it a z index of two
just to make sure that it's always on
top and there we go so it should be
working out great um the thing that's
nice about this is because of the way
the image is going to be calculated like
if we had longer text here it's just
going to keep flowing down it's not
going to actually break anything it's
not going to cause any issues but if you
had really short text it's also going to
work and shouldn't have any issues and
that's one of the reasons why i included
this inside one div
if you remember when we set it up we did
that as
an about me body
and it's important that it's in this
body because it's only going to create
one row where so if any additional
content needs to go inside this body if
you include extra paragraphs that are
outside of that it's going to keep
creating new rows in the grid and it
could actually impact the way that the
image is working i don't know if it
would actually break anything
but pretty much all the content itself
will have to go inside of that body area
just to ensure that it's one row so
nothing breaks along the way and that is
that area all wrapped up so in the next
video we will move on to the next one
so we're going to be doing the portfolio
section we're going to be using grid for
this one as well and one nice thing with
it is in this example image i only have
six pieces in the code i have i have 10
and it's one that should be flexible and
be able to grow or shrink
depending on the screen size and we
shouldn't need any media queries for
this one this is one of my favorite
functions of grid
so if we just look really fast on our
markup before we start doing anything
and we look at how we did this i have
the we have the basic my work area and
then we have the portfolio itself and in
each portfolio we have a portfolio item
and a portfolio image
so if i come back to here and let's
create a new section
uh so that was my
work
we do want to give this the background
color
of
var
color dark
i will just say color is var
color light
even though the title will have to
change colors
i did forget to put this so a selection
of my range of work sorry about that so
there we go it is there
we can also just throw to make our life
as easy as possible we can throw a
text align center on here as well
because that's the only text that we
will have now obviously the colors
aren't quite matching and this one
should be bold uh on the bottom so i
think what i didn't do
was give these their own classes
and just by doing that i can say that my
i don't really need the the first one
but my section
subtitle
work
color can be my var
color accent
and my font weight can be var
font weight
bold now these are really just
typography there's nothing but layout
really on these i will add a margin
bottom to it margin bottom of 1m
um just to help with the spacing a
little bit maybe we can bring that up to
2 actually
this one if you wanted to argue because
it's all typography and it has nothing
to do with layout purposes it could come
up and live with all of this stuff here
and so just like i did with these ones i
think i'll leave that one right there um
for my
portfolio now portfolio we're going to
do a display of grid on here
we're going to do a grid
template
columns
and this is where the fun starts on my
grid template columns what we're going
to do is a
repeat so if you don't know repeats say
we do 3 comma 1 fr it's automatically
going to make three columns so if we go
and look we have three columns there and
it's working out really nicely and if i
bring that up to a 4 it's automatically
going to make four columns and right
away that makes for something that's
really easily interchangeable which is
really really cool but what's even
better here is auto fit in a case like
this
but the thing with autofit is you can't
just use something like 1fr you have to
use a min max
which sets a minimum and maximum value
the minimum is really up to you i'm
going to say it's about 300 pixels
and a maximum of 1fr so it'll grow to
the size that it needs to so it means
each grid has a minimum size of 300
pixels but if we if it has room to get
bigger it will
so let's go take a look and see what
this does so it means at larger screens
it works but when we get to smaller
sizes oh it's automatically gone down to
two
and then at even smaller sizes it will
automatically drop down to one and if
you had very big screen sizes it would
just keep growing and growing and
growing so there is a chance you might
also want to set a max width on this
but it really depends on you i'm going
to leave this off
but if you wanted to have a maximum
width just to prevent it from being this
one long string that goes all the way
across it is a choice if you set a max
width also just give it a margin of zero
auto to keep it centered on the screen
but i think it's going to work perfectly
like this it does mean because i have 10
items that the one downside is sometimes
you will end up with like one item
that's left over at the end
whereas you know now it's working really
well with nine items but if i made it
nine and then it goes down to the two
column layout well then you're you know
you'd have one empty one here so it
really depends on the setup and how you
wanna do all of that but overall um very
simple nice and easy to do and it very
very flexible
depending you know you could have 100
pieces in there you could have five
pieces in there it's always going to
work so that should work out nicely
all right so now what we want to do is
add a little bit of a hover effect so
the first thing i'm actually going to do
is take my portfolio
item
and on my portfolio item we're going to
give it a background of our
accent you might be going what's the
point of that we're not going to see it
you're right you will not see them my
portfolio items obviously have an image
on top so we will not see that color but
we're going to play around with that a
little bit now
so what we're going to say is that my
portfolio
image we're going to set a transition on
this so transition
uh we're gonna transition two things a
transform
uh we're gonna do this one kind of
slowly so we'll do 750 milliseconds
which is pretty slow for me and we'll do
a cubic
bezier because we're going to be fancy
here and a really nice one to start with
is a 0.5
but not 0.5 8.5 comma 0 comma
0.5 comma 1. it's a really nice curve
very similar to an ease in out
but a little bit
more subtle so that will be for my
transforms and then i'm going to do a
actually we can put each one of these on
a line because we're going to have two
different ones uh so after this one
we're going to put a comma and we're
also going to transform the opacity of
it this one will be a little bit faster
so the opacity will transform over 250
milliseconds and this one will just be a
linear transition
and so with that done i'm just going to
copy my portfolio image
and we can come down
into here
and my portfolio image hover
we want to give this a transform
on the scale uh we'll go up to like 1.2
we're going to come back and forth a
little bit uh once you've set this up
we'll change the opacity to like a point
seven five
and i'm also
and so let's go and take a look at what
that's going to do so now we can see
that when i hover on top the green color
is going to show through and it's going
to grow and shrink but obviously that
looks kind of weird right that it's
expanding like that we don't really want
it to do that because that looks super
awkward so on my portfolio item i'm also
going to do an overflow of
hidden
so now if we go take a look when it
grows it's just growing within that box
and it won't overflow out so i think
that makes a lot more sense and works
much much better and we get that little
color coming through on each one you
could play with the opacity a little bit
if you wanted it to more of the green to
come through
we could definitely have more of the
green come through
and because these are links we will be
able to tab onto them but you can see it
is doing that outline that i wanted it
to have so if we want the tabbing to
have a similar type of effect we can't
actually focus on the image itself we
can only focus on the link and then have
the image inside of it and be modified
so what we can do is we can keep the
same effect on here
but for this one it's going to be for my
portfolio
item
so if my portfolio item comes into focus
we want the embedded uh or the embedded
the the child the portfolio portfolio
image so the the child there to change
so now if we come and take a look when i
tab on you can see that the tab is also
affecting it now the problem is where
the outline is does look kind of awkward
um now if we want to fix that issue with
the focus we will actually have to
change one other thing here and that
would be my portfolio
item focus
just on the when that focuses the
position will become relative and the z
index for that will become a two we
can't do that on the image itself
because it's the image is inside of
the portfolio item so by doing this it
should
there we go pops out in front and the
focus the like green bar
if you don't want the green bar you
could obviously turn it off as well but
i'm going to be keeping that it's going
to be very consistent through my whole
site
in having that so i don't mind that it's
there but if you don't really like it um
for this one because it's obviously
jumping so much when we have her on top
i think it would be okay to get rid of
it um but for all the other ones i would
keep some sort of focus state uh so
that's it for the portfolio
area here we will design a page for our
portfolio items as well but we're not
there yet let's finish this page off
first
all right for this part of the site
we're going to be doing the footer which
is really straightforward but we're
going to be using font awesome for it if
you've used font awesome before you can
skip this video in the next one we're
going to be really setting it up and
styling things but if you've never used
font awesome before it's really easy to
use you can go to their website which is
fontawesome.com there's a link to it in
the description of this scrimba as well
and what you want to do is you want to
click on the icons this is because i've
already set it up to be using their
icons if you're using it on your own
site and you haven't got that link yet
you can click on the start for free
instead give them your email address
they're going to send you the link to be
using but then in this case we're just
going to be clicking on icons and it's
going to bring you to their list of
icons now for font awesome there is a
free set of icons available and a paid
set the free ones there's still
thousands to choose from but if you are
willing to pay for more you get access
to up to 7 000 of them which is a lot of
icons that you can use
in this case we're only going to be
using the brands icons so there you can
see on the left side you can sort by the
different styles of them and the solid
are the only ones that are available for
free in general
but if you do want to get the brands
you'll click on that it's only going to
bring up the brands or often what's
actually easier to do is just to search
for the brand you want so if you wanted
twitter or github or whatever else uh
dribble facebook anything you want just
run a search for it and you should be
able to find it
once you found the icon you want you can
click on it so you just literally click
on the icon it will bring you to a page
that looks like this and
all you need to do is click on that
where it shows you how you're going to
grab it and the cool thing with that is
it should automatically copy it from
your you copy it from there and then you
can paste it directly into your site so
i'm going to do that really fast just to
show you how it works
and now obviously you can't see me over
on
their site but what i'm going to do is
we'll come down all the way to the
footer here
i have my list items let's clean this up
a little bit to make it a little bit
easier to read
there we go so that's a little bit
easier to read we get rid of our a our b
our c and our d
and here inside my link so i'm in
between the opening and closing a i'm
going to paste this in and just to make
it easier to read we'll put that on its
own line as well
uh just like that so there we have my
fab so it's font awesome brand
fab and then font awesome and it's the
code pen so if we go and take a look
all the way down at the bottom it has
changed it over to the code pen icon so
i'm quickly going to bring in the other
ones
and now you can see that they are all
there and that they're all working so
that is really cool it's a really nice
easy way to bring uh social icons into
your site if ever you need them and
you're going to see in the next video
when we style this up it works just like
a font so all we need to do is set a
font size a font family all of that
stuff and our icons should be coming in
no pro and everything will be looking
really really awesome so we'll see in
that video where we style this up
all right so we can start styling up our
footer now so let's create a little
comment to say we're in our footer um
one thing i'm going to do right away is
actually come and give this a class i
know you might say it's redundant of
footer just like i did on my nav um so
just because i generally like styling
everything as much as possible with a
class on it uh so i'll put a background
on this now i'm gonna do a one one one
here i'm not gonna use a custom variable
it's just almost black not pure black
but almost black so the footer will
always be dark if you want to change it
obviously we can change that
individually
but for the color here i will use my
accent color for the text
my text align will be centered and we'll
put a little bit of padding on this not
as big as on our other sections but
something like that should work out
nicely
uh the other thing i want to do on my
footer is i obviously want the color of
my links to come through
um so i could choose my footer link and
my social list links individually
this is one of those times where i might
just do something like this and say the
color is inherent for everything any
link that might end up in my footer so i
don't have to worry about it um at all
if we go take a look we can see now that
everything is styled up it has the
colors we want on it the layout
obviously needs some fixing up but we're
getting there just realized uh jane dev
that's okay um
so footer a that is good
uh the next thing to do is say my footer
link
hover
and my
social
i'm going to give them both an opacity
of like 0.7
so if we go and take a look at it now
we can see that when we're hovering on
top it just gives us a nice little
subtle hover hover effect
and the reason we want to do that if we
tab on it you can see it's actually
really highlighting it and you might be
saying well that doesn't look as nice or
i i want to keep that nice little subtle
effect for tab navigation the reason i
like having a focus state that's
different and this is something i've
more recently changed but it's when we
tab through we can see that it is
working um it's really highlighting but
we don't you know it we don't know where
it's going to bring us next and if it's
a really subtle effect where it's just
this that's happening you might not even
realize when the page jumped down to
select something when we tab onto it we
don't always realize what's being
selected if it's a little subtle effect
like an opacity change whereas if
there's a big box that's surrounding
something i do think it makes it a
little bit more obvious what's happening
so that's one of the reasons i'm going
to keep that focus state just like that
i think we're actually going to do two
different things here on my footer links
we're going to do our color of inherit
we're also going to say a text
decoration
of none just to turn them off
as a default
but then what we can also have is on my
footer
link hover not list footer link hover if
we want to we can do a text declaration
of underline just to bring it back on so
when we're off here we don't see it but
you know it's a double little whammy
just to make it a little bit more
obvious that it is some that we are
interacting with it i'm going to come up
to here just because i like keeping my
hover states um sort of separate or
underneath so my footer link
we're also going to want to change the
font size on this one
so the font size of this can become my
variable font size
h3 so it'll be big but not too big and
the font weight
will also become
my variable font weight bold so now we
can see that it is i think looking a
little bit better we can see that it's
nice bold it's a little bit bigger so
that is looking awesome let's come on to
my social list now
um for this one we want a list style of
none because we don't want the bullets
we want a display of flex which is going
to put them next to each other and a
just
defy content of center to put them right
in the middle
and i'm also going to add a margin on
this
just to space it out a little bit and
padding of zero because the default
padding will make it off-center so let's
go take a look and there we go it is
looking alright but obviously they're
all jammed in and a little bit too close
to one another so we can come up and say
that my social
list
items
i'm going to give them a bit of margin
margin of
zero top and bottom but we can add like
a 0.5 m left and right
and on my social
list
links
i'm also going to give them a bit of
padding of say 0.5 m just so it makes it
easier to press on them if you're using
your finger or something like that there
is a bit of space around them that we
can click on so that makes that a little
bit easier
and i think we can probably make them a
little bit bigger as well they're kind
of tiny right now uh so you know what
maybe what we could do is actually move
this
uh we can move that all the way up here
just to my footer itself and say
everything inside the footer should have
that bigger font size on it
um so there we go it will boost the the
font size of those icons with it and one
of the nice things with font awesome and
i think that is looking really really
good and dandy i'm super happy with that
uh except i just realized one thing i
have a margin top and bottom coming on
those which means it's sort of setting
things off so my social list margin top
zero zero we want a margin bottom of
zero on the social list just so it
doesn't add empty space
underneath for nothing so now it should
look a little bit more balanced overall
and there we have it so we've got all
the way to the bottom of the site now in
the next video we're going to come all
the way back up to the top where we're
going to be doing our navigation and
getting that to work and getting this
page all wrapped up we will be breaking
the navigation over a couple of videos
because we will have to do a little bit
of javascript for that as well
so if you remember way back when i
turned nav display none on just to get
it out of our way and obviously we don't
want that so i'm going to delete that so
we can actually get started on this
navigation and getting it working
now one of the reasons i left the
navigation to the end is the navigation
is a simple enough element is obvi is
often one of the ones that actually
takes the most styling to set up
and can sometimes be
a little bit long to do really so the
very first thing i'm going to do is just
say my logo
has a max width
of i'm going to say 150 pixels but
obviously you can modify that to your
own i might even say 100 pixels
and you can modify that to control the
size of your logo it also doesn't have
to be a png you can bring in an svg and
that should work fantastically as well
and might even be a little bit better
so that is setting that up nicely so on
my header itself
we're going to set this up as a display
of flex because we want that to be on
the left and we want my button to shoot
shoot on over
to the right um so on that display flex
we're also going to do a justify content
space between
uh which will spread them out properly
and we're going to do a bit of padding
on this of say 1m on all the sides just
so nothing is touching now that does
mean a big screen sizes uh the logo be
stuck to the left and eventually our
hamburger little button this guy here is
going to go over to there now for the
navigation itself we're going to be
jumping around a little bit on this one
uh just so you know so my nav i'm going
to give this a position of fixed
which is going to pull it out of the
flow and is going to make things a
little bit better but now you can see
the button that we're going to be using
has jumped to where we want that button
to be and this is sort of in a fixed
spot so now as i scroll it's coming with
us it's not going to stay like that
it's not going to be a fixed navigation
in that sense but you're going to see
shortly how this is actually going to
work
um so the button's in the right place
we're going to devote an own video to
the button itself and because we want to
get a hamburger in there we're going to
have a little animation on it i just
want to get the navigation itself set up
so on my nav the position fixed is good
but we're also going to give this a
background
a var
color
dark and the
color itself will give it a var of color
light
which won't do much yet but we're gonna
we're gonna fix that because right now
everything is a link in there and we're
going to say a top of zero bottom of
zero
left
of zero
and a rate of zero so that means it's
going to fill up the entire screen
and we're going to give it a z index of
100 to pull it in front of everything
else so this is when the navigation is
open it's going to cover a whole screen
even if you scroll or do anything you're
always going to see your navigation and
then when we close it it will disappear
i'm going to be
doing we're going to have two different
states so what i'm going to do is a
transform
of translate
x we're just going to move it off to the
left and my translate x is going to be
100
so if that's on you can see that whoop
it's gone where'd it go
so actually for now let's just put that
to 50 just not 550. so you can see what
that's doing is it's moving it over 50
percent of itself um so it's always
based on its own width but its width is
100 so it's 100 of the viewport so if i
do 100 it moves the entire thing off of
the screen so i'm doing 100 to move it
off completely now for now i'm going to
leave that at zero
but eventually just we can actually
style it up and we can see what we're
doing but eventually that will be
changed and we're going to add a
transition on here of the transform
250 50 milliseconds and to be consistent
we'll use our cubic bezier and on this
once again we'll do a 0.5
comma
0 comma 0.5 comma 1 because again it's a
nice very similar to ease and out if
you'd rather use the ease i know you
definitely could we have our nav list
so the nav list we're gonna want this to
have a let me think uh
display of flex and not for or actually
before we do that let's just say list
style is none um i'm gonna do a display
of flex but it's gonna they're still
gonna stay on top of each other it's
just because we have a few extra things
we can add to this
so we'll give it a height of 100 so it
actually has the height that we want it
to
and this is where right now because of
the display flex they're going next to
each other we can't really see them very
well so just really fast
um just so we can see what's going on
nav link
so we can see our items are going next
to each other because it's display flex
but now what i'm going to do is my flex
direction
will become column
which sort of puts it back to how it was
you might be going what's the point of
that
but the nice cool thing with this is
then we can use our justify content
space evenly
and it's going to space them evenly in
that vertical space like that
and then all we need to do
is set and align
items center
go to spell it right
and then everything ends up bang in the
middle just like that now there is some
extra spacing on that so i'm also going
to say that
margin of zero padding
of zero which should fix any weird
issues with the alignment that we were
just having
on the nav links since we're here
we're gonna give them the font
weight of var
font
weight bold we'll also give them the
font size let's make them bigger var
font size h2 if you had a whole bunch of
links on here
you may not you may
whoops i had a double var on there sorry
about that um you might want to avoid
the h2 it is quite big
maybe it is too big actually
but i think it works it's very in your
face though um but if you want to step
that down to an h3 and you could do that
or if you wanted to set your custom size
on it as well we could do that but i'm
going to leave it with that big bold in
your face style of the h2
and you can decide if you'd rather
something else
we're also going to say the text
decoration is going to be set to none
for those ones
we can add in our nav link
hover
for the hover i think all we'll do is
color var color accent and just leave it
like that so if we hover on top we can
see it's working or if we tab through
you can see that that outline is coming
through on the focus state that we set
for everything so fantastic i think
that's looking really nice and good for
that
but this is the stage where i am going
to do
all i'm going to do for now actually is
come back and set this back to 100
to hide it away so it's hidden off the
screen and in the next video what we'll
do is we'll style up our button and then
we'll actually get our button working so
when we click it the menu will slide in
and out
all right so for the hamburger i'm going
to bring all of that down right after
the nav right here
and we can start working on the
hamburger itself now there are other
ways of doing a hamburger i'm going to
do it the more complicated way the only
reason i'm doing this is because it
opens up some extra possibilities
in terms of what we can do with it and
to add little animations and have fun
with it because all the different pieces
will be animatable and individual
instead of it just being a single icon
but it's up to you if you'd rather just
bring in a single icon put it there and
leave it like that that's completely
fine but you know i think this would be
a lot more fun
so if you remember we had a class of
hamburger so what i'm going to start
with is doing our background i'm going
to give it the background of our
color
dark
um again if maybe you change your color
scheme and you want it to go along with
your color scheme it will be useful
i'm going to give it a width of 2m and
it may have a height of just 3 pixels
we'll give it a border radius 2 border
radius
i'll do 1m which is just like a massive
number but
because
it's going to work and i'm going to give
it a display of block not black block
because by default it was a span which
is inline and i just want to make sure
that we don't run into any issues with
it and i'm going to give it a position
of relative because we're going to be
using pseudoelements with absolute
positioning and this will make our life
much easier
so if we come and take a look we can see
inside my button now i have that black
line that is showing up so that is part
one of our hamburger for the next two
parts we will be using pseudo-elements
so hamburger before
and dot hamburger
after
and just like the pseudo-element that we
used last time the first thing we want
to do is give it some content but the
content will be blank again
pseudo-elements will not work unless you
do give them some content
the position in this case will be
absolute so i don't have to declare a
position
a display a block like i did last time
because i have position absolute it's
either giving it a position or giving it
a display property is required
we're going to say a left of zero and a
right of zero and that's going to mean
it matches the width of our other one
again that's because i have positioned
relative here if not it would have been
relative to the whole screen and we'd
have a huge bar going all the way across
the background we do need to set so var
color dark we have a lot of similarities
actually here so i'm going to break some
of this off we're going to refractor on
the fly here let's copy all this
and paste it right there
and what i'm going to actually do is add
dot hamburger here
because they're all going to have
this this this and this
and even the display block so we can uh
we don't need display block on the other
ones so i'm going to grab all of that
and put it here
so we don't have to repeat ourselves
twice
um they're always going to have the same
color same width same height that is and
the same border radius so that means i
don't need my background color here
um and there we go
so that is perfect and we will
eventually be giving these all a
transition as well because we need
things to be moving around a little bit
so i'm actually going to put that here
as well uh transition
transform
we'll start with 250 and just an ease in
out they're going to be pretty simple
animations so i don't know if we need
that fancy cubic bezier or not oh i
forgot my comma right here so that's
going to break everything
there we go so it looks the same as it
did before
and the reason is these are pretty much
just going to be hiding out underneath
what we already have so what i'm going
to do is say my dot hamburger
before
is going to have a top of 6 pixels
and my
hamburger
after is going to have a bottom of 6
pixels and the reason i'm doing six is
because we have a height of three so
it's gonna have a height of three an
empty space of three and then we'll have
the rest of the hamburger and just like
that you can see we're starting to get a
little hamburger icon thing coming in
there isn't that cool
um so it does take a little bit of setup
to do it but again i do personally think
that it is worth doing the next thing
i'm going to do in here is
uh let's get come all the way up to here
my hamburger so i might nav toggle as
well which is the button itself uh this
i'm going to add a little bit of padding
to it 0.25 m
and i'm going to give it a background
of of transparent to make it disappear
and i'm going to give it a border of
zero so my border is turned off
and there we go we're left with our
little hamburger icon right there uh one
thing is it does not have a hover state
on it i know you can't see the little
hand icons yourselves
when i do this but when you're testing
it you should be able to so on the nav
toggle i'm also going to add a cursor
of pointer or else there is no little
hand icon for the people when they hover
on top of it which can be a little bit
strange and i i did 0.25 m we can
probably do 0.5 m on that padding and
not have it affect anything on terms of
its positioning just to give us a bit
more room that we can actually click on
in that overall area so i think we'll do
that for my nav toggle
now another thing i'm going to do for my
nav toggle is i'm going to give it a
position of absolute which is going to
sort of ruin things but then i'm going
to say that the right
is 0 and it should pull it back to
exactly where it was
uh
almost it's not including the padding on
there actually so we can say the right
so i'll do a 1m on there which is the
same as the padding that i put so to
keep the distance where we want it to be
and if you want to be really safe you
could also say a top of 1m
the reason i'm doing this is because i'm
also going to give it a z index that's
really really big
so you might remember we had our
navigation
uh
coming in front of everything
so when i do that when i had my nav open
remember this is going down to a zero
i want to make sure that my button
actually stays in front of that now it's
hard to
now you can't see it
that it's there but i because the color
is the same as my background color but i
promise you it is um and that's really
important so that's the reason i'm doing
that is because we want to always have
that button available to us
so let's bring that back up to uh or
even you know while we're here
uh just to prove it to you
um let's change this to color accent
just for a second
and then we can bring
that back up to
a zero
so you can see that that is there so by
being position absolute and having a
higher z index we know that it's coming
all the way in front now there's this
problem that we're going to come around
and fix soon but for now
all of this is starting to come together
but let's bring this back up to 100
pretty much we need to add in the
functionality with the javascript now to
actually get that to open and close so
we're going to go ahead and do that in
the next video
all right so what i've done is i've
added an index.js file already here in a
javascript folder
so what we're going to need to do is
come into our document and add a script
src
js
index.javascript
close script
and now we can actually start doing
something with it so if we come into
here now um we do need to do a few
things in here so the first thing i'm do
is create a const nav toggle
which is going to look for my
document.queryselector
and we called it nav
go and i also want to get uh
let's just leave it like that for now
i'm going to say our nav
toggle
add event listener
click
when we click we want to do a function
so i'm going to use an arrow function
here
and we want the document document.body
class list
toggle
and we're going to toggle a class that
we haven't created yet called nav open
by doing that it's going to mean every
time we click on the
our button it should add that class and
to test to see if this is actually
working or not um what we're going to do
is we're going to come over to my
css file here
and let's create nav i'm going to come
all the way after all this nav stuff
yeah i'm going to come all the way after
all my navigation stuff here
but we're going to stick right here msa
nav
open
background is red so again this is on
the navigation this is adding this class
to the body itself so if we come and
take a look and if i click on that the
body itself is getting a red background
on it and if i click again it should
toggle that off and all of that
disappears so it is turning on and off
just like that
so that is awesome and fantastic that it
is working so i know my javascript is
working so i don't uh so instead of
changing the background to red though we
have some other things that we want to
do so my nav open itself we're not going
to be doing anything with but we're
going to be doing a lot of things that
are inside of here
so the first one that we're going to do
is
my
nav itself so if the nav is opened the
nav itself is going to get
the
transform
translate x
of
0.
so what that means is when we click that
it slides out when i click again it
slides back in so we've added that
functionality in
and we can see it's working out
fantastically it's going in and out and
then i can click on my links so that's
really cool now there is one problem if
i click on a link it's actually going to
bring me to that part of the page
because you can see it scroll down if i
go to my work it's scrolling down
further but i can't close it because my
icon has disappeared and ideally when we
click on it it would just disappear
anyway it would close itself when we
click on that but we're going to add
that functionality in a second
for now though what i'm going to do
is with my nav open
my nav
toggle is going to switch from a
position absolute to a position of fixed
um the reason i'm having it switch is
because i don't want it to always be
position fixed because i don't want it
to scroll with the sight um so now if i
click that if i scroll we we still keep
this in view but then if we go back to
here it scrolls out of view with the
rest of my header so that is perfect and
that means if i click on about me and
then i close it you can see it actually
brought me to the right point in my site
which is cool
so we're off to a good start now where
the really fun things also can come in
is we can do our nav open dot hamburger
and i'm going to do a transform on this
of rotate
and we're going to rotate it
0.625
turns uh so turn like that you can also
do this in degrees but i learned about
the turn unit and i like showing people
that it exists so this is a nice fun one
so i can turn it so now what's going to
happen when let's scroll back up
when i click you can see it's rotating
around now that might seem really really
strange why would i be doing that
well what i also want to do is my nav
open dot hamburger
uh we'll do my hamburger after we'll
just get a opacity of zero so it's just
going to disappear
but more importantly will be my nav open
hamburger
before
because what we're going to do with this
is we're actually going to rotate it
rotate
oops not rotate transform
rotate
90 degrees
now we do have to do a second transform
on this but you're going to see that
what that's doing is it's pretty much
turning it into an x
so
you can see when i click
and whoop so that's kind of fun right
but the x isn't really working right now
because of the way it's positioned so
here i'm just going to put a space and
do a translate
x and the amount is the i'm gonna do
negative six pixels because we're you
know we're offset by six so moving it
back by six pixels and it gives us a
nice x
so now when we do that way it looks like
that and then when i click it's gonna
fly around and making this x like that
you know what originally i had this as
black but i think i'm actually going to
keep it with this color
so it's always going to be working like
that so there we go my hamburger is
working everything is good the only
problem with it is now if i click on my
work it doesn't actually do what we
wanted to it brings us there but we want
this to also close so we're in the right
place right away
so to do that we're going to come back
to our javascript
so to do that we are going to need to
get each individual link up here so
we're going to create that uh this will
be a nav we'll call it nav links and it
will be
our document dot query
selector so this creates a node list
create query selector all
where it's gonna find all the
uh
nav.nav link
um so it should find all of them so if
we go and take a look now
or now what we can do is we can say our
nav links
dot for each so for all of them we have
uh for each link inside of there we are
gonna do a function um so just like
before we're gonna need to create a
event listener so on each link we're
gonna add an event listener for a click
and if somebody clicks once again we
will do a function we'll use an arrow
function again
and uh so here we can say that our
document dot body dot class list but at
this time instead of toggling it we're
just going to remove our nav open from
the class list
and the reason i want to simply remove
it instead of
doing anything else with it is because i
think it's really important
just in case we somehow get it clicked
or activated when it's off screen we
don't want it to somehow open i don't
think that's really a possibility but
why take the chance here we're just
always removing the class of nav open
instead of toggling it because the only
way we should be able to click it is if
it's already open in the first place yes
so let's hit save on that and we should
be able to see if we come up we can open
it if i click out here nothing's
happening but if i click on my services
it brings us to my services and it's
closed so again we can bring up
go to my work and we're in the my work
section already and it's closing just
like that so it's added a little bit of
functionality that we can do when we
want to move around in there so
just like that that is all done uh you
know i think it's looking pretty good
now there's one last thing i want to do
while we're here
when we go to the different sections or
let's say i climb and i click on this
button it's just jumping to that section
which isn't the best user experience so
i'm going to come over to my style sheet
here i'm going to come all the way up to
the top
uh we can do that right here under my
general styles
on my html element
i'm going to add in
scroll
behavior
smooth
and it's a nice easy way without
javascript to add smooth scrolling to a
site so let's come back up and now that
i'm here if i click on my work it
scrolls down there automatically so
that's really really cool and if i come
up and i go onto one of these links and
i do about me you can see it's scrolling
down as that closes so if you had other
links somewhere else it would
automatically just add some smooth
scrolling just with native css which is
really really awesome now i did have
some trouble with this in my own um in
here with the scrimba editor when i'm
recording it doesn't seem to be an issue
and i'm not recording and i've never
seen an issue with this outside of the
scrimba editor so for now uh or in
future videos you may see that it's
commented out just make sure you comment
it back on in case you run in
if you want to have that enabled on your
own site if you download from the final
version of this uh in it just in case
you're worrying about browser support
hey we're already using grid and custom
properties but if ever you run into a
browser that doesn't support it for some
reason it's just going to jump down and
have the same behavior that it did
before so it's not going to cause any
issues whatsoever
and yeah i think everything is coming
together this page is all wrapped up now
everything is working fantastically so
all we have left to do is create the
other page so in the next video we're
going to look at doing that it's not
going to be anything that is too
complicated and then we're gonna be able
to wrap this up move on over to
digitalocean and get this baby online
okay so for this page what i've already
done is i've copied my index.html and
made a new file here portfolio item.html
and i've deleted everything in there
this would act as the template file that
you could use to build out all your
different portfolio items uh to put a
bit of information on them i've deleted
everything the only thing i've kept is
my header and my footer but what we're
actually going to do is come back into
here and copy
this intro section as well and we're
going to leave the intro section here
but i wanted to copy and paste it just
to take a look at how i'm going to do
this so here i'd put
the title
let me keep this strong thing going
of my project
and then this could just be
and the image here i'm going to change
to the image that we were originally
using so we'll just do port folio 01.jpg
it's going to work out perfectly there
obviously the alt is going to be a
little bit different so we'll get rid of
that
um so if we come and take a look at what
that looks like we can see it right here
um it's just putting the picture instead
of the picture of yourself that you
might have had and everything else
should be working fine we've already
done all the css for that so it should
be working no matter what screen size or
anything like that we're on
now where things are a little bit
different is we do need a new section
over here
i'm actually going to take this idea of
home off we are going to have to update
these links as well in a second
over here what we're going to do is
we're going to add a couple of things so
i'm going to add a div class
of we'll call it portfolio item
individual it's a long name but i want
it to be super clear what it's being
used for it's not going to have too much
styling on it
um in here we're going to have a couple
of things so we're just going to have
let's put in a paragraph
we're going to put in an image and i've
brought in a new image
to use for this one so if we come and
look in our images folder
you will find a portfolio details.jpg
that i brought in just for this page so
that is our image folder and then
portfolio
details dot j jpg
i'll put a blank alt because i don't
know what the pictures you will be using
are um and we don't need a class on that
i don't think if we need to put one we
can always add one on and i'm going to
put a couple more paragraphs
down here below it and i'm just going to
copy some filler text to use
um so if i hit save on that and we come
take a look you can see it is coming
together we have a nice big image going
a long way across which i think is
looking cool now we're going to modify
this a little bit because the text
obviously isn't going to work if it's
like that
and we're getting
but you know overall i think it is
actually working out pretty well so
we're going to do a couple of
interesting things here on this
portfolio item individual so let's go
into my css
and i'm going to include this all the
way down at the bottom i can come and
put a new comment
portfolio item individual and we can
style that up a little bit so what i'm
going to do is like on the other ones
we'll give it a bit of padding so we can
do padding of uh we'll leave the top in
the bottom uh with
i'm gonna leave the top with nothing so
we're gonna do a zero for the top we'll
do 2m for the left and right uh and
maybe we'll do a 2m also on the bottom
just to give it a bit of space away from
the footer and what i'm also going to do
i'm going to give this a max width of
1000 pixels because it is a standard
that we've used in a couple of other
places in the site and with a max width
there we also want to do a margin of
zero auto
and just like that we've sort of
finished what we need to do here i don't
want to do anything too fancy we can
keep the nice title area and then here
we fall into these nice big images with
some description of what your project
actually is you can throw as many images
in there as you want
if you do find the text is getting too
long you could change the max width on
that or we could come in and say
the same class but our paragraphs inside
of there and give them a max width of
like 800 pixels maybe
and you can play with that number
what it's going to do is just give you
something like this where the images
will be wider
in general i like doing things like that
because it makes it a little bit easier
to read
text when it's not too long and i might
even shrink that down to like 600
and if we do that we can also give this
a margin in left
of auto and a margin right
of auto i'm not doing a margin 0 auto or
something like that because i want to
keep the top and bottom margins the
default margins that were already on my
paragraphs because it means we're
getting the spacing where it would take
those off
so it sort of focuses our text we can
have bigger images that break out of
that a little bit and then we still have
our regular paragraphs that describe the
project a little bit
the more text you have the more you can
describe a project don't just talk about
what you you know what the project was
but talk about what you did on the
project and why that was a good thing
the more details you can put and the
more information you can give on the
insights of your project instead of on
the actual project itself
the better that could be but this will
set the template for you to have a nice
simple page that you can use for your
portfolio items
the one thing we do want to make sure is
if we click here we can actually go back
to the pages that we want to go back
onto so what i'm going to do is the home
i'm just going to set to be index.html
and i'm going to copy this
and paste it there but leaving the
hashtag at the end and the reason i'm
doing that is because now
we're on my individual project if i
click here and i go to home it'll bring
me back to here but what i've done is
i've put the links to all of these just
to go to that page
um if i click here and i go to about me
it's going to bring me to the about part
of that page so it's always going to go
back to the right place if somebody
looks at a portfolio item and then they
decide they want to go look at something
else they can get to that section really
really easily
without any fuss so
right now as i mentioned i've put the
links to all of them going to this one
template page but that would be
up to you now to populate as many
portfolio pages as you need and to set
all of that up for your different
portfolio items and that is it we are
done with this template everything is
good and dandy and working fantastically
and that is it for now the website is
all put together it's ready to go so in
the next video we're going to be talking
about the next steps and how you can
start getting this online
all right so we're going to look at how
we can customize the fonts the colors
and different things with this site so
we'll start off with the fonts then
we'll move into the colors it's all
super easy to customize so let's say you
found some new fonts on google font so
that's what i have done and i have a new
link i'm going to update this link with
my new one
just remember you have to do it on all
your pages don't just do it on v1 so i
update that link there and then i'm
going to go over to my css
and over here in my css i can update my
font families so i'm going to put roboto
as my secondary here and then i have
laura that i'm going to bring in as my
primary so if i just do that my font
weights are going to switch over to 400
and 700 because those are the weights
that i brought in and just like that we
can see that it has updated the fonts
throughout the whole site super nice and
easily really quickly everything will be
updated because they were all set up to
be using those font families and using
those custom properties and just like
that we can also update our colors super
super easily so let's say you don't like
that green that's not your brand color i
can come on to my color accent and
update that one to a red color and just
like that anywhere that was using it in
the site has now switched on over to use
that red color and of course if you
wanted to switch the entire theme
i did use a light and a dark but
technically you could come in here and
do something like this and it would
invert your color scheme throughout the
whole site so now it has become a dark
site i can't see my logo anymore
but everything else should be working
there'd be a few little updates that
we'd have to make
in a couple places for the dark theme to
work or this not really even a dark
theme it's an inverted theme from what i
had but overall you can see that it's
really really quick and easy to make
these changes to the site and everything
will be running super well and super
easily so if ever you want to customize
stuff play with the box shadows play
with the font sizing all of it all you
have to do is play with these custom
properties and you are good to go your
design is your own design after that so
have some fun with it make it your own
and then we're going to be looking at
how we can get this up on digital ocean
in this video we're going to be
exploring digital ocean droplets we're
going to be seeing what a droplet
actually is and how you can get one up
and running
so what is a droplet
this is directly from their website they
say the digital ocean droplets are
linux-based virtual machines that run on
top of virtualized hardware each droplet
you create is a new server you can use
either standalone or as part of a larger
cloud-based infrastructure now that
might sound a little bit confusing but
really they're pretty simple in how they
work they're essentially virtual servers
that can host your website when web apps
they're extremely easy to use they're
fast and easy to set up and destroy
which means that if you set one up you
just want to test something out you do a
little bit of work on it and you want to
get rid of it right away after you can
do it right away it would take seconds
to destroy one if you don't want to have
it anymore they come with an automatic
firewall security is really easy with
digital ocean and they do really
emphasize a lot when it comes to making
sure that things are as safe as possible
they're both extremely customizable and
super flexible so when you're setting it
up you can really customize all the
different settings you need for it but
they're flexible in the sense that you
can make changes to it once it's set up
you don't have to destroy it and create
a new one just because you need to make
a few changes to what you already had
you can just modify your existing one
and one of the best things about them is
you only pay for exactly what you're
using so it can you know if you use if
you spin one up you only run it for like
15 minutes you're not paying a monthly
fee like you might with another web
hosting company where you've just locked
yourself into a year when you you're
only paying for your droplets that
you're currently using if you're not
running any droplets you're not paying
you fire one up you get rid of it you
only paid for that three seconds it was
up there that's all you're actually
paying for now how do we set up a
droplet it is relatively easy to do um
what you want to do is create your
account first and use the link that is
in the description to get your free 50
credit so you can use that towards
testing everything out before you start
jumping in now when you first create
your account it's also going to ask you
to make your first project once you've
made your first project you can just
click here on droplets if you're not
sure about setting up your project don't
worry about it too much it's going to
ask you some really basic questions and
you'll be all set up and ready to go and
you can always create new projects as
many as you need to inside of
digitalocean so once you're logged in
you're ready to go you can click on
droplets on the side here and there's a
nice big button that should say create
droplet because you won't have any
droplets yet when you get there you're
going to run into this and this can seem
a little bit intimidating if you've
never had to look at this before because
they are running on linux so you have to
choose your distribution of linux that
you want and choose your plan your
pricing and all of that and you might be
looking at this going i don't know what
distribution of linux that i want
because i've never really had to worry
about that before that's completely fine
they do make our life a little bit
easier uh what i'm going to suggest you
do is instead of worrying about the
distributions right now is click on
where it says marketplace the
marketplace is a whole bunch of setups
that are sort of pre-created everything
is lined up it has all the different
things you're going to need so you can
choose from here you'll see here are the
recommended for you they do have a
wordpress one there so if you want to
spin up a wordpress a wordpress really
fast and quickly you just click on that
and there'll be a few more steps at this
stage though what i'm going to do is
suggest that we go and click on where it
says see all marketplace apps that's
going to show us all the available ones
if you scroll down you can see there's
110 results there's a whole bunch of
stuff in there so if you know exactly
what you want you might find something
that is perfect for your needs maybe you
just want a node.js server because for
this case we're going to go with a lemp
stack so limp and you might have heard
of lamp which is a linux
apache mysql and php
and we're going to go with lemp so
instead of apache it's running nginx
because i'm doing it with static files
it is going to run a little bit faster
so we're really not sure which one to
pick we can go with follow along with
this one for now but if you have a
certain build that you want go and look
through their marketplace they might
have something exactly that's going to
meet your needs once you do that it's
going to bring you to this page where
it's just going to give you more
information on what this marketplace
lump stack is so it's showing you all
the different software that it's going
to be installing we're not even worried
that it's bringing us you know we don't
even really need the mysql or php right
now but we're it's coming with
everything it's pre-setup it's ready to
go right out of the box so now we can
just click on create limp droplet and
when we click that it's going to bring
us back to this screen where it used to
have the linux distributions along the
top but now it's brought us back it's
replaced that with saying that we're
using our limp stack here
and then it's going to ask us to choose
a plan now if you're doing something
that's a really big site or you need
something really specific you might want
to go into one of these performance
plans and if you're not sure which one
you want you can go with help me choose
for now we're going to go with the
starter standard one here this is
perfect for something like ours which is
a static site right now or even things
like blogs and web apps all of that this
is a great place to start if ever you
need to make a change as i said it is
very flexible
once you've chosen the starter planner
that's already going to be selected by
default we want to go into the pricing
and by default the pricing is set to the
40 a month early on i would suggest
scroll all the way over and go with the
five dollar per month one um it's
probably all you're going to need at the
beginning unless you know you're going
with something that where you're going
to need a little bit more than that so
you can see it's giving us one cpu uh
it's giving us an ssd with 25 gigabytes
of space and it's giving us a thousand
gigabytes of transfer i think starting
off that is perfectly fine but you get
what you pay for so if you need
something more powerful or more space
you can always work your way up now if
all you need is more ssd space but you
don't need more transfer or a more
powerful cpu
you can go to add block storage and add
volume so you can just add ssd space so
you can just add hard drive space that
way it's where you're adding on to there
but you're not getting anything else so
you can balance out the pricing a little
bit if that's the only extra thing that
you need
and once you've added your block storage
if you need it we won't in this case you
can then choose a data center region i
went with toronto because i'm in
montreal so it's close to me you can
just choose any of the ones around the
world that they have just choose
something close to you and you're good
to go
and then it's going to also ask you to
select additional options if you want
private networking ipv6 user data and
monitoring it's up to you if you want
any of them for now we're going to skip
those and we're going to come down to
the authentication now here the default
is one time password we're going to
leave it on one time password and ssh
key is a lot more secure so if it's
something that's going to be a client
site or even your personal site in the
long run it could be worth setting up
but for the time being we're going to go
with a one-time password because it's
faster and simpler to set up and you can
always switch to an ssh key later on
you're not stuck with this you're not
stuck with your one-time password if you
do want to change to the ssh key later
and the last thing after that we're
getting right near the end we need to
choose how many droplets we want so by
default it's one we're good with one and
we want to choose a hostname so it's a
random string of characters you can
change it to what you want it to be
and it's just so you can remember them
by your droplet name can only contain
so you just want to make it something
you can remember it by so just give it a
name that makes sense to you and if you
want to add any tags you can you're
going to select the project you only
have one project so just attach it to
that project and you can add backups if
you want backups are system level
backups taken once a week and each one
is retained for four weeks and they
always cost twenty percent of the
droplet price so because ours is five
dollars a month it would cost us an
extra one dollar per month now if you're
going to be working on uh git and say
you're on github or something like that
and every time you push to your master
it's automatically building out your
site that's really awesome that's cool
and that's sort of keeping track of
everything anyway but backups are always
a good thing to have especially if it's
something like a client site or your own
personal site
if it's your client side or your
portfolio site and you want to make sure
that nothing ever goes wrong i'd
strongly encourage you to have a backup
because in this day and age and at that
price i think it is quite affordable
next we're going to do is click on
create droplet and that's going to bring
us to this screen where you're going to
see the little progress bar going along
it generally takes under a minute to
create your droplet so that blue
progress bar will slowly make its way
across and then you'll get this where it
disappears and you're going to get your
ip address this is where your site is
your site is at that address as soon as
you see this you could technically go
and visit it there's not much to see
there right now so instead of going to
visit it what i'd encourage you to do is
click on where it says my portfolio when
we click on my portfolio it's going to
bring us into this screen
and what we're going to want to do is
click where it says console because one
thing we have to do before we can do
anything else is we need to reset our
password when we signed up for a
one-time password it's going to email us
that password but the password has to be
reset the first time you put it in so
when we click on the console here it's
actually going to open a console in the
browser in a new window you could be
doing this if you're on mac through
terminal or if you're on pc through
powershell or commander or something
like that but you know we have this
built in it's the nice simple terminal
that's just it's directly connected to
your droplet so it's going to ask you
for your login and it will ask you for
your password you should have received
an email that's going to have both of
those things so you'll see your ip
address your username and your password
i don't mind showing you my password
because as i said it has to be reset as
soon as you put it in the username will
always be root so you can put in root
where your login name goes and then it's
going to ask for your password i would
go to here i would copy it so command
select it command or control c and then
you come over to here and you paste it
in with if you're on a pc control v or
if you're on a mac command v and that's
going to paste it in now when you paste
it in it's not going to look like
anything happen because it stays blank
that's fine just hit enter or return and
it's going to go to the next step
it's a password they're trying to make
it stay confidential so they don't show
it on the screen when you're entering
your passwords in a terminal uh once you
put the password in it's gonna say
you're required to change your password
immediately so right away it's gonna ask
for your current password so just
command v again and paste it in there
and then it's going to ask for your new
password so you type in a new password
once again as you're typing it it's
going to look it's just going to be
blank it's going to look like there's
nothing there that's completely fine
just keep on going it's going to ask you
to retype it again just to make sure you
spelled everything right and as soon as
you've done that it's going to give you
a little message saying that everything
is pretty much good to go and you can
close this window down once you've done
that if you visit your ip address after
that you're going to see something that
looks like this so it's not very
exciting it's saying please log into
your droplet to configure the lamp
installation and now we want to get our
site up on here instead of seeing a
screen like this so we're going to look
at how we can do that in the next video
all right so let's see how we can put
our files onto our droplet uh we're
going to be doing it with an ftp client
so some ftp software that you might want
to use there's filezilla cyberduck or
fetch you can click on any of these here
it's going to bring you right to their
website
fetch is probably the easiest one to use
but it is mac only but the interface is
the cleanest and simplest one so if
you're on mac maybe you'd want to go
with fetch for this though i am going to
be using filezilla i am on pc i want to
do something that both pc and mac users
could follow along with so i am using
filezilla but it's always the same thing
and there's other ftp clients out there
as well it's not just these three use
whichever one you want the interface
might be a little bit different but the
information is the same no matter which
one you are using so here i have
filezilla opened and what i'm going to
want to do is click on this weird little
icon that's in the left here and what
that's going to do is it's going to open
my site manager inside my site manager i
clicked on new site just to create a
site i called it a do for digital ocean
portfolio and then i came over to my
protocol and i changed it to sftp which
is the ssh file transfer protocol and
then here i need to put in my host and
my port number the host is just going to
be your ip address and the port we're
going to use is 22 which is for the sftp
if you wanted to go in through a regular
ftp you could use port 80 um it's going
to ask for your uh on my login type i'm
saying ask for password that was where
it was i'm going to leave it like that
in my user i'm going to put in root
right there once i put in my username
there i can just click on connect all
the way down here and it's going to pop
up with something that looks like this
it's saying unknown host key the
server's host key is unknown you have
you have no guarantee that the server is
the computer you think it is and it's
showing the fingerprint for there and
this is just saying are you sure you're
connecting to the right place we can't
be 100 sure because the key is an
unknown key this is because we haven't
set it up with ssh
we can for now just click on always
trust this host because we know so we're
adding that to our cache click that and
click ok
then it's going to ask you for your
password so you put in your password
that you just created in the terminal in
the last video and it's going to log you
into your droplet now the way filezilla
works is everything on the left here is
my computer and everything on the right
here is my droplet this is all the
different things that are in my droplet
a lot of this got created because i went
with the lemp stack so it created a
whole bunch of stuff that's already in
here now by
when you start with you might be inside
your root folder so you might have to
take a step back and then once you've
taken that step back you're going to
want to find the var folder so it's var
var folder once you're inside the var
folder you're going to want to look for
a www folder and then once you find the
www there should only be one thing in
there which is the html folder click on
that html folder and you should see that
there's an index file in there and that
is it and what we want to do is we want
to replace that index.html file with our
own files so i've downloaded mine from
scrimba if you want to follow along with
exactly that at the moment and download
from scrubber itself i'm going to do
that at the very end of this video we'll
look at how we can do that so what i did
is i downloaded everything from scrimba
i opened up the folder i unzipped it and
then i grabbed all the files i needed it
was everything except for the normalize
and the readme if you put those up there
it's not going to cause any problem but
we don't need those files we might so
there's no reason to put them online so
i grabbed those i literally just dragged
over to here you can see that it's there
i let go and it's going to tell me that
there's already index.html do i want to
replace it yes i do and with in probably
under a second everything was uploaded
once it was all uploaded i went back to
here i hit refresh so this is just on
the ip address i was on i hit refresh
and bang just like that my site is up
here it's live and it is available for
anybody to see it's as easy as that to
get a site up on a digital ocean droplet
now if you do want to download from
scrimba you just go to the very last
video but just make sure you scroll all
the way to the end because wherever you
are in the video it's going to download
that state so make sure you're at the
end of the last video where we're
creating the website and if you go to
the little gear icon you can scroll you
can go down to where it says download
zip click on that and it's going to
download all the files for you so if you
want to test it out and put everything
else and put it all up there or then
make maybe make your own changes to it
and then put it up there you can go
ahead and do that