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