Learn CSS fundamentals really fast, online and free. FULL COURSE: http://inarocket.com Learn front end development fast, step-by-step and with ready-to-use code. IN THIS MODULE YOU'LL LEARN: - Past of CSS: manually updated browsers, ignored standards, and evolution of the first specifications. - Present of CSS: more than 80 specifications and evergreen browsers following standards. - Future of CSS: CSS Houdini (group of APIs for direct access to the CSS Object Model) and future syntax you can use now thanks to postcss-preset-env. READY-TO-USE CODE: http://inarocket.com/courses/css/css-fundamentals/context.php BEST BOOKS TO LEARN CSS: - CSS: The Definitive Guide: Visual Presentation for the Web by O'Reilly Media. https://amzn.to/2VOWHQT - HTML and CSS: Design and Build Websites by John Wiley & Sons. https://amzn.to/2Ir5y3i - CSS: The Missing Manual by O'Reilly Media. https://amzn.to/2ImdyTf - CSS Visual Dictionary by Independently published. https://amzn.to/2xgwHUh

1. IN A ROCKET
Learn front-end development at rocket speed
CSS CSS FUNDAMENTALS
Context

2. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
+PRESENT FUTUREPAST +

3. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
+

4. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
MATURITY OF SPECIFICATIONS BY STATUS CODE
RECOMMENDATIONREC
PROPOSED RECOMMENDATIONPR
CANDIDATE RECOMMENDATIONCR
WORKING DRAFTWD
FIRST PUBLIC WORKING DRAFTFPWD

5. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
CSS 1
CSS Level 1
RECOMMENDATION DEC 1996
CSS 2
CSS Level 2
RECOMMENDATION MAY 1998
CSS 2.1
CSS Level 2
Revision 1
RECOMMENDATION JUN 2011
Box properties
Cascade
Color + background
CSS syntax
Font properties
Pseudo-classes
Text properties
Box model
Generated content
Media types
Paged media
Selectors
Tables
Visual effects
CSS 1 + CSS 2 +

6. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
+

7. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
etc.
STANDARDS WERE OFTEN IGNORED BROWSERS REQUIRED MANUAL UPDATES
SITE OPTIMIZED FOR:

8. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
+PRESENT FUTUREPAST +

9. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
FRONT-END DEVELOPER ROADMAP
SOURCE: Front-end developer roadmap by Kamran Ahmed.
We are here

10. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
+

11. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
WHERE ARE WE NOW?
CSS3

12. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
WHERE ARE WE NOW?
4CSS

13. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
WHERE ARE WE NOW?
CSS?

14. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
CSS3: TAXONOMY AND STATUS BY SERGEY MAVRODY
SOURCE: HTML5 & CSS3: Quick Reference by Sergey Mavrody.

15. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
CSS TODAY
+80SPECIFICATIONS

16. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
ALL CSS SPECIFICATIONS

17. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
CSS CURRENT WORK

18. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com

19. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
+

20. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
Evergreen
browsers

21. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
+PRESENT FUTUREPAST +

22. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
POSTCSS
PRESET ENV
CSS
HOUDINI

23. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
POSTCSS PRESET ENV
You can write future CSS
syntax, and the plugin
will convert it to CSS that
browsers will understand
(using polyfills).

24. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
POSTCSS PRESET ENV

25. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
POSTCSS
PRESET ENV
CSS
HOUDINI

26. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
CSS HOUDINI
Layout API
Properties & values API
Worklets
Box Tree API
Parser API
Typed OM
Painting API
Font metrics API
Animation worklet
Group of APIs for direct access to the CSS Object Model

27. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
CSS HOUDINI: W3C EDITOR DRAFTS

28. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
CSS HOUDINI: EXPERIMENTS

29. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
CSS HOUDINI: BROWSER SUPPORT

30. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
+PRESENT FUTUREPAST +

31. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
CONTENT IS KING, NOT CSS
SOURCE: The Web Pyramid by @pinboard.

32. Learn front-end development at rocket speed
inarocket.com
by miguelsanchez.com
YOU CAN CONTINUE THIS COURSE FOR FREE ON
+ READY TO USE CODE
+ QUIZZES
+ FREE UPDATES

33. We respect your time
No more blah blah videos. Just straight to
the point slides with relevant information.
Ready to use code
Real code you can just copy and paste into
your real projects.
Step by step guides
Clear and concise steps to build real use
solutions. No missed points.
Learn front-end development at rocket speed
inarocket.com

34. IN A ROCKET
Learn front-end development at rocket speed
CSS CSS FUNDAMENTALS
Context