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@media
CSS 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
@media
queries usingmin-width
/max-width
- 6pt - Profile
background-color
- 6pt - All
h1
,h2
,h3
not bold - 8pt - header
border-bottom
ortext-decoration: underline
- 10pt -
width
andheight
of large profile on desktop=300px, tablet=150px - 10pt -
text-align: center
of headers on tablet/mobile
line-height
not normal on mobile- image
opacity
not 1 on offline border-radius: 50%
on mobile and tablet imagesdisplay: flex
withalign-items: center
orjustify-content: center
flex-wrap
orflex-flow
text-align: justify