https://ghousekw.github.io/css/

CSS

CSS Essentails 1

Chapter 1: Getting Started

01 – HTML overview/review

• https://www.w3.org https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content
• https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API http://html5doctor.com/lets-talk-about-semantics/

02 – Browser support and inconsistencies

• http://browsehappy.com
• http://gizmodo.com/watch-the-world-switch-from-internet-explorer-to-chrome-1722904017
• http://gs.statcounter.com
• http://caniuse.com/usage-table
• https://www.microsoft.com/en-ca/WindowsForBusiness/End-of-IE-support

03 – Text editors

https://www.sublimetext.com https://code.visualstudio.com http://brackets.io https://atom.io

04 – Project overview and setup exercise

https://unsplash.it http://meettheipsums.com

05 – Naming conventions

https://unsplash.it

Chapter 2: CSS Core

01 – Syntax, terminology, and naming conventions

http://tympanus.net/codrops/css_reference/ https://developer.mozilla.org/en-US/docs/Web/CSS

03 – Practicing with simple selectors https://jsfiddle.net/christinatruong/7g3texhq/

04 – Pseudo-class selectors

https://jsfiddle.net/christinatruong/eauen0rx/ https://jsfiddle.net/christinatruong/y4mzpzeu/

05 – Selectors: Best practices

https://jsfiddle.net/christinatruong/pc32a0em/

09 – Cascade, inheritance, and specificity

https://jsfiddle.net/christinatruong/s00jmqLq/ https://www.w3.org/TR/CSS21/propidx.html https://jsfiddle.net/christinatruong/mt7jrfa6/ http://cssspecificity.com https://specificity.keegan.st

Chapter 3: Typography

01 – Web-safe fonts and the font-family property

http://www.cssfontstack.com/

02 – Web fonts and Google fonts

https://css-tricks.com/snippets/css/using-font-face/ > http://www.fontsquirrel.com/ https://typekit.com https://fonts.google.com

03 – The font-size property

https://jsfiddle.net/Lsw7zz24/ https://jsfiddle.net/christinatruong/dezn0yzf/ http://tympanus.net/codrops/css_reference/length/

04 – Practicing with web fonts and font-size

https://fonts.google.com

05 – The font-style and font-weight properties

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

06 – The color, line-height, and text properties

https://jsfiddle.net/christinatruong/5kj4uLg4/ https://jsfiddle.net/christinatruong/00rw6q2t/ http://tympanus.net/codrops/css_reference/

07 – Adjusting the font-weight property

https://fonts.google.com

Chapter 4: Layouts

01 – Block vs. inline display https://jsfiddle.net/christinatruong/6gx11nmp/ https://developer.mozilla.org/en-US/docs/Web/CSS/display

02 – The box model

https://developer.mozilla.org/en-US/docs/Web/CSS/border-style > http://jsfiddle.net/christinatruong/z3vfd64s/

03 – Margin and page layouts

https://jsfiddle.net/christinatruong/c04bb8v8/

06 – Floats

https://jsfiddle.net/christinatruong/a4qdvev5/ https://jsfiddle.net/christinatruong/bo0njjsL/ https://css-tricks.com/snippets/css/clear-fix/ http://caniuse.com/#search=flexbox

08 – The box model fix

https://jsfiddle.net/christinatruong/b7nor74f/ http://www.paulirish.com/2012/box-sizing-border-box-ftw/

09 – Practicing with columns

http://www.paulirish.com/2012/box-sizing-border-box-ftw/

CSS Essentails 2

Chapter 1: CSS Selectors

02 – Basic and attribute selectors

https://jsfiddle.net/christinatruong/vn9ovytb/

03 – Combinator selectors

https://jsfiddle.net/christinatruong/y9jrg6ru/ https://jsfiddle.net/christinatruong/hdx632L4/ https://jsfiddle.net/christinatruong/tk6u884y/

04 – Pseudo-class selectors

https://jsfiddle.net/christinatruong/0da0853m/ https://jsfiddle.net/christinatruong/arp3rq4q/

05 – Pseudo-element selectors https://unicode-table.com/ https://jsfiddle.net/christinatruong/727r4sgv/ https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors https://tympanus.net/codrops/css_reference/ http://caniuse.com http://flukeout.github.io

Chapter 2: Layouts

02 – Float and display review

https://www.sitepoint.com/are-navigation-lists-necessary/

03 – Horizontal navs with the display property

https://jsfiddle.net/christinatruong/eksh0frc/

05 – Practicing with the nav element

https://jsfiddle.net/christinatruong/eksh0frc/

06 – Positioning

https://jsfiddle.net/christinatruong/nd7uowmm/ http://caniuse.com/#search=sticky https://tympanus.net/codrops/css_reference/position/

10 – Layers and the z-index property

