# The basics of Style

Resources:
* Week 10 Monday- Make it pretty lecture
* [Google Fonts](https://fonts.google.com/)
* [Hierarchy of Text](https://blog.designcrowd.com/article/867/understanding-the-hierarchy-of-text)
* [Interview questions that are pretty helpful not in an interview](https://blog.designcrowd.com/article/867/understanding-the-hierarchy-of-text)
* [CSS Reset](https://www.webfx.com/blog/web-design/css-tip-1-resetting-your-styles-with-css-reset/)
* [More CSS Reset](https://meyerweb.com/eric/tools/css/reset/index.html)

### Margin and Padding
* Every element should have padding so that its inner contents are not butting up against its edges and margin so that the element itself is not butting up against any other elements.
* In general sibling elements should NOT touch or overlap.
* Be sure to balance whitespace when laying out your elements and adding margin/padding.
* Be consistent!


> The Links in the navbar have consistent spacing around them
> Every App in the list has consistent spacing above, below and beside.
> The Margin on each side of the main content in the center matches

---

### Color

* Use colors that don't clash. There are many sites that build palettes for you or take colors from photos that you like to build your own.
* You should have a primary color, a secondary color, and 1 or 2 accent colors.
* Your primary color is going to be the most abundant on the site followed by your secondary color.
* You want a neutral colors for backrounds and clear spaces. Use colors to draw attention to the things you want to highlight.
* The accent color is used for things like buttons, tools, and other areas that you want to draw the user's eye to. Use it sparingly!
* Make sure your color and text choices pass contrast requirements. Check out this [Resource ](https://webaim.org/resources/contrastchecker/)


> Buttons are Bright and pop
> Text contrasts with background color
> Colors go well together

---

### Text

* Use Google Font Pairing recommendations to find good font pairs
* In general, you should not have more than 2 fonts in a web app.
* avoid mixing serif and sans-serif fonts.
* People prefer multiple short lines to fewer long lines of text when displaying info to the user.
* Your headers should be large and paragraphs should be slightly smaller font size.
* Having widely varying and inconsistent font sizes is one of the surest signs that a website was designed by a beginner.

### Oh No....

According to recruiters:

**AVOID THESE THINGS**

* Avoid fonts that look like handwriting
* Avoid over using accent colors
* Avoid themes that relate to specific holidays (ie. don't make a Christmas themed app)
* Dead Links. If you didn't implement a feature then don't put a link to it. If you do, then you're forcing recruiters to find the needle of implemented features in a haystack of unimplemented features. Your site will be perceived as incomplete or broken
* Avoid linking to the actual site that you are cloning
* Avoid neon, bright, or crazy colors
* Avoid having too many different colors in your app.
* Avoid putting affordances on things that can't be clicked or interacted with
* Avoid blinking, spinning or flashing images
* Avoid busy tiled background images with any color text
* Avoid having everything centered. When in doubt, do not center. Do not center more than three lines of text
* Avoid too many images or huge images. Minify all images that are not of a product and do not need to be examined closely
* Avoid long lists of links
* Avoid too many headlines
* Do not use blinking or flashing text, images, or transitions