SlideShare a Scribd company logo
IN A ROCKET
Learn front-end development at rocket speed
CSS
Context
FLEXBOX & CSS GRID
FLEXBOX & CSS GRID: The CSS layout nightmare is over inarocket.com
+
FLEXBOX & CSS GRID: The CSS layout nightmare is over inarocket.com
+
FLEXBOX & CSS GRID: The CSS layout nightmare is over inarocket.com
CSS3
FLEXBOX & CSS GRID: The CSS layout nightmare is over inarocket.com
4CSS
FLEXBOX & CSS GRID: The CSS layout nightmare is over inarocket.com
CSS?
FLEXBOX & CSS GRID: The CSS layout nightmare is over inarocket.com
+80SPECIFICATIONS
FLEXBOX & CSS GRID: The CSS layout nightmare is over inarocket.com
ALL CSS SPECIFICATIONS
FLEXBOX & CSS GRID: The CSS layout nightmare is over inarocket.com
MATURITY OF SPECIFICATIONS BY STATUS CODE
RECOMMENDATIONREC
PROPOSED RECOMMENDATIONPR
CANDIDATE RECOMMENDATIONCR
WORKING DRAFTWD
FIRST PUBLIC WORKING DRAFTFPWD
FLEXBOX & CSS GRID: The CSS layout nightmare is over inarocket.com
CSS CURRENT WORK
FLEXBOX & CSS GRID: The CSS layout nightmare is over inarocket.com
FLEXBOX CSS GRID
+
FLEXBOX & CSS GRID: The CSS layout nightmare is over inarocket.com
FLEXBOX & CSS GRID: The CSS layout nightmare is over inarocket.com
FLEXBOX & CSS GRID: The CSS layout nightmare is over inarocket.com
LEVEL 1
LEVEL 2
LEVEL 3
LEVEL 4
CSS
FONTS
CSS FLEXIBLE BOX
LAYOUT MODULE
FLEXBOX & CSS GRID: The CSS layout nightmare is over inarocket.com
LEVEL 1
LEVEL 2
LEVEL 3
LEVEL 4
CSS
FONTS
CSS FLEXIBLE BOX
LAYOUT MODULE
Candidate recommendation
FLEXBOX & CSS GRID: The CSS layout nightmare is over inarocket.com
FLEXBOX & CSS GRID: The CSS layout nightmare is over inarocket.com
FLEXBOX & CSS GRID: The CSS layout nightmare is over inarocket.com
FLEXBOX CSS GRID
+
FLEXBOX & CSS GRID: The CSS layout nightmare is over inarocket.com
FLEXBOX & CSS GRID: The CSS layout nightmare is over inarocket.com
LEVEL 1
LEVEL 2
LEVEL 3
LEVEL 4
CSS FLEXIBLE BOX
LAYOUT MODULE
CSS GRID
LAYOUT MODULE
FLEXBOX & CSS GRID: The CSS layout nightmare is over inarocket.com
LEVEL 1
LEVEL 2
LEVEL 3
LEVEL 4
CSS FLEXIBLE BOX
LAYOUT MODULE
CSS GRID
LAYOUT MODULE
Candidate recommendation
FLEXBOX & CSS GRID: The CSS layout nightmare is over inarocket.com
FLEXBOX & CSS GRID: The CSS layout nightmare is over inarocket.com
FLEXBOX & CSS GRID: The CSS layout nightmare is over inarocket.com
W3C: "Exploring"
FLEXBOX & CSS GRID: The CSS layout nightmare is over inarocket.com
FLEXBOX & CSS GRID: The CSS layout nightmare is over inarocket.com
LEVEL 1
LEVEL 2
LEVEL 3
LEVEL 4
CSS FLEXIBLE BOX
LAYOUT MODULE
CSS GRID
LAYOUT MODULE
Working draft
Candidate recommendation
FLEXBOX & CSS GRID: The CSS layout nightmare is over inarocket.com
+
FLEXBOX & CSS GRID: The CSS layout nightmare is over inarocket.com
FLEXBOX CSS GRID
+
FLEXBOX & CSS GRID: The CSS layout nightmare is over inarocket.com
MAY 2017
FLEXBOX & CSS GRID: The CSS layout nightmare is over inarocket.com
NOVEMBER 2017
FLEXBOX & CSS GRID: The CSS layout nightmare is over inarocket.com
UC Browser
FLEXBOX & CSS GRID: The CSS layout nightmare is over inarocket.com
JULY 2018
FLEXBOX & CSS GRID: The CSS layout nightmare is over inarocket.com
FLEXBOX CSS GRID
+
FLEXBOX & CSS GRID: The CSS layout nightmare is over inarocket.com
SEPTEMBER 2016
FLEXBOX & CSS GRID: The CSS layout nightmare is over inarocket.com
MAY 2017
FLEXBOX & CSS GRID: The CSS layout nightmare is over inarocket.com
JULY 2018
FLEXBOX & CSS GRID: The CSS layout nightmare is over inarocket.com
FLEXBOX CSS GRID
+
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
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
IN A ROCKET
Learn front-end development at rocket speed
CSS
Context
FLEXBOX & CSS GRID

