Homework 1 Demo - Code Refactor

hey everyone so today i'm going to be walking you through how to do well how to start uh homework one your very first homework the code refactoring um i know there's been a bit of confusion as to even do we kind of just threw this at you so it's all right i'm going to show you kind of step by step the first steps in getting started then you'll go on and actually do the code refactoring so the first step when you're doing any homework should be to read the readme there's a lot of important information on here make sure you read this thing top to bottom you know it tells you what you're working on um why you know why we're doing this um pay special attention to the acceptance criteria um this is what your app needs to do so make sure you're reading through these good information here how to get started we're going to walk through a lot of it uh in this video and then also make sure you take a look at the grading requirements this is how you're actually going to be graded on this homework okay so make sure that your your app is checking all these boxes so when you're done reading that what's the first step so the first step should be to create a new github repository let's do that here's my github i'm going to create a new repository make sure we're giving it a useful name not just homework1 and remember that your github is public people are going to come look at it so if an employer wants to go look at your um github page you know want to see unique names on your project so it's not just you know homework no idea what's what's actually there okay so let's call this a horizon code refactor and as you can see i've already done one of these before so let's call it a demo and skip these skip these and let's add a readme okay you might be checking these other boxes later on in the course but for now we just need an ad readme and we're going to create repository all right so now we have our repository the next step is to clone it down onto our local computer this is on github.com we need this onto our computer so we're going to code we're going to copy ssh we're going to pull up our git bash or your terminal what i recommend is that you have a homework folder something separate okay so let's just um right now i'm in the course curriculum let's move up here so we're on the desktop uh let's just call it homework for now okay you can see here we have a homework folder so let's cd into homework okay you see this completely empty all right so this is where i'm gonna be cloning my homework um repositories into okay so i've already copied that link so let's do a git clone and then we're going to put that link in here this is going to clone it down it's done if we do an ls again we'll see that now we've cloned that repo down it's there let's cd into it and then a nice little shortcut is just to code space period and it's going to open up vs code wherever you're at okay so now we have our brand new repo with the empty readme and no files in here so now what's the next step well in this particular homework we were given some starting code we want that starting code in our folder it's going to be found in the develop folder of the course repo something that you should not do is to just copy the whole develop folder over okay we don't want to be doing this because it creates kind of an awkward file structure it creates like an extra layer you got to go into the develop and then into the folders all right so anytime that you're you're given starter starting code you want to be copying the files and folders within the develop folder but not actually the develop folder okay so in this instance we're just going to i use control click control left click you can probably some people do other things you can do individually you know but i like to just um control click everything i'm gonna right click we're gonna copy we're gonna come over here into our new repo we're just gonna paste so now we've got everything we need here okay all the stuff that was in there all the starting code that was given to us is now in our new repo so i don't need this anymore now we're all set basically to start working on our homework we have our starting code into our repo the next step here once you've got your starting code added i would recommend that you add commit and push it to github.com just to make sure everything's working all right so there's two ways to do this either you can do it right here in your git badge or your terminal or you can do it within vs code either way is fine whichever you prefer so i like to do i get status i will do git status non-stop it's just a it's an easy way to check what's going on where you're at in the you know the get process so to speak okay so we do get stats we see we have untracked files the assets folder the index.html these are things we added that's great that's exactly what we want so we're going to get add you can do git add period you can do git add smash dash a i've always done a get ad period that's up to you okay so that's all added now let's check we can always do get status right check and make sure those things are there so it's in green those things are added changes to be committed so we have yet to commit these we need to make sure that we do a good commit so let's give commit all right get committed we're gonna add a message make sure we're adding a descriptive message message here um it's not terribly important when you're working alone because these you know you should be familiar with the changes you're making but i'm sure you can imagine the future when you're working with other people that if someone you know wants to know what what's changed in the code they can look at your commit message and see what exactly uh you've done to the code with this particular commit okay so we're gonna add a commit typically it's just something you know added starter code something like that okay so we've made our commit again we can always do get status make sure we're set your branch is ahead of made by one commit let's get push okay now ready to push we're gonna do a git push origin main it's gonna do its thing and looks like it's successful so how do we check that well let's go back to our repo and you can see now it's got the starting code all right now the other part of this homework is that you need to have deployed site right so remember we talked about having two links for your homework submission this is going to be one of them you're going to submit this link right here that links to your repo for this particular assignment all right so this is one of your links now the other one is going to be the deployed site which you're going to be using github pages so in the readme for this homework there's actually instructions on how to deploy to github pages so you can either follow this video or you can follow these instructions so let's do that so deploying to github page is actually pretty simple you're going to go to settings here within your repo click on settings on the left side here you're going to go down to pages and you're going to set the source to the main branch i'm going to save okay you're going to say you're going to get this little pop-up here says your site is ready to be published at this link so now your code is going to be published or deployed at this link you're probably going to get an error um sometimes it takes some time for it to actually load okay but this is the second link you're going to be submitting and as you can see now after it took a second to process and load it our starting code is now deployed so this is your deployed link when you set up github pages you're going to get this little link right here this is the second link you're going to submit for your homework this is your deployed site so this this is enough to get you started um obviously there's some actual refactoring you need to do right that's the whole point of the assignment just to give you a real quick overview of kind of what you're what you're supposed to be doing is the index.html has a lot of div tags right remember we talked about in class i really want to be using semantic elements is that uh give a bit more description as to what the content is so in your index of h your index.html your goal should really be to get rid of all these div tags you shouldn't see div anywhere that should be what you're uh you're trying to do so go through these div tags and see if you can change them to something else like i don't know maybe a header maybe a footer like an article or a section something like that things to look up and then on the css side okay we're not going to be doing a whole lot in here but you'll notice a little further down or in some areas here uh there's a lot of code that's really repetitive see how these things are these three are basically the same thing these three are basically the same thing you know maybe there's a way we can condense these into smaller file size right maybe we don't need to have three different classes here with styling and we condense these into just one class and then you have to go back here to your index.html and maybe you're going to need to change a few things with the class names here a little bit food for thought i'll leave that to you to figure out but this should hopefully be enough to get you started on the assignment and then um and you're off and running on on the boot camp so hopefully this helped if there's anything else i can help you with any any other questions you have uh feel free to reach out to me and uh wish the best of luck all right see you later

Channel: Paul Keldsen - Web Development

Views: 146

Keywords:

Id: eDmY17-GuLo

Length: 12min 43sec (763 seconds)

Published: Thu Sep 09 2021