Sunday, October 4, 2015

What to do after finishing Codecademy Web Design


This is a tutorial on what to do once you've finished building a website in the fantastic Codecademy tutorials and want to make your own web pages and limited apps. This tutorial specifically describes how to set up a website hosted by GitHub using the Github Desktop GUI in OSX, though everything should look about the same in Windows.

Prerequisites

  • Know the fundamentals of web design, HTML, CSS, and JS from Codecademy or another course
  • Register for and setup a GitHub account at https://github.com
  • Install the Atom text editor, "a hackable text editor for the 21st Century"
  • Install GitHub Desktop, "a seamless way to contribute to projects on GitHub and GitHub Enterprise."

Overview

We'll start by setting up a your "development environment" and then creating and contributing to a repository in GitHub. Ultimately, we'll finish with a page hosted on the internet that you can access from anywhere.

Initial Setup

  1. Install the Atom text editor
  2. Get an account at https://github.com. Once you've created your account, create a new repository by clicking the '+' sign next to your profile pic in the upper right.
  3. Create a repository, in this example I create one named example-website. Make it Public and use the defaults.
  4. Once the repository is created, install and configure GitHub Desktop. Configuration requires you to sign in with your Github account credentials that you created earlier.
  5. In GitHub Desktop, click the '+' in the upper left and clone the repo you just created.
Congratulations, you're ready to start building your webpage! 😄

Create your local webpage

  1. Once you've cloned the repo to your computer, let's build a local webpage stored on your computer. Click the branch button and create a new branch named gh-pages -- this name is important and more detail about this can be found in the GitHub Pages documentation.
  2. In GitHub Desktop, edit your repo in your text editor Atom by right-clicking the repo and selecting Open in Atom. Be sure that the repo you're working on is gh-pages as shown in the upper-right of the below image.
    You should see Atom like this, and note the location in the window title. The location should look like /Users//GitHub/example-website
  3. In Atom, create an index.html file by right-clicking the repo name and selecting New File, and name the file index.html.
  4. Add in your basic HTML to index.html. This should feel just like the Codecademy coding "IDE" (Interactive Development Environment) except now you're out of a browser and creating an actual file on your computer. You can copy the one I used in the example from here:
    Keen eyed readers will notice that I missed the closing '>' in my title tag. It doesn't change anything in the tutorial, but good eye 👍
  5. You can view this actual file on your computer by right-clicking the index.html file and selecting "Show in Finder"
    Double-clicking the index.html file should open it up in a web browser where you can see your code rendered like it would be if you were to host it on the internet.
    Try making more changes to index.html and refreshing your browser.

Host your page in GitHub Pages

  1. Now that you've got a working page in your repo, make a commit and push it to GitHub where it will be hosted. To do this, go back to GitHub Desktop, enter a commit message like "Create index.html" and click the Commit to gh-pages button -- it's important to make sure you're committing to gh-pages. Then click the Sync button in the upper right to copy your repo to GitHub Pages.
  2. Visit your project site at https://github.com/YOUR_USERNAME/example-website. If you change the branch from master to gh-pages, you should see the files you've committed.
  3. Finally, view your page at http://YOUR_USERNAME.github.io/example-website (mine is http://jwsy.github.io/example-website) -- congratulations! 😄

Update your website

  1. Go back to Atom and add a css folder for CSS and a style.css stylesheet for your page.
    To add the folder, right-click below the files in the left pane.
  2. Right-click the new css folder and create a style.css file.
  3. Edit style.css to add some color to the page, just like how you did in Codecademy. See my papayawhip example here.
  4. Edit index.html and add a link to the stylesheet you just added. In this example, I add:
      <link rel="stylesheet" type="text/css" href="css/style.css">
  5. View your local website the same way you did before by selecting Show in Finder and opening the file in your browser. Mine looked like this, and note the URL that starts with "file:///"
  6. Go back to GitHub Desktop and take a look at how it's tracked your changes. You should see your stylesheet and HTML as the two changes.
    Like before, add a commit message, click the Commit to gh-pages button, and click the Sync button.
    If you want to make more changes, follow the same workflow of editing locally, committing, and syncing.
  7. Go to your project site on GitHub, visit the gh-pages branch, and make sure that your new CSS folder and updated index page are there.
    And finally, visit your updated page with your updated code.
    Get into the console View -> Developer -> JavaScript Console and see that you can do JQuery selectors and actions.
Congratulations: you've made your own simple website using the skills you've learned at Codecademy and hosted it in GitHub Pages! 😄