More Related Content

What's hot (10)

PDF
CSS Box Model and Dimensions
Gerson Abesamis
 
PPTX
Krishan gaurav-sapient bootstrapsession
Krishan Mohan
 
PDF
Magento x codekit x sass x compass x skeleton responsive grid
Arush Sehgal
 
PDF
Agile CSS development with Compass and Sass
Andrea Verlicchi
 
PPTX
Intro to Flexbox - A Magical CSS Property
Adam Soucie
 
PDF
CSS Grid Changes Everything - Keynote at WebCamp Zagreb 2017
Morten Rand-Hendriksen
 
PDF
Progressive enhancement - Bridging the gap between CSS2 and CSS3
Zohar Arad
 
PDF
[Basic HTML/CSS] 6. css - box sizing, display, margin, padding
Hyejin Oh
 
PDF
Flexbox: One Giant Leap for Web Layout (GenerateConf 2013)
Stephen Hay
 
PDF
Scalable CSS | An Origin Story. (Part 1 of 3)
Lee Nelson
 
CSS Box Model and Dimensions
Gerson Abesamis
 
Krishan gaurav-sapient bootstrapsession
Krishan Mohan
 
Magento x codekit x sass x compass x skeleton responsive grid
Arush Sehgal
 
Agile CSS development with Compass and Sass
Andrea Verlicchi
 
Intro to Flexbox - A Magical CSS Property
Adam Soucie
 
CSS Grid Changes Everything - Keynote at WebCamp Zagreb 2017
Morten Rand-Hendriksen
 
Progressive enhancement - Bridging the gap between CSS2 and CSS3
Zohar Arad
 
[Basic HTML/CSS] 6. css - box sizing, display, margin, padding
Hyejin Oh
 
Flexbox: One Giant Leap for Web Layout (GenerateConf 2013)
Stephen Hay
 
Scalable CSS | An Origin Story. (Part 1 of 3)
Lee Nelson
 

Similar to 2- Learn Flexbox & CSS Grid / Context (20)

PDF
CSS vs. JavaScript - Trust vs. Control
Christian Heilmann
 
PPTX
Advanced css for designing responsive web page on website
AbrahamChe2
 
PDF
CSS - OOCSS, SMACSS and more
Russ Weakley
 
PDF
Evolution of CSS
Ecaterina Moraru (Valica)
 
PPTX
Mastering CSS: The Foundation of Web Design by Infinite Web Solutions.pptx
Pushkar Sharma
 
PPTX
Cascading Style Sheets
Senthil Kumar
 
PDF
CSS workshop @ OutSystems
Ruben Goncalves
 
PDF
New CSS Meets the Real World
Rachel Andrew
 
PDF
The Future State of Layout
Stephen Hay
 
PDF
"CSS you've never known" by Bohdan Rusinka
Binary Studio
 
PDF
But what about old browsers?
Rachel Andrew
 
PPTX
Web technologies-course 04.pptx
Stefan Oprea
 
PPT
6 css week12 2020 2021 for g10
Osama Ghandour Geris
 
PDF
css-handbook
RaviKumar76265
 
PDF
Flexbox Will Shock You!
Scott Vandehey
 
PPTX
Oooh shiny
wcto2017
 
