CSS GRID: Starter Files and Tooling Setup — 2 of 25



we need a couple things to get up and running we need to install a couple things and download a couple things before we can start writing some CSS grid first thing we need is to download Firefox and the reason why I'm using Firefox here is not just because they've sponsored this entire course which is great thank you for doing that but even if they didn't do that I would totally be using Firefox because at the time the CSS grid tools in Firefox are by far the best debugging tools out there chrome currently does have CSS grid debugging tools however they are not very good they are very very simple I'm sure they'll get much better with time but currently Firefox is ways ahead so we're going to be using Firefox for the entire course now I'm using Firefox developer edition you can use any version of Firefox nightly or stable but I recommend getting developer edition just as they're always gonna have the latest CSS grid features in developer just so that we can debug it and get a peer into it so we'll be using that throughout the course download and install node.js you likely already have this installed however if you do not you can just go ahead and download the current version click next next next and that will install it on your machine the way you can tell if you have it installed is you can just go to your your terminal and you can use any terminal in this course I'm using one called hyper term but you can use the one that's built into Windows or the terminal and OSX or if you're on Linux you probably just boot into that so you just type node if you can spell no – V and that's going to tell you which version you are currently on i'm on 8.6 maybe I want it to update I would just click this and download the next version third we need to get the CSS grid starter file so if you log into your course dashboard at courses West boss comm you're going to see a link to the starter files that's gonna kick you off obviously I don't have a CSS grid course here yet this is just an example for my JavaScript 30 but once the course is live you'll see it in your dashboard you can click off to the CSS grid right now there's not a whole lot on my github but you should see a get repo full of different folders in each video or each couple videos is going to have a folder associated with that video and we're generally going to have things like it test – start and test us finished and the finish is going to be the state that the a file is in at the end of the video and then the start is going to be any any sort of starter HTML that you don't necessarily need to write as just sometimes it's just a bit of a waste of time so you'll see that go ahead and download the entire thing you can also fork it to your own however please be careful with forking it because what happens let me show you here on my JavaScript 30 is people will a couple thousand people have forked it and then when they try to push the changes up to their own repo they accidentally make a pull request to my own which is it's an accident but I get a lot of email so make sure you're not accidentally pull requesting me and you'll be good to go so that's all that we have there once you've downloaded all of the files what I want you to do is to open them up in your finder and it'll look a little bit something like this just with much more folders and you'll see that we have a package lock a package JSON and you won't actually see the node modules folder let me delete that right there the package JSON you can open that up in your editor here there's really not a whole lot here the only reason I asked you to install nodejs is because we're going to be using it utility called browser sync and what browser sync does is it's going to watch all of our CSS HTML and JavaScript files and automatically reload them in the browser so that we can sort of stay in our code here while just looking at the refreshed result on our left without having to go over and manually refresh it you are totally fine to just open these files up in HTML in your browser without browser sync you can just scrap this entire piece if you want however I think you're going to be much more productive if you use this browser sync tool that we have here you'll see that I've created this script called start and all that does is it runs this command called browser sync start and we pass it a couple different our humans here a couple different flags we've got this server which it creates a local host URL on our computer that we can visit it watches all of our files that end in CSS HTML and JavaScript and we'll refresh when any of those change its a directory and that will show us a listing of our directories and then we're running on port seven seven seven seven and then by default I'm going to open the browser called Firefox developer edition if you would like to change that to maybe just regular Firefox you can just type Firefox or if you're using Chrome for some reason you could do that as well but I'm going to leave mine at Firefox developer now what I want you to do is to open up this CSS grid folder in your terminal now if you're not totally sure about how that works what you can do this little little trick that I like to do is to find the CSS grid folder on your computer so I'm gonna I'm gonna go one level up it's right here type let's say I'm on my on the root of my computer just type CD space and then drag and drop the CSS grid right into there and then you know you're in it you can type PWD to see where you are or LS l you can see that we are in the folder with the package.json then we can go ahead and type NPM install or just NPM I and that's going to install our one dependency the only thing that we need for this entire course which is browser sync and then we've got it up and running now what I can go ahead and do is type NPM start and that will open up a directory of all of our files and folders you can go into Oh to go to tests test start and you'll see sort of this base style that we got let's go ahead and actually open up that cash – dart and value that we have here and this is just a very basic HTML that'll likely start you off with in a lot of our videos so what you can do there if you just have a paragraph tag and type below and give it a save you see it automatically shows up on the right-hand side here same thing if you have a style tag and maybe we have a paragraph we want to change the font size to 20 px it's going to automatically change the font size or any of the things that we change it's automatically going to change it on our left hand side no manually refreshing that is needed this editor that I'm using is vs code you can use any editor that you want however I highly recommend that you use some editor that has Emmet in and if you haven't looked at it just go to Emmet dot IO and you can install it for virtually any editor out there with vs code it's automatically built in so there's no package that you need to install why do we use that well I like to do things where like if we want a container and then inside of that container we want a like ten items and we hit tab that's going to give us ten so I'm going to be giving you these little snippets to type and then to hit either enter or hit tab and that will automatically complete the HTML that we're actually looking for same with inside of CSS if I do something like font size 50 we I could just type F z50 tab and that's going to complete it those things are not necessary but it's going to make us much more productive so I recommend that you install that and also to show you how it work so as we go along the way why does this look so dang good already well I have a sort of a base CSS that I'm going to be giving you I'm gonna run through it real quick just to give you a heads up of what is in this base CSS there's not a whole lot related to CSS grid but it's more just CSS that makes it look good and when we're trying to debug things it will look a little nice so let's open actually that up it's in our assets folder and style dot CSS first up we have a couple CSS variables if you've never used these before I really like to use specific yellows and specific blacks because I don't I'll have some pride in your in your demos here make them look decent don't use red green and blue the base colors that we always use use some nice colors the problem is I don't expect you to remember what this hex code is here so what we can do is if you want the thing to be like border bottom 10px solid and I just say yellow that's not the the actual yellow that I'm looking for so what we can do is you can say var – – yellow and then what that's going to do is it's going to pull in that yeah that's specific yellow that I had been using in this style dot CSS value same with here if I said color black that's going to be pure black but if I were to VAR it – – black it's going to give us a little bit of a lighter black value that we have there so if you have a couple different colors that like to use through all of the the files that we're doing here you can just stick them in the root here and they'll be available in all of our files that we have there next up box sizing border box that will just make sure that anytime we add padding or a border to an element it does not increase the size so that when we're trying to divvy up the width of a container then we we have it there if you're unfamiliar with that maybe do a quick google into how that works in the traditional way how it was broken for a long time we're using just a base font I'm setting the color of everything to be black and there's a little bit of a text shadow on most of the stuff I don't know if you can really see that next up this is the inherit of the box sizing border box that's where we've set it here apparently that's a little bit better than setting everything to box-sizing border box and then I just have a little bit of a background here it's kind of a nice little gradient with the typography makes it looks nice nothing to do with that I apply some margin to my things and then finally I am using CSS grid in each of our items we'll talk more about what an item is in a bit but I just like the center the content inside of the actual item that we have so that's it that's the base CSS that we have there everything else we're going to be writing either in a separate CSS file or most likely we're just going to be writing in a style tag directly in the HTML file that we're working with if you have any other questions about my setup I likely have answered it at west boss com4 slash uses and here I tried to detail all of the different themes and fonts and everything that I use in my editor if something is not there feel free to tweet me I'm at West boss on Twitter and I'll try to answer those as many as again other than that let's get rollin I'll see you the next video

