Mon May 7

Goals

• I know how to use the advanced selectors & the pseudo:classes
• I use WebFonts and Icons in my portfolio
• I understand the CSS positioning
• I know how to use the CSS display settings

Content

• Pseudo:classes
• Google Fonts & Icons
• CSS Positions
• CSS Display

Advanced Selectors & Pseudo:classes

Discover different ways to target HTML elements in CSS

• CSS selectors & Pseudo:classes
• Try it yourself
• Pseudo:classes

WebFonts

All of the fonts are Open Source. This means that you are free to share your favorites with friends and colleagues. And you can use them in every way you want, privately or commercially – in print, on your computer, or in your websites.

Google Web Fonts

Icons

• Font Awesome – The iconic font and CSS toolkit.
• Font Awesome Cheatsheet.
• Icomoon
• The Noun Project
• Glyphsearch

Positions

• Static / Relative / Absolute / Sticky / Fixed
• W3School
• Example 1
• Example 2

CSS display Property

• w3schools display Property
• CSS Layout - The display Property

Hide an Element - display:none or visibility:hidden?

Goals

• I work on my Portfolio / I work on my Personal Project
• I've included a Google Font
• I've choose a color panel for my websites (max. 3 colors)
• I use the Media Queries for the responsive version of my websites