Skills - 2

Click on the link for each tutorial below. Follow the instructions in the README.md. Use the walkthrough video to help with understanding and carrying out instructions.

Tutorials

Introduction Video

1. Viewport
   Video

   • meta viewport
   • meta for windows IE

2. Variables in CSS
   Video

   • declaring variables for color and font
   • using variables for property values

3. Media Queries
   Video

   • following the "mobile first" approach
   • syntax for targeting larger and smaller screens and devices

4. Tabular Data
   Video

   • semantic tables contain data
   • syntax for table, table header, table row and table cell

5. Flexbox Layout
   Video

   • semantic tables contain data
   • syntax for table, table header, table row and table cell
   • accessibible tables

6. Grid Layout
   Video

   • display: grid
   • using a 2 dimensional layout with rows and colum

7. Google Fonts and Fontawesome
   Video

   • importing fonts and using in style sheets
   • importing icons and using in html

8. Pseudo selectors and hamburger navigation
   Video

   • interactive HTML/CSS
   • pseudo selector
   • "hamburger" icon for small screen navigation
   • responsive navigation

9. Masonry layout
   Video

   • achieve the masonry effect with CSS
   • column count, column width, column gap

10. Media Sharing
    Video

    • hosting and embedding audio and video
    • video, audio, iframe tags

11. Fixed Position Video

• using position:fixed to create "sticky" elements

Final Video

Links to helpful examples

W3Schools.com

https://www.w3schools.com/css/css_rwd_viewport.asp https://www.w3schools.com/css/css_rwd_mediaqueries.asp https://www.w3schools.com/html/html_tables.asp https://www.w3schools.com/css/css3_flexbox.asp https://www.w3schools.com/css/css_grid.asp https://www.w3schools.com/css/css_pseudo_classes.asp

Mozilla

https://developer.mozilla.org/en-US/docs/Web/CSS/ https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout https://css-tricks.com/snippets/css/complete-guide-grid/

Google Fonts

https://fonts.google.com/

Font Awesome

https://fontawesome.com/

CSS Tricks

https://css-tricks.com/responsive-data-tables/ https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Games to help learn

https://flexboxfroggy.com/ http://www.flexboxdefense.com/ https://mastery.games/p/flexbox-zombies
https://cssgridgarden.com/
https://www.gridcritters.com/

Extra

Help writing grid code
Interactive HTML Cheatsheet
Interactive CSS Cheatsheet
Emmet Cheat Sheet