How to Create a Website - Complete workflow | Part 01: Intro + Setting things up

Key Takeaways

hi my name is Kevin and here at my channel I hope you learn how to make the web and how to make it look good while you're at it with new videos every single Wednesday in this video I'm starting a new series that's going to look at building out a responsive website using things like sass flexbox jQuery and my general workflow as well on the screen now you can see a rough layout of what I'm going to be building but I'm not going to jump right into things like I did with the last website build in this time what I want to do is I want to show you guys a little bit more of my process and how I work when I'm really building a website and if you haven't already consider subscribing to the channel so you don't miss out on any of the other videos in this series and if you like long series like this please hit the like button to let me know and you know so you want to see more content like this in the future now one big thing that I'm going to be doing differently than what I've done in my other videos is I'm going to be using sass for this series sass is a CSS preprocessor if you haven't heard of it or don't really know how it works well you'll still be able to follow along but at the same time you'll see how awesome sass is if you're really never used or seen it or anything at all before you have no idea what it is I have put a few links in the description below that could be of interest to you now to use sass it needs to be compiled it's not a language that the browsers can read it has to be turned from sass into CSS and we can set up everything we need for this using the command line and maybe one day we will look at that but for now I'm going to be using an application called pre prose pre prose is a really nice piece of software and I hope I'm pronouncing the name of it right and what it does is it compiles sass and well it also does more than just compile sass though it also has an auto prefix ER so you don't have to worry about vendor prefixes which is awesome and that's whether you're writing sass or just regular CSS you can turn on your auto prefixing it also has a built-in auto refresh so as you're working it you know you save it automatically refreshes the browser you don't have to do it yourself by hitting refresh every time which is really nice and there's other apps that do the same thing as this it's not only pre post there's code kit which is super popular but I like pre post because it's available on PC and a lot we're only on the Mac and this it is available on PC or Mac now you don't have to use pre pros it's what I use but it doesn't mean it's the only thing or the best one but just that's what we will be looking at in this video I'm also going to be using github to keep track of my project now the nice thing about that is you guys are going to be able to follow along if you want and if you want to put in some pull requests you know go for it if you don't know what a pull request is don't worry about it but just like with sass you could set up everything with github with the command line but I'm gonna be using their software for this one just it's a little bit more simple to follow along with now along with all that I'm also going to be explaining my file structure as well as my naming convention as much as possible as I work through the project and on top of all of that one thing I did forget is we're going to be using flexbox quite a lot in this layout I want this to be a responsive website and while floats and clears can do the job flexbox just makes life a lot easier for some things and on top of that of course we're going to be dabbling in jQuery as well whenever it's needed now with he'll head out of the way let's actually jump in and start working on the basic set up for this project so the first thing I'm going to do is create a repository on github so I've created a new account here that I'll be using for some of the projects I'll be doing for my videos we'll call this one um responsive start to finish description I don't need to know public will be fine I'm going to put in a git ignore but I'm going to add to that in a second because I don't have everything that I want in there but I'm going to be using sass so I do want it to ignore those and I'm going to hit create repository so that's going to start up things I have my get ignore there and let's just go to get ignore dot IO I think it is oops get big Norio not get ignore so we're going to be using Windows computer so if you're on Windows or back I mean using sass and I think that's it [Music] am I using anything else I think that's it so I'm gonna hit create all that and I'll just grab all of this copy that and we'll come into my git ignore we will edit it and this is just a basic editor but we can go ahead and paste that right in there and I can commit those changes and I'm just doing this directly to my master branch and if you haven't used github before what this is doing is there's certain files they get added in if you're on a Mac there's some file structuring things that are in there and if you're on a PC you know a lot of hidden files and different things that help set up everything I could probably no I think that's pretty good and so the whole idea here is if there are these little hidden files and invisible files that you don't want brought into here because they're just extra fluff that you're not really paying attention to and they're not really part of your project then you can have git ignore those all right so awesome with that done now I'm going to open up the github app and if you don't have it you can download it over at desktop github calm and you can get their software right there and I'm going to click this little plus icon and I'm going to clone my responsive start to finish on to my computer so because I've already created it through their website it exists there's a file in there my get ignore file is in there I could just create something on the local path create a new one I could add something but in this case I want to be cloning it so I'm going to clone this one that I've already made and we're just going to clone it right on to my desktop I'll click OK it should go pretty fast the only thing we have in there is our git ignore no local changes let's just make sure no changes which makes sense and if I open it up there we go we can see just to show you let's take a look on my desktop it's added this folder and if I look in there the get ignore is right there and so far nothing has been changed so that's normal we've brought that in and that's it so this is set up properly this is going to be watching for any changes I make to my computer so anything that I do now that's different from what's on the website it's going to keep track of if you don't know github I do suggest looking at it this tutorial is not really looking at how to use github just to show you the my process of you know I will be using github so it gives you an idea of how it works but it's not a true tutorial on it if you are interested in knowing more about github please leave a comment down below and I'll be glad to take a look at that once this series is wrapped up ok so now what I'm going to do is I'm going to open this up with Adam and let's just move this over for a second I do want to open up this folder so I have a few things that I need to make in there so inside of here we are going to need my CSS folder like usual we're going to need a JavaScript folder and something that's a little bit different from anything else I've done so far if you haven't used to it is I'm going to need a sass folder so sass is where I'll write my sass and that will eventually get compiled and turned into CSS now this sass folder is where things get a bit more interesting if you're not familiar with sass it might be a little confusing at first but once I start building out the site you'll quickly understand what I'm up to more or less I'm going to be following the architecture that's used by a guy called Hugo guild del I hope I said his name properly goro del I'm assuming it's Gil dead because he's French so Hugo Gil hotel and where he sort of he has a website called sass guidelines and I will there's a link to that in the description below that has got a very nice way of organizing your files I don't do it exactly he does but more or less I that's the the style that I do go with as I'm working so what I'm going to do right now is I'm going to open up my SAS folder and in my SAS folder I'm going to be creating a bunch of different folders in here so the first one that I'm going to be creating is called abstracts I'm going to create another one called base another one called components we're going to have a layout folder and that didn't work we're going to a layout folder layout and I'm just trying to think if there's anything else that we're going to have sometimes there are some other folders that are used in here so you'd have things like if you're using bootstrap you'd have a vendor's area you can throw a bootstrap or foundation or something like that in there if you're making it a theme or having different themes in there you can have a folder for that what else well I'm only doing the homepage but if you're doing multiple pages in a document you'd have a pages folder where specific styles for different pages would be found in those in that folder there and yeah I think that's it and if I need one as I work through this then we can always add to what's in here and with all of that done I'm going to open up repros which is what I mentioned before the nice little application is going to watch this and make sure everything's working properly you can see here I currently have my coding quickies in there and it's paused and I'm going to add in a new project so we're going to go to my quick access my desktop and I'm going to choose that folder select folder and it's empty right now sadface that's okay I'm so you can see there's a little plus the plus play button there and this one is paused one thing it's important if you're not working on a project please please PLEASE pause it and it does use some system resources while you're doing this so I just strongly you pause things if you're not watching them but you do plan on coming back to them if it's something you want to get rid of you can just right click and remove project once that project is finished so I want to make sure that this is set up properly so the first thing I'm going to go and do is check out my options and I want to look at my project options compilers that's what I'm actually looking for I wanted to auto compile so my SAS options auto compile I do want it to auto prefix my CSS and I'm going to have it used lib fast just because it's quite quick and I believe that's all I need also you can have it when you when it's compiling it you can have it be compressed compacted nested or expanded I'm going to leave it as expanded which makes it human readable just so if ever I need to jump in there and look at it I can you know see if there's any mistakes or any problems coming up in there a little bit easier so I'm going to leave that there for now and I think that's good so I'm going to close that down and I didn't save that more options project options compilers auto prefix whoops wrong one auto prefix CSS that's fine I went and hit the save option so now what I need to do just to make sure things are working properly is I'm going to make a new file and in my new file ooh I should get this ignored too that's okay I'll worry about that after what I want to do is I want to just make sure that this is actually working so let's uh save in an index dot HTML there we go so let's say this is index.html oops there we go that's good and I'm just going to write a nice simple paragraph hello world I just want to see if this is actually working so what I'm going to do is I'm going to save that and I'm going to push this little preview button and hit open live preview and that's going to open up my browser and we can see a hello world there and to see if this is actually working oops I should've we're going to come in here and a few things I'm going to do I'm going to go in my sass folder I'm going to make a new file I'm going to go in here and save it as main si SS and I will be using sass for this not s CSS sass has two different syntaxes which can be a little bit confusing SCSS looks a lot more like CSS whereas SAS SAS s is a little bit different which you'll notice once I start writing some actual sass so I'm going to hit save and for now all I'm going to do is do a little test on this so let's take this main dot CSS and try something out let's do body background is red and that should have created a CSS file and it did so what pre proces done is it's taken my sass that I have here and it's turned it into this so it's added in my squiggly braces and my semicolon right there so that's perfect so you can see as I jump back and forth between the two and just to make sure that pre post is really working we have Auto refresh going and all of that I'm going to jump up here and just add my link SRC is equal to not SRC it's a link it's an href is equal to CSS / main CSS and rel is equal to stylesheet that should turn red there we go so the auto refresh is working which is nice my sass is being compiled so let's just try one more thing just to show you again how this is working I have my paragraph that's just whoops I'm writing SAS not CSS paragraph will be font size a 3m and a color of white save and there we go you can see it refreshed over there it's all working it's working properly there and I'm happy and I can also see these things are all turning green here and one nice thing what Adam is Adam is built by the github people so it knows that these files are being watched and anything that's in green right now has actually means those files have been changed those are files that have been changed since I cloned my repository so I don't actually want any of that in my main stylesheet um so that should make that empty and I don't want this here obviously that's not really the right setup so just to finish this off a couple of quick things to tie up is I'm going to just come into my main dot sass I'm not going to actually I don't have anything to bring in here yet but I just want to set this up so I'm going to do a one and one is my config files and helpers so this is my variables my functions my mix-ins all of that will be imported I'm going to have a section two in here which is my vendor prefixes so I'm going to use normalize in here vend or not prefixes just vendor stuff you know stuff that's already been created I'm going to have my third thing that's going to get loaded in is going to be my base styles so again that's you know the basic stuff the fonts the typography and just the global settings anything like that for is going to be my layout stuff so layout what else we have after that my components components so again that's my buttons and anything that's you know different little stuff like that buttons my carousel my call to action all of that six will be my what else do I have I think that's it actually I'm going to be stopping components if I have anything else it can get added in and what I'm going to be doing now is that's it for the moment and my files are ready to go my basic thing is setup and what I've done here is just I'm going to be importing a whole bunch of files into this main sass file that then is going to get exported and/or compiled into a CSS file and again if you're not used to sass this might seem a little weird but once I start doing the project I think this is going to make a lot more sense but this is the basic template that I usually use and because this is the basic template that I really use what I'd strongly suggest that you do is that you go ahead and if you've made something like this or you find you're creating a file structure that's a lot like this and you're always doing the same thing save it as your template file so you don't have to create something like this over and over and over again every single time because this just took me half an hour to do and that's such a waste of time I could use this for every single project I do now I'd probably want to build out the basic structure of my HTML file too and save that and it's a template and bang we're all done so for this video let's do one last thing of taking all of this you can see that there's been four changes and the way this works is that's empty that's a file empty this is my pre pro switch I'm going to add to my ignore and you can see here is my sass file alright so super so what I want to do now is I want to commit all of these to the site I want to say that these are all good these are live these are things that I'm working with so all I'm going to do is I want to give a little summary so let's just call it created template for site I'm not going to give a long description just to added main sass I don't need a description for this it's pretty self-evident so just I created the template for the site that we will be using to build this out and I'm going to commit all of this to the master and now there's no more local changes so I could take a look just to show you guys what that's actually done we can see right now that that I've refreshed everything else is in there so a minute ago we added the CSS my sass index and again I should ignore that I'll do that in the meantime and we can see if I can even come into my sass file and open it up and see it's all there and so if you want you can clone this get it on yours make some pull requests on it if you're not sure how that all works don't worry about it but you can follow along hopefully you get a better idea of how github works and how sass works while you're watching me do this now in the next video things are going to be much more fun we're actually going to start building the site as we're going to be taking a look at just the markup not one not as fun as the CSS but the markup super important it's what sets the structure for everything else so we're going to be doing the markup for the entire site all of the HTML in the next video and after that we're going to jump into doing the really cool stuff of exploring sass and all the real power that that does have if you've liked this video and you're excited for this series please like the video and if you have liked it and you haven't subscribed consider subscribing so you can keep getting new content like this every single Wednesday and of course if you have any comments or questions please do not be shy leave them down below don't forget there's some useful links down in the description so if you're looking to learn more about sass or github or anything like that go and check those out and have yourselves a good one guys until the next video take it easy