SlideShare a Scribd company logo
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

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
Osama Ghandour Geris
 
DocuOps & Asciidoctor in a JVM World
DocuOps & Asciidoctor in a JVM WorldDocuOps & Asciidoctor in a JVM World
DocuOps & Asciidoctor in a JVM World
Schalk 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 Kalamati
Girish Kalamati
 
Fasten RWD Development with Sass
Fasten RWD Development with SassFasten RWD Development with Sass
Fasten RWD Development with Sass
Sven 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 windows
Docker, Inc.
 
ITB2019 Containerizing ContentBox CMS - Gavin Pickin
ITB2019 Containerizing ContentBox CMS - Gavin PickinITB2019 Containerizing ContentBox CMS - Gavin Pickin
ITB2019 Containerizing ContentBox CMS - Gavin Pickin
Ortus 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
 
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
Bobby DeVeaux, DevOps Consultant
 
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
crystalenka
 
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
Gareth Saunders
 
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 Modernizr
Michael Enslow
 
Docker, the Future of DevOps
Docker, the Future of DevOpsDocker, the Future of DevOps
Docker, the Future of DevOps
andersjanmyr
 
Docker, Kubernetes, and Google Cloud
Docker, Kubernetes, and Google CloudDocker, Kubernetes, and Google Cloud
Docker, Kubernetes, and Google Cloud
Samuel 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 Hamburg
Oliver 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 Azure
Patrick Chanezon
 
Containerizing ContentBox CMS
Containerizing ContentBox CMSContainerizing ContentBox CMS
Containerizing ContentBox CMS
Gavin 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 Jenkins
Bruno 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
 
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...
 
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
 
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 / Units
In a Rocket
 
16- Learn CSS Fundamentals / Background
16- Learn CSS Fundamentals / Background16- Learn CSS Fundamentals / Background
16- Learn CSS Fundamentals / Background
In a Rocket
 
15- Learn CSS Fundamentals / Color
15- Learn CSS Fundamentals / Color15- Learn CSS Fundamentals / Color
15- Learn CSS Fundamentals / Color
In a Rocket
 
14- Learn CSS Fundamentals / Inheritance
14- Learn CSS Fundamentals / Inheritance14- Learn CSS Fundamentals / Inheritance
14- Learn CSS Fundamentals / Inheritance
In a Rocket
 
13- Learn CSS Fundamentals / Specificity
13- Learn CSS Fundamentals / Specificity13- Learn CSS Fundamentals / Specificity
13- Learn CSS Fundamentals / Specificity
In a Rocket
 
12- Learn CSS Fundamentals / Mix & group
12- Learn CSS Fundamentals / Mix & group12- Learn CSS Fundamentals / Mix & group
12- Learn CSS Fundamentals / Mix & group
In a Rocket
 
11- Learn CSS Fundamentals / Combinators
11- Learn CSS Fundamentals / Combinators11- Learn CSS Fundamentals / Combinators
11- Learn CSS Fundamentals / Combinators
In a Rocket
 
10- Learn CSS Fundamentals / Pseudo-elements
10- Learn CSS Fundamentals / Pseudo-elements10- Learn CSS Fundamentals / Pseudo-elements
10- Learn CSS Fundamentals / Pseudo-elements
In a Rocket
 
9- Learn CSS Fundamentals / Pseudo-classes
9- Learn CSS Fundamentals / Pseudo-classes9- Learn CSS Fundamentals / Pseudo-classes
9- Learn CSS Fundamentals / Pseudo-classes
In a Rocket
 
8- Learn CSS Fundamentals / Attribute selectors
8- Learn CSS Fundamentals / Attribute selectors8- Learn CSS Fundamentals / Attribute selectors
8- Learn CSS Fundamentals / Attribute selectors
In a Rocket
 
2- Learn HTML Fundamentals / Text Formatting
2- Learn HTML Fundamentals / Text Formatting2- Learn HTML Fundamentals / Text Formatting
2- Learn HTML Fundamentals / Text Formatting
In 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 Minutes
In a Rocket
 
Learn SUIT: CSS Naming Convention
Learn SUIT: CSS Naming ConventionLearn SUIT: CSS Naming Convention
Learn SUIT: CSS Naming Convention
In a Rocket
 
Learn BEM: CSS Naming Convention
Learn BEM: CSS Naming ConventionLearn BEM: CSS Naming Convention
Learn BEM: CSS Naming Convention
In 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

Digital ethnography of the Polish darknet drug trade community
Digital ethnography of the Polish darknet drug trade communityDigital ethnography of the Polish darknet drug trade community
Digital ethnography of the Polish darknet drug trade community
Piotr Siuda
 
