SlideShare a Scribd company logo
1 of 27
Download to read offline
Environment
IN A ROCKET
Learn front-end development at rocket speed
CSS FLEXBOX & CSS GRID
FLEXBOX & CSS GRID: The CSS layout nightmare is over inarocket.com
+BROWSER DEV TOOLSEDITOR +
FLEXBOX & CSS GRID: The CSS layout nightmare is over inarocket.com
You can use any editor to develop Flexbox and CSS Grid
projects. We suggest using VS Code in this workshop as it
includes Emmet out-of-the-box. It makes easier to build HTML
and be more focused on your CSS.
ENVIRONMENT SETUP: EDITOR
You can just use any text editor preinstalled in
your computer.
Editor: pre-installed
TextEditNotepad Gedit
Editor: additional
There are more advanced editors to code. We
will use VS Code for this course.
Sublime Text AtomVS Code
FLEXBOX & CSS GRID: The CSS layout nightmare is over inarocket.com
BROWSER DEV TOOLSEDITOR ++
FLEXBOX & CSS GRID: The CSS layout nightmare is over inarocket.com
Most used browser worldwide.

Source: StatCounter.
ENVIRONMENT SETUP: BROWSER
We will use its

Grid Inspector tool

when creating layouts.
You can just use any preinstalled browser in
your computer.
Browser: pre-installed Browser: additional
There are other browsers that you can also
install in your computer.
OperaChrome FirefoxSafariEdge Firefox
FLEXBOX & CSS GRID: The CSS layout nightmare is over inarocket.com
BROWSER DEV TOOLSEDITOR ++
FLEXBOX & CSS GRID: The CSS layout nightmare is over inarocket.com
FIREFOX CSS GRID INSPECTOR
FLEXBOX & CSS GRID: The CSS layout nightmare is over inarocket.com
BROWERSYNC EXTENSION FOR VISUAL STUDIO CODE
FLEXBOX & CSS GRID: The CSS layout nightmare is over inarocket.com
BASE CSS
in a
ROCKET
INSTALLATION
~ ~ ~
FLEXBOX & CSS GRID: The CSS layout nightmare is over inarocket.com
Chocolatey Homebrew
FLEXBOX & CSS GRID: The CSS layout nightmare is over inarocket.com
Chocolatey Homebrew
FLEXBOX & CSS GRID: The CSS layout nightmare is over inarocket.com
WINDOWS: INSTALL YOUR ENVIRONMENT WITH CHOCOLATEY
FLEXBOX & CSS GRID: The CSS layout nightmare is over inarocket.com
WINDOWS: INSTALL YOUR ENVIRONMENT WITH CHOCOLATEY
Copy
FLEXBOX & CSS GRID: The CSS layout nightmare is over inarocket.com
WINDOWS: INSTALL YOUR ENVIRONMENT WITH CHOCOLATEY
SOURCE: Chocolatey / Install.
1
2
FLEXBOX & CSS GRID: The CSS layout nightmare is over inarocket.com
WINDOWS: INSTALL YOUR ENVIRONMENT WITH CHOCOLATEY
Administrator: Command Prompt
> Set-ExecutionPolicy Bypass -Scope Process -Force;
[System.Net.ServicePointManager]::SecurityProtocol =
[System.Net.ServicePointManager]::SecurityProtocol -bor 3072;
iex ((New-Object
System.Net.WebClient).DownloadString('https://chocolatey.org/
install.ps1'))
SOURCE: Chocolatey / Install.
Paste from clipboard
FLEXBOX & CSS GRID: The CSS layout nightmare is over inarocket.com
WINDOWS: INSTALL YOUR ENVIRONMENT WITH CHOCOLATEY
Administrator: Command Prompt
> choco install googlechrome firefox vscode -y
Install two browsers and a code editor automatically
FLEXBOX & CSS GRID: The CSS layout nightmare is over inarocket.com
WINDOWS: INSTALL YOUR ENVIRONMENT WITH CHOCOLATEY
>
Administrator: Command Prompt
Now your work environment is ready and 

you can easily keep your tools updated with this command:
choco upgrade all
SOURCE: Chocolatey / Upgrade.
FLEXBOX & CSS GRID: The CSS layout nightmare is over inarocket.com
Chocolatey Homebrew
FLEXBOX & CSS GRID: The CSS layout nightmare is over inarocket.com
MACOS: INSTALL YOUR ENVIRONMENT WITH HOMEBREW
Copy
FLEXBOX & CSS GRID: The CSS layout nightmare is over inarocket.com
MACOS: INSTALL YOUR ENVIRONMENT WITH HOMEBREW
SOURCE: Homebrew and Homebrew-Cask.
Terminal
$ /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/
Homebrew/install/master/install.sh)"
Paste from clipboard
FLEXBOX & CSS GRID: The CSS layout nightmare is over inarocket.com
MACOS: INSTALL YOUR ENVIRONMENT WITH HOMEBREW
Terminal
$ brew cask install google-chrome firefox visual-studio-code
Install two browsers and a code editor automatically
FLEXBOX & CSS GRID: The CSS layout nightmare is over inarocket.com
MACOS: INSTALL YOUR ENVIRONMENT WITH HOMEBREW
Now your work environment is ready and 

you can easily keep your tools updated with this command:
Terminal
$ brew update && brew upgrade && brew cask upgrade
FLEXBOX & CSS GRID: The CSS layout nightmare is over inarocket.com
+BROWSER DEV TOOLSEDITOR +
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
Environment
IN A ROCKET
Learn front-end development at rocket speed
CSS FLEXBOX & CSS GRID

More Related Content

Similar to 1- Learn Flexbox & CSS Grid / Environment setup

DocuOps & Asciidoctor in a JVM World
DocuOps & Asciidoctor in a JVM WorldDocuOps & Asciidoctor in a JVM World
DocuOps & Asciidoctor in a JVM WorldSchalk Cronjé
 
Azure from scratch part 5 By Girish Kalamati
Azure from scratch part 5 By Girish KalamatiAzure from scratch part 5 By Girish Kalamati
Azure from scratch part 5 By Girish KalamatiGirish Kalamati
 
Fasten RWD Development with Sass
Fasten RWD Development with SassFasten RWD Development with Sass
Fasten RWD Development with SassSven Wolfermann
 
Docker for developers on mac and windows
Docker for developers on mac and windowsDocker for developers on mac and windows
Docker for developers on mac and windowsDocker, Inc.
 
ITB2019 Containerizing ContentBox CMS - Gavin Pickin
ITB2019 Containerizing ContentBox CMS - Gavin PickinITB2019 Containerizing ContentBox CMS - Gavin Pickin
ITB2019 Containerizing ContentBox CMS - Gavin PickinOrtus Solutions, Corp
 
Building a production-ready, fully-scalable Docker Swarm using Terraform & Pa...
Building a production-ready, fully-scalable Docker Swarm using Terraform & Pa...Building a production-ready, fully-scalable Docker Swarm using Terraform & Pa...
Building a production-ready, fully-scalable Docker Swarm using Terraform & Pa...Outlyer
 
Not Just a Pretty Face: How to design and build a cross-CMS CSS framework
Not Just a Pretty Face: How to design and build a cross-CMS CSS frameworkNot Just a Pretty Face: How to design and build a cross-CMS CSS framework
Not Just a Pretty Face: How to design and build a cross-CMS CSS frameworkcrystalenka
 
Hitchhiker's guide to the front end development
Hitchhiker's guide to the front end developmentHitchhiker's guide to the front end development
Hitchhiker's guide to the front end development정윤 김
 
Running Docker in Development & Production (#ndcoslo 2015)
Running Docker in Development & Production (#ndcoslo 2015)Running Docker in Development & Production (#ndcoslo 2015)
Running Docker in Development & Production (#ndcoslo 2015)Ben Hall
 
Docker New York Meetup May 2015 - The Docker Orchestration Ecosystem on Azure
Docker New York Meetup May 2015 - The Docker Orchestration Ecosystem on Azure Docker New York Meetup May 2015 - The Docker Orchestration Ecosystem on Azure
Docker New York Meetup May 2015 - The Docker Orchestration Ecosystem on Azure Patrick Chanezon
 
It's a Mod World - A Practical Guide to Rocking Modernizr
It's a Mod World - A Practical Guide to Rocking ModernizrIt's a Mod World - A Practical Guide to Rocking Modernizr
It's a Mod World - A Practical Guide to Rocking ModernizrMichael Enslow
 
Docker, the Future of DevOps
Docker, the Future of DevOpsDocker, the Future of DevOps
Docker, the Future of DevOpsandersjanmyr
 
Docker, Kubernetes, and Google Cloud
Docker, Kubernetes, and Google CloudDocker, Kubernetes, and Google Cloud
Docker, Kubernetes, and Google CloudSamuel Chow
 
Building performance auf der Developer Conference Hamburg
Building performance auf der Developer Conference HamburgBuilding performance auf der Developer Conference Hamburg
Building performance auf der Developer Conference HamburgOliver Ochs
 
Docker Seattle Meetup April 2015 - The Docker Orchestration Ecosystem on Azure
Docker Seattle Meetup April 2015 - The Docker Orchestration Ecosystem on AzureDocker Seattle Meetup April 2015 - The Docker Orchestration Ecosystem on Azure
Docker Seattle Meetup April 2015 - The Docker Orchestration Ecosystem on AzurePatrick Chanezon
 
Containerizing ContentBox CMS
Containerizing ContentBox CMSContainerizing ContentBox CMS
Containerizing ContentBox CMSGavin Pickin
 
Continuous Delivery com Docker, OpenShift e Jenkins
Continuous Delivery com Docker, OpenShift e JenkinsContinuous Delivery com Docker, OpenShift e Jenkins
Continuous Delivery com Docker, OpenShift e JenkinsBruno Padilha
 

Similar to 1- Learn Flexbox & CSS Grid / Environment setup (20)

6 css week12 2020 2021 for g10
6 css week12 2020 2021 for g106 css week12 2020 2021 for g10
6 css week12 2020 2021 for g10
 
DocuOps & Asciidoctor in a JVM World
DocuOps & Asciidoctor in a JVM WorldDocuOps & Asciidoctor in a JVM World
DocuOps & Asciidoctor in a JVM World
 
Azure from scratch part 5 By Girish Kalamati
Azure from scratch part 5 By Girish KalamatiAzure from scratch part 5 By Girish Kalamati
Azure from scratch part 5 By Girish Kalamati
 
Fasten RWD Development with Sass
Fasten RWD Development with SassFasten RWD Development with Sass
Fasten RWD Development with Sass
 
Docker for developers on mac and windows
Docker for developers on mac and windowsDocker for developers on mac and windows
Docker for developers on mac and windows
 
ITB2019 Containerizing ContentBox CMS - Gavin Pickin
ITB2019 Containerizing ContentBox CMS - Gavin PickinITB2019 Containerizing ContentBox CMS - Gavin Pickin
ITB2019 Containerizing ContentBox CMS - Gavin Pickin
 
Pp docker-swarm-doxlon-28th-march-2017
Pp docker-swarm-doxlon-28th-march-2017Pp docker-swarm-doxlon-28th-march-2017
Pp docker-swarm-doxlon-28th-march-2017
 
Building a production-ready, fully-scalable Docker Swarm using Terraform & Pa...
Building a production-ready, fully-scalable Docker Swarm using Terraform & Pa...Building a production-ready, fully-scalable Docker Swarm using Terraform & Pa...
Building a production-ready, fully-scalable Docker Swarm using Terraform & Pa...
 
Not Just a Pretty Face: How to design and build a cross-CMS CSS framework
Not Just a Pretty Face: How to design and build a cross-CMS CSS frameworkNot Just a Pretty Face: How to design and build a cross-CMS CSS framework
Not Just a Pretty Face: How to design and build a cross-CMS CSS framework
 
Hitchhiker's guide to the front end development
Hitchhiker's guide to the front end developmentHitchhiker's guide to the front end development
Hitchhiker's guide to the front end development
 
Using a CSS Framework
Using a CSS FrameworkUsing a CSS Framework
Using a CSS Framework
 
Running Docker in Development & Production (#ndcoslo 2015)
Running Docker in Development & Production (#ndcoslo 2015)Running Docker in Development & Production (#ndcoslo 2015)
Running Docker in Development & Production (#ndcoslo 2015)
 
Docker New York Meetup May 2015 - The Docker Orchestration Ecosystem on Azure
Docker New York Meetup May 2015 - The Docker Orchestration Ecosystem on Azure Docker New York Meetup May 2015 - The Docker Orchestration Ecosystem on Azure
Docker New York Meetup May 2015 - The Docker Orchestration Ecosystem on Azure
 
It's a Mod World - A Practical Guide to Rocking Modernizr
It's a Mod World - A Practical Guide to Rocking ModernizrIt's a Mod World - A Practical Guide to Rocking Modernizr
It's a Mod World - A Practical Guide to Rocking Modernizr
 
Docker, the Future of DevOps
Docker, the Future of DevOpsDocker, the Future of DevOps
Docker, the Future of DevOps
 
Docker, Kubernetes, and Google Cloud
Docker, Kubernetes, and Google CloudDocker, Kubernetes, and Google Cloud
Docker, Kubernetes, and Google Cloud
 
Building performance auf der Developer Conference Hamburg
Building performance auf der Developer Conference HamburgBuilding performance auf der Developer Conference Hamburg
Building performance auf der Developer Conference Hamburg
 
Docker Seattle Meetup April 2015 - The Docker Orchestration Ecosystem on Azure
Docker Seattle Meetup April 2015 - The Docker Orchestration Ecosystem on AzureDocker Seattle Meetup April 2015 - The Docker Orchestration Ecosystem on Azure
Docker Seattle Meetup April 2015 - The Docker Orchestration Ecosystem on Azure
 
Containerizing ContentBox CMS
Containerizing ContentBox CMSContainerizing ContentBox CMS
Containerizing ContentBox CMS
 
Continuous Delivery com Docker, OpenShift e Jenkins
Continuous Delivery com Docker, OpenShift e JenkinsContinuous Delivery com Docker, OpenShift e Jenkins
Continuous Delivery com Docker, OpenShift e Jenkins
 

More from In a Rocket

17- Learn CSS Fundamentals / Units
17- Learn CSS Fundamentals / Units17- Learn CSS Fundamentals / Units
17- Learn CSS Fundamentals / UnitsIn a Rocket
 
16- Learn CSS Fundamentals / Background
16- Learn CSS Fundamentals / Background16- Learn CSS Fundamentals / Background
16- Learn CSS Fundamentals / BackgroundIn a Rocket
 
15- Learn CSS Fundamentals / Color
15- Learn CSS Fundamentals / Color15- Learn CSS Fundamentals / Color
15- Learn CSS Fundamentals / ColorIn a Rocket
 
14- Learn CSS Fundamentals / Inheritance
14- Learn CSS Fundamentals / Inheritance14- Learn CSS Fundamentals / Inheritance
14- Learn CSS Fundamentals / InheritanceIn a Rocket
 
13- Learn CSS Fundamentals / Specificity
13- Learn CSS Fundamentals / Specificity13- Learn CSS Fundamentals / Specificity
13- Learn CSS Fundamentals / SpecificityIn a Rocket
 
12- Learn CSS Fundamentals / Mix & group
12- Learn CSS Fundamentals / Mix & group12- Learn CSS Fundamentals / Mix & group
12- Learn CSS Fundamentals / Mix & groupIn a Rocket
 
11- Learn CSS Fundamentals / Combinators
11- Learn CSS Fundamentals / Combinators11- Learn CSS Fundamentals / Combinators
11- Learn CSS Fundamentals / CombinatorsIn a Rocket
 
10- Learn CSS Fundamentals / Pseudo-elements
10- Learn CSS Fundamentals / Pseudo-elements10- Learn CSS Fundamentals / Pseudo-elements
10- Learn CSS Fundamentals / Pseudo-elementsIn a Rocket
 
9- Learn CSS Fundamentals / Pseudo-classes
9- Learn CSS Fundamentals / Pseudo-classes9- Learn CSS Fundamentals / Pseudo-classes
9- Learn CSS Fundamentals / Pseudo-classesIn a Rocket
 
8- Learn CSS Fundamentals / Attribute selectors
8- Learn CSS Fundamentals / Attribute selectors8- Learn CSS Fundamentals / Attribute selectors
8- Learn CSS Fundamentals / Attribute selectorsIn a Rocket
 
2- Learn HTML Fundamentals / Text Formatting
2- Learn HTML Fundamentals / Text Formatting2- Learn HTML Fundamentals / Text Formatting
2- Learn HTML Fundamentals / Text FormattingIn a Rocket
 
1- Learn HTML Fundamentals / Start in 5 Minutes
1- Learn HTML Fundamentals / Start in 5 Minutes1- Learn HTML Fundamentals / Start in 5 Minutes
1- Learn HTML Fundamentals / Start in 5 MinutesIn a Rocket
 
Learn SUIT: CSS Naming Convention
Learn SUIT: CSS Naming ConventionLearn SUIT: CSS Naming Convention
Learn SUIT: CSS Naming ConventionIn a Rocket
 
Learn BEM: CSS Naming Convention
Learn BEM: CSS Naming ConventionLearn BEM: CSS Naming Convention
Learn BEM: CSS Naming ConventionIn a Rocket
 

More from In a Rocket (14)

17- Learn CSS Fundamentals / Units
17- Learn CSS Fundamentals / Units17- Learn CSS Fundamentals / Units
17- Learn CSS Fundamentals / Units
 
16- Learn CSS Fundamentals / Background
16- Learn CSS Fundamentals / Background16- Learn CSS Fundamentals / Background
16- Learn CSS Fundamentals / Background
 
15- Learn CSS Fundamentals / Color
15- Learn CSS Fundamentals / Color15- Learn CSS Fundamentals / Color
15- Learn CSS Fundamentals / Color
 
14- Learn CSS Fundamentals / Inheritance
14- Learn CSS Fundamentals / Inheritance14- Learn CSS Fundamentals / Inheritance
14- Learn CSS Fundamentals / Inheritance
 
13- Learn CSS Fundamentals / Specificity
13- Learn CSS Fundamentals / Specificity13- Learn CSS Fundamentals / Specificity
13- Learn CSS Fundamentals / Specificity
 
12- Learn CSS Fundamentals / Mix & group
12- Learn CSS Fundamentals / Mix & group12- Learn CSS Fundamentals / Mix & group
12- Learn CSS Fundamentals / Mix & group
 
11- Learn CSS Fundamentals / Combinators
11- Learn CSS Fundamentals / Combinators11- Learn CSS Fundamentals / Combinators
11- Learn CSS Fundamentals / Combinators
 
10- Learn CSS Fundamentals / Pseudo-elements
10- Learn CSS Fundamentals / Pseudo-elements10- Learn CSS Fundamentals / Pseudo-elements
10- Learn CSS Fundamentals / Pseudo-elements
 
9- Learn CSS Fundamentals / Pseudo-classes
9- Learn CSS Fundamentals / Pseudo-classes9- Learn CSS Fundamentals / Pseudo-classes
9- Learn CSS Fundamentals / Pseudo-classes
 
8- Learn CSS Fundamentals / Attribute selectors
8- Learn CSS Fundamentals / Attribute selectors8- Learn CSS Fundamentals / Attribute selectors
8- Learn CSS Fundamentals / Attribute selectors
 
2- Learn HTML Fundamentals / Text Formatting
2- Learn HTML Fundamentals / Text Formatting2- Learn HTML Fundamentals / Text Formatting
2- Learn HTML Fundamentals / Text Formatting
 
1- Learn HTML Fundamentals / Start in 5 Minutes
1- Learn HTML Fundamentals / Start in 5 Minutes1- Learn HTML Fundamentals / Start in 5 Minutes
1- Learn HTML Fundamentals / Start in 5 Minutes
 
Learn SUIT: CSS Naming Convention
Learn SUIT: CSS Naming ConventionLearn SUIT: CSS Naming Convention
Learn SUIT: CSS Naming Convention
 
Learn BEM: CSS Naming Convention
Learn BEM: CSS Naming ConventionLearn BEM: CSS Naming Convention
Learn BEM: CSS Naming Convention
 

Recently uploaded

Computer 10 Lesson 8: Building a Website
Computer 10 Lesson 8: Building a WebsiteComputer 10 Lesson 8: Building a Website
Computer 10 Lesson 8: Building a WebsiteMavein
 
Check out the Free Landing Page Hosting in 2024
Check out the Free Landing Page Hosting in 2024Check out the Free Landing Page Hosting in 2024
Check out the Free Landing Page Hosting in 2024Shubham Pant
 
Introduction to ICANN and Fellowship program by Shreedeep Rayamajhi.pdf
Introduction to ICANN and Fellowship program  by Shreedeep Rayamajhi.pdfIntroduction to ICANN and Fellowship program  by Shreedeep Rayamajhi.pdf
Introduction to ICANN and Fellowship program by Shreedeep Rayamajhi.pdfShreedeep Rayamajhi
 
Vision Forward: Tracing Image Search SEO From Its Roots To AI-Enhanced Horizons
Vision Forward: Tracing Image Search SEO From Its Roots To AI-Enhanced HorizonsVision Forward: Tracing Image Search SEO From Its Roots To AI-Enhanced Horizons
Vision Forward: Tracing Image Search SEO From Its Roots To AI-Enhanced HorizonsRoxana Stingu
 
Bio Medical Waste Management Guideliness 2023 ppt.pptx
Bio Medical Waste Management Guideliness 2023 ppt.pptxBio Medical Waste Management Guideliness 2023 ppt.pptx
Bio Medical Waste Management Guideliness 2023 ppt.pptxnaveenithkrishnan
 
Benefits of doing Internet peering and running an Internet Exchange (IX) pres...
Benefits of doing Internet peering and running an Internet Exchange (IX) pres...Benefits of doing Internet peering and running an Internet Exchange (IX) pres...
Benefits of doing Internet peering and running an Internet Exchange (IX) pres...APNIC
 
LESSON 5 GROUP 10 ST. THOMAS AQUINAS.pdf
LESSON 5 GROUP 10 ST. THOMAS AQUINAS.pdfLESSON 5 GROUP 10 ST. THOMAS AQUINAS.pdf
LESSON 5 GROUP 10 ST. THOMAS AQUINAS.pdfmchristianalwyn
 
WordPress by the numbers - Jan Loeffler, CTO WebPros, CloudFest 2024
WordPress by the numbers - Jan Loeffler, CTO WebPros, CloudFest 2024WordPress by the numbers - Jan Loeffler, CTO WebPros, CloudFest 2024
WordPress by the numbers - Jan Loeffler, CTO WebPros, CloudFest 2024Jan Löffler
 
Zero-day Vulnerabilities
Zero-day VulnerabilitiesZero-day Vulnerabilities
Zero-day Vulnerabilitiesalihassaah1994
 
LESSON 10/ GROUP 10/ ST. THOMAS AQUINASS
LESSON 10/ GROUP 10/ ST. THOMAS AQUINASSLESSON 10/ GROUP 10/ ST. THOMAS AQUINASS
LESSON 10/ GROUP 10/ ST. THOMAS AQUINASSlesteraporado16
 
Presentation2.pptx - JoyPress Wordpress
Presentation2.pptx -  JoyPress WordpressPresentation2.pptx -  JoyPress Wordpress
Presentation2.pptx - JoyPress Wordpressssuser166378
 
TYPES AND DEFINITION OF ONLINE CRIMES AND HAZARDS
TYPES AND DEFINITION OF ONLINE CRIMES AND HAZARDSTYPES AND DEFINITION OF ONLINE CRIMES AND HAZARDS
TYPES AND DEFINITION OF ONLINE CRIMES AND HAZARDSedrianrheine
 

Recently uploaded (12)

Computer 10 Lesson 8: Building a Website
Computer 10 Lesson 8: Building a WebsiteComputer 10 Lesson 8: Building a Website
Computer 10 Lesson 8: Building a Website
 
Check out the Free Landing Page Hosting in 2024
Check out the Free Landing Page Hosting in 2024Check out the Free Landing Page Hosting in 2024
Check out the Free Landing Page Hosting in 2024
 
Introduction to ICANN and Fellowship program by Shreedeep Rayamajhi.pdf
Introduction to ICANN and Fellowship program  by Shreedeep Rayamajhi.pdfIntroduction to ICANN and Fellowship program  by Shreedeep Rayamajhi.pdf
Introduction to ICANN and Fellowship program by Shreedeep Rayamajhi.pdf
 
Vision Forward: Tracing Image Search SEO From Its Roots To AI-Enhanced Horizons
Vision Forward: Tracing Image Search SEO From Its Roots To AI-Enhanced HorizonsVision Forward: Tracing Image Search SEO From Its Roots To AI-Enhanced Horizons
Vision Forward: Tracing Image Search SEO From Its Roots To AI-Enhanced Horizons
 
Bio Medical Waste Management Guideliness 2023 ppt.pptx
Bio Medical Waste Management Guideliness 2023 ppt.pptxBio Medical Waste Management Guideliness 2023 ppt.pptx
Bio Medical Waste Management Guideliness 2023 ppt.pptx
 
Benefits of doing Internet peering and running an Internet Exchange (IX) pres...
Benefits of doing Internet peering and running an Internet Exchange (IX) pres...Benefits of doing Internet peering and running an Internet Exchange (IX) pres...
Benefits of doing Internet peering and running an Internet Exchange (IX) pres...
 
LESSON 5 GROUP 10 ST. THOMAS AQUINAS.pdf
LESSON 5 GROUP 10 ST. THOMAS AQUINAS.pdfLESSON 5 GROUP 10 ST. THOMAS AQUINAS.pdf
LESSON 5 GROUP 10 ST. THOMAS AQUINAS.pdf
 
WordPress by the numbers - Jan Loeffler, CTO WebPros, CloudFest 2024
WordPress by the numbers - Jan Loeffler, CTO WebPros, CloudFest 2024WordPress by the numbers - Jan Loeffler, CTO WebPros, CloudFest 2024
WordPress by the numbers - Jan Loeffler, CTO WebPros, CloudFest 2024
 
Zero-day Vulnerabilities
Zero-day VulnerabilitiesZero-day Vulnerabilities
Zero-day Vulnerabilities
 
LESSON 10/ GROUP 10/ ST. THOMAS AQUINASS
LESSON 10/ GROUP 10/ ST. THOMAS AQUINASSLESSON 10/ GROUP 10/ ST. THOMAS AQUINASS
LESSON 10/ GROUP 10/ ST. THOMAS AQUINASS
 
Presentation2.pptx - JoyPress Wordpress
Presentation2.pptx -  JoyPress WordpressPresentation2.pptx -  JoyPress Wordpress
Presentation2.pptx - JoyPress Wordpress
 
TYPES AND DEFINITION OF ONLINE CRIMES AND HAZARDS
TYPES AND DEFINITION OF ONLINE CRIMES AND HAZARDSTYPES AND DEFINITION OF ONLINE CRIMES AND HAZARDS
TYPES AND DEFINITION OF ONLINE CRIMES AND HAZARDS
 

1- Learn Flexbox & CSS Grid / Environment setup

  • 1. Environment IN A ROCKET Learn front-end development at rocket speed CSS FLEXBOX & CSS GRID
  • 2. FLEXBOX & CSS GRID: The CSS layout nightmare is over inarocket.com +BROWSER DEV TOOLSEDITOR +
  • 3. FLEXBOX & CSS GRID: The CSS layout nightmare is over inarocket.com You can use any editor to develop Flexbox and CSS Grid projects. We suggest using VS Code in this workshop as it includes Emmet out-of-the-box. It makes easier to build HTML and be more focused on your CSS. ENVIRONMENT SETUP: EDITOR You can just use any text editor preinstalled in your computer. Editor: pre-installed TextEditNotepad Gedit Editor: additional There are more advanced editors to code. We will use VS Code for this course. Sublime Text AtomVS Code
  • 4. FLEXBOX & CSS GRID: The CSS layout nightmare is over inarocket.com BROWSER DEV TOOLSEDITOR ++
  • 5. FLEXBOX & CSS GRID: The CSS layout nightmare is over inarocket.com Most used browser worldwide.
 Source: StatCounter. ENVIRONMENT SETUP: BROWSER We will use its
 Grid Inspector tool
 when creating layouts. You can just use any preinstalled browser in your computer. Browser: pre-installed Browser: additional There are other browsers that you can also install in your computer. OperaChrome FirefoxSafariEdge Firefox
  • 6. FLEXBOX & CSS GRID: The CSS layout nightmare is over inarocket.com BROWSER DEV TOOLSEDITOR ++
  • 7. FLEXBOX & CSS GRID: The CSS layout nightmare is over inarocket.com FIREFOX CSS GRID INSPECTOR
  • 8. FLEXBOX & CSS GRID: The CSS layout nightmare is over inarocket.com BROWERSYNC EXTENSION FOR VISUAL STUDIO CODE
  • 9. FLEXBOX & CSS GRID: The CSS layout nightmare is over inarocket.com BASE CSS
  • 11. FLEXBOX & CSS GRID: The CSS layout nightmare is over inarocket.com Chocolatey Homebrew
  • 12. FLEXBOX & CSS GRID: The CSS layout nightmare is over inarocket.com Chocolatey Homebrew
  • 13. FLEXBOX & CSS GRID: The CSS layout nightmare is over inarocket.com WINDOWS: INSTALL YOUR ENVIRONMENT WITH CHOCOLATEY
  • 14. FLEXBOX & CSS GRID: The CSS layout nightmare is over inarocket.com WINDOWS: INSTALL YOUR ENVIRONMENT WITH CHOCOLATEY Copy
  • 15. FLEXBOX & CSS GRID: The CSS layout nightmare is over inarocket.com WINDOWS: INSTALL YOUR ENVIRONMENT WITH CHOCOLATEY SOURCE: Chocolatey / Install. 1 2
  • 16. FLEXBOX & CSS GRID: The CSS layout nightmare is over inarocket.com WINDOWS: INSTALL YOUR ENVIRONMENT WITH CHOCOLATEY Administrator: Command Prompt > Set-ExecutionPolicy Bypass -Scope Process -Force; [System.Net.ServicePointManager]::SecurityProtocol = [System.Net.ServicePointManager]::SecurityProtocol -bor 3072; iex ((New-Object System.Net.WebClient).DownloadString('https://chocolatey.org/ install.ps1')) SOURCE: Chocolatey / Install. Paste from clipboard
  • 17. FLEXBOX & CSS GRID: The CSS layout nightmare is over inarocket.com WINDOWS: INSTALL YOUR ENVIRONMENT WITH CHOCOLATEY Administrator: Command Prompt > choco install googlechrome firefox vscode -y Install two browsers and a code editor automatically
  • 18. FLEXBOX & CSS GRID: The CSS layout nightmare is over inarocket.com WINDOWS: INSTALL YOUR ENVIRONMENT WITH CHOCOLATEY > Administrator: Command Prompt Now your work environment is ready and 
 you can easily keep your tools updated with this command: choco upgrade all SOURCE: Chocolatey / Upgrade.
  • 19. FLEXBOX & CSS GRID: The CSS layout nightmare is over inarocket.com Chocolatey Homebrew
  • 20. FLEXBOX & CSS GRID: The CSS layout nightmare is over inarocket.com MACOS: INSTALL YOUR ENVIRONMENT WITH HOMEBREW Copy
  • 21. FLEXBOX & CSS GRID: The CSS layout nightmare is over inarocket.com MACOS: INSTALL YOUR ENVIRONMENT WITH HOMEBREW SOURCE: Homebrew and Homebrew-Cask. Terminal $ /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/ Homebrew/install/master/install.sh)" Paste from clipboard
  • 22. FLEXBOX & CSS GRID: The CSS layout nightmare is over inarocket.com MACOS: INSTALL YOUR ENVIRONMENT WITH HOMEBREW Terminal $ brew cask install google-chrome firefox visual-studio-code Install two browsers and a code editor automatically
  • 23. FLEXBOX & CSS GRID: The CSS layout nightmare is over inarocket.com MACOS: INSTALL YOUR ENVIRONMENT WITH HOMEBREW Now your work environment is ready and 
 you can easily keep your tools updated with this command: Terminal $ brew update && brew upgrade && brew cask upgrade
  • 24. FLEXBOX & CSS GRID: The CSS layout nightmare is over inarocket.com +BROWSER DEV TOOLSEDITOR +
  • 25. 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
  • 26. 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
  • 27. Environment IN A ROCKET Learn front-end development at rocket speed CSS FLEXBOX & CSS GRID