hi guys welcome back to today i'm doing
a crash course on foundation
now foundation is a css responsive
framework that makes every website
available on mobile tablet and desktop
devices my name is shadow and i'm going
to be showing you guys today how to
implement a css
sponsor framework called foundation now
for this tutorial i'm using specifically
foundation version 6 made by zurb let's
get straight into the crash course i'm
gonna go to google or your browser and
you're gonna type in
foundation
dot
zerb.com it should bring you to this
website if it doesn't look like this
might have been outdated so we're gonna
go ahead and click download
we're gonna download the complete
because it just gives us everything
click download it should give you a zip
file down here now you're gonna go to
your desktop and you're going to click
you're going to right click
go to new
folder
you're going to name i'm going to name
this foundation you can name it whatever
you want
back to your browser
and go to
your um your foundation download file
click extract all
click browse
go to desktop click foundation
click select folder
and then click extract
and what that does is basically
takes all the files that we just
downloaded and put it into our desktop
file called foundation and we come down
here and we read
a little bit about it
and how it works and it down here and it
shows sites and emails you can also do
foundation for emails but for this
tutorial we're just going to do sites so
we're going to want to do is you're
going to go over to getting started then
you're going to click
sites
kitchen sync
and you should be in this giant long
list called kitchen sink now kitchen
sink is every element available in
foundation all on one page as you see if
you scroll down there's tons of tons of
stuff you can put on to it we're going
to go through all of it what you're
going to want to do now is you're going
to want to go down to your editor i'm
using adam in this example
and you're going to want to click open a
project
and we're going to select on foundation
it should bring us
okay so what we get is this
large html file
pretty long
so what we're gonna want to do is we're
going to want to
delete everything
out of the body tags
keep the body tags
delete everything inside of the body
tags
except for the javascript
and you should be left with
this
okay so what we want to going to do next
is we're going to build some simple form
validation
inside of foundation
now we're gonna just start off with some
form tags so we're gonna
select that
we're gonna write perform just like that
we're gonna put some javascript data
values in here so we're gonna put data
dash
abide
and no validate
we're gonna put a div inside of here
we're gonna give it a class called grid
x and grid
dash margin
dash x
now inside of that dip we're gonna put
another div and we're just gonna give it
a class of cell we're gonna make another
div we're gonna give it a class called
alert
blur
all out
we're gonna give it a style
display
none
we're gonna go back and we're gonna add
some javascript values data dash abide
dash
alert
okay so next you're going to make
another div
and you're going to call it you're going
to get a class of grid
x
and grid
margin
x and it's the same thing as this one up
here it's just how foundation sorts out
its uh their divs you're gonna put
another div in here
you're gonna give it a class called cell
small
dash 12. what you're going to do next is
inside of this div you're going to put a
label
and you're going to put number
number
required
now you're going to write an input tag
and set the type to text or keep it as
text and then put a placeholder of one
two three four since we are validating
numbers and we want the user to know
what kind of input to put
and then you're gonna put something
called area dash describe
describe
i'm gonna set it equal
and inside these are you're gonna put
example
help
text
make sure you capitalize the last two in
camel case
next you're going to put a required
pattern so you're going to type in
required
and then you're going to put a space and
then pattern
and you're going to set it equal to
number
and then you can just take out this name
and value
it's not needed inside of there
now next you're going to make a span
and you're going to give it a class
of form
dash air
and inside of this you can basically put
whatever you want for when the user
misspells something or something so you
can say
yo you've
forgot something
um
like that so when there's an error
message it'll just give you this
this is basically the error message and
after the span make sure you close out
the label
and after that label you can put
paragraph tag
and uh give it a class of help text so
we're gonna put class
help dash
text
save it and then you're gonna give it an
id
of example
help
text to make sure you camel case those
and then next you're going to put
whatever you want
however you want to help the user so i'm
gonna put
here is
how
you fill
it out
and then just save it it's whatever help
text you really want to put into it okay
so next you're gonna wanna make a div
you're going to give it the class the
same one as the one up here you can just
copy it and paste
save it you're going to put a label
and you're just gonna put password
required
and then after that you're gonna put an
input
and you're gonna put the type as pass
word
make sure the label is outside
on the very end
make sure you add an
id and set it to password
and you can set the placeholder to
whatever you want
as long as it looks like a password so
like um
like let's say if this was a password
and we're gonna do the same thing we did
up here
with the
area described by so we're just gonna
copy this
and paste it down here and then we're
gonna write after it required and we
could take out these name and values
because we don't need them
and after that we're going to put a span
and
add a class to it
and in that class we're going to call it
form
air
and then we're just going to put i'm
required
make sure your span and label end after
that if you want you can indent them and
after the span and label we're going to
put a paragraph tag we're going to give
it the class as help text
and then we're going to give them the id
as example
help text
camel cased
inside of this we're going to put enter
a
password
please
now if you open it up in your browser
the html file
you see you get these two uh input
fields in here now if you're the type in
something other than numbers let's say
abc and press enter
it's going to say yo you forgot
something
and if you go to this password area and
you just press enter
it's going to say i'm required
so
it basically validates your form to make
sure there's an input now these are just
placeholders but other than the
placeholders it's pretty much empty and
you press enter and it says i'm required
and if you put letters inside of the
numbers
it's gonna say you forgot something in
your form
so that's just some simple form
validation for numbers and passwords you
can always just change it as you see in
the code it's pretty much a pattern
up here
and we can even add a comment right here
um we just say uh about
error message
ballot
right here and this is basically what
validates it
and then down here
is the number
valid
date
and then after that there is the
password
validate
and basically what you can do is you can
copy any of these and just change the
classes and stuff you can always check
the foundation website too it'll also
tell you how to change it but these are
just some simple form validation for uh
foundation
okay so up next is the accordion menu or
just the accordion and so we're just
gonna add a comment down here
we're just gonna call it
and i'm just gonna tab it down here so
basically what we're gonna first do is
put it in an unordered list
and we're gonna put a class up here
we're gonna call it accordion
and then
we're gonna put a data value called
data
core in
inside of here we're going to put a list
item tag and then we're going to give it
class name
called
accordion
item
is
active
and then we're just going to give it a
javascript value called data
accordion item
after that we're going to put a link so
we're just going to type in a
an anchor tag we're going to give it a
class
and we're going to give it the class
called accordion
title we're just gonna call this one
accordion
one
and then after that we're gonna put
a div
we're gonna give this one a class called
accordion
dash content
and then we're going to give it a
javascript value called data
dash tab dash content
and then after this we're going to put a
paragraph tag
and we're gonna go give it a class
next we're gonna put a paragraph tag
and we're just gonna say hello
world for this one and then we're just
gonna put a link and we're just going to
put
link in it and it's just going to be an
empty link
now if we go to our website and reload
we get this little panel right here but
as you see there's only one so we're
going to go back into our code and copy
and paste it so we get more accordions
so see we're back in here and we're
going to copy and paste
all of this
actually we're only going to copy and
paste what's inside of the list item
we're just going to do it three times
and then at the end you're just gonna
put the closing tag for the unordered
list
and then if you go back to your code you
see here you can minimize each tab
so it's like an accordion and you can
open them up by going like this
it's pretty cool so we so we're gonna
customize it a little bit more so
instead of this being panel one
we're gonna put panel two we're gonna
take out this uh dummy text
and we're gonna call this one panel
two this one back to panel one
this one panel three we're gonna take
out all this dummy text
and now if we go back to it
we reload
we get all of these
where it's like this and we can
customize it even more
changing these
i'm saving it
and then we reload and you see you get
it all organized with its content inside
of it so accordion one panel one they're
just empty links
and you can open up each one and it
gives you a new panel now up next are
something called badges
badges are
an interesting kind of
uh element inside of foundation so i'm
just gonna show you what they are
so let's just put a comment
saying
badges
and we're gonna make a span tag
we're gonna give it a class
we're gonna call it primary
badge and inside of that we're just
gonna put
the letter a as capitalized so we can
view it
and if you go over to your browser and
you click reload
you see down here
down in the bottom left corner of your
screen you should see the letter a and
tying up inside of a little circle
now
we can copy this code
make another version of it
instead of primary we can do something
called secondary
secondary badge and then we can just put
a b go back to the page and reload
you get this
you get this gray badge down here
do
now i've added a a div that has a margin
bottom of 200 pixels just so you guys
can view the badges easily
now if we go down here and make another
span or copy and paste it instead of
primary or secondary we're going to do
warning
and then we're going to put this one
with a c
save it go to your web page
and click reload and you'll get a yellow
one with the letter c inside of it
now if you go back to your code make
another one there's also another class
called
alert
and alert badge and
success badge
and if you reload you see you have all
different colors of badges and the
purpose of a badge
is kind of like when something goes
successfully or some sort of warning it
shows up this badge next to like some
words saying your form did not validate
and it's
has a red badge to it it can signify
something about your form or about
something you're trying to fill out
these are also just great little
decorations but if i zoom out
to
normal you can almost barely see them
and i don't know why that is i don't
think it's meant for reading i think i
think it's meant just for the color and
for signifying that something's not
correctly filled out so up next we have
buttons and we're just going to start
off by putting a comment saying buttons
or just button
we're going to start off by obviously
making a button
and we're going to keep the type as
button but we're going to take away the
the name of the button
because we don't need the name then
we're going to give it a class
called button now if you look at your uh
website and you reload it you see down
here you get an empty blue box that's
because you have to put text inside of
it so we're just gonna put
button
and if you go back
and reload
you see you have a button down here
now i'm gonna add that padding back in
here
just so that we can get so you can see
it clearly
we reload
as you see it's down here now you can
give each button a type of class that
changes the color or look of the button
so for example if we copy this
paste it and put
a second or um
success
button
and you reload it gives you a blue
button
if we were to paste it again and say
alert
button with a space
and reload it you would get a red one
you can also do the same for uh sizing
so you can do
tiny
button
and it gives you a tinier button
or you could do
a large
button
will give you even bigger button
and you can even do things like expanded
button so if we go to the class and put
expanded
button
reload you see it takes up the whole
width of the screen you can also have a
small button too so it's in between the
tiny and large button
so if you just put small button and you
reload you get this medium sized button
and these are basically all the buttons
obviously they're not linked to anything
because we didn't uh
put a hyper reference into here but you
can link these two different things such
as exists
such as a success page or
an error page take up the whole bottom
of a
portfolio object
or you can just have different sizing
buttons and colors they all have
automatic hover and whenever it's like a
green button or a black button it'll
turn to white text or black text
next we're going to do something called
call outs now callouts are like little
messages that show up on your screen
they're not really messages they're more
like sections so i'ma show you what they
are and how they're useful
now we're gonna um
just put a comment like always
and we're gonna just call this call out
and then just indent it here
and then we're gonna make a div and
we're gonna have the class as call out
we're gonna put an h5
and we're just gonna say hello
world
and then we're gonna put a paragraph tag
we're just gonna say this is a call out
we're gonna save it
and you know just for fun we're gonna
put a link
we're just gonna say link
now if we go to our browser you see down
here we have a call out it's just a
simple little section that we have that
says hello world this is a call out and
a link which does nothing
and
but what we can do with it is we can
change it so let's copy this
and we're going to set um actually
just copy the
the callout part not the um
the margin
we're gonna do call out warning
and it gives us this yellow call out now
we can do this for success and alert too
so if we do
call out
success
and
call out
alert
and we reload you get the green one and
the red one which are just basically um
like
like the buttons and the badges success
and
um warning
now there's also a secondary one that
shows the gray if we um
but call out
suck on dairy
we save it we reload you get this
grayish kind of one
now another thing too about this is
there's also a primary one where you can
set it back to its default called calm
call out primary
and if you save and you reload you get
back to this blue one there's the
difference between just call out and
call out primary and secondary obviously
alert warning and success are completely
different but you always have to watch
out for these um these class changes
so in foundation there's
things called close boxes or just
closeouts what you can basically do with
them is you can add them to callouts for
example
and you can be able to close out of a
call out and wipe it from your screen
and i'm going to show you how to do that
so what you're going to want to do is
you're going to want to add a data value
after your class called
data
dash close
level
then after that you're going to want to
add a button
so just type in a button
and you can keep the type as button
and you can take out the name
you're going to add a data value to this
called data close
we're going to add an area label before
the data close so area
dash
label
i'm going to set that equal to
you're gonna write close
alert
and you're gonna give it a class called
close button
and save the file
after this you're going to make a span
inside of the first span tag you need to
put area
dash
hidden
and you can set it equal to true
colon
and then save the file now you're going
to want to put this span you're going to
copy it
and then you're going to put it
inside of the closed i mean
you're going to put it inside of the
button
and then you're going to save
now if you go to your website now if you
check your web browser you should see
this little x over here and when you
click it
it just disappears now when you reload
the page
it obviously comes back because it's not
saved into your local data or caches but
there's a way you can do that but you
can basically exit out of any call out
you want just by adding those data
variables and the classes now make sure
you do wrap the variables into the div
so make sure there's one large div
around the whole thing like in here i
added a div so it would close off the
call out make sure you put a div so you
close out the call out and the close
button
and the span and yeah basically that's
how you add an exit out button or a
a closeout tab on any call out okay so
up next we're going to do a drop down
pane
now drop down pane is basically where
you click the button
and it shows a little message below it
these can be used for many things such
as errors with badges or
panels you can use this as a little help
text so we're gonna i'm gonna show you
how to do this
so first we're gonna scroll down
after all the call outs we're gonna make
a comment
or tab it in
and we're gonna call it drop down
pane
and save it and then first we're going
to put a button
we're going to leave the type alone
we're just going to take out the name so
we don't need it
we're going to give it a class called
button
so class
button this just gives primary button
standards
we're gonna put data
dash toggle
and set it equal to
we're gonna name it to example
dash drop down
and now inside of this button we're just
gonna put
um
drop
actually we're just gonna say toggle
drop
down
and after this button we're going to
make a div
it's going to have the class drop
down
dash pane
we're going to give it the id
of example
dash drop down and then we're going to
give it data dash drop
down and then we're just going to call
this one
drop down
pain
and if we go to our website this should
be working
and down in the bottom right you should
see this little button saying toggle
drop down
if you click it and scroll down you get
this little text bubble saying drop down
pane
now if we center this it works a little
easier and if we add padding so we're
going to do that just to show for a full
example
now we're going to give this um
now we're going to put this in inside of
the larger div so we're going to put div
we're going to copy all of this
inside of here
and we're going to just um we're not
going to give this a class we're just
going to do inline styling
we're going to do um
display
flex
and then we're going to do just if i
dash
content
center
and text dash align
center
and we're just going to add
margin
15 pixels
if we save this this should give it a
nice look to it so as you see it has
pretty good but we're going to add some
more margin to it so that it centers
more up
we're just going to say 25
and if you reload
it looks nicer now if you click it you
get this little text below it saying
drop down pane
now if we want to see the full example
we're going to add about
50 and then we're just going to do from
margin we're going to do margin bottom
that way we get what we want we reload
we click
it says drop down pane
and we've clicked the button again it
goes away just like a help text or an
error
so up next is floating classes and we're
going to be floating buttons to left or
right so first we're going to add
a comment and we're going to just say
flow
buttons we're going to put floating
buttons
and then just indent it a little
and then what you're going to do first
is just put you're going to put button
you're going to take out the type
and you're gonna actually you can keep
the type you're gonna take out the name
you're gonna add class
as just button
then you're gonna put
a space and then float dash left
and then you're gonna put inside of the
button just some text saying float
left and if you go to your browser you
should have a button floating to the
left now as you see down here you have a
button floating to the left also you
don't always have to use just the normal
um
primary button you can always go like
you can always go
uh
success button
and make it a green button or even a an
alert button so alert button
left
and then you can just copy this
and let's say we want this to be a
success button
and we're just going to make it float to
the right
we're just going to change the text
saying right
we go back to our tab
reload you have a green button floating
on the right
and a red button floating on the left
and those are basically the floating
classes for buttons so up next are
labels and
labels are basically almost like the
badges but you can actually put a word
inside of them and be able to read the
word so i'm gonna show you what that is
so we're gonna make a comment and we're
just gonna put
labels
and then indent so what you're going to
first want to do is you're going to put
a span you're going to give it a class
called
primary
label
and then inside of that you're going to
put primary
label
and then you save it if you go to your
browser
as you see at the bottom you see this
little blue thing called primary label
now if we go back
and we copy it and you can put things
like
success
and just keep pasting it you can do um
you copy it and you can paste it you can
put
um
warning
you could put
alert
and you can even do um secondary
if you save it and go view it in your
browser
you see in the bottom left you have all
these labels right here and they're not
buttons so you can't really click on
them and expect to go somewhere the more
like the badges where they're just there
to show you like a message of some sort
but like a very small message
such as success or virus or hello
so they're they're kind of useful but
sometimes they're not so up next we're
doing off campuses now off campuses are
those things you
kind of see when you're on mobile
devices so for example you're trying to
look at the menu but you're on your
phone you usually have it off canvas
appear and it's the three little lines
that you click on opens up a side canvas
or an off canvas
and also referred to as off menus or
side menus we're going to learn how to
make one of those in foundation first
you're going to start off with div tags
obviously you're going to give it a
class called off
dash canvas
dash
wrapper
and you're going to give it another div
and the class is going to be off canvas
enter
off canvas
wrapper
dash inner you're going to save that i'm
going to give it the data type
data
off
wrapper
after this you're going to put another
div and you're going to give this one a
class name of off dash can
s
position
dash left
you're going to add an id
called off
canvas
left and then you're going to add data
off dash off dash
and this
and then after all that we're going to
leave those divs empty for now after
that
they're going to add a button
you're going to take out the name
like we usually do
i'm gonna give it a class
we're just gonna
put it as the button class or the
primary button
we're gonna add
data
toggle we're going to set it equal to
off
can this
left and then we're just going to put in
here
open or we're just going to put uh off
canvas
forgot to add the comment so we're just
gonna add that really quick or just say
off
cam
this
save it now if you go to your browser
you should see this button down here and
when you click it it gives you this off
canvas kind of look but it has no
content inside of that so we're going to
add that really quick so over here in
these inner divs all the way into the
middle we're just going to put an h2 tag
and we're just say hello
world
and then we're just gonna put an h4 just
saying
docs or we're just put html
and then another h4 saying css
um just another one
called java script and save that
reload and we click off canvas and gives
us this little side menu we could bank
we can make these links too just by
adding opening and closing tags to the
very ends copying and pasting them
adding placeholders as hashtags
save it
and you reload
and now they're links and you click on
them and it just brings you back to the
top of the page
open it and this is just these are just
links and this is an off campus menu but
when you minimize it if we inspect and
we go to
mobile let's just go to a google pixel
2.
when we click
off canvas it looks like one of those
menus that you would have for a phone
so and this works on any phone we can go
all the way down to an uh
an iphone 5se and it still works which
are usually the smaller phones so it's
good to know that these still work on
all devices so up next is pagnation now
pagnation is like a type of navigation
that hangs out at the bottom and you can
go through multiple pages
usually at the bottom of product pages
or blog pages you can go through
multiple pages without having to
navigate through the top navigation bar
i'm going to show you how to do that
down here we're just going to make a
another comment as usual just so we can
divide up our code
we're just going to say pagnation bar
indented a little
and then we're gonna start off with an
unordered list give it a class
of
tag and nation we're gonna give it a
roll
and set it equal to navigation and then
we're gonna put area
and then
set it equal to
pagination with the capital p inside of
this we're going to put in list item
we're going to give it a class
called disable
inside of this we're going to put
previous and inside of this
uh list item we're going to put a span
tag
we're gonna give it a class
called show dash
four dash sr and then we're just gonna
put page in between this span tag and we
could just close off the ends like that
and then after this you're gonna you're
gonna copy this
and paste it below you're gonna change
the class name to current
actually you're not gonna put any you're
not gonna put anything between those so
you're gonna take out the previous
you're gonna just put you are
on or on
page and then in between the span and
the list item you're just gonna put one
after that you're gonna put another list
item list item
you're just gonna put a list item a link
inside of this
you're going to set it to just the
hashtag as the placeholder you put area
label
and set it equal to page
two in between you're gonna just put a
two between the anchor tag and then
you're just gonna copy and paste this
and you're just gonna change the numbers
from two to three
to four
and you can just take out this last one
we only need to go to
four you can change this to
three
four so next you're gonna add a list
item you're gonna give it a class of
ellipse
and you're gonna do it area
hidden
equal
you're gonna just do true
and you're just gonna leave this as that
and you're gonna copy just two of these
and then you just put in for now we'll
just put uh
pages 12
and
13.
we're going to change this for that
after that you're going to copy this
this item right here
you're going to paste it you're going to
set the area labeled to capital next
space page make sure the page is not
capitalized and then after that instead
of 13 you're just gonna put next and
then you're gonna copy this uh span
right here
you're gonna paste it after next
instead of uh putting you are on page
you're just gonna put page if you reload
your web page you should get this down
here that looks like a little navigation
that you would have for a website as you
see the disabled class works perfectly
with previous and then you can go on to
next pages and stuff except for we only
have one page so it's not going to go
anywhere but uh we're going to style it
stylize this a little bit more so
you go to your um unordered list we're
going to add a style tag we're going to
say display
flex
and then we're gonna put justify
content
and then we're gonna set it to center
and if we go back to our web browser
we reload it it should be in the middle
just like most web pages would look like
now flexbox does work pretty well with
uh foundation i haven't found any errors
with it
as you can see i easily centered that
div or that um unordered list into the
middle with no problem so foundation
does work pretty well with uh flexbox
and this is uh what a pagnation looks
like on a web browser and that's how you
make it in foundation so up next is
progress bars now um
just a disclaimer in my opinion bulma's
uh
progress bars are much better than
foundations but we're still gonna learn
them anyway just to see the difference
between the two so let's just go ahead
and make them um you're gonna go down
here just make a comment
uh progress
and then down here you're gonna make a
div
you're gonna give it a class of primary
progress
save that and you're going to go inside
so inside of this div you're going to
make another dip and you're going to put
the class name at progress
meter
and then style
with
25
inside of this you're going to put
paragraph tag
you're going to put 25 percent you're
gonna give this paragraph tag a class
it's gonna be progress
dash meter
dash text
and this is gonna be all there is to
your progress bar now if you check your
browser now if you check your browser
you see you have this progress bar in
here
and
you can customize it even more with the
warning and success labels as here
all we have to do is copy it
and we just put a warning
progress when we reload it we have a
yellow one
we do this the same for
alert
and we could do this the same for
success
and if we reload you have all these
different colors there is not a
secondary one because the background's
already gray so it'd be kind of useless
you wouldn't be able to tell the
difference between the progress so they
just decided not to have a secondary one
now the ways you change the the progress
on the bars is you go up to this width
styling and you just change it to
whatever percent you want and then down
here in the paragraph you want to change
it to match that so this primary
progress should now be at 50
change any of these so we change this to
65
change this one to
3 percent
and yeah basically if we reload you have
all different types of widths and stuff
and different colors for different types
of labeling
and yeah that's basically it for
progress bars
so um next are switches now switches are
kind of pointless without a back end but
i'm still going to show you the front
end and how they're used in foundation
so first we're going to make a comment
right as always
my foundation
uh switch
and then we're gonna save that we're
gonna make a div we're gonna give this a
class called tiny
switch
we're gonna put an input we're gonna
give this a class of
switch
dash input and save it we're gonna give
it an id
of
tiny switch
and then we're going to change the type
from text
to check
box and we're going to change the name
to
example
switch
and we can take out the value as well
now after that we're gonna put a label
we're gonna add a class to it and this
one's gonna be called switch
dash
paddle
let's save that and then we're gonna put
four
small switch
we're gonna put a span inside of the
label
we're gonna give it a class
it's gonna be show dash
four dash sr and inside of this we're
going to put small
porsche
only
we're going to capitalize each of these
and this should basically give you a
switch now if you go ahead and check
your browser
so in your browser you're going to see
this little switch down here and it
this is all it does
kind of uh misleading but it still looks
cool to play with click it a million
times if you'd like
with some back end i guess it'd be kind
of cool you can fill it out as a form
so like yes no yes no
now you can also add different classes
so that you can make them bigger or
smaller
so we're basically going to copy this
we're going to paste it down here we're
going to change every tiny
too small so we're just going to go
ahead and
take every tiny
we're going to go
small
and then save it and if you reload you
have another one that's slightly bigger
than the first one and we do the same
thing and make it bigger we're just
going to copy this
and we're going to find everywhere where
it says small
and the way i'm doing this is i'm
holding ctrl while i'm clicking
and you're just going to backspace and
put
large
and you're going to save that you're
going to reload and you're going to have
a very large button
or switch
and this is basically how switches work
in foundation up next we're going to
make tables now tables look a little
different in
uh foundation and i'll you'll see why in
a minute but uh we're just gonna go
ahead and start making that now so
obviously
you know the drill we're just gonna make
some
comment
so we can keep organized
and
then and then you're gonna put a table
tag
just like that
and then t head or table head and then
we're going to make a table row
now we're going to make a table header
we're going to give it a width
of 200.
we're just going to name this table
header and then we're going to do
another table header we're just gonna
add no width to this and just say
table
header now we're gonna copy and paste
this one
twice
we're gonna change this one to 150 we're
going to change
this one the 150 as well
now after the table head we're going to
make a table body
and then we're going to make a table row
and then table data
and inside of this data we're gonna put
just some text some filler text so we're
just gonna say content
goes here
and next one we're just gonna do table
data
lorem ispium and we're just gonna
minimize this down a little bit
so it's not too long and then we can
just copy this one
and paste it twice over there and after
that we're gonna copy this
and paste it three more times
or two more times as you see we have a
perfectly made table over here you see
the first row goes gray or a light gray
the second one goes full white and then
it's a pattern after that
and basically what we did is we made one
with a certain amount of width and
basically organizes it like in a css
grid so that it goes one
large and then two small ones and this
is basically how a table works in
foundation
so up next is the title bar now the
title bar is very responsive navigation
usually used on mobile and web apps
or mobile websites when you're designing
for mobile first they usually have the
little cutout on the side where the
breadcrumbs that you can easily navigate
through and they're very responsive so
i'm gonna show you how to make one in
foundation
so just going to make comment title
bar
like that
indent and then you're going to give it
a class called title dash bar
inside of there you're gonna make
another div and it's gonna be called
title dash r gosh left because we're
gonna make it to the left we're gonna
put a button we're gonna leave the type
as button but we can take out the name
we're gonna give it a class
we're gonna call this menu
icon we're gonna put a span after this
this is going to have a class called
title dash bar
left inside of here we're just going to
put foundation and then
after that div inside of the title bar
div but not inside of the title bar left
we're gonna make another div we're gonna
call this one title
dash bar
dash right
we're gonna put a button
we're gonna take out the name
we're gonna put a class in here we
called menu
i put a dash in between and this should
give you your little title bar and if
you check your browser should have this
little title bar now you want to uh
obviously put at the top of your web
page so it looks like a title now i
added some margins so it looks like it's
at the top of the page it's really not
it's just
uh it's just some margin but it looks
like it's at the top of a page and this
is basically what it looks like the
pages don't do anything but you can
actually connect the off canvas to those
um those
to the menu icons and they can open up
side menus especially if you're on
mobile that can be useful and this is
all responsive if i were to go like this
it's all responsive there's not much to
respond about but
it it's still responsive if you have
actual navigations inside of this black
bar right here
it becomes responsive
and yeah that's basically how you make a
navigation slash title bar in foundation
so up next is a tool tip and a tool tip
is like um you'll see them in wikipedia
a lot and it kind of gives you a general
definition of a word that the user might
not quite understand right away so i'm
gonna show you how to do that
now we're just gonna make a comment
we're gonna call this tool
tip
and we're gonna make a paragraph tag
because it is a sentence and we're just
gonna put the
and we're going to space it but we're
going to take out that space now inside
of this paragraph tag we're going to put
a span
now the span is going to have a data
type called data
dash tool tip and then it's going to
have area
that has pop up we're going to set that
equal to true we're going to set a class
to has dash tip now we're going to say
data dash
disable dash hover we're going to set
that equal to
false and then we're going to put tab
index
and we're going to set tab index equal
to 1 and then we're going to put title
fantasy
word
for a
beetle
and then this is just another word for a
beetle i just copied and pasted it and
then this is just some filler text i
found well we're just going to do laura
mistbium we're going to save that and if
you go into your browser
and you reload you see down here you get
the sentence and oops make sure you put
a space after the
title
not a space uh after the uh
the definition word and if you reload
you get this and when you hover over it
says fancy word for a beetle and it's
just a basic definition of what it is
you'll see these a lot on wikipedia you
can add these to your docs on your
website or whatever and that's how it
works in foundation so up next is
something called html templates and
foundation foundation has their own set
of templates they have a total of eight
if you go to foundation.zurb.com
templates.html you'll find these html
templates now there's a total of eight
and you can download any of them or you
can just watch the demo they have news
magazines real estate e-commerce blogs
portfolios and product pages and a few
more these are very helpful if you're
just trying to create a portfolio for
your business or for getting a job and
you don't have too much experience and
you just need something to get out there
with today we're just going to do the
portfolio so you're going to click see
demo and as you see this is what the
portfolio looks like or the template and
if we right click and click view page
source
there's all this code right here we're
going to click control a
control c
so basically what we're going to do is
we're going to click control a
and control v
and you're going to save it now the
first thing you're going to notice is
everything is in one straight line and
nothing is organized like we are
organizing it earlier and that's okay
you just need an atom package or a
package to go along with your code
there's gonna be a link in the
description it's an atom package called
atom beautify and this organizes your
code just like we were doing with all
the indentations and white space now uh
you can install this package just by
clicking install and open with atom and
it should install like that
if not you can uh install using npm um
or the apm command line and just install
it that way
but it's so much easier if you just
clicked install here but once you've
installed this you should be able to go
to your code and click packages adam
beautify and then click beautify
what this does is it organizes all the
code automatically
with all of its indentations and stuff
now if you go to your file folder and
you click your text or your document you
should find this as your document not
the link anymore
and here's where we will reload and edit
our website
so we can just minimize out of this
minimize out of that
and the first things we can change is
the title we're going to change this to
portfolio
so
portfolio save we can leave all these
links alone
we can leave all these script tags alone
as you see it it just does its own
functionality
and you see
off canvas position left reveal for
large this is what the off campus looks
like
in this website but there's not a button
to open it so it's just always open
so we're going to edit this uh off
canvas first the height is a hundred
percent
then down here we're just going to
change this to
liam
stockton
save that and then this is a little bio
it looks like right
yeah it's a little bio
so i'm gonna copy and paste the bio from
my portfolio so this is my portfolio and
we're just gonna go to about
and i'm gonna just copy this
and then i don't need that anymore then
we're gonna go down here i'm gonna paste
it into this paragraph tag
and then if we save it
reload i have my own about down here
now you can obviously write your own and
you probably should
and just change the span below to you
know
stockton save that
then down here there's a call out
call out primary what this call out is
is this thing up here
and they set the width so that it takes
up the entire
um
heading basically and so we're going to
change this
we're going to just change this to
x and
expand your creativity
and it's just going to have some words
down here
we're just going to change this text to
something whatever you really want it's
going to come up here so you just can
kind of choose what you want to say up
here
i'm going to just write some stuff so i
wrote this just a little phrase right
here and if we go ahead and reload you
see we get this over here
and now we need to move on to the
pictures so i pulled an image from my um
my personal images and i'ma just paste
it into here
and we're gonna rename this
to
me
and it's a jpeg file
so down in or we're gonna go back up to
the image
instead of this right here we're just
going to do me dot jpg
if we reload
there's a picture of me up here now
now if um as far as these projects go we
need to find images for them
so over here are basically projects now
of course you're not going to have like
12 projects as it's shown here
but uh you're going to at least have at
least three or four good ones so we're
going to take out some of these
so if we go down here we're gonna look
for it
there's all these cells so we can take
out the first one two three four
five
six
we'll just take out the first six and
save it and we could take out two more
because it kind of looks weird actually
no
we're just gonna uh copy and paste these
two
paste them back because we need them
if we reload you should have only eight
and what we're gonna do is we're gonna
fill in these projects
so we're just gonna put um
uh
we're just gonna put port
folio as a project
and then
we're gonna make it a link
the portfolio is one project
we're going to make this one
javascript
book
marker
that's another project
and we just replace this pasting
and we're going to put this one as let's
just say
personal
website
or we're going to do a personal
blog and we're gonna save that as a
website
and these are just different projects
that i'm filling in as obviously you can
come up with your own projects these are
just things that i've done
javascript
um
javascript calculator
and we're just going to put one here
we're just going to put
python
e logger
we need three more
word
press
plug
ends
actually we need to make this a link so
we're gonna do
word press
plugins
down here we're just gonna put uh
react
js
projects
and down here we're just going to do u
dot js
projects
if we reload you see we have oops this
one is not a link make sure you make
them all links
because you want to link to your uh
project obviously
so we're just going to do
this
reload and you see they're all links
they don't go anywhere you can put your
own links so i'm gonna just link these
so i've linked some of my uh personal
projects in here so if we click
portfolio you get to my portfolio
click javascript bookmarker you get to
all my projects
now what we need to do is add pictures
or thumbnails so that they want to click
on them
so this is where we go to google
images
we need to search for port
folio
we need it
um
so we're just search for portfolio
and then
in tools we're gonna click size
and then exactly
550
by 550
because that's what's over in here
and it even tells you the pixel size so
i found this image it's not really an
image of a portfolio but it's going to
work for now since it's just a stock
image so we're going to right click and
click um copy image address and then
we're gonna put it in for each of these
placehold dot it pictures
you're just gonna paste it in
and you can even do the control version
and just
paste it in like that
you do it however you want it's just how
you paste it in and replace the
the thumbnail pictures with this link
that we have if we go over and we reload
you see we have a bunch of phones and
this doesn't look very nice so we're
gonna um
add some variety to it
so we're just gonna keep finding random
images and we're just gonna keep copying
the image address and replacing them
with different
uh thumbnails
all images will be in the link in the
description
i'm just finding random images and
clicking copy image address and just
pasting them in
that way it doesn't all look the same we
can get some variety to our portfolio
as you see if i reload
okay so once you're done copying all
these images and finding them
you should have a variety like this
now um if you want to find these images
you can find them in the description i
found most of them from just google
images so it's not that hard to find
but do remember that you have to cite
and credit each of these authors they're
not you can't just take these images you
can always put it down in your footer
somewhere
but uh just make sure you credit these
uh people
who took the pictures or made the
pictures just so you don't get
copyrighted claimed or even sued okay so
after this you're going to look at this
contact me and you're going to want to
change uh the text obviously because
it's just dummy text we're going to go
ahead and change the text so it says
contact me and we're going to change out
this text
so we're just going to say contact me
through
my social media
or
through
the form
um
i will
try
i will respond
within
72 hours or we're just going to say uh
24 hours
so i just put some text contact me
through social media or through the
forum i'll try my best to respond within
24 hours and now we now we just need to
check this so um change this social
media so
but uh
we're not gonna use dribble we're just
gonna do youtube
instagram
and we're gonna do twitter
i'm gonna just paste in these links
and instagram
save that and we go back and we reload
you see we have each of these and if you
click on them
they lead to your social media in this
case my youtube channel
this form does not work um
obviously you need to set up some back
end there is a way you can plug in
mailchimp into foundations um
into foundations uh back in but and for
this tutorial we're just doing front end
so we're not going to do that but we're
going to go ahead and look at the form
and you can change the uh
placeholder so it says um
type
here
or we can just say message
here
and if we go back and reload instead of
ola designer it's going to say message
here
now we have a simple portfolio made in
foundation right here and it looks
pretty good it's pretty good for a
starter portfolio even if you don't have
much experience with foundation or with
any of these
you still can make a pretty good
portfolio using an html template and
foundation you're probably wondering
great i can build a website with a
template i know all the factors of
foundation and all of its responsiveness
but how do i build a website from
scratch and that's exactly what we're
gonna do right now so right now we're
going to build a website from scratch so
completely no templates no um
no copying pasting all just pure code so
we're going to open up a new uh tab and
doc uh in adam
and we're gonna um open the project as
foundation
we're just gonna open up our
foundation
and then we're just gonna exit out of
all of these tabs and we're gonna keep
this untitled um tab right here we're
gonna press uh control shift s
and then we're gonna name this one port
folio
dot html
we're gonna save that and then we're
gonna make control n
and then we're going to put ctrl shift s
i'm going to name this one style.css
this is going to be our new folders for
this new website we're going to make
we're going to keep the old folders just
so we can refer back to other elements
of foundation if we ever need to so what
we're going to do first we're just going
to type in some basic html
just type in the words html it should
shortcut to just this
uh nice 10 lines of code it'll give you
just the the head
title body and closing and opening html
tags we're going to give html
a class called
called no dash js we're going to add
some more meta tags so we're just going
to go
meta oops
meta tag then we're going to set um
and we're going to set http
equivalent set at the x equals ua and
then dash com compatible and then we're
going to set content ie equals
edge
save that and after that we're going to
add another meta tag
its name is going to be view
port
viewport like that now we're going to
set content to
width equals device
width and we're going to add a comma
we're going to set initial scale
equal to 1.0 and that should be it for
that meta tag and now we're going to
give it a title we're going to call this
portfolio
save that and now we're going to link in
our links so we're going to just put
link tags going to keep style sheet and
we're going to put in
tss
foundation
dot css and after that we're gonna put
another link and it's gonna be the same
thing except for it's gonna be css slash
app css that way it has css for mobile
too after that we're gonna link our
style sheet that's up here right now so
we're just going to put in link
and then it's going to be just style.css
because we didn't put in any folders as
you see here it's out right here in the
open it's not in any folders so that
should set up our head part now we're
going to go into the actual code for the
body so we're going to start off with a
div i'm going to call it title
bar and we're going to add another div
we're going to give it a class of title
bar left
so title
our
left because we're gonna have a title
bar on the left we're gonna add another
div and the class is gonna be off
canvas
and then position
left
so we're gonna we're basically making a
um
a off canvas menu kind of thing so that
when you're on mobile it can work for
off canvas as well and then we're gonna
add an id
not an idea and i d be equal to off
can this
left
and then we're going to add a data
off
canvas
like that now inside of here we're going
to add an unloaded list we're going to
give this our list a class
and it's going to be sub menu gonna be
sub menu
menu and then bird
too cool
so it's a vertical menu and then it's
gonna have data
data submenu now we're going to add list
item and inside of these list items are
going to be links
so we're going to copy this now and
we're going to paste it five times or
four times and you should have five um
link menus
now you're just gonna put home
skills
projects
about
and then
contact so we can navigate through them
later we're just going to put home
skills
projects
about
and contact
and this we're going to put ids in these
sections down further into the website
so we can navigate to them when we do
get there but we're not there just yet
so after this unordered list we're gonna
put a div and inside of here we're gonna
put a button
and we can just take out the
or we don't have to take out any of this
we're gonna put data toggle and then
it's gonna equal off
canvas left and we don't need the div in
this class right here so we can just
take that out just to organize it and
we're going to give this a class
not cool
class
of menu dash icon and we don't need this
type or actually no we don't need this
name
after that we're gonna put a span
it's gonna have a class
of title
r
title we're gonna put
portfolio
inside of there so inside of the body
we're gonna um
we're gonna put a div
and we're gonna and inside of this div
we're gonna give it an id
of
home and this is what i was talking
about up here
so when you click the home it's going to
lead you down to this div and then we're
going to give it a class
of hero
section
and hero
section is not in foundation so we're
going to add our own personal css that's
why we made the file earlier but we'll
get to that in a second inside of here
we're going to put another div and we're
going to put the class as hero dash
section dash text
and then we're going to put
each one and we're going to put your
name or in this case my name then we're
going to do an h5
i'm going to do front and
web developer now obviously you can add
this to whatever you do uh this is just
for the tutorial and so what we need to
do now is we need to stylize this so
you're gonna go up and click on your css
file it's not there you can click this
little arrow and click style that css
and it'll bring you there
um
so what we're going to do first we're
going to do a hero we're going to
0-section
and go like that now before i start
typing realize that it may seem like a
lot of css but it's 10 times shorter if
you were doing it without foundation so
just have that in mind i'm going to do
background
and then url
parentheses and i'm gonna copy and paste
the image url i found earlier um the
link will be in the description
obviously we're gonna put parentheses
and just paste it in
and then at the very end we're gonna put
fifty percent
no repeat
put a semicolon and press enter i'm
going to do background
size and then cover i'm going to do
height
96 vh which is a vertical horizontal
is what that means and then
text line
center and then we're going to do some
web kits for the internet explorer users
display
i'm going to do dash web kit dash flex
you're gonna do display
and then ms-flex
box
and make sure you put a dash before that
and then after this we're just gonna do
normal
display
flex and then after that you can put
webkit dash align
dash items and you can just put
center and then we're gonna tab and put
ms dash flex dash align
center
and then we're just gonna do normal
align items
center
make sure you put semicolons after all
this and after this we're going to put
we're going to go back from our
indentation put webkit
dash defy dash content
and we'll just put center and then after
that we're going to tap and put dash ms
dash flex dash pack
center
and after that we're just going to do uh
justify content center and what this
code basically does all these web kits
and stuff are basically so that other
users can use them as well sometimes it
doesn't work on all computers but the
webkits make sure that it does work on
computers that use internet explorer
windows edge or microsoft edge even
sometimes web browsers like that are a
little bit more complicated
so uh web kits tend to help with that
and after this we're just going to put
euro
section
and then we're just going to add the
second class hero
section
text and this puts it in a hierarchy so
that only text inside of the hero
section will work
and then we're just gonna add brackets
and we're gonna have the color
u f e f e
we have text
shadow one pixel one pixel two pixel and
then we add color to it as zero a zero a
zero a semicolon and this is all the css
we're gonna need for right now so we can
go back to our html now before we open
it in the browser we need to come down
here and add our javascript
so we're gonna go in the body we're just
gonna kind of indent so we're gonna make
a script tag and we're just gonna take
out this break right here
we're gonna put it as js
slash vendor
slash
jquery js and we're just gonna copy this
paste it three more times
should have four script tags just change
this to what
input change this to
foundation
dot js and this one to
app.js
and now it should work if we go ahead
and check our browser you should get
this looking right here now this is a
pretty good home page you have our own
custom-made heroes section
um
our little welcome and if you come up
here to the navigation you get this side
menu right here with all of the
basically navigation of the website and
if you click home not gonna bring this
anywhere because this is already home
so but that would work if we were to
scroll down
and have more parts of the website that
would work
after this we're gonna add another
div we're going to give it
an id
of skills
which we will use later for the
navigation and we're going to give it a
class of
skills
we're going to add an h2
with the style of
text
line
s
then colon center semicolon inside of
here we're going to put skills and after
this we're going to add an h3 called
html and after this we're going to add
some progress bars and that's going to
show how well we know the skill for this
portfolio i'm going to add a div
we're going to give this class a and
it's going to have primary
progress
as its class and then roll is going to
be progress
bar
tab index
equals zero now we're going to set area
value
now equal to or we're gonna take out
this dash and set it equal to
zero actually we're gonna set it equal
to 25
and we're gonna copy this
and we're gonna paste it instead of now
we're gonna put
min and we're gonna set it to
zero we're gonna set we're gonna paste
it again instead of now we're gonna put
text we're gonna set it equal to 25
percent
we're gonna paste it again we're gonna
set max
as instead of now and we're gonna set it
to
a hundred and then we're gonna uh take
this back
and we're gonna press enter
so there's room inside of this div
i'm gonna add another div can it be
called progress
dash meter
and then
style
we're going to set width
to width to 90 percent and then
paragraph tag
set
class equal to
progress
dash meter
text
and this should give us one of the
progress bars if we check our browser we
reload we scroll down we see we get this
little uh progress bar down here and
then we're gonna uh
make a div up here after skills and call
it skills
dash enter
and we're gonna copy
uh the progress bar and everything with
that
inside of here and then we're gonna go
into our css tab and uh stylize this
skills thing so we're just gonna go
skills
um curly bracket and then we're gonna
set
height
to 35 vh and then text align
center
and then background and set it we're
going to set it to
4d5768 and then put a semicolon and then
we're going to set the skills inner
class
to width of 50
and then margin
left 25
and then
padding bottom 5 pixels and what this
basically does is it takes um the normal
hero section it makes it smaller
and then everything inside of it is
going to be centered in the middle
inside of a smaller box you go to your
browser and reload you should see it
like so that this is like all one
section and then the the progress bars
are in a smaller section inside of it
that's what the skills inner
class is for so now we can basically
copy and paste everything from the h3
html tags down to the end of the
primary progress so we're just gonna
copy this and paste it
three times
like that and i'm gonna change this to
css3
and this one to
java
script
es6
and then if you want you can change
probably should change each of these so
let's say each our css is only
85
and we change the text down here so 85
percent
and then javascript let's say it's only
75 percent
or just change these values down here if
you go to your browser
and you reload you should have three
more progress bars with different values
in them or the values you set to it
so um
here it shows that html is known ninety
percent
and i know it css three
eighty five percent of the way and
javascript es6 about 75 percent of the
way now this is just hypothetical for
this portfolio but you can change these
values to whatever you'd like
so after all these divs we're gonna put
a div
we're gonna give it a class of projects
and then we're gonna
give it an id of
go down here and save that and inside of
here we're going to give it a div and a
class called project
dash box and then we're going to do a
a tag or an anchor tag inside of the
anchor tag you're gonna do an image now
i found this image offline if you want
it it's down in the description along
with everything else
and
so i just copied the uh image address
and i pasted it and now we're going to
add some alt text of port
polio
after that you're going to put
an h2 tag and set the style
to uh
text dash align
center and then
we're just gonna put project as filler
we're gonna do um
we're just gonna do uh
personal
blog and then after this we're gonna
copy
this project box
two more times
we're gonna change the text from uh
personal blog to
java script
bookmarker
then we're just going to do um portfolio
because i have a second portfolio and if
we go ahead and check our browser so
before we check the browser we're going
to go to our style.css and we're going
to make a projects
and project
project
box
and we're going to style these so for
this one we're going to display
flex
make sure it's a semicolon and we're
going to justify content into the center
i'm going to do flex direction and we're
going to do row and then
flex wrap
and then we're gonna do wrap that way if
the browser gets smaller it will wrap
and make it into a column instead of row
and then we're just gonna set the height
to 100
percent and down in the project box
we're going to do
margin
15 pixels we're going to do with
250 pixels
and height
250 pixels i'm going to order
we're gonna do border
radius 25 pixels and then background
color
is going to be black
make sure you set this project box to
image i forgot about that so the styling
won't work correctly without the image
um that's just uh targeting the image
part of the box we're gonna go ahead and
change uh javascript bookmarker because
it's kind of a long title and we're just
gonna put um
js book marker and reload and you should
have it looking like this
now um you can obviously switch out the
pictures i just you i just used the same
one for all three just for convenience
you should probably change each one of
these to your own pictures
of your actual uh project but for now
this is good
after this we're going to add a div
and we're going to call it um
we're going to give it a class of about
and we're going to give it an id
of about and then we're going to put a
div inside of it call and give it a
class of about
box i'm going to put an h2 tag in here
call it about and then a paragraph tag
and then i'mma copy and paste my about
from earlier so i'm gonna just paste
that in here and then
go back and now we're gonna go into the
styling
and we're gonna add
a class of
about
and about
box
just set the height
to 35 vh
not 25 35 and then we're going to set
text align
center set background color
for the background color we're just
going to use the same color we did for
skills
we're just going to paste it down here
in semicolon we're going to display flex
we're going to align items and then into
the center and then we're gonna go down
to the about box we're gonna give it a
background color we're gonna set it to
five e
four seven
nine nine semicolon and then order
radius 25 pixels and then height of 20
vh makes you semicolon and then width
is going to be 50 and then
we're going to margin left
about 25 pixels or a percent and just
add a little bit of a padding bottom of
five pixels
change this four seven to
seven four i messed up there it will
give you purple if you type in four
seven so make sure it's seven four you
should get this blue color if you reload
like this
and it gives you a nice soft kind of
grayish blue color that kind of looks
nice on the eyes and also matches these
pictures which i did not plan
if you don't like the color scheme you
can always change it there wasn't too
much designing going into this um
website it was mostly just to test every
foundation function now one more thing
we're just gonna um add another about
box
so about dash box
comma
paragraph tag and we're just going to
set the padding on this for 5 pixels if
you go back to your browser and you
reload you see it just gives a nice
padding to the
the text of the so you can read it so
after this we're going to give it
another div we're going to add class to
contact we're going to give it an id
of contact it's just going to be an h2
of contact
i just put user at domain for the email
this is gonna be
email
just because i'm not gonna put my actual
email but you guys should put your
actual email if you want your employer
to contact you also you don't have to
put uh email
sometimes it might get confusing it
might annoy the user and then we're just
gonna put paragraph and we're gonna put
a phone number so i'm just putting some
random
numbers
so actually we're just gonna go one two
three
four five six
seven eight nine
euro
like that i don't know if that's a real
phone number i wouldn't find out and
after this we're gonna go to our style
and we're gonna add a class of contact
i'm going to set a background color to
uh hashtag
006 ea d
and then we're going to set a height
of 20 vh
and then
text align
center
and then after that if you check your
browser and you reload you should have
this little blue thing down here contact
and then email and phone number and
obviously style is that easier this is
just like looking like kind of a call
out kind of after your body and you're
going to type in a footer tag now we're
going to just make a quick little footer
just for convenience and it's just going
to say shadow
tech
i copied and pasted a copyright sign
offline
and you can just save that you're going
to go back to your style and you're just
going to add
footer
and then you're just going to do text
align
center
and then just set a background color and
for convenience just gray
and after that if you check your website
you should have a fully completed
um
simple portfolio that was made
completely from scratch completely from
foundation and it was only in about 80
lines of css
and around roughly 92 lines of html
which is very small for a portfolio our
html template was way more than that and
this was this is a lot more than the
template as well so you get more for
less basically so more content for less
lines of code for both uh portfolio and
css so now that you've built your
website in foundation there's a few more
things that i think you guys should
check out because they're kind of cool
and it might be useful so if you go to
foundation's website
and you click getting started
and then you click sites
you see you get this little um
page here
and well this is where we found the html
templates and there's some other things
called building blocks
now as it may seem you can literally
click see code
and add this to your um
to your website and you can basically
give ratings
based off of you know like what you
would be rating it on basically like you
can copy this code click copy copy and
copy and just paste each one in
and you'd have to add your own
javascript through a script tag inside
of your uh website but that shouldn't be
much of a problem and it basically gives
you all the code
for the um what it the building block is
so in this case it's a star rating block
and these are created by other people as
you see this person
made this but
you can have your own profiles i guess
but if you go back there's different
things so you can go to navigation you
can have these cool little uh
navigations that people have made in
foundation
um
status
you can add status alerts and uh graphs
and stuff
um you can also do control
and see social icons
there's a lot of social buttons
look at the social buttons
easy so you can literally copy which
parts you want so if i only wanted
facebook twitter and youtube
and instagram i would just copy these
and then
just copy all this because if you want
to add more you can add more
basically take out which links you want
out and you can link in your own social
media
inside of these hashtags
there's also mobile dashboards
and instead of making our own hero we've
could have we could have gone here
and just clicked full screen hero
and copy this code
down here
and could have done it that way
but we decided to make it our own since
we were creating our own website from
scratch but if you do want to make
another hero you can just come in here
to the building blocks and find full
screen hero
and just edit it that way
if you go back
we go back all the way to where it says
html templates you're gonna click uh
resources and down here there's all
sorts of add-ons for angular and for
text editors and wordpress
all this back-end stuff and this is
where we would connect the back end with
like our buttons and stuff
where is it
down here django
your net.net and uh it looks like other
backend stuff like flask for python
php um
ass foundation
anyway up here you can see there's uh
icon fonts
which are just some like random stuff i
guess you could put into your website
svg icons
oh so like social media icons
and if you click getting started this is
where we downloaded uh you can click
kitchen sink and obviously go through
kitchen sink
you click home
it gives you like a description of how
foundation works so uh 50 code reduction
so half the size of foundation five this
is foundation six so they've upgraded it
and if you keep scrolling through you
can read all about their development
and how foundation is apparently the
best uh front-end framework that's
responsive in the world is what they
claim so throughout this entire course
or crash course we've learned a lot and
let's go over what we have learned so we
went through all of kitchen sync which
gave us every element of foundation all
in one let's say document and we saved
that website just as foundation after
that we went on to html templates and we
basically learned how foundation is
structured using one of their templates
and we edited the template so that it
looks like our personal pro portfolio
then after that we basically made our
own portfolio from scratch
and we made it so that we coded the
entire thing we basically coded the
entire portfolio from scratch not using
any templates or anything just using
foundation and it gave us a 50
code reduction from the normal portfolio
without foundation so basically um
that's all for foundation i know this
was a kind of a long crash course
especially just for foundation but i
made sure that you guys got all the
content of foundation so don't forget to
leave a like down below it helps a lot
and comment down if you have any
questions
if i left something out i can i'd be
happy to help down in the comments
section don't forget to subscribe and
ring the bell
social media is above me go ahead and
follow me on twitter and instagram make
sure you subscribe to my youtube channel
and follow me on github all links are
down in the description all the image
urls the html templates foundations
website and you can even view the
portfolio that i made in this tutorial
on my github and yeah don't forget to
expand your creativity