PDF
IV - CSS architecture
WebF
 
PDF
CSS Frameworks
Mike Crabb
 
PDF
CSS Grid
Michael Mizner
 
PDF
presentation
Mart Bosch
 
CSS vs. JavaScript - Trust vs. Control
Christian Heilmann
 
Advanced css for designing responsive web page on website
AbrahamChe2
 
CSS - OOCSS, SMACSS and more
Russ Weakley
 
Evolution of CSS
Ecaterina Moraru (Valica)
 
Mastering CSS: The Foundation of Web Design by Infinite Web Solutions.pptx
Pushkar Sharma
 
Cascading Style Sheets
Senthil Kumar
 
CSS workshop @ OutSystems
Ruben Goncalves
 
New CSS Meets the Real World
Rachel Andrew
 
The Future State of Layout
Stephen Hay
 
"CSS you've never known" by Bohdan Rusinka
Binary Studio
 
But what about old browsers?
Rachel Andrew
 
Web technologies-course 04.pptx
Stefan Oprea
 
6 css week12 2020 2021 for g10
Osama Ghandour Geris
 
css-handbook
RaviKumar76265
 
Flexbox Will Shock You!
Scott Vandehey
 
Oooh shiny
wcto2017
 
IV - CSS architecture
WebF
 
CSS Frameworks
Mike Crabb
 
CSS Grid
Michael Mizner
 
presentation
Mart Bosch
 
Ad

More from In a Rocket (14)

PDF
17- Learn CSS Fundamentals / Units
In a Rocket
 
PDF
16- Learn CSS Fundamentals / Background
In a Rocket
 
PDF
15- Learn CSS Fundamentals / Color
In a Rocket
 
PDF
14- Learn CSS Fundamentals / Inheritance
In a Rocket
 
PDF
13- Learn CSS Fundamentals / Specificity
In a Rocket
 
PDF
12- Learn CSS Fundamentals / Mix & group
In a Rocket
 
PDF
11- Learn CSS Fundamentals / Combinators
In a Rocket
 
PDF
10- Learn CSS Fundamentals / Pseudo-elements
In a Rocket
 
PDF
9- Learn CSS Fundamentals / Pseudo-classes
In a Rocket
 
PDF
8- Learn CSS Fundamentals / Attribute selectors
In a Rocket
 
PDF
2- Learn HTML Fundamentals / Text Formatting
In a Rocket
 
PDF
1- Learn HTML Fundamentals / Start in 5 Minutes
In a Rocket
 
PDF
Learn SUIT: CSS Naming Convention
In a Rocket
 
PDF
Learn BEM: CSS Naming Convention
In a Rocket
 
17- Learn CSS Fundamentals / Units
In a Rocket
 
16- Learn CSS Fundamentals / Background
In a Rocket
 
15- Learn CSS Fundamentals / Color
In a Rocket
 
14- Learn CSS Fundamentals / Inheritance
In a Rocket
 
13- Learn CSS Fundamentals / Specificity
In a Rocket
 
12- Learn CSS Fundamentals / Mix & group
In a Rocket
 
11- Learn CSS Fundamentals / Combinators
In a Rocket
 
10- Learn CSS Fundamentals / Pseudo-elements
In a Rocket
 
9- Learn CSS Fundamentals / Pseudo-classes
In a Rocket
 
8- Learn CSS Fundamentals / Attribute selectors
In a Rocket
 
2- Learn HTML Fundamentals / Text Formatting
In a Rocket
 
1- Learn HTML Fundamentals / Start in 5 Minutes
In a Rocket
 
Learn SUIT: CSS Naming Convention
In a Rocket
 
Learn BEM: CSS Naming Convention
In a Rocket
 
Ad

Recently uploaded (17)

PPTX
My Mother At 66! (2).pptx00000000000000000000000000000
vedapattisiddharth
 
PDF
Empowering Local Language Email with IDN & EAI – Powered by XgenPlus
XgenPlus Technologies
 
PPTX
原版一样(ANU毕业证书)澳洲澳大利亚国立大学毕业证在线购买
Taqyea
 
PDF
Materi tentang From Digital Economy to Fintech.pdf
Abdul Hakim
 
