UMass Lowell Dept. of Computer Science

91.461 GUI Programming I

Fall 2015 Semester, Section 201

Prof. Jesse M. Heines

Assignment No. 3

Styling Your First Web Page With CSS

Date Due:  Tuesday, September 22, 2015


Contents     Top


What This Assignment Is About     Top

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/.


What You Are To Do     Top

  1. 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.

  2. 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.

  3. 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).

  4. 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.

Code Criteria

Code Review


Submitting Your Assignment for Grading     Top

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.


How You Will Be Graded     Top

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

  • page displays properly as intended from the weblab.cs.uml.edu server (1 point)
  • source code for all files is visible on the web and/or accessible via links on the assignment or index page (1 point)
  • all CSS resides in a separate file with an extension of .css in a subdirectory named css (2 points)
  • page exhibits creativity and effort, not just trivial implementations (8 points)
  • page validates using the W3C Markup Validation Service or includes an explanation of why not (2 points)
  • page validates using the W3C CSS Validation Service or includes an explanation of why not (2 points)

16

Source Code Documentation and Formatting

  • user name and pertinent contact information appear in all source files
  • code is logically organized
  • all files contain adequate explanatory documentation
  • all files have adequate white space for readability
  • all files are properly indented and formatted
  • all documentation is meaningful and does not merely echo code
  • any sources used are cited in comments embedded within code

4



This is document http://jesseheines.com:8080/~heines/91.461/91.461-2015-16f/461-assn/FirstCSS-v04.jsp.  It was last modified on Friday, August 26, 2022 at 4:09 PM.
Copyright © 2022 by Jesse M. Heines.  All rights reserved.  May be freely copied or excerpted for educational purposes with credit to the author.