Foundation for Responsive Web Design Tutorial - 1 - Getting Started

Foundation for Responsive Web Design Tutorial – 1 – Getting Started

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

26 thoughts on “Foundation for Responsive Web Design Tutorial – 1 – Getting Started”

  1. many of this tutorials , the block grid and offcanvasmenu ones above all, stoped working in the latest version of foundation, could you do a tutorial on how to migrate or do this things in the new version(6) ?

  2. Bucky please tell me shall we always use frameworks like Bootstrap Or Foundation To create responsive websites?

    I am asking When We work in Web Designing Company

  3. hey the new foundation 6 has a lot of files in it. I have no clue on what to keep and what to delete ?? can you do a remake of this video please. Thank you

  4. I highly recommend $this (responsive) design_tool_kit / framework. Successfully implemented in a tutorial I just completed ( a "Ruby on Rails" Build an Online Store with Foundation & Redis ) if interested find a ton of info & tips @ . Thank you so much much Bucky! – Michael 😉 + everybody here is Bucky's Twitter account (follow him!)

  5. For all of you that felt stuck like me, never give up 🙂

    Enjoy !

  6. man … after four years being thinking I'm great developer, I'm just back here again after stuck with Foundation .. Bucky Roberts you're awesome man .. seems like I'm yer student forever .. 🙂

Leave a Reply

Your email address will not be published. Required fields are marked *