The document discusses setting up a development environment for learning CSS Flexbox and Grid layouts. It recommends using Visual Studio Code as the text editor and Google Chrome as the browser, which both have tools for inspecting Flexbox and Grid layouts. It provides instructions for installing all required software on Windows using Chocolatey or on MacOS using Homebrew, including downloading Chrome, Firefox, and VS Code.

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

10. in a
ROCKET
INSTALLATION
~ ~ ~

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