Cacher is the code snippet organizer for pro developers

*==== Useful VSCode Shortcuts: ===================*

*PC Shortcuts:* https://code.visualstudio.com/shortcuts/keyboard-shortcuts-windows.pdf

*MAC Shortcuts:* https://code.visualstudio.com/shortcuts/keyboard-shortcuts-macos.pdf

*==== @channel Learn CSS Basics, Flexbox, and Grid with Fun and Silly Games!!! ====================*

CSS Diner: https://flukeout.github.io/

Flexbox Zombies (my favorite!!!!!): https://mastery.games/p/flexbox-zombies

Flexbox Froggy: http://flexboxfroggy.com/

Flexbox Defense: http://www.flexboxdefense.com/

Grid Garden: http://cssgridgarden.com/

==== @channel Resources and Video Walkthroughs from Today’s Activities: =============
(includes the Terminus command line game and the Terminal/Bash drill videos!!!)

Steps for Uploading Your Code to GitHub PDF (attached)

No-Nonsense Git and GitHub Video Tutorials: https://github.com/Multishifties/No-Nonsense-Github-Project

Pluralsight Tutorial — How Git Works (free 10-day trial): https://www.pluralsight.com/courses/how-git-works

What is UTF-8 Encoding? https://en.wikipedia.org/wiki/UTF-8

What is the DOCTYPE Declaration? https://www.w3schools.com/tags/tag_doctype.asp

My First HTML Video Walkthrough: https://www.youtube.com/watch?v=ieb6Svbc10E

Terminal Drill #1: https://www.youtube.com/watch?v=i5zoCHCAG84

Terminal Drill #2: https://www.youtube.com/watch?v=KKtDiwAQjZI

Terminus (learn Terminal/Bash basics in a fun text adventure game): http://web.mit.edu/mprat/Public/web/Terminus/Web/main.html

==== @channel Swim Through the Sea of Resources and Video Walkthroughs!!! =================

I’m attaching a .zip file of the livecoded float layout activity we built the last half hour of class!

A Quick Reminder About Relative File Paths: https://css-tricks.com/quick-reminder-about-file-paths/

Not sure whether to use a div or a section or nav or a header? Try the HTML5 Doctor Flowchart: https://du.bootcampcontent.com/denver-coding-bootcamp/DU-DEN-FSF-FT-12-2019-U-C/blob/master/Resources/HTML/html5-sectioning-flowchart.pdf

All About Floats: https://css-tricks.com/all-about-floats/

CSS Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference

CSS Properties by Type: https://www.tutorialrepublic.com/css-reference/css3-properties.php

The CSS Box Model Explained by Living in a Suburban Neighborhood: https://medium.freecodecamp.org/css-box-model-explained-by-living-in-a-boring-suburban-neighborhood-9a9e692773c1

Box-Sizing: The Secret to Simple CSS Layouts: https://blog.teamtreehouse.com/box-sizing-secret-simple-css-layouts

More Lorem Ipsum Options (random text generation): https://meettheipsums.com/

Student Bio Layout Video Walkthrough: https://www.youtube.com/watch?v=kMBinXTCrXI

Floats Activity Video Walkthrough (a different solution than what we did in class): https://www.youtube.com/watch?v=0lpxKw6E90Y&feature=youtu.be
(watch em and redo the activities!!!)

==== @channel A Few Resources and  Two Video Walkthroughs for Today’s Activities: ===============

Box-Sizing: The Secret to Simple CSS Layouts (an alternative to the standard box model setup):  https://blog.teamtreehouse.com/box-sizing-secret-simple-css-layouts

HTML/CSS Layout Guide: https://learn.shayhowe.com/

MeyerWeb CSS Reset (bookmark this!): https://meyerweb.com/eric/tools/css/reset/

CSS Normalize vs CSS Reset: https://medium.com/@DaphneWatson/css-normalize-css-reset-which-one-do-you-prefer-6e8cc593ac41

Normalize.css: http://nicolasgallagher.com/about-normalize-css/

GitHub Pages: https://pages.github.com/

CSS Positioning Concepts Video Walkthrough: https://www.youtube.com/watch?v=sHfJn0jqBro&feature=youtu.be

