Foundation for Responsive Web Design Tutorial - 1 - Getting Started Video Lecture | Responsive Web Design: A Foundation Course for Beginners - Front-End Programming

what is going on guys my name is Bucky
Roberts and welcome to your very first
tutorial in foundation now before we
actually get into working with
foundation and making any cool websites
I want to explain people just starting
out with a responsive web design exactly
what foundation is so if you go to the
site and you start reading about it it's
like okay the most advanced responsive
front-end framework alright well if you
guys don't even know what a responsive
website is then we probably should
understand that first so whenever anyone
says a responsive website what they mean
is a website that looks good on every
single device because there are a lot of
different ways that people look at
websites they look at them on you know
big screens like desktops and laptops
they look at them on medium screens like
tablets and also tiny little screens
like phones so as web designers it's
really difficult to design a website
that looks good on you know a big
desktop and also a tiny little phone I
mean if you try to make it for the phone
then you look at it on a computer
everything's gonna be spaced out in
jumbo and if you try to look at um you
know like a desktop site on the phone
everything's going to be really tiny and
you got to zoom in so that's a challenge
that we have first so I'll show you an
example first of a website that's not
responsive so this is the new Boston com
and right now we're in the you know kind
of a transition stage where we we have
the site right now and we're trying to
convert it into a responsive design but
this is the current non responsive
design so right now
on a desktop it looks great but look
what happens when you start to shrink it
okay looks good
hmm wait a minute look at it now so if
you were to look at this on a phone
instead of you know kind of adapting to
the proper size and adjusting everything
properly it just starts cutting
everything off so that is not responsive
and I'll show you guys the new
responsive design so here is our new
responsive design post pictures friends
and look what happens now whenever we
start shrinking this so here would be
the desktop site
you know the full menu what not and if
you were to look at it on a smaller
device look what happens it
automatically adapts this content right
there gets pushed under the About
section the menu automatically shrinks
to just icons instead of icons and text
and if you were to look at it on an even
smaller device like a phone the menu
gets hitting completely and then you can
just open it like that so this is a
responsive design in other words it's
adaptable and it looks great no matter
whether you're looking at it on you know
a desktop a phone whatever all right so
that's what responsive means we
definitely want to develop responsive
sites instead of non responsive sites
for obvious reasons so how do we do that
well you can just do it all by hand so
if you were to do all by hand you would
have to add a bunch of conditional as I
say when screen is this size then do
this when it screen is that size do that
and you know maybe you want to hide
something this that it's a lot of work
so that's why people made these
frameworks now a framework is pretty
much a bunch of stuff that you're going
to use and it's developed for you behind
the scenes so instead of just worrying
about okay what's the exact pixel size
of the screen um how are these things
going to move around whenever the screen
shrinks all the stuff is taken care of
for you in a framework so you can just
worry about you know making your website
look cool and making it functional so
that's what foundation is so sounds
pretty cool let's go ahead and get
started so you can probably guess our
how to get started already probably
click this big download foundation
button and let's just go ahead and
download everything so we're going to
download everything it's pretty much the
toolkit that says hey I want to remake
make a responsive website this is where
we're going to start so whenever you
download everything it gives you the zip
file so I'm going to double click this
we shrink this so you guys can see all
right so it gives you this zip file
right here and if you just right-click
and hit extract all then
and that location looks good all right
so it extracts this folder right here
and if you are using you know whatever
IDE you want to use after you extract it
go inside that folder
they just extracted copy all of the
contents right here and this is pretty
much your starting point so this is the
very basic beginning of a website from
here you can add more pages and do
whatever you want to do so you can
actually double click this file right
here and you see that this index file is
the one that it gave you by default now
if you guys are using a jetbrains IDE
like I am then instead of downloading it
every time I'll show you guys a really
handy way to get all those files so
anytime you want to start making a
responsive website then what you do is
you go to file new project and you go to
static web foundation now all this is
going to do is it's going to download
the files for you and extract them but
it'll save you a little bit of time so
where do you want to you know save all
your web files I'll save it on my
desktop in a directory called foundation
so I'm going to hit finish and I'll open
it in this window and check it out so as
you can see it just gives you all of the
same files so there you go so we're
basically at the same point as if you
were download the manually but now you
don't have to go to the website and
click the download block so it's pretty
much you know how to set it up for lazy
people so check this out I'm going to
click this index the HTML and like we
just saw it gives us the same starting
file so if I right click and run this
this is the default you know the single
webpage that it gave us to start out
with but here's the thing see we don't
even know how to use foundation and all
yet we're just getting started so this
right here it's not really a good
starting point if you ask me because
look at all this crap in here you don't
know what this stuff is so instead what
I did is I made you guys um a real
template so if you go to my github page
and I'll show you guys right now and
click on source code from tutorials and
then go to foundation click on this
template right here this is an actual
bare-bones template and it's a much
better one to get started so right click
this and hit copy and now just replace
your current code with this so rip out
everything that Foundation gave us in
index.html and just paste this in and
now whenever you run this check it out
it just gives us a blank slate without
all this extra crap on it and this is a
starting point that I'm going to be
using to teach you guys foundation from
the ground up it's going to be awesome
and that's where we're going to be doing
in the next video so I'll see you then