"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:
- [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.
- [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 pull
ing changes and only then add
/commit
/push
.
- [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!
- [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.
- [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.
- [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.
- [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!