CSS Positioning Activity Video Walkthrough (watch it and redo!): https://www.youtube.com/watch?v=yWXgnQaWSW0&feature=youtu.be


==== Plus a Few More Advanced CSS Resources: ===========================

So what _IS_ the CSS Cascade? https://developer.mozilla.org/en-US/docs/Web/CSS/Cascade

CSS Specificity Wars (learn what specificity is and how to leverage it): https://stuffandnonsense.co.uk/archives/css_specificity_wars.html

CSS Specificity Calculator: https://specificity.keegan.st/

Great Resource on Advanced CSS Selectors: https://www.smashingmagazine.com/2009/08/taming-advanced-css-selectors/

==== @channel Resources from Today’s Activities/Concepts: ==================

Eloquent JavaScript (free, incredibly informative, but may or may not be approachable now; consider bookmarking for later): http://eloquentjavascript.net/

Game of Types (explanations of good typography basics): https://uxdesign.cc/game-of-types-b4dff8163472

16 Pixels Font Size: For Body Copy. Anything Less Is A Costly Mistake: https://www.smashingmagazine.com/2011/10/16-pixels-body-copy-anything-less-costly-mistake/

Readability: the Optimal Line Length: https://baymard.com/blog/line-length-readability

Google Fonts: https://fonts.google.com/

Pseudo-Classes Documentation/List: https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes

Link Pseudo-Classes (in order!): https://css-tricks.com/snippets/css/link-pseudo-classes-in-order/

Bootstrap: https://getbootstrap.com/

Bootswatch CDN (themes for Bootstrap): https://www.bootstrapcdn.com/bootswatch/

What is a CDN? (in case you’re curious): https://www.cloudflare.com/learning/cdn/what-is-a-cdn/

*@channel Tons of resources and videos re: Bootstrap layouts, media queries, viewport tag, and HTML/CSS:*

*Helpful Bootstrap Grid Resources:*
============================
*Bootstrap Grid System:* https://getbootstrap.com/docs/4.3/layout/grid/

*Bootstrap Grid Size Options (sm, md, lg, xl):* https://getbootstrap.com/docs/4.3/layout/grid/#grid-options

*How to offset columns in Bootstrap grids:* https://getbootstrap.com/docs/4.3/layout/grid/#offsetting-columns

*Bootstrap Spacing Padding/Margin Shortcuts:* https://getbootstrap.com/docs/4.3/utilities/spacing/

*Bootstrap Utility Classes:* https://getbootstrap.com/docs/4.0/utilities/borders/


*Meta Viewport Tag... How to Use It and How to Test It:*
============================================
_(I recommend using a meta viewport tag on ALL your webpages to allow better compatibility with mobile devices!)_

*What, why, and how to use the meta viewport tag:* https://www.w3schools.com/css/css_rwd_viewport.asp

*Example meta viewport tag:* https://snippets.cacher.io/snippet/cd29d1a4ea6177808721

*Wanna test on multiple browsers? Try a free trial here!:* https://www.browserstack.com/

*Another way to check your page on different viewports:* http://www.viewportemulator.com/


*Responsive Design Philosophies/Screen Sizes/Media Query Tips:*
==========================================
_(When using all min-width, the narrower/smaller media queries goes first and the widest media query will go last. When using all max-width, the widest/biggest width of media query goes first and the narrowest go last.)_

*Responsive Web Design Philosophies -- Progressive Enhancement vs Graceful Degradation:* https://medium.com/@julienetienne/define-graceful-degradation-progressive-enhancement-faf242a8ed51

*Hey all, here’s a good resource/discussion on average screen sizes and responsive breakpoints:* https://www.websitedimensions.com/

*And here’s another resource that discusses screen resolution and how it figures into building layouts:* https://www.designersinsights.com/designer-resources/designing-responsive-website/

*7 Habits of Highly Effective Media Queries:* http://bradfrost.com/blog/post/7-habits-of-highly-effective-media-queries/

*Best Practices When Writing Media Queries:* https://ilovecoding.org/lessons/best-practices-when-writing-media-queries-2


*Three Video Walkthroughs from Today's Class:*
======================================
*Bootstrap Text Layout:* https://www.youtube.com/watch?v=wQovwgW020g

