Some things to remember from this course

REMEMBER THIS

"I think most people can learn a lot more than they think they can. They sell themselves short without trying.

One bit of advice: it is important to view knowledge as sort of a semantic tree — make sure you understand the fundamental principles, ie the trunk and big branches, before you get into the leaves/details or there is nothing for them to hang on to." - Elon Musk

Don't be too ambitious at first.

It's not shameful to google things.

You don't have to reinvent the wheel. Some wheels were made for you to do great things it.

Web Design

• People recognize design more than functionality
• 3 seconds to make a good impression"
• 4 Pillars of Good Web Design
  • Color Theory
  • Typography
  • UI Design
  • UX Design

Color Theory

• mood: predominant color (different colors bring different feelings)
• Analogous Color Patterns: not good at standing out
• Complimentary palettes: make things pop

Typography

• Most developers use two fonts in one design that portray similar moods

UI Design

• Size/Height = Heirarchy
• Accent Tones: things you want people to pay attention to
• Optimal line length: 40 to 60 characters per line
• Alignment: consistency is key and try to reduce the number of alignment points

UX Design

• meant to be invisible
• make this effortless for the user
• Keep things simple
• "F" reading pattern
• "Z" reading pattern
• Think about all platform design (desktop and mobile)
• Get rid of banners and warnings (They make things cluttered)

Whitespace

• make things look expensive and elevated

Audience

• pay attention to your audience and think of what they would want

"Good design is helping people do what they want to do"

HTML & CSS

• meta tags make things available for search engines to find and use to display
• position: absolute; is relative to its parents; can cause unnatural flow of elements/page
• position: relative; is relative to the current position (where it should have been)
• margin: auto; is good for centering things if text-align: center; is not being used
• use web-safe fonts (but really, no font is 100% web-safe)
• em: width of the capital letter 'M'
  • 16px = 100% = 1em
• rem: ignore parents em and just set it to a absolute em
• dynamic font-size = better accessibility