1- Learn Flexbox & CSS Grid / Environment setup
0 likes370 views
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.
![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](https://image.slidesharecdn.com/flexbox-cssgrid-environment-setup-200519072302/85/1-Learn-Flexbox-CSS-Grid-Environment-setup-16-320.jpg)
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