16 Replies to “CSS GRID: Starter Files and Tooling Setup — 2 of 25”

  1. can't use browser sync. I'm using Ubuntu 18.04 in Oracle VM and it is saying "[Browsersync] Couldn't open browser (if you are using BrowserSync in a headless environment, you might want to set the open option to false)" Just a friendly heads up. Gonna just go with manual updating for now

  2. Do you have a regular CSS course? The CSS that you create for your courses are awesome! Do you recommend any courses?

  3. @wes what theme are you using for vscode and thanks for the work you I’m a fan of syntax and the JavaScript course

  4. I love your teaching style, Wes! Even though this is about Grid, there is SO much extra knowledge sprinkled in to every video. Choosing an editor, using browser debuggers, using Emmet, basic command line knowledge—so many valuable things for beginners. Thank you for your work!

  5. Texas in July… Nice… It was driving me nuts trying to remember where that intro riff is from m/ Amazing band + Amazing CSS Grid Course 😀

  6. Forcing people to give you their email address is BS and it means your course isn't free. Learn to tell the truth.

  7. Weird problem – browsersync keeps showing me the Hello version of test-START.html when I open from the browser. I have cleared all history, and even though I can see the changed file through another editor – I only changed the Hello message text to something else, and saved it – it is like Firefox is picking up the original file to display with the Hello msg in it. Obviously, when I live-change the test-START.html nothing is happening in Firefox – any clues?

  8. Hi Wesbos!
    Been a fan for a long time, i'm just wondering what is the plugin you're using for showing the background-color of HEX color in CSS in Vscode ? (Couldn't find the right extension ^^')

Leave a Reply

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