https://jsfiddle.net/christinatruong/u6d0wh5j/

Chapter 3: Tips and Tools

03 – Reset stylesheets

http://meyerweb.com/eric/tools/css/reset/ https://necolas.github.io/normalize.css/

04 – Icon fonts

http://fontawesome.io/icons/ https://jsfiddle.net/christinatruong/no0ze0h5/

05 – The background property

https://jsfiddle.net/christinatruong/no0ze0h5/

07 – Alpha transparency and gradients

https://jsfiddle.net/christinatruong/a04xtb46/ http://colours.neilorangepeel.com http://rgb.t >https://unsplash.com http://publicdomainarchive.com

08 – Practicing with backgrounds and gradients https://jsfiddle.net/christinatruong/a04xtb46/ http://rgb.to

Chapter 4: Responsive and Mobile

01 – Introduction to responsive design

http://mediaqueri.es http://www.liquidapsive.com/ http://gs.statcounter.com/screen-resolution-stats

03 – Creating flexible and fluid layouts

https://jsfiddle.net/christinatruong/dsoaho5m/

04 – Introducing media queries

https://tympanus.net/codrops/css_reference/media-queries/

05 – Using media queries

https://jsfiddle.net/christinatruong/q2rpr0ge/ https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries#Media_features

CSS Essentials 3

Chapter 1: Layouts

01 - Review CSS Layout

https://jsfiddle.net/christinatruong/vdLa4sqb/ > http://caniuse.com/#search=sticky

02 – Designing with a grid

http://gridcalculator.dk • https://jsfiddle.net/christinatruong/4gv27wfg/

03 – Intro to CSS grid

http://www.pcworld.com/article/2087841/relive-the-1990s-with-these-ancient-still-functioningwebsites.html • http://caniuse.com/#search=grid • https://tympanus.net/codrops/css_reference/grid/

04 – CSS grid example

https://jsfiddle.net/christinatruong/ncexu6wt/ • http://gridbyexample.com • http://jensimmons.com/writing

05 – Intro to Flexbox

http://caniuse.com/#search=flexbox • https://jsfiddle.net/christinatruong/y10x9jdb/ • http://cssreference.io/flexbox/ • https://tympanus.net/codrops/css_reference/flexbox/ • http://tutorialzine.com/2017/03/css-grid-vs-flexbox/

Chapter 2: Retina Displays and Images

02 – Raster and vector graphics

https://giphy.com • https://www.getcloudapp.com

03 – Intro to SVG

http://thenounproject.com/

04 – CSS grid example

https://jsfiddle.net/christinatruong/ncexu6wt/ • http://gridbyexample.com • http://jensimmons.com/writing

05 – Retina and images • http://imulus.github.io/retinajs/ > ### 06 – Retina and background images • http://caniuse.com/#feat=css-media-resolution • https://developer.mozilla.org/en-US/docs/Web/CSS/resolution

Chapter 3: Animation and Shapes

01 – CSS transition property • https://jsfiddle.net/christinatruong/ff5npxee/ • https://www.w3.org/TR/css3-transitions/#animatable-types • https://www.smashingmagazine.com/2014/04/understanding-css-timing-functions/ • https://jsfiddle.net/christinatruong/569dybL1/

02 – CSS keyframes and animations • https://jsfiddle.net/christinatruong/ycvhtg30/

03 – CSS shapes • http://caniuse.com/#search=shape

04 – CSS shape functions • https://jsfiddle.net/christinatruong/upm6nnko/ • https://tympanus.net/codrops/css_reference/basic-shape/ • https://www.html5rocks.com/en/tutorials/shapes/getting-started/

Chapter 4: Tools and Tips

01 – Responsive typography • https://ia.net/topics/responsive-typography-the-basics/ • https://jsfiddle.net/christinatruong/hajuxgyp/ • https://jsfiddle.net/christinatruong/zvd5gygg/

02 – Fluid typography • https://jsfiddle.net/christinatruong/hajuxgyp/ (demo from 04_01) • http://caniuse.com/#feat=viewport-units • https://jsfiddle.net/christinatruong/01960k4a/

• https://jsfiddle.net/christinatruong/hajuxgyp/ • https://www.smashingmagazine.com/2016/05/fluid-typography/

03 – Advanced attribute selectors • https://jsfiddle.net/christinatruong/v7m07a5m/ • https://code.tutsplus.com/tutorials/the-30-css-selectors-you-must-memorize--net-16048

04 – Accessibility • https://randoma11y.com/ • https://support.google.com/youtube/answer/2734796?hl=en • https://jsfiddle.net/christinatruong/h65qLp1o/ • http://webaim.org

05 – Accessibility and ARIA • https://w3c.github.io/using-aria/#aria-roles

06 – CSS style guides • http://codeguide.co