Tips for Assignment 4 (CSS 2)

Be sure to also read this.

Common mistakes on Assignment 4:

  1. If you start Part 2 before Part 1 is perfect and finished, you are making extra work for yourself.
  2. You forgot to put box-sizing: border-box; into a CSS rule that includes margin and/or padding.
  3. You used a width in pixels where a width in percentage would work better.
  4. You did not clear your floats correctly.
  5. You added too many declarations in a rule for one element. Less works better. Try to use the minimum possible to achieve what you want.
  6. If your background color inside an element has “collapsed,” read the “TIPS” note under Part 2 (3.b) in the assignment.
  7. text-align: center; is ONLY for text. Never use it to center an image or any other element.
  8. You forgot that head, header, and h1 are all very different things in HTML.
  9. We will never, ever use any color words in CSS. We use only hex codes for all colors.
  10. We will never put CSS into the HTML file. CSS stays in its own file with the .css extension.

Updates inspired during class:

  • If you’re having trouble with the header color being too narrow (top to bottom), have you specified a background color for the header?
  • Floating left and right: Again, this concerns the header (and h1 and nav). Even though you’re working on Part 1, read the “TIPS” note under Part 2 (3.b) in the assignment.
  • Clearing floats: You do not need to add a class or an id to the HTML to clear floats. Just add the clear property into the rule for the appropriate selector in your CSS.
  • Trying to add some space below the white article box in Part 1? Using margin on the article element won’t work, because of margin collapse. Try adding padding-bottom to a different element.
Advertisements

Week 5: Sept. 18–22 (more CSS)

The videos this week will be very helpful for your homework — Assignment 4 — because I show you how to do all of the things that are required in the homework.

Margin, padding, and floats can become very difficult and very badly messed up if you apply them willy-nilly in your CSS. So take the time to watch me make HTML elements (such as div and article) behave exactly as I want them to, and you’ll be able to do the same.

Here’s the video list for this week.

Screen Shot 2017-09-17 at 2.22.58 PM

These CSS skills are covered in the Robbins book as well, but sometimes seeing the results in a video is better than just reading about the way the CSS properties work.