An automatic grader for this assignment can be found here. This grader does not account for penalties.
- The document should render properly on Chrome
- 10pt Base grade:
- 5pt - The student submits any form of css
- 5pt - Valid CSS is submitted
- Make sure all penalties (even if they're not counted), are mentioned. This could involve writing "Extra Semicolon" or "Invalid Syntax" many times.
- 0pt overall - Empty CSS document or a missing submission
- -20pt - Submitting multiple files
-
+10pt - If a student submits HTML with proper HTML media queries (
<link media="max-width: 400px" ...>etc). This penalty will be reduced because while it is a valid practice, the student did not follow the instructions. -
If a student does do this, a solution may be to wrap the files like so: (or move the
media="..."queries to@mediaCSS queries@media screen and (max-width: 400px) { /* contents of mobile css */ } @media screen and (min-width: 400px) and (max-width: 800px) { /* contents of tablet css */ } @media screen and (min-width: 800px) { /* contents of desktop css */ } -
Please leave students a kind message saying as many of the following that apply:
- "A single CSS file submission was specified by the instructions"
- "The instructions specified not to edit the HTML"
-
- -5pt each, -15pt max - Forgetting unit (
px) on non-zero values (Spec), Syntax errors, Properties missing values (color:, ormargin:), missing parentheses, extra semicolons, random non-css symbols, etc. (the grader will show you errors). Make sure you try to correct the error so you can determine how many errors there are. Please leave a note for each error!
- 20pt - At least two
@mediaqueries usingmin-width/max-width - 6pt - Profile
background-color - 6pt - All
h1,h2,h3not bold - 8pt - header
border-bottomortext-decoration: underline - 10pt -
widthandheightof large profile on desktop=300px, tablet=150px - 10pt -
text-align: centerof headers on tablet/mobile
line-heightnot normal on mobile- image
opacitynot 1 on offline border-radius: 50%on mobile and tablet imagesdisplay: flexwithalign-items: centerorjustify-content: centerflex-wraporflex-flowtext-align: justify