PPTX
Ransomware attack and its effects on cyber crimes
ShilpaShreeD
 
PPTX
Q1 English3 Week5 [email protected]
JenniferCawaling1
 
PDF
Beginning-Laravel-Build-Websites-with-Laravel-5.8-by-Sanjib-Sinha-z-lib.org.pdf
TagumLibuganonRiverB
 
PDF
web application development company in bangalore.pdf
https://dkpractice.co.in/seo.html tech
 
PDF
The Convergence of Threat Behaviors Across Intrusions
Joe Slowik
 
PPTX
Lesson 1.1 Career-Opportunities-in-Ict.pptx
lizelgumadlas1
 
PPTX
Meloniusk_Communication_Template_best.pptx
howesix147
 
PDF
Clive Dickens RedTech Public Copy - Collaborate or Die
Clive Dickens
 
PDF
Strategic Plan New and Completed Templeted
alvi932317
 
PDF
AI security AI security AI security AI security
elite44
 
PPTX
Class_4_Limbgvchgchgchgchgchgcjhgchgcnked_Lists.pptx
test123n
 
PDF
ContextForge MCP Gateway - the missing proxy for AI Agents and Tools
Mihai Criveti
 
PPTX
CHAPTER 1 - PART 3 FOR GRADE 11 STUDENTS
FSBTLEDNathanVince
 
My Mother At 66! (2).pptx00000000000000000000000000000
vedapattisiddharth
 
Empowering Local Language Email with IDN & EAI – Powered by XgenPlus
XgenPlus Technologies
 
原版一样(ANU毕业证书)澳洲澳大利亚国立大学毕业证在线购买
Taqyea
 
Materi tentang From Digital Economy to Fintech.pdf
Abdul Hakim
 
Ransomware attack and its effects on cyber crimes
ShilpaShreeD
 
Beginning-Laravel-Build-Websites-with-Laravel-5.8-by-Sanjib-Sinha-z-lib.org.pdf
TagumLibuganonRiverB
 
web application development company in bangalore.pdf
https://dkpractice.co.in/seo.html tech
 
The Convergence of Threat Behaviors Across Intrusions
Joe Slowik
 
Lesson 1.1 Career-Opportunities-in-Ict.pptx
lizelgumadlas1
 
Meloniusk_Communication_Template_best.pptx
howesix147
 
Clive Dickens RedTech Public Copy - Collaborate or Die
Clive Dickens
 
Strategic Plan New and Completed Templeted
alvi932317
 
AI security AI security AI security AI security
elite44
 
Class_4_Limbgvchgchgchgchgchgcjhgchgcnked_Lists.pptx
test123n
 
ContextForge MCP Gateway - the missing proxy for AI Agents and Tools
Mihai Criveti
 
CHAPTER 1 - PART 3 FOR GRADE 11 STUDENTS
FSBTLEDNathanVince
 

