Colors for web apps!

Screen Shot 2018-09-17 at 12.01.39 PM.png

This article is full of amazing resources for choosing a palette for your web app. In addition to the subtle palette shown above, they show 19 more examples from “Sites of the Day” chosen by aWWWards.

And that’s not all! Below the 20 inspiring examples, the article links to a bunch of free online tools for choosing and combining colors. For example, 0 to 255 lets you enter one color and see a huge sample of lighter and darker shades of that color.

Screen Shot 2018-09-17 at 12.09.02 PM

If you’re having trouble wrapping your mind around hexadecimal codes for color, watch this 4-minute video:

Last but not least: When choosing text colors, always make sure they have enough contrast against your background color to make reading the text easy. If you have any doubt about it, you can check the level of contrast here to make sure it’s good enough.

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.

Bootstrap Themes

Now that you have invested time in learning to use Bootstrap, you should know that it’s easy to change the theme and get new colors and fonts in one simple step.

The free themes at are the easiest to use. Simply download the theme as shown below. Then REPLACE the bootstrap.min.css file that’s already in your /css/ folder. Reload your Bootstrap-styled page and see the magic!

Open the menu for the theme you want, and select bootstrap.min.css.

It would take you only a few minutes to try the above. I encourage you to try it!

For more ambitious projects, you should consider buying one of the complex Bootstrap themes from Some very nice themes are only $10. This is a one-time charge. For less than $20 (in most cases), using one of these themes gives you the ability to produce a very sophisticated website hosted on your own server at your own domain name. You will be using the same Bootstrap styles and classes you have already used, plus new ones that might be specific to the theme you chose. You’ll get icons and fonts with the theme that are all part of the deal, and you can mix and match a variety of sliding sections, sliders, and other cool components.

Don’t forget — there’s lots of examples you can use on the Bootstrap site. You can download an example and use it to learn how to do a cool new design thing.