/Intro-to-Git

and Github practice with html5, js, and css

Git Practice

Make sure you have a github account.

Make sure you have npm and http-server installed

Creating and working with Git repositories

  1. Go to github.com
  2. Create a new github repository
  3. Provide a name for the new repository
  4. Choose to add a README file
  5. Do not select a gitignore or license file
  6. Create the new repository
  7. From your DevLeague directory, clone the github repository using the ssh url
  8. Create a blank index.html file
  9. Commit your changes
  10. Add a basic html5 structure to index.html
  11. Commit your changes
  12. Add a level 1 heading tag with the contents Hello HTML
  13. Run index.html in a browser to test that you see your header text
  14. Commit your changes
  15. Push your commits

Forking and cloning Git repositories

  1. Fork this repository
  2. Clone your fork of this repository
  3. Create a blank html5 document named index.html in the root directory
  4. Commit the index.html file
  5. Push your commits
  6. Create a subdirectory named public/
  7. Move the index.html file into the public/ directory
  8. Commit your changes
  9. Push your commits
  10. Create a subdirectory of public/ named js
  11. Create an empty javascript source file named app.js inside of public/js/
  12. Commit your changes
  13. Push your commits
  14. Create a subdirectory of public/ named css
  15. Create an empty css stylesheet file named styles.css inside of public/css/
  16. Commit your changes
  17. Push your commits
  18. Add a basic html5 structure to the public/index.html file
  19. Commit your changes
  20. Add a single javascript statement in public/js/app.js that will print out "Hello Github" to the browser console
  21. Commit your changes
  22. Add a single css directive in public/css/styles.css that will make the body of the html document appear light gray
  23. Commit your changes
  24. Import your javascript source file into your main index.html file
  25. In another terminal, run http-server to serve your public/ directory
  26. Load your html app in your browser
  27. Check that you see the words "Hello Github" in your console
  28. If everything is working so far, commit your changes
  29. Import your css stylesheet into your main index.html file
  30. Reload your browser, check that your stylesheet is loaded, your background should appear light gray
  31. If everything is working at this point, commit your changes
  32. Push your commits
  33. Kill your http-server