2- Learn Flexbox & CSS Grid / Context

  • 1. IN A ROCKET Learn front-end development at rocket speed CSS Context FLEXBOX & CSS GRID
  • 2. FLEXBOX & CSS GRID: The CSS layout nightmare is over inarocket.com +
  • 3. FLEXBOX & CSS GRID: The CSS layout nightmare is over inarocket.com +
  • 4. FLEXBOX & CSS GRID: The CSS layout nightmare is over inarocket.com CSS3
  • 5. FLEXBOX & CSS GRID: The CSS layout nightmare is over inarocket.com 4CSS
  • 6. FLEXBOX & CSS GRID: The CSS layout nightmare is over inarocket.com CSS?
  • 7. FLEXBOX & CSS GRID: The CSS layout nightmare is over inarocket.com +80SPECIFICATIONS
  • 8. FLEXBOX & CSS GRID: The CSS layout nightmare is over inarocket.com ALL CSS SPECIFICATIONS
  • 9. FLEXBOX & CSS GRID: The CSS layout nightmare is over inarocket.com MATURITY OF SPECIFICATIONS BY STATUS CODE RECOMMENDATIONREC PROPOSED RECOMMENDATIONPR CANDIDATE RECOMMENDATIONCR WORKING DRAFTWD FIRST PUBLIC WORKING DRAFTFPWD
  • 10. FLEXBOX & CSS GRID: The CSS layout nightmare is over inarocket.com CSS CURRENT WORK
  • 11. FLEXBOX & CSS GRID: The CSS layout nightmare is over inarocket.com FLEXBOX CSS GRID +
  • 12. FLEXBOX & CSS GRID: The CSS layout nightmare is over inarocket.com
  • 13. FLEXBOX & CSS GRID: The CSS layout nightmare is over inarocket.com
  • 14. FLEXBOX & CSS GRID: The CSS layout nightmare is over inarocket.com LEVEL 1 LEVEL 2 LEVEL 3 LEVEL 4 CSS FONTS CSS FLEXIBLE BOX LAYOUT MODULE
  • 15. FLEXBOX & CSS GRID: The CSS layout nightmare is over inarocket.com LEVEL 1 LEVEL 2 LEVEL 3 LEVEL 4 CSS FONTS CSS FLEXIBLE BOX LAYOUT MODULE Candidate recommendation
  • 16. FLEXBOX & CSS GRID: The CSS layout nightmare is over inarocket.com
  • 17. FLEXBOX & CSS GRID: The CSS layout nightmare is over inarocket.com
  • 18. FLEXBOX & CSS GRID: The CSS layout nightmare is over inarocket.com FLEXBOX CSS GRID +
  • 19. FLEXBOX & CSS GRID: The CSS layout nightmare is over inarocket.com
  • 20. FLEXBOX & CSS GRID: The CSS layout nightmare is over inarocket.com LEVEL 1 LEVEL 2 LEVEL 3 LEVEL 4 CSS FLEXIBLE BOX LAYOUT MODULE CSS GRID LAYOUT MODULE
  • 21. FLEXBOX & CSS GRID: The CSS layout nightmare is over inarocket.com LEVEL 1 LEVEL 2 LEVEL 3 LEVEL 4 CSS FLEXIBLE BOX LAYOUT MODULE CSS GRID LAYOUT MODULE Candidate recommendation
  • 22. FLEXBOX & CSS GRID: The CSS layout nightmare is over inarocket.com
  • 23. FLEXBOX & CSS GRID: The CSS layout nightmare is over inarocket.com
  • 24. FLEXBOX & CSS GRID: The CSS layout nightmare is over inarocket.com W3C: "Exploring"
  • 25. FLEXBOX & CSS GRID: The CSS layout nightmare is over inarocket.com
  • 26. FLEXBOX & CSS GRID: The CSS layout nightmare is over inarocket.com LEVEL 1 LEVEL 2 LEVEL 3 LEVEL 4 CSS FLEXIBLE BOX LAYOUT MODULE CSS GRID LAYOUT MODULE Working draft Candidate recommendation
  • 27. FLEXBOX & CSS GRID: The CSS layout nightmare is over inarocket.com +
  • 28. FLEXBOX & CSS GRID: The CSS layout nightmare is over inarocket.com FLEXBOX CSS GRID +
  • 29. FLEXBOX & CSS GRID: The CSS layout nightmare is over inarocket.com MAY 2017
  • 30. FLEXBOX & CSS GRID: The CSS layout nightmare is over inarocket.com NOVEMBER 2017
  • 31. FLEXBOX & CSS GRID: The CSS layout nightmare is over inarocket.com UC Browser
  • 32. FLEXBOX & CSS GRID: The CSS layout nightmare is over inarocket.com JULY 2018
  • 33. FLEXBOX & CSS GRID: The CSS layout nightmare is over inarocket.com FLEXBOX CSS GRID +
  • 34. FLEXBOX & CSS GRID: The CSS layout nightmare is over inarocket.com SEPTEMBER 2016
  • 35. FLEXBOX & CSS GRID: The CSS layout nightmare is over inarocket.com MAY 2017
  • 36. FLEXBOX & CSS GRID: The CSS layout nightmare is over inarocket.com JULY 2018
  • 37. FLEXBOX & CSS GRID: The CSS layout nightmare is over inarocket.com FLEXBOX CSS GRID +
  • 38. 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
  • 39. 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
  • 40. IN A ROCKET Learn front-end development at rocket speed CSS Context FLEXBOX & CSS GRID