Understand what semantic markup is, best practices are, and start thinking of HTML/XHTML as a declarative user interface language.
Demonstrate your current understanding of creating a simple Web page.
You should have completed Project 1.
In your project01 directory, create a file called index.html. Commit and push, even though that file may be empty.
The purpose of this assignment is to begin our feedback loop that will educate you about current best practices in Web Application development. The first fundamental concepts every webapp developer needs to know about include understanding what it means to have clean, elegant, semantic markup; gain an appreciation of the pain of browser quirks and style behavior; unobtrusive JavaScript; search engine optimization, and many other aspects of Web-based user interface design.
Let's start with a challenge. User interface construction on the Web uses three primary tools: markup, styles, and behavior via X/HTML, CSS and JavaScript, respectively. Given the screenshot and additional requirements below, how "damn near perfect" of an implementation can you come up with? Once this project is complete, I'll show you the code that is considered, as of 2011, "damn near perfect."
Using your favorite editor, construct an index.html file that results in the above interface to be displayed when loaded in a browser. Your goal is to match this screenshot exactly, since high-paying clients expect you to be able to construct, to the pixel, exactly what their high-falutin' interface designer creates. In addition, your interface must exhibit the following behavior:
Good luck! I can hardly wait to see your implementations! (neither can the foxes)
Say you're ready to work on your index.html file. First, check the status of your repository:
This is git telling you that there's nothing new in your repo. Next, open index.html in your favorite editor and save your changes. Run git status again. The output you see is git telling you that something has changed in the repository. Let's commit the changes.
Alternatively:
That tells git to commit all the tracked files that have changed (that -am argument means add and commit).
Always, always always commit once you've finished a unit of work (eg, like adding the menubar) and always, always, always write meaningful commit messages.
When you're doing with the project, or need to share the code, git push.
There's a lot more to git, such as "how do I revert a change?" Seek these answers on your own, and don't hesitate to post to our forum.
Use an XHTML4 Transitional doctype.
Font faces can vary a little (but notice how the letters in the main title have a denser letter spacing? How do you do that?).
You aren't limited to using just one index.html file. (hint, hint).
Use the forum to post requests for help and challenges that you just can't figure out! (be sure your repository has been pushed, so we can refer to actual code).
Today, the standard for Web development is Firefox, so get used to this. If you're a Chrome or Safari/Webkit user, you should be fine, but "user acceptance" (correctness of the work) will be judged via Firefox. Next week I'll be giving you a list of some very handy Firefox extensions that every Webdev should have.
I must be able to pull your repository and see your project01 directory.
I must be able to view project01/index.html in Firefox 3.x.