Web Dev Startup Tutorial

PART 1

Visual Studio Code

Your Code Editor for the Course

1. In order to write code in our class, we are going to download and install a widely used editor called Visual Studio Code Editor.

   NOTE: If you are an on-campus student, Visual Studio Code is probably already downloaded, installed, and configured.
   
   If so, just double check that the extensions further down in the directions are installed, and then move on to Part 2.
   
   If not, or if you are an IDL student, continue with Part 1.

   Visit the following link and click the big blue "Download" button on the following page:

   https://code.visualstudio.com/

   

2. If you're on a Mac, once your software downloads, unzip and drag it to your Applications folder.

   This will make it easier to find in your Launchpad, and will also set it up properly to interact with the other application we'll be installing later.

   

3. Go ahead and open up Visual Studio Code once you have it installed.

   If you are prompted in the installation process to check any boxes before installing, just leave the default settings and continue with the installation.

   
   

   It should (somewhat) resemble the screenshot on the right.

   It may not look EXACTLY the same, and that's okay. Visual Studio Code is always updating itself.

   You'll also probably see a Welcome tab and/or some personalization options when you first open Visual Studio Code. You can safely close that tab and skip the Personalization options it has you select.

   ALSO, you'll probably see a little popup in the lower right whenever you start up Visual Studio Code, asking you to download and configure Git. You can safely close and ignore that popup.

   

4. Now that we have installed the main code editor we will be utilizing throughout class, now we're going to install a few extensions that we will need for viewing the live renders of our code.

   First, navigate to the left side panel in Visual Studio Code and click the icon with the four boxes.

   Then, in the Extensions tab, click in the search bar at the top.

   

   In the search bar, type "live preview".

   The extension "Live Preview" by Microsoft should be one of the first in the list. Click the Install button to install the extension

   This extension will allow you to preview your HTML/CSS/Javascript code within Visual Studio.

   

   In the Extensions tab, click in the search bar at the top. Then in the search bar, type "live server".

   The extension Live Server by Ritwick Dey should be one of the first in the list. Click the Install button to install the extension

   This extension will allow you to preview your HTML/CSS/Javascript code live in a web browser like Google Chrome.

   

