This assignment builds on Assignment No. 2. You are to enhance that page with additional HTML techniques and apply CSS to your HTML to give your page some basic styling.
Information relevant to this assignment appears in CSS: The Missing Manual by David Sawyer MacFarland in Chapters 1-3 and 6. We obviously can’t cover all that material in class before the assignment’s due date, but by reading these chapters and looking at examples on the W3Schools website, specifically the tutorials at www.w3schools.com/css you should be able to fulfill the assignments requirements.
Complementary material is covered in the free tutorials at http://www.littlewebhut.com/css/tutorials/.
Read the first two chapters of the textbook carefully and Chapter 3 up to at least the middle of page 68 (page 57 in the 2nd edition). Then read Chapter 6. I strongly advise you to do the tutorial that begins on page 178 (page 138 in the 2nd edition), at least through page 188 (page 144 in the 2nd edition). It will really help you learn.
To solidify your knowledge, watch some of the tutorials http://www.littlewebhut.com/css/tutorials/.
The important things to focus on in both the reading and the videos are the numerous techniques for specifying CSS selectors. This is what we will be working on in class. Writing CSS rules for things like colors and text styles is relatively easy, but using selectors to specify the precise objects you want to affect is not. Also, note that jQuery and now even the latest version of JavaScript use the exact same selector mechanism, so it is absolutely critical that you master these techniques. For this reason, CSS selectors will be the subject of our second quiz.
Redo the page that you created for Assignment No. 2 or create a totally new page from scratch. The page you choose must be “rich” enough to provide you with ample opportunities to style elements. You may even wish to use a page created by someone else and add styling to that page. Of course, if you choose a page that you did not initially create yourself, identify its source and author (or company if you cannot find an author named).
Using the techniques discussed in the textbook and videos and in class, style the text on the page you have chosen as you see fit. Explore the various CSS text properties and their possible values discussed in the book and listed at http://www.w3schools.com/cssref/default.asp#text. If you have a friend who is artistic, you are welcome to ask him or her for help, of course naming that person in your code documentation to give him or her credit for his or her input.
Important Note: Do not go overboard. There is so much that you can do with CSS, but for this assignment you are to concentrate on formatting your text. As always, if you already have experience with CSS and want to go farther, that’s fine, but we will mostly be grading your text formatting.
Your CSS code must be in a separate file from your HTML file, in a subdirectory name css. This is the industry-standard way to organize websites. You might use inline CSS and/or an internal style sheet during development, but you must move all your CSS to a separate, external file before you submit your assignment. That external file should have an extension of .css
.
Your code must pass both validators. When it does, add the W3C validation icons to your page.
Please follow these directions carefully. Incorrectly submitted assignments will not be given appropriate credit.
As usual, submit this assignment you must go to the Assignment Submission Form. This form will lead you through providing all the information we need to evaluate your work, confirming that it is correct, and then emailing that information to our teaching assistant and me with a copy to yourself. Be sure to select 91.461 Assignment No. 3: Styling Your First Web Page With CSS from the assignment drop-down list on that form. If your name does not appear in the list of students, you will need to see me.
Important Note: If you do not receive an email in your CS account within a few minutes confirming that your assignment has been submitted, something has gone wrong. Try submitting again or contact our teaching assistant or me.
This assignment will be graded on a 20-point system with points awarded as follows. Please note that the lists of features provided below are not meant to be exhaustive. They are merely representative of the types of things we are looking for in each grading category. Also note that 4 of the 20 points, or 20% of your grade, is awarded for documentation.
Again I stress that your page need not be the most beautiful page on the Web, although it’s of course fine to strive for that! This is not an art class, and again I am very aware that some students enter this class with significantly more experience with Web programming techniques than others. I strongly encourage experienced students to do the basic assignment first and then push themselves to learn and try out new techniques. I encourage inexperienced students to look at others’ work and emulate it where appropriate, of course being sure to cite your references and give credit where credit is due. As always, all students should be able to score all 20 points on this assignment, regardless of what you knew before you took this course.
Criteria | Possible Points |
Program Integrity / Design
|
16 |
Source Code Documentation and Formatting
|
4 |