Primary Objectives:

  1. Learn Git: init, add, commit, status, log, config, remote, fetch, pull, push
  2. Learn about remote repositories with Bitbucket, Github or GitLab
  3. Learn HTML
  4. Learn CSS
  5. Learn Bootstrap
  6. Demonstrate you know how to "submit" your work to the instructor
  7. Demonstrate your understanding of the Portfolio plan for the class

Overall Requirements Summary:

  • Use Git from the command line only
  • Write (mostly) HTML 5
  • All files are under source control and synchronized with your remote Git repository, which is public
  • You have multiple commits on most files
  • Your (static) webpage works locally when loaded in a browser from your filesystem (just open the index.html or HW1.html or whatever directly)
  • You have a working GitHub Pages repository/web page meeting the requirements described below and during class
  • Any HTML or CSS notes, cheat sheets or documentation that you might want to reference in the future has been put in your Portfolio in an organized fashion

"As a soon-to-be professional software developer I want a simple web page that is nicely styled with CSS so that I can show off my knowledge of two of the foundational languages of modern web development -- HTML and CSS -- to my instructor and potential employers. Also, I want to show how I use Git for source version control by making my code open source and available through a public Git repository."

Questions/Tasks:

  1. [Setup] 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 a Git repository that you create and manage. For this term I recommend that you make 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. [Setup] Create an account on GitHub or Bitbucket. (We'll probably 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. [Content/Coding] 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 (v4) 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 at least two kinds of lists: 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. (NO templates or theme packs! You've got to do this yourself!)
    • 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. When writing HTML and CSS you're doing yourself a disservice if you're not using the Emmet plug-in!
  4. [Test] 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 anywhere and then open the main .html file (i.e. index.html) and view your pages correctly.
  5. [Portfolio Content] Create a Blog, Post or Journal entry type page within your Pages repository where you show off your work for this homework. Here is my super simple example: morses.github.io (see Homework 1). Of course, take a look at the samples from last year also. You should describe the assignment and then dive into your solution. You must show all important code, or example code that shows you are meeting the requirements, in your post and it should use syntax highlighting. Make sure you have included a link to your actual repo and that it is publicly available. Include a link to your demo page (the HTML and CSS you wrote for #3 above) page somewhere obvious.
  6. [Turn It In] Visit the class Moodle page and the HW1 link. Review the grading rubric to make sure you'll get full points. Turn in the URL for your Portfolio. I will grade it on the web at some point after the due date and will use the rubric to score it.
  7. [Optionally] begin assembling a collection of cheat sheets, useful notes, important documentation and code snippets. Put them in your Portfolio some how, maybe a separate page for each topic. Include notes from when you were learning HTML, CSS, Bootstrap and Git. This is for your reference as you progress through the term, and you can use it on the final programming exam!

Important

Please think about why you are doing this work: to avoid this class's version of Technical Debt! Maybe call it Skills Debt. Later on you will need to be using Git, HTML and CSS on a daily basis. You need to learn it now. If you skimp now and don't learn it then you'll be in "debt" and have to "pay" it off later by "spending" time to learn it. But later on you won't have the time to learn it because you'll need that time to learn something else, like LINQ queries, T-SQL or Git pull requests. Pay it off now and stay within budget!