Make sure you have a github account.
Make sure you have npm
and http-server
installed
- Go to github.com
- Create a new github repository
- Provide a name for the new repository
- Choose to add a README file
- Do not select a gitignore or license file
- Create the new repository
- From your DevLeague directory, clone the github repository using the ssh url
- Create a blank
index.html
file - Commit your changes
- Add a basic html5 structure to
index.html
- Commit your changes
- Add a level 1 heading tag with the contents Hello HTML
- Run
index.html
in a browser to test that you see your header text - Commit your changes
- Push your commits
- Fork this repository
- Clone your fork of this repository
- Create a blank html5 document named
index.html
in the root directory - Commit the
index.html
file - Push your commits
- Create a subdirectory named
public/
- Move the
index.html
file into thepublic/
directory - Commit your changes
- Push your commits
- Create a subdirectory of
public/
namedjs
- Create an empty javascript source file named
app.js
inside ofpublic/js/
- Commit your changes
- Push your commits
- Create a subdirectory of
public/
namedcss
- Create an empty css stylesheet file named
styles.css
inside ofpublic/css/
- Commit your changes
- Push your commits
- Add a basic html5 structure to the
public/index.html
file - Commit your changes
- Add a single javascript statement in
public/js/app.js
that will print out"Hello Github"
to the browser console - Commit your changes
- Add a single css directive in
public/css/styles.css
that will make the body of the html document appear light gray - Commit your changes
- Import your javascript source file into your main
index.html
file - In another terminal, run
http-server
to serve yourpublic/
directory - Load your html app in your browser
- Check that you see the words
"Hello Github"
in your console - If everything is working so far, commit your changes
- Import your css stylesheet into your main
index.html
file - Reload your browser, check that your stylesheet is loaded, your background should appear light gray
- If everything is working at this point, commit your changes
- Push your commits
- Kill your
http-server