Use of Ontologies in Chemical Kinetic Database CHEMCONNECT
Use of Ontologies in Chemical Kinetic Database CHEMCONNECTUse of Ontologies in Chemical Kinetic Database CHEMCONNECT
Use of Ontologies in Chemical Kinetic Database CHEMCONNECT
Edward Blurock
 
Open Source TCP or Netflow Log Server Using Graylog
Open Source TCP or Netflow Log Server Using GraylogOpen Source TCP or Netflow Log Server Using Graylog
Open Source TCP or Netflow Log Server Using Graylog
Bangladesh Network Operators Group
 
Team Cymru Community Services,Overview of all public services
Team Cymru Community Services,Overview of all public servicesTeam Cymru Community Services,Overview of all public services
Team Cymru Community Services,Overview of all public services
Bangladesh Network Operators Group
 
Girls Call Shimla 000XX00000 Provide Best And Top Girl Service And No1 in City
Girls Call Shimla 000XX00000 Provide Best And Top Girl Service And No1 in CityGirls Call Shimla 000XX00000 Provide Best And Top Girl Service And No1 in City
Girls Call Shimla 000XX00000 Provide Best And Top Girl Service And No1 in City
dilbaagsingh0898
 
@Girls @Call Chennai 🛬 XXXXXXXXXX 🛬 available 24*7 cash payment book now pay ...
@Girls @Call Chennai 🛬 XXXXXXXXXX 🛬 available 24*7 cash payment book now pay ...@Girls @Call Chennai 🛬 XXXXXXXXXX 🛬 available 24*7 cash payment book now pay ...
@Girls @Call Chennai 🛬 XXXXXXXXXX 🛬 available 24*7 cash payment book now pay ...
shamrisumri
 
Dewanstudio Project Portfolio 2023 show case
Dewanstudio Project Portfolio 2023 show caseDewanstudio Project Portfolio 2023 show case
Dewanstudio Project Portfolio 2023 show case
DEWANSTUDIO.COM
 
IPv6 Deployment Planning and Security Considerations
IPv6 Deployment Planning and Security ConsiderationsIPv6 Deployment Planning and Security Considerations
IPv6 Deployment Planning and Security Considerations
Bangladesh Network Operators Group
 
Top 50 Data Science Jobs on LinkedIn.docx
Top 50 Data Science Jobs on LinkedIn.docxTop 50 Data Science Jobs on LinkedIn.docx
Top 50 Data Science Jobs on LinkedIn.docx
analyticsinsightmaga
 
Network Layer and its protocols mod .pptx
Network Layer and its protocols mod .pptxNetwork Layer and its protocols mod .pptx
Network Layer and its protocols mod .pptx
cossykin19
 
Best CSS Animation Libraries for Web Developers
Best CSS Animation Libraries for Web DevelopersBest CSS Animation Libraries for Web Developers
Best CSS Animation Libraries for Web Developers
Shrestha Raaz
 
How Salesforce Development in the UK is Driving Digital Transformation
How Salesforce Development in the UK is Driving Digital TransformationHow Salesforce Development in the UK is Driving Digital Transformation
How Salesforce Development in the UK is Driving Digital Transformation
Sweet Potato Tec
 
University of California, Riverside diploma
University of California, Riverside diplomaUniversity of California, Riverside diploma
University of California, Riverside diploma
eufdev
 
Ontology for the semantic enhancement, database definition and management and...
Ontology for the semantic enhancement, database definition and management and...Ontology for the semantic enhancement, database definition and management and...
Ontology for the semantic enhancement, database definition and management and...
Edward Blurock
 
My President is bulletproof t shirts hoodie
My President is bulletproof t shirts hoodieMy President is bulletproof t shirts hoodie
My President is bulletproof t shirts hoodie
exgf28
 
Week 1 - Pendidikan Pancasila - Gr 1.docx
Week 1 - Pendidikan Pancasila - Gr 1.docxWeek 1 - Pendidikan Pancasila - Gr 1.docx
Week 1 - Pendidikan Pancasila - Gr 1.docx
JunaManroe1
 
Effective Tips for Creating the Best Rich Media Ads .pptx
Effective Tips for Creating the Best Rich Media Ads .pptxEffective Tips for Creating the Best Rich Media Ads .pptx
Effective Tips for Creating the Best Rich Media Ads .pptx
AirtoryInc
 
Saint Louis University diploma
Saint Louis University diplomaSaint Louis University diploma
Saint Louis University diploma
eufdev
 
DASH, presented by Elly Tawhai at PacNOG 33
DASH, presented by Elly Tawhai at PacNOG 33DASH, presented by Elly Tawhai at PacNOG 33
DASH, presented by Elly Tawhai at PacNOG 33
APNIC
 
Web development Platform Constraints.pptx
Web development Platform Constraints.pptxWeb development Platform Constraints.pptx
Web development Platform Constraints.pptx
ssuser2f6682
 

