Exercises and References for CSS Intro #2 Class 12
The Website Generator
http://webdevninja.surge.sh/#/
Additional CSS topics
- Basics: https://codetheweb.blog/2017/11/15/basic-css-properties/
- Borders: https://codepen.io/shayhowe/pen/JmtqC
- Styling links: https://www.smashingmagazine.com/2010/02/the-definitive-guide-to-styling-web-links/
- Box shadows: http://www.css3.info/preview/box-shadow/
- CSS Specificity: https://css-tricks.com/specifics-on-css-specificity/
- Styling buttons: https://fvsch.com/styling-buttons/
- Using the Developer Tools to learn CSS https://stnsvn.com/blog/how-to-learn-css-using-inspect-element-tool
- Practice in class:
- Do together: https://flexboxfroggy.com/
- Try yourself:
- https://learn.freecodecamp.org/responsive-web-design/basic-css/use-a-css-class-to-style-an-element/
- https://learn.freecodecamp.org/responsive-web-design/basic-css/use-css-selectors-to-style-elements/
- https://learn.freecodecamp.org/responsive-web-design/basic-css/use-a-css-class-to-style-an-element/
- https://learn.freecodecamp.org/responsive-web-design/basic-css/style-multiple-elements-with-a-css-class/
- https://learn.freecodecamp.org/responsive-web-design/basic-css/change-the-font-size-of-an-element/
- https://learn.freecodecamp.org/responsive-web-design/basic-css/size-your-images/
- https://learn.freecodecamp.org/responsive-web-design/basic-css/add-borders-around-your-elements/
- https://learn.freecodecamp.org/responsive-web-design/basic-css/give-a-background-color-to-a-div-element/
- https://learn.freecodecamp.org/responsive-web-design/basic-css/adjust-the-padding-of-an-element/
- https://learn.freecodecamp.org/responsive-web-design/basic-css/adjust-the-margin-of-an-element/
- https://learn.freecodecamp.org/responsive-web-design/basic-css/add-different-padding-to-each-side-of-an-element/
- https://learn.freecodecamp.org/responsive-web-design/basic-css/add-different-margins-to-each-side-of-an-element/
- https://learn.freecodecamp.org/responsive-web-design/basic-css/use-clockwise-notation-to-specify-the-padding-of-an-element/
- https://learn.freecodecamp.org/responsive-web-design/basic-css/use-clockwise-notation-to-specify-the-margin-of-an-element/
- https://learn.freecodecamp.org/responsive-web-design/basic-css/style-the-html-body-element/
- Advanced:
- https://learn.freecodecamp.org/responsive-web-design/basic-css/inherit-styles-from-the-body-element/
- https://learn.freecodecamp.org/responsive-web-design/basic-css/prioritize-one-style-over-another/
- https://learn.freecodecamp.org/responsive-web-design/basic-css/override-styles-in-subsequent-css/
- https://learn.freecodecamp.org/responsive-web-design/basic-css/override-all-other-styles-by-using-important/
- Additional Practice at home:
- https://www.codecademy.com/courses/learn-css/lessons/css-setup-selectors/exercises/inline-styles