*Bootstrap Web Layout:* https://www.youtube.com/watch?v=Y9rMbKHoTBI

*Media Queries Activity:* https://www.youtube.com/watch?v=x_wlcp-W27c


*All Video Walkthroughs from this Week:*
=================================
_(Brush up on your HTML, CSS, and Bootstrap!)_

*Unit 1 Video Guide (HTML/CSS):* https://du.bootcampcontent.com/denver-coding-bootcamp/DENVDEN201905FSF4-FT/blob/master/Video-Guides/Unit-1.md

*Unit 2 Video Guide (CSS/Bootstrap):* https://du.bootcampcontent.com/denver-coding-bootcamp/DENVDEN201905FSF4-FT/blob/master/Video-Guides/Unit-2.md 

*==== @channel Oodles of Resources (and a Video Walkthrough!) from Today's Activities: =============*

*Resources to Learn Git:* https://try.github.io/

*No-Nonsense Git and GitHub Video Tutorials:* https://github.com/Multishifties/No-Nonsense-Github-Project

*List of All HTML Tags:* https://www.w3schools.com/tags/

*What _is_ UTF-8 Encoding?* https://en.wikipedia.org/wiki/UTF-8

*HTML Doctor Flowchart* (helps you decide when to use a div vs a section vs a nav, etc): http://html5doctor.com/downloads/h5d-sectioning-flowchart.pdf

*My First HTML Video Walkthrough:* https://www.youtube.com/watch?v=ieb6Svbc10E

*Lindsay's Terminal Drill #1:* https://www.youtube.com/watch?v=i5zoCHCAG84

*Lindsay's Terminal Drill #2:* https://www.youtube.com/watch?v=KKtDiwAQjZI

*Terminus* (learn Terminal/Bash basics in a fun text adventure game): https://www.youtube.com/watch?v=KKtDiwAQjZI

*==== @channel Swim Through the Sea of Resources and Video Walkthroughs!!! =================*

*A Quick Reminder About Relative File Paths:* https://css-tricks.com/quick-reminder-about-file-paths/

*All About Floats:* https://css-tricks.com/all-about-floats/

*CSS Reference:* https://developer.mozilla.org/en-US/docs/Web/CSS/Reference

*CSS Properties by Type:* https://www.tutorialrepublic.com/css-reference/css3-properties.php

*The CSS Box Model Explained by Living in a Suburban Neighborhood:* https://medium.freecodecamp.org/css-box-model-explained-by-living-in-a-boring-suburban-neighborhood-9a9e692773c1

*Box-Sizing: The Secret to Simple CSS Layouts:* https://blog.teamtreehouse.com/box-sizing-secret-simple-css-layouts

*Learn CSS Layout:* http://learnlayout.com/no-layout.html

*More Lorem Ipsum Options (random text generation):* https://meettheipsums.com/

*CSS Specificity Wars (learn what specificity is and how to leverage it):* https://stuffandnonsense.co.uk/archives/css_specificity_wars.html

*CSS Specificity Calculator:* https://specificity.keegan.st/

*Great Resource on Advanced CSS Selectors:* https://www.smashingmagazine.com/2009/08/taming-advanced-css-selectors/

*What _is_ the CSS Cascade?* https://developer.mozilla.org/en-US/docs/Web/CSS/Cascade

*Methods for Positioning Content:* https://learn.shayhowe.com/html-css/positioning-content/

*Student Bio Layout Video Walkthrough:* https://www.youtube.com/watch?v=kMBinXTCrXI

*Floats Activity Video Walkthrough (a different solution than what we did in class):* https://www.youtube.com/watch?v=0lpxKw6E90Y&feature=youtu.be

*Positioning Demo Video Walkthrough:* https://www.youtube.com/watch?v=sHfJn0jqBro&feature=youtu.be
_(watch em and redo the activities!!!)_

*Terminus* (a fun, gameified way to to practice your terminal/bash commands): http://web.mit.edu/mprat/Public/web/Terminus/Web/main.html

*Terminal/Bash Drill #1:* https://www.youtube.com/watch?v=i5zoCHCAG84

*Terminal/Bash Drill #2:* https://www.youtube.com/watch?v=KKtDiwAQjZI