Recently uploaded (20)

Digital ethnography of the Polish darknet drug trade community
Digital ethnography of the Polish darknet drug trade communityDigital ethnography of the Polish darknet drug trade community
Digital ethnography of the Polish darknet drug trade community
 
Use of Ontologies in Chemical Kinetic Database CHEMCONNECT
Use of Ontologies in Chemical Kinetic Database CHEMCONNECTUse of Ontologies in Chemical Kinetic Database CHEMCONNECT
Use of Ontologies in Chemical Kinetic Database CHEMCONNECT
 
Open Source TCP or Netflow Log Server Using Graylog
Open Source TCP or Netflow Log Server Using GraylogOpen Source TCP or Netflow Log Server Using Graylog
Open Source TCP or Netflow Log Server Using Graylog
 
Team Cymru Community Services,Overview of all public services
Team Cymru Community Services,Overview of all public servicesTeam Cymru Community Services,Overview of all public services
Team Cymru Community Services,Overview of all public services
 
Girls Call Shimla 000XX00000 Provide Best And Top Girl Service And No1 in City
Girls Call Shimla 000XX00000 Provide Best And Top Girl Service And No1 in CityGirls Call Shimla 000XX00000 Provide Best And Top Girl Service And No1 in City
Girls Call Shimla 000XX00000 Provide Best And Top Girl Service And No1 in City
 
@Girls @Call Chennai 🛬 XXXXXXXXXX 🛬 available 24*7 cash payment book now pay ...
@Girls @Call Chennai 🛬 XXXXXXXXXX 🛬 available 24*7 cash payment book now pay ...@Girls @Call Chennai 🛬 XXXXXXXXXX 🛬 available 24*7 cash payment book now pay ...
@Girls @Call Chennai 🛬 XXXXXXXXXX 🛬 available 24*7 cash payment book now pay ...
 
Dewanstudio Project Portfolio 2023 show case
Dewanstudio Project Portfolio 2023 show caseDewanstudio Project Portfolio 2023 show case
Dewanstudio Project Portfolio 2023 show case
 
IPv6 Deployment Planning and Security Considerations
IPv6 Deployment Planning and Security ConsiderationsIPv6 Deployment Planning and Security Considerations
IPv6 Deployment Planning and Security Considerations
 
Top 50 Data Science Jobs on LinkedIn.docx
Top 50 Data Science Jobs on LinkedIn.docxTop 50 Data Science Jobs on LinkedIn.docx
Top 50 Data Science Jobs on LinkedIn.docx
 
Network Layer and its protocols mod .pptx
Network Layer and its protocols mod .pptxNetwork Layer and its protocols mod .pptx
Network Layer and its protocols mod .pptx
 
Best CSS Animation Libraries for Web Developers
Best CSS Animation Libraries for Web DevelopersBest CSS Animation Libraries for Web Developers
Best CSS Animation Libraries for Web Developers
 
How Salesforce Development in the UK is Driving Digital Transformation
How Salesforce Development in the UK is Driving Digital TransformationHow Salesforce Development in the UK is Driving Digital Transformation
How Salesforce Development in the UK is Driving Digital Transformation
 
University of California, Riverside diploma
University of California, Riverside diplomaUniversity of California, Riverside diploma
University of California, Riverside diploma
 
Ontology for the semantic enhancement, database definition and management and...
Ontology for the semantic enhancement, database definition and management and...Ontology for the semantic enhancement, database definition and management and...
Ontology for the semantic enhancement, database definition and management and...
 
My President is bulletproof t shirts hoodie
My President is bulletproof t shirts hoodieMy President is bulletproof t shirts hoodie
My President is bulletproof t shirts hoodie
 
Week 1 - Pendidikan Pancasila - Gr 1.docx
Week 1 - Pendidikan Pancasila - Gr 1.docxWeek 1 - Pendidikan Pancasila - Gr 1.docx
Week 1 - Pendidikan Pancasila - Gr 1.docx
 
Effective Tips for Creating the Best Rich Media Ads .pptx
Effective Tips for Creating the Best Rich Media Ads .pptxEffective Tips for Creating the Best Rich Media Ads .pptx
Effective Tips for Creating the Best Rich Media Ads .pptx
 
Saint Louis University diploma
Saint Louis University diplomaSaint Louis University diploma
Saint Louis University diploma
 
DASH, presented by Elly Tawhai at PacNOG 33
DASH, presented by Elly Tawhai at PacNOG 33DASH, presented by Elly Tawhai at PacNOG 33
DASH, presented by Elly Tawhai at PacNOG 33
 
Web development Platform Constraints.pptx
Web development Platform Constraints.pptxWeb development Platform Constraints.pptx
Web development Platform Constraints.pptx
 

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