5. Next, we're going to configure a few Settings to help you write cleaner code and prevent some common bugs down the line.

   Go to the Settings tab. (It's in slightly different places in Mac vs PC.)

   For Mac users, it's under Code -> Preferences -> Settings.

   For PC users, it's under File -> Preferences -> Settings.

   Once you're in the Settings tab, search for "auto closing tags".

   In the setting for "HTML: Auto Closing Tags", uncheck the box beneath it.

   That's one setting down.

   
   
   

   Next, jump over to another small tutorial that's a bit more complex, so it has its own page.
   
   Adding a Code Ruler
   
   Return here once you have that set up.

   

Congrats! You are now set up to start coding in your very first Code Editor!

PART 2

Your GitHub Repository

Where your code will live in the Course

1. Our next goal is to create a (free) GitHub account.

   Go to https://github.com/ and click the Sign up button in the top right.

   

2. On the next page, enter the email address you want to associate with your GitHub account.

   You can change your associated email later if you want.

   Then click the Continue button.

   

3. The page will update and prompt you to submit a password for your account; go ahead and do so.

   Then click the Continue button.

   

4. The page will update again and prompt you to submit a username for your account; go ahead and do so.

   NOTE: Your username will be publicly viewable, and will also be included in the URL for your website, so make sure to pick something you're comfortable sharing with the world!

   Then click the Continue button.

   

5. The page will update again and ask if you want to receive product updates related to GitHub.

   We recommend typing "n" to decline, but if you are interested in getting emails from GitHub, feel free to type "y".

   Then click the Continue button.

   

6. The page will update AGAIN and prompt you to prove that you're a human and not a robot, by having you complete a little puzzle.

   You have a choice of completing a visual puzzle, or an audio puzzle.

   Complete the puzzle to continue.

   

7. After completing the puzzle, a button will appear at the bottom, which will allow you to finally create your account.

   Click the "Create account" button to continue.

   

8. After clicking the Create Account button, GitHub will send an email to the address you specified with a "launch code". You'll need to go into your email to retrieve it.

   Copy that code, and paste it into the page you left in GitHub.

   

9. Then you'll be brought to a page to personalize your GitHub account.

   This can be skipped entirely by clicking the Skip Personalization link at the bottom (which we encourage you to do).

   Then you'll get a fun "launch" animation, before being brought to your Dashboard.

   

10. Now, you finally finished creating your GitHub account! You should be on the Dashboard of your account.

    Most likely your GitHub theme is set to "Light" mode, but depending on your computer settings, it may default to "Dark" mode.

    Next, we're going to be creating our code repository, which is basically a special folder that we'll use to store our code (both "remotely" on GitHub.com, and also "locally" on your computer).

    Click the green "Create repository" to get started.

    

11. Name your new repository:
    
    your_username.github.io
    
    replacing your_username with the same username you specified when you created your account.

    WARNING: This is VERY important to get right!
    
    If you don't type your username in exactly the same, followed by .github.io, you are going to have a weird and complex website URL for the rest of the course!

    Make sure the "Public" radio button is checked.

    Check the box to create a README file.

    Finally, click the green "Create repository" button.

    

12. Now that you've created the repository, we're going to confirm that Github Pages is working correctly.

    You should be on the repository page after creating it, so click on the "Settings" tab in the navigation near the top.

    

13. From there, click the "Pages" link in the left sidenav.

    

14. You should see the link to your brand new website in the box under GitHub Pages, with a [Visit site] button next to it.

    If you don't, make sure that the dropdowns under "Build and deployment" are configured to say "main" and "/ (root)".

    If they are, and you still don't see [Visit site] button, GitHub may just be being a bit slow to publish; give it another couple minutes and refresh the page later.

    

15. If you click on the [Visit site] button, you will find that your brand new web site is pretty empty.

    Only the name of your repository (which is actually the contents of the .readme file) will be found there.

    That's okay! We'll be adding content later!

    

Congrats! You have now created your code repository and published your very own website!

PART 3

GitHub Desktop

The connection between your computer and the web

1. NOTE: This step is for IDL students only, or those setting up GitHub Desktop for the first time.
   
   If GitHub Desktop is already installed on your computer, jump down to Step 2.

   Now that we have created our Github account and repository, download and install the GitHub Desktop application from the following site:
   https://desktop.github.com/

   

   After installation, sign in using your new GitHub account.

   It will take you briefly back to the browser to confirm your identify; click "Allow" when prompted. You should see some pages in the app like the following:

   

   Here's the page you will see when it redirects you to Github to authenticate yourself.

   

   On the Configure Git, select the "Use my Github account name and email address"; you'll probably need to change your email address to the one you entered before.

   

   After you've successfully logged in to GitHub Desktop, we are going to "clone" your remote repository to your local machine.

   "Cloning" in GitHub is the process of pulling down that repository we created earlier from Github.com (the remote location) and creating a copy of it on your computer (the local location).

   In GitHub Desktop, click the "Clone a Repository from the Internet" button.

   Now jump down to Step 3. (Step 2 is only for on-campus students, or students working from a shared computer)

   

2. NOTE: This step is for on-campus students only, or those reconfiguring GitHub Desktop after someone else has used it.
   
   If you just installed GitHub Desktop on your computer in Step 1, you can skip this step, so just jump down to Step 3.

   Now that we have created our Github account and repository, we'll need to connect it to your campus computer (repeat this process any time you need to move to a different computer).

   Open GitHub Desktop. You'll probably see someone else's repository loaded up in the top left.

   To change that, we'll first need to make sure you're signed in to GitHub Desktop instead of them.

   Go to the GitHub Desktop menu at very top of the screen, and select Preferences.

   Then in the dialog that pops up, under Accounts, click the "Sign out" button as in the screenshot.

   

   After signing out, the button will change back to "Sign in".

   But before clicking on it, navigate to github.com and make sure that you're logged in there, since GitHub Desktop is going to connect to that site to log you in.

   After you've signed in to github.com, click on the "Sign in" button in GitHub Desktop.

   

   You may get redirected to the following page in the browser as Github tries to authenticate you.

   If so, click the "Authorize desktop" button.

   If not, you'll just be signed in to GitHub Desktop after a second or two.

   

   Next, you'll need to reconfigure Git to tell it you're the one writing the code, since multiple people could be connected to a GitHub account.

   Once again, go to the GitHub Desktop menu at very top of the screen, and select Preferences.

   Then in the dialog that pops up, navigate to Git, enter your Name, and select the Email Address you signed up with.

   

   Next, you'll need to change the current repository to your own. To do that, start by clicking the "Current repository" at the top left of GitHub Desktop.

   

   You wil probably see at least one other repository in the sidebar that pops out.

   If you've used this computer before, and you see your repository, you can just select it, and move on to Step 5.

   If not, click the Add dropdown, and select "Clone repository...".

   "Cloning" in GitHub is the process of pulling down that repository we created earlier from Github.com (the remote location) and creating a copy of it on your computer (the local location).

   

3. Select the Repository we just created earlier on Github.com, and the Local path should default to a new Github folder inside your Documents folder.

   (you may need to add your_username.github.io to the file path afterwards if it doesn't auto-populate it; see the screenshot for reference).

   Then go ahead and click the blue Clone button.

   

4. After a few seconds (or sometimes minutes, depending on your internet connection), Github Desktop will download your repository from the web to the folder you specified in the previous dialog.

   After the download, open up a Finder window (or Explorer window on PC) and navigate to your Documents folder, and then to the Github folder inside that.

   You should see a new folder named after your repository, with a README.md file inside it.

   This means you successfully cloned your repository!

   You're going to be returning here often during the course, so make sure you remember how to get back here!

   

5. Now, return to Github Desktop.

   Your recently cloned repository should be selected and displayed in the top left.

   Click "Open in Visual Studio" in the middle section to do exactly what the button says: open up your repository in Visual Studio Code

   

6. An instance of Visual Studio Code should have popped up, with your GitHub repository loaded up in the EXPLORER sidepanel

   (If that sidepanel isn't open, click the icon resembling two documents at the top left of the application)

   Occasionally, the shortcut button in Github Desktop doesn't work (usually due to personal computer configurations).

   If that occurs, don't panic; you'll just have to open up your repository manually by going to the top menu and selecting
   File -> Open Folder.

   Then navigate to
   Documents -> Github -> your repository folder
   and select that folder to open.

   

Congrats! You have now cloned your code repository to your computer and are ready to start coding in it!

PART 4

Code Skeleton

The template for all your future code projects in the course

1. First, we're going to create the necessary folders in the Code Skeleton.

   In Visual Studio Code, right-click your code repository and select "New folder..."

   Then name the new folder "code-skeleton"

   

2. Next, you're going to create two new folders called "css" and "images".

   To do so, right-click your new "code-skeleton" folder and select "New folder..." again

   Name the new folder "css"

   It's going to look a little weird at first. Visual Studio Code condenses folders to one line if there is only one folder inside of another.

   Don't worry, it'll look better after we add another folder in the next step.

   

3. We've created the "css" folder; now let's create the "images" folder.

   To do so, right-click your new "code-skeleton" folder and select "New folder..." again

   Make sure you right-click the "code-skeleton" folder and not the "css" folder!
   
   If you don't, you may accidentally create the "images" folder inside of the "css" folder instead, which is not what we want.

   Name the new folder "images"

   Your Code Skeleton should resemble the image on the right. Now we just need to create the HTML file!

   

4. Finally, you're going to create your first HTML file!

   Right-click your new "code-skeleton" folder one last time and select "New file..." this time

   Name the new file "index.html"

   After creating the file, your Code Skeleton should resemble the image on the right.

   However, we're not going to stop there; we're also going to have you "write" some code in there before we wrap up!

   

5. In truth, we're just going to have you autogenerate an HTML template, so you won't truly be "writing" any code.

   In your new index.html file, click in the text editor for the file, and start typing the letters "html".

   A little dropdown should pop up; go ahead and select the second option for "html:5".

   

6. This will generate an almost perfect empty template for writing HTML code; however, the indentation is less than ideal.

   We'll be talking more about clean code later. For now, just trust that the changes we're making now will help you out later down the line.

   

7. To get started, click and drag to select everything between (and including) the <head> and </body> tags, as shown in the image to the right.

   It's okay if the line numbers of the selected code differ on your screen compared to the image.

   After selecting the appropriate lines, go ahead and hit the TAB key on your keyboard.

   This will cause all those lines we selected to be indented one level to the right.

   

8. We're almost done. Notice the little circle to the right of the file name in the top tab of the screenshot? That means the file is not saved.

   To save your file, you can do it the long way by going to the File menu, and then clicking on Save.

   Or, you can do it the faster way by using keyboard shortcuts (Cmd+S for Mac, or Ctrl+S for PC).

   This will ensure that the changes you made to the file are saved. It is important to save frequently when you code!

   

Congrats! You have "written" your first bit of HTML code and successfully created a project template for the rest of the course!

PART 5

Committing and Pushing

The final steps required to get your code to your website

1. Now, jump back to Github Desktop. In the app, you should see the changes to your code-skeleton folder; in this case, only the index.html file.

   (You might wonder why the 'images' and 'css' folders aren't in there. Well, GitHub desktop only tracks changes to files; folders are more or less invisible to it, until a file is put inside of them.)

   

2. We're going to save a copy of your changes in something called a "commit".

   A commit is basically a snapshot of the changes you made, which gets added to the repository's version control.

   Add a commit Summary (required) and Description (optional) in the textboxes in the bottom left of the app.

   Then click the [Commit to main] button to create a commit of your changes.

   

3. Next, we are going to do something called a "push".

   A push is an action that, well, pushes your local commits to the remote server on github.com.

   There are two places you start a push in Github Desktop, both circled in the screenshot below. Choose either option and click it.

   PUSH WARNING 1: Make sure all image files you commit are less than 1MB in file size; otherwise, you could cause GitHub to choke when you push your commits.

   PUSH WARNING 2: If you have weak or unstable Wifi, it is strongly recommended that you create separate commits for each image you need to push, rather than including all images in a single commit.
   
   Github Desktop will sometimes stall if you commit and push all your images at once with weak internet, so save yourself the stress, and commit/push images one at a time.

   

4. Clicking either option will push your changes to your website

   If the push was successful, the top option should change to "Fetch origin".

   

5. Now return to the Github website, and go into the repository you made earlier with github.io at the end of it. Once you navigate to the main repository code screen, you should see your code-skeleton folder that you created in the middle section.

   NOTE: Github pages often times takes 5-10 minutes to actually render out your commit, so you may have to wait and then check to see if your site is live.

   
   

   Scroll down to the bottom of the right sidebar and click on "github-pages" under "Deployments".

   

6. From there you will find the deployment page. There are many options you can use to view the current deployment, circled in the screenshot to the right.

   If the icon next to the top deployment is not green, then you may have to wait longer.
   
   If it is an orange spinning circle, your changes are still being deployed.
   
   If it's red, then something went wrong in GitHub; you can most likely fix it by committing and pushing again.

   Clicking on any of the circled options will take you to your homepage (which still just displays the name of your repository, from your README.md file).

   

7. In order to find your code-skeleton site (a project nested in your main repository) for submission, you must add the project folder name to the end of the URL of your homepage.

   And it must match EXACTLY! No differences in case or spacing or spelling.

   Your code-skeleton project folder will only display an empty page, with the name of "Document" on the tab. That is expected, since there's no content on the page yet.

   It can sometimes take a couple minutes after pushing your code for it to actually be published on the site, so if you get a 404 error when you first try to access the URL, give it another minute or two and then try again.

   For example:
   
   https://username.github.io/code-skeleton/

Congratulations! You just pushed your first code project to your GitHub Pages site!