Homework One

Questions/Tasks:

1. Download and install the command line version of the Git version control system if you don't already have it. All code you write from now on (for the entire year!) must be added and committed to your repository. For this term I recommend that you make just one repository for all your work. Inside this repo/folder each assignment is its own folder. So you'll have one repo and within it folders for HW1, HW2, etc.
2. Create an account on GitHub or Bitbucket. (We'll use Bitbucket exclusively Winter and Spring for our group projects, but we'll use GitHub for part of our work this term -- so you'll end up needing both.) Get yourself set up and synchronize your local repository so you're ready to develop. Once set up your workflow will be:
   • on your development machine, create and edit source code files
   • add them
   • when ready, commit, then
   • when you are ready to save or share your code, push to your remote repository
   You're the only developer so you don't have to worry about anyone else modifying your repository. Or do you? If you work on two machines (a laptop and a desktop) then you are effectively two developers working on the same code. This is what Git excels at (distributed development) but you'll learn that as we go along. For now, don't ever edit the files on different machines without first pulling changes and only then add/commit/push.
3. Write a multi-page, hyperlinked set of web pages on a subject of your choice. The content is irrelevant, it's the HTML and CSS that matters. Here are some specific requirements for your work:
   • You must use Bootstrap for the layout of all pages and must demonstrate both single column layout and two or more column formatting
   • You must have a separate CSS file (e.g. styles.css) in which you write some of your own classes and that you use somewhere
   • You'll need a navigation bar or menu that contains links to all your pages
   • You need to have at least one table
   • and one of each kind of list: ol, ul and dl
   • All main elements need to be styled consistently: use those defined by Bootstrap or use your own. But please, no obnoxious colors or backgrounds. You should attempt to make a professional and modern looking web page.
   • You must write all code yourself and may not use a WYSIWYG designer such as Dreamweaver. Good (free) HTML and CSS aware editors include Atom, Brackets, Visual Studio Code, Notepad++ and Textmate (OS X only)
4. When finished to your liking, make sure all changes are committed and pushed to your remote repository. Make a note of the "clone" URL of your remote repo. You should be able to clone your repo to your P drive (or to another location or server) and then open the main .html file (i.e. index.html) and view your pages correctly.
5. Create a repository on GitHub and enable the GitHub Pages feature. (If you've already used GitHub for your main repository then simply enable the Pages feature.) This gives you a normal Git repository that is accessed by a web server. You can then use this web server to view your homework's html pages on a public server. More importantly, it will also serve as your Portfolio this term. It will showcase all your work. You'll want it to look very nice, as it is public and it has your name on it. Future employers may see it! Make a nice landing page that has your name and then a link to a CS 460 landing page. This CS 460 page should have links to separate pages for each homework. For each homework you'll have one or more pages that showcase your work, and include all your code. They should be written in a Blog post kind of way. Include written explanations of what you're trying to accomplish and then include both your code and links to the working pages.
6. Create a Blog, Post or Journal entry type page within your Pages repository where you show off your work for this homework. Here is one example: morses.github.io (see Homework 1). You should describe the assignment and then dive into your solution. You must have all your code showing on the page and it should use syntax highlighting. If you're using a separate repository (on Bitbucket for example) then make sure you have included a link to that repo and that it is publicly available. The HTML and CSS you write for this HW is ideal for posting on GitHub Pages. Add your code directly to the repo and their web server will serve it for you. Just include a link to your index.html page somewhere obvious.
7. Print out the grading rubric for this homework, write your name and the URL of your GitHub Pages site, and turn it in to the instructor. The instructor will grade your work by reading your GitHub Pages site and reviewing your repository.
8. Lastly, begin assembling a collection of cheat sheets, useful notes, important documentation and code snippets. Print in color and use tabs or other such dividers to keep it nicely organized. Include notes from when you were learning HTML, CSS, Bootstrap and Git. Your notes can be handwritten. This is for your reference as you progress through the term, and you can bring it to the exams!