1- Learn Flexbox & CSS Grid / Environment setup

May 19, 20200 likes368 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.

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
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
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

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
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

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

Learn CSS fundamentals really fast, online and free. FULL COURSE: http://inarocket.com Learn front end development fast, step-by-step and with ready-to-use code. IN THIS MODULE YOU'LL LEARN: - Any HTML element can be a flex container. Child elements of that container are considered flex items. - A flex container can be displayed as a block (display: flex) or inline (display: inline-flex). - By default, flex items width and height are defined by their content. READY-TO-USE CODE: http://inarocket.com/courses/css/css-flexbox-cssgrid/flexbox-container-items.php BEST BOOKS TO LEARN FLEXBOX & CSS GRID: - The New CSS Layout by A Book Apart. https://amzn.to/2ThK0f7 - Flexbox in CSS by O'Reilly Media. https://amzn.to/2Zfekeg - Grid Layout in CSS: Interface Layout for the Web by O'Reilly Media. https://amzn.to/36fmIMf - CSS Grid Layout: 5 Practical Projects by SitePoint. https://amzn.to/3bFWYd3

2- Learn Flexbox & CSS Grid / ContextIn a Rocket

Learn CSS fundamentals really fast, online and free. FULL COURSE: http://inarocket.com Learn front end development fast, step-by-step and with ready-to-use code. IN THIS MODULE YOU'LL LEARN: - We no longer talk about CSS 3 or 4. CSS has now more than 80 specifications that evolve independently. - Where to find all CSS specifications. - How to check maturity of specifications by status code. - Where to follow CSS current work. - Where to find Flexbox and CSS Grid specifications. - How to check Flexbox and CSS Grid browser support. READY-TO-USE CODE: http://inarocket.com/courses/css/css-flexbox-cssgrid/context.php BEST BOOKS TO LEARN FLEXBOX & CSS GRID: - The New CSS Layout by A Book Apart. https://amzn.to/2ThK0f7 - Flexbox in CSS by O'Reilly Media. https://amzn.to/2Zfekeg - Grid Layout in CSS: Interface Layout for the Web by O'Reilly Media. https://amzn.to/36fmIMf - CSS Grid Layout: 5 Practical Projects by SitePoint. https://amzn.to/3bFWYd3

Magento x codekit x sass x compass x skeleton responsive gridArush Sehgal

Agile CSS development with Compass and SassAndrea Verlicchi

The document provides an overview of Sass and Compass for agile CSS development. It discusses features of Sass like variables, nesting, mixins, extends and partials. It also covers how Compass, which is built on Sass, provides additional features like sprites, browser prefixes, gradients and animations through mixins. The presentation demonstrates how Sass and Compass can be used to write more maintainable and reusable CSS through these features and tools. It also provides instructions on installing and using Sass, Compass and configuring projects for development.

Intro to Flexbox - A Magical CSS PropertyAdam Soucie

Css PreprocessorsEd Moore

CSS preprocessors allow users to write CSS more efficiently using features like variables, nesting, mixins and functions. They compile down to valid CSS that can be used across all browsers. Preprocessors like Sass, LESS and Stylus add helpful abstractions to make CSS more modular, reusable and maintainable. Tools are available to compile preprocessors from the command line or with apps to integrate preprocessing into workflow. Future standards may incorporate useful features from preprocessors directly into CSS.

CSS Grid Changes Everything - Keynote at WebCamp Zagreb 2017Morten Rand-Hendriksen

CSS Grid is now live in all major browsers, and with it everything we know about web layouts changes! Imagine drawing a grid in the browser and placing content in one or any number of cells without having to change the HTML or source order. And imagine changing that grid on the fly using media queries or JavaScript while keeping the HTML markup clean and accessible. That’s what CSS Grid does, and that’s why you should be using it today. The CSS Grid Layout Module introduces a native CSS grid system, provided at the viewport level, that achieves what CSS frameworks and popular grid systems could only dream about: Responsive, flexible, pure CSS grid layouts, independent of document source order, that allow us to treat the browser as a true design and layout surface. In this talk you’ll get an intro to CSS Grid and learn how it changes pretty much everything when it comes to layouts on the web. Through examples, code snippets, and practical demos you’ll learn how to use CSS Grid in a theme for modern responsive layouts, and you’ll also learn how to handle older browsers without Grid support in a clean and straight-forward way. CSS Grid is here, and you can start using it today. This talk shows you how to do it right.

Progressive enhancement - Bridging the gap between CSS2 and CSS3Zohar Arad

The document discusses progressive enhancement and bridging the gap between CSS2 and CSS3 capabilities across browsers. It advocates using progressive enhancement to provide basic functionality and design across all browsers while enhancing the experience for browsers that support more advanced CSS features. Specific techniques are presented for implementing rounded corners, shadows, custom fonts and selectors in browsers with varying levels of CSS support.

6 css week12 2020 2021 for g10Osama Ghandour Geris

DocuOps & Asciidoctor in a JVM WorldSchalk Cronjé

Azure from scratch part 5 By Girish KalamatiGirish Kalamati

Fasten RWD Development with SassSven Wolfermann

Docker for developers on mac and windowsDocker, Inc.

The whole Docker ecosystem exists today because of every single developer who found ways of using Docker to improve how they build software; whether streamlining production deployments, speeding up continuous integration systems or standing up an application on your laptop to hack on. In this talk we want to take a step back and look at where Docker sits today from the software developers point of view - and then jump ahead and talk about where it might go in the future. In this talk, we’ll discuss: * Making Docker an everyday part of the developing software on the desktop, with Docker for Windows and Docker for Mac * Docker Compose, and the future of describing applications as code * How Docker provides the best tools for developing applications destined to run on any Kubernetes cluster This session should be of interest to anyone who writes software; from people who want to hack on a few personal projects, to polyglot open source programmers and to professional developers working in tightly controlled environments. Everyone deserves a better developer experience.

ITB2019 Containerizing ContentBox CMS - Gavin PickinOrtus Solutions, Corp

In this session we will be learning how to start using ContentBox, and from the beginning, setup your site to be containerized and deployed with Continuous Integration to a Cloud Provider on a Docker Swarm. You will learn about Ortus Solution's ( Docker Partner ) docker images for CommandBox and ContentBox, and how to build your site, dockerize, and then deploy (using only free tools), to the cloud of your choice. If the live demo gods are on our side, I will deploy a new site to Digital Ocean at the end of this session.

Building a production-ready, fully-scalable Docker Swarm using Terraform & Pa...Outlyer

Pp docker-swarm-doxlon-28th-march-2017Bobby DeVeaux, DevOps Consultant

Not Just a Pretty Face: How to design and build a cross-CMS CSS frameworkcrystalenka

A presentation from J and Beyond 2018 in Cologne, Germany. In this session, Crystal of Lucid Fox will walk you through the steps she took to build Akeeba FEF, a CSS framework that Akeeba now uses to ensure their extensions are consistent with their brand across Joomla, WordPress, and standalone PHP software. You’ll learn about creating a design system, writing CSS in a way that’s easily maintained and upgraded, and tips on implementing this system across multiple platforms.

Hitchhiker's guide to the front end development정윤 김

Using a CSS FrameworkGareth Saunders

The document discusses using CSS frameworks to speed up web development by avoiding having to repeatedly write CSS resets and layout code. It describes the Blueprint CSS framework, including how it provides a grid system, typography styles, and other components out of the box. The author explains how using a framework like Blueprint CSS can save significant time over building sites from scratch each time.

Running Docker in Development & Production (#ndcoslo 2015)Ben Hall

The document discusses running Docker in development and production. It covers: - Using Docker containers to run individual services like Elasticsearch or web applications - Creating Dockerfiles to build custom images - Linking containers together and using environment variables for service discovery - Scaling with Docker Compose, load balancing with Nginx, and service discovery with Consul - Clustering containers together using Docker Swarm for high availability

Docker New York Meetup May 2015 - The Docker Orchestration Ecosystem on Azure Patrick Chanezon

Docker Inc. provides products and services for managing containers. The Docker ecosystem includes open source tools for building, shipping, and running applications packaged into containers. Key components include Docker Engine for building containers, Docker Hub for sharing container images, and orchestration tools like Docker Swarm and Kubernetes for deploying containers across multiple hosts. Many companies are developing technologies that work with Docker to provide additional container management capabilities.

It's a Mod World - A Practical Guide to Rocking ModernizrMichael Enslow

Modernizr is a small JavaScript library that detects whether browsers support HTML5 and CSS3 features. It allows developers to write progressive enhancement code that provides a baseline experience for all browsers while enhancing functionality for modern browsers. Modernizr tests over 20 features and adds corresponding classes to the HTML element. This allows developers to target styles and scripts based on a browser's capabilities. It is a useful tool for building websites that work across a wide range of browsers without needing to sniff browser versions.

Docker, the Future of DevOpsandersjanmyr

What is Docker and why should you care? A Docker container is like a lightweight Virtual Machine. It gives you the benefits of a virtual machine, isolation of your application, without the drawbacks, having to ship an entire operating system with your application, slow startup time, and difficult interaction with the host. In this presentation you will learn why Docker and containerization is the future of DevOps and how to use it efficiently. You will learn how to build, run, and link containers, and what volumes are and what they are used for. You will also learn about some of the many orchestration solutions that exists for managing a cluster of containers, both locally and in the cloud.

Docker, Kubernetes, and Google CloudSamuel Chow

Building performance auf der Developer Conference HamburgOliver Ochs

Die Geschwindigkeit einer Website ist in entscheidendem Maße für den Umsatz mitverantwortlich. Ein wesentlicher Faktor hierbei ist die Zeit für das Laden und Rendern von Seiten im Browser. Steve Souders zeigte beispielsweise, dass ca. 80% der Ladezeit einer Seite im Client verbraucht werden. Im ersten Teil des Vortrags stellen wir die wichtigsten Optimierungsmaßnahmen vor. Für eine dauerhafte, nachhaltige Performance-Optimierung müssen die Maßnahmen automatisiert bzw. in den Build-Prozess integriert werden. Im zweiten Teil des Vortrags zeigen wir einen beispielhaften Build-Prozess für Java-Webanwendungen, der Teile der Optimierungsmaßnahmen durchführt. Andere Teile müssen durch eine geeignete Architektur sichergestellt werden, wofür wir ebenfalls Ideen liefern

Docker Seattle Meetup April 2015 - The Docker Orchestration Ecosystem on AzurePatrick Chanezon

This document discusses the Docker ecosystem and provides an overview of containerization technologies. It covers the history of containerization from mainframes in the 1960s to Docker in 2013. It discusses Docker's success due to cloud adoption, portability, and hybrid environments. It outlines the Docker ecosystem including Docker Engine, Docker Hub, Docker Machine, Docker Compose, Docker Swarm, and Kitematic. It also discusses companies in the Docker ecosystem like Docker Inc., CoreOS, Deis, Kubernetes, Cloud Foundry/IBM Bluemix, and others.

Containerizing ContentBox CMSGavin Pickin

Continuous Delivery com Docker, OpenShift e JenkinsBruno Padilha

The document discusses continuous delivery using Docker, OpenShift and Jenkins. It provides an overview of Leroy Merlin, a French home improvement retailer operating in Brazil. It describes the architecture of a microservices-based mobile project at Leroy Merlin including use of a monorepo. It also covers how the project is set up locally using Docker Compose as well as the CI/CD pipeline and use of Jenkins.

17- Learn CSS Fundamentals / UnitsIn a Rocket

This document discusses different units used in CSS including absolute and relative units. Absolute units like pixels and points set fixed sizes, while relative units scale with parent elements. Examples show how percentages, ems, rems, viewport units like vw and vh, and font-based units like vmin and vmax scale elements relative to different contexts. The document recommends choosing relative units when elements need to scale with viewport changes. It also promotes understanding units to build flexible and responsive designs.

16- Learn CSS Fundamentals / BackgroundIn a Rocket

Learn CSS fundamentals really fast, online and free. FULL COURSE: http://inarocket.com Learn front end development fast, step-by-step and with ready-to-use code. IN THIS MODULE YOU'LL LEARN: - How to set a background using CSS. - How to apply different background options: background-color, background-position, background-image, background-repeat and background-attachment. - How to create linear and radial gradients. - Tools: examine background and accessibility information, CSS gradients gallery, etc. READY-TO-USE CODE: https://inarocket.com/courses/css/css-fundamentals/background.php REFERENCES: - The background CSS property by MDN. https://developer.mozilla.org/en-US/docs/Web/CSS/background - Chrome Developer Tools: Contrast ratio in the Color Picker. https://developers.google.com/web/updates/2018/01/devtools#contrast - Enhanced recommended contrast ratio (AAA) by W3C. https://www.w3.org/TR/WCAG21/#contrast-enhanced - Minimum recommended contrast ratio (AA) by W3C. https://www.w3.org/TR/WCAG21/#contrast-minimum - Gradient Magic: 28 collections and over 1558 unique CSS gradients. https://www.gradientmagic.com/ - WebGradients: free collection of 180 linear gradients. https://webgradients.com/ BEST BOOKS TO LEARN CSS: - CSS: The Definitive Guide: Visual Presentation for the Web by O'Reilly Media. https://amzn.to/2VOWHQT - HTML and CSS: Design and Build Websites by John Wiley & Sons. https://amzn.to/2Ir5y3i - CSS: The Missing Manual by O'Reilly Media. https://amzn.to/2ImdyTf - CSS Visual Dictionary by Independently published. https://amzn.to/2xgwHUh

More Related Content

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

6 css week12 2020 2021 for g10Osama Ghandour Geris

DocuOps & Asciidoctor in a JVM WorldSchalk Cronjé

Azure from scratch part 5 By Girish KalamatiGirish Kalamati

Fasten RWD Development with SassSven Wolfermann

Docker for developers on mac and windowsDocker, Inc.

ITB2019 Containerizing ContentBox CMS - Gavin PickinOrtus Solutions, Corp

Building a production-ready, fully-scalable Docker Swarm using Terraform & Pa...Outlyer

Pp docker-swarm-doxlon-28th-march-2017Bobby DeVeaux, DevOps Consultant

Not Just a Pretty Face: How to design and build a cross-CMS CSS frameworkcrystalenka

Hitchhiker's guide to the front end development정윤 김

Using a CSS FrameworkGareth Saunders

Running Docker in Development & Production (#ndcoslo 2015)Ben Hall

Docker New York Meetup May 2015 - The Docker Orchestration Ecosystem on Azure Patrick Chanezon

It's a Mod World - A Practical Guide to Rocking ModernizrMichael Enslow

Docker, the Future of DevOpsandersjanmyr

Docker, Kubernetes, and Google CloudSamuel Chow

Building performance auf der Developer Conference HamburgOliver Ochs

Docker Seattle Meetup April 2015 - The Docker Orchestration Ecosystem on AzurePatrick Chanezon

Containerizing ContentBox CMSGavin Pickin

Continuous Delivery com Docker, OpenShift e JenkinsBruno Padilha

6 css week12 2020 2021 for g10Osama Ghandour Geris

DocuOps & Asciidoctor in a JVM WorldSchalk Cronjé

Azure from scratch part 5 By Girish KalamatiGirish Kalamati

Fasten RWD Development with SassSven Wolfermann

Docker for developers on mac and windowsDocker, Inc.

ITB2019 Containerizing ContentBox CMS - Gavin PickinOrtus Solutions, Corp

Building a production-ready, fully-scalable Docker Swarm using Terraform & Pa...Outlyer

Pp docker-swarm-doxlon-28th-march-2017Bobby DeVeaux, DevOps Consultant

Not Just a Pretty Face: How to design and build a cross-CMS CSS frameworkcrystalenka

Hitchhiker's guide to the front end development정윤 김

Using a CSS FrameworkGareth Saunders

Running Docker in Development & Production (#ndcoslo 2015)Ben Hall

Docker New York Meetup May 2015 - The Docker Orchestration Ecosystem on Azure Patrick Chanezon

It's a Mod World - A Practical Guide to Rocking ModernizrMichael Enslow

Docker, the Future of DevOpsandersjanmyr

Docker, Kubernetes, and Google CloudSamuel Chow

Building performance auf der Developer Conference HamburgOliver Ochs

Docker Seattle Meetup April 2015 - The Docker Orchestration Ecosystem on AzurePatrick Chanezon

Containerizing ContentBox CMSGavin Pickin

Continuous Delivery com Docker, OpenShift e JenkinsBruno Padilha

More from In a Rocket (14)

17- Learn CSS Fundamentals / UnitsIn a Rocket

16- Learn CSS Fundamentals / BackgroundIn a Rocket

Learn CSS fundamentals really fast, online and free. FULL COURSE: http://inarocket.com Learn front end development fast, step-by-step and with ready-to-use code. IN THIS MODULE YOU'LL LEARN: - How to set a background using CSS. - How to apply different background options: background-color, background-position, background-image, background-repeat and background-attachment. - How to create linear and radial gradients. - Tools: examine background and accessibility information, CSS gradients gallery, etc. READY-TO-USE CODE: https://inarocket.com/courses/css/css-fundamentals/background.php REFERENCES: - The background CSS property by MDN. https://developer.mozilla.org/en-US/docs/Web/CSS/background - Chrome Developer Tools: Contrast ratio in the Color Picker. https://developers.google.com/web/updates/2018/01/devtools#contrast - Enhanced recommended contrast ratio (AAA) by W3C. https://www.w3.org/TR/WCAG21/#contrast-enhanced - Minimum recommended contrast ratio (AA) by W3C. https://www.w3.org/TR/WCAG21/#contrast-minimum - Gradient Magic: 28 collections and over 1558 unique CSS gradients. https://www.gradientmagic.com/ - WebGradients: free collection of 180 linear gradients. https://webgradients.com/ BEST BOOKS TO LEARN CSS: - CSS: The Definitive Guide: Visual Presentation for the Web by O'Reilly Media. https://amzn.to/2VOWHQT - HTML and CSS: Design and Build Websites by John Wiley & Sons. https://amzn.to/2Ir5y3i - CSS: The Missing Manual by O'Reilly Media. https://amzn.to/2ImdyTf - CSS Visual Dictionary by Independently published. https://amzn.to/2xgwHUh

15- Learn CSS Fundamentals / ColorIn a Rocket

Learn CSS fundamentals really fast, online and free. FULL COURSE: http://inarocket.com Learn front end development fast, step-by-step and with ready-to-use code. IN THIS MODULE YOU'LL LEARN: - How to use the color property to set the foreground color of an element's text content, and its decorations. - Methods to apply colors in CSS: named colors, HEX, RGB/RGBA and HSL/HSLA. - Color tools: CSS Peeper, color converter, material design palette, etc. READY-TO-USE CODE: https://inarocket.com/courses/css/css-fundamentals/color.php REFERENCES: - The color CSS property by MDN. https://developer.mozilla.org/en-US/docs/Web/CSS/color - Game: What the Hex? http://yizzle.com/whatthehex/ - CSS Peeper: Inspect styles in a simple and well-organized way. https://csspeeper.com/ - RapidTables Color Conversion. https://www.rapidtables.com/convert/color/index.html - Impalette: Scan images for dominant pantone colors. https://www.impalette.com/ - Material Design Palette. https://www.materialpalette.com/ - Brands in colours: Brands colour reference. https://loriskumo.github.io/Brands-In-Colours/ - BrandColors: Collection of official brand color codes. https://brandcolors.net/ BEST BOOKS TO LEARN CSS: - CSS: The Definitive Guide: Visual Presentation for the Web by O'Reilly Media. https://amzn.to/2VOWHQT - HTML and CSS: Design and Build Websites by John Wiley & Sons. https://amzn.to/2Ir5y3i - CSS: The Missing Manual by O'Reilly Media. https://amzn.to/2ImdyTf - CSS Visual Dictionary by Independently published. https://amzn.to/2xgwHUh

14- Learn CSS Fundamentals / InheritanceIn a Rocket

Learn CSS fundamentals really fast, online and free. FULL COURSE: http://inarocket.com Learn front end development fast, step-by-step and with ready-to-use code. IN THIS MODULE YOU'LL LEARN: - How some properties on a selector are inherited by all the children of that selector. - List of properties that inherit. - How to override inherited values and prevent inheritance in CSS. - How to reset a property to its inherited or initial value. READY-TO-USE CODE: https://inarocket.com/courses/css/css-fundamentals/inheritance.php BEST BOOKS TO LEARN CSS: - CSS: The Definitive Guide: Visual Presentation for the Web by O'Reilly Media. https://amzn.to/2VOWHQT - HTML and CSS: Design and Build Websites by John Wiley & Sons. https://amzn.to/2Ir5y3i - CSS: The Missing Manual by O'Reilly Media. https://amzn.to/2ImdyTf - CSS Visual Dictionary by Independently published. https://amzn.to/2xgwHUh

13- Learn CSS Fundamentals / SpecificityIn a Rocket

Learn CSS fundamentals really fast, online and free. FULL COURSE: http://inarocket.com Learn front end development fast, step-by-step and with ready-to-use code. IN THIS MODULE YOU'LL LEARN: - How specificity works for different kind of selectors. - How to create selectors avoiding specificity issues and conflicts. READY-TO-USE CODE: https://inarocket.com/courses/css/css-fundamentals/specificity.php BEST BOOKS TO LEARN CSS: - CSS: The Definitive Guide: Visual Presentation for the Web by O'Reilly Media. https://amzn.to/2VOWHQT - HTML and CSS: Design and Build Websites by John Wiley & Sons. https://amzn.to/2Ir5y3i - CSS: The Missing Manual by O'Reilly Media. https://amzn.to/2ImdyTf - CSS Visual Dictionary by Independently published. https://amzn.to/2xgwHUh

12- Learn CSS Fundamentals / Mix & groupIn a Rocket

Learn CSS fundamentals really fast, online and free. FULL COURSE: http://inarocket.com Learn front end development fast, step-by-step and with ready-to-use code. IN THIS MODULE YOU'LL LEARN: - How to mix selectors (eg. Combine classes and IDs). - How to group selectors as a best practice to get a much optimized CSS. READY-TO-USE CODE: http://localhost/courses/css/css-fundamentals/mix-group.php BEST BOOKS TO LEARN CSS: - CSS: The Definitive Guide: Visual Presentation for the Web by O'Reilly Media. https://amzn.to/2VOWHQT - HTML and CSS: Design and Build Websites by John Wiley & Sons. https://amzn.to/2Ir5y3i - CSS: The Missing Manual by O'Reilly Media. https://amzn.to/2ImdyTf - CSS Visual Dictionary by Independently published. https://amzn.to/2xgwHUh

11- Learn CSS Fundamentals / CombinatorsIn a Rocket

Learn CSS fundamentals really fast, online and free. FULL COURSE: http://inarocket.com Learn front end development fast, step-by-step and with ready-to-use code. IN THIS MODULE YOU'LL LEARN: - Different combinator selectors that can be used in CSS. - How to use descendant, child and siblings combinators. READY-TO-USE CODE: https://inarocket.com/courses/css/css-fundamentals/combinators.php BEST BOOKS TO LEARN CSS: - CSS: The Definitive Guide: Visual Presentation for the Web by O'Reilly Media. https://amzn.to/2VOWHQT - HTML and CSS: Design and Build Websites by John Wiley & Sons. https://amzn.to/2Ir5y3i - CSS: The Missing Manual by O'Reilly Media. https://amzn.to/2ImdyTf - CSS Visual Dictionary by Independently published. https://amzn.to/2xgwHUh

10- Learn CSS Fundamentals / Pseudo-elementsIn a Rocket

Learn CSS fundamentals really fast, online and free. FULL COURSE: http://inarocket.com Learn front end development fast, step-by-step and with ready-to-use code. IN THIS MODULE YOU'LL LEARN: - Pseudo-elements as a way to refer to content that does not exist in the source document. - How to style the first letter or line of a text. - How to use CSS to generate content before/after an element’s content. READY-TO-USE CODE: https://inarocket.com/courses/css/css-fundamentals/pseudo-elements.php BEST BOOKS TO LEARN CSS: - CSS: The Definitive Guide: Visual Presentation for the Web by O'Reilly Media. https://amzn.to/2VOWHQT - HTML and CSS: Design and Build Websites by John Wiley & Sons. https://amzn.to/2Ir5y3i - CSS: The Missing Manual by O'Reilly Media. https://amzn.to/2ImdyTf - CSS Visual Dictionary by Independently published. https://amzn.to/2xgwHUh

9- Learn CSS Fundamentals / Pseudo-classesIn a Rocket

This document provides information about CSS pseudo-classes. It defines several types of pseudo-classes including dynamic, structural, and others. Dynamic pseudo-classes like :hover and :active select elements when a user interacts with them. Structural pseudo-classes select elements based on their position in a document tree, such as :first-child to select the first child element. The document provides examples of how to use different pseudo-class selectors in CSS code to style elements.

8- Learn CSS Fundamentals / Attribute selectorsIn a Rocket

Learn CSS fundamentals really fast, online and free. FULL COURSE: http://inarocket.com Learn front end development fast, step-by-step and with ready-to-use code. IN THIS MODULE YOU'LL LEARN: - How to use attribute presence and value selectors. - How to apply substring matching attribute selectors. READY-TO-USE CODE: http://inarocket.com/courses/css/css-fundamentals/selectors-attribute.php BEST BOOKS TO LEARN CSS: - CSS: The Definitive Guide: Visual Presentation for the Web by O'Reilly Media. https://amzn.to/2VOWHQT - HTML and CSS: Design and Build Websites by John Wiley & Sons. https://amzn.to/2Ir5y3i - CSS: The Missing Manual by O'Reilly Media. https://amzn.to/2ImdyTf - CSS Visual Dictionary by Independently published. https://amzn.to/2xgwHUh

2- Learn HTML Fundamentals / Text FormattingIn a Rocket

Learn HTML5 fundamentals really fast, online and free. FULL COURSE: http://inarocket.com Learn front end development fast, step-by-step and with ready-to-use code. IN THIS MODULE YOU'LL LEARN: - How to structure your content with headers. - How to organize your ideas with paragraphs. - How to force spaces and preformat text. - How to format quotes with blockquote. - How to tag relevant content with mark. - How to create ordered, unordered and description lists. - How to show/hide additional content with details. - How to document your code with comments. - How to display reserved and invisible characters with HTML entities.

1- Learn HTML Fundamentals / Start in 5 MinutesIn a Rocket

Learn SUIT: CSS Naming ConventionIn a Rocket

Learn BEM: CSS Naming ConventionIn a Rocket

17- Learn CSS Fundamentals / UnitsIn a Rocket

16- Learn CSS Fundamentals / BackgroundIn a Rocket

15- Learn CSS Fundamentals / ColorIn a Rocket

14- Learn CSS Fundamentals / InheritanceIn a Rocket

13- Learn CSS Fundamentals / SpecificityIn a Rocket

12- Learn CSS Fundamentals / Mix & groupIn a Rocket

11- Learn CSS Fundamentals / CombinatorsIn a Rocket

10- Learn CSS Fundamentals / Pseudo-elementsIn a Rocket

9- Learn CSS Fundamentals / Pseudo-classesIn a Rocket

8- Learn CSS Fundamentals / Attribute selectorsIn a Rocket

2- Learn HTML Fundamentals / Text FormattingIn a Rocket

1- Learn HTML Fundamentals / Start in 5 MinutesIn a Rocket

Learn SUIT: CSS Naming ConventionIn a Rocket

Learn BEM: CSS Naming ConventionIn a Rocket

Recently uploaded (17)

ARTIFICIAL INTELLIGENCE.pptx2565567765676areebaimtiazpmas

Cloud VPS Provider in India: The Best Hosting Solution for Your BusinessDanaJohnson510230

Transport Conjjjjjjjjjjjjjjjjjjjjjjjsulting by Slidesgo.pptxssuser80a7e81

AI REPLACING HUMANS /FATHER OF AI/BIRTH OF AIskdav34

Networking concepts from zero to hero that covers the security aspectsamansinght675

How to Make Money as a Cam Model – Tips, Tools & Real TalkCam Sites Expert

Want to turn your charm, confidence, and camera into a real source of income? This presentation reveals everything you need to know about making money as a cam model — whether you're just starting out or looking to boost your earnings. From choosing the right platform, building your fanbase, and setting up your cam space, to marketing yourself and creating passive income with clips, this guide covers it all. I’ll also share real-world insights from my experience on CamsRating.com. No BS — just proven tips, smart tools, and sexy strategies to get paid doing what you love.

Presentation About The Buttons | Selma SALTIKSELMA SALTIK

all Practical Project LAST summary note.docxseidjemal94

5 Reasons cheap WordPress hosting is costing you more | Reversed OutReversed Out Creative

basic to advance network security conceptsamansinght675

Essential Tech Stack for Effective Shopify Dropshipping Integration.pdfCartCoders

Networking_Essentials_version_3.0_-_Module_7.pptxelestirmen

10 Latest Technologies and Their Benefits to End.pptxEphraimOOghodero

OSI_Security_Architecture Computer Science.pptxfaizanaseem873

原版西班牙马拉加大学毕业证(UMA毕业证书)如何办理Taqyea

文凭(UMA毕业证书)马拉加大学毕业证成绩单制作案例【q微1954292140】马拉加大学offer/学位证、留信官方学历认证（永久存档真实可查）采用学校原版纸张、特殊工艺完全按照原版一比一制作【q微1954292140】Buy Universidad de Málaga Diploma购买美国毕业证，购买英国毕业证，购买澳洲毕业证，购买加拿大毕业证，以及德国毕业证，购买法国毕业证（q微1954292140）购买荷兰毕业证、购买瑞士毕业证、购买日本毕业证、购买韩国毕业证、购买新西兰毕业证、购买新加坡毕业证、购买西班牙毕业证、购买马来西亚毕业证等。包括了本科毕业证，硕士毕业证。【办理马拉加大学成绩单Buy Universidad de Málaga Transcripts】购买日韩成绩单、英国大学成绩单、美国大学成绩单、澳洲大学成绩单、加拿大大学成绩单（q微1954292140）新加坡大学成绩单、新西兰大学成绩单、爱尔兰成绩单、西班牙成绩单、德国成绩单。成绩单的意义主要体现在证明学习能力、评估学术背景、展示综合素质、提高录取率，以及是作为留信认证申请材料的一部分。马拉加大学成绩单能够体现您的的学习能力，包括马拉加大学课程成绩、专业能力、研究能力。（q微1954292140）具体来说，成绩报告单通常包含学生的学习技能与习惯、各科成绩以及老师评语等部分，因此，成绩单不仅是学生学术能力的证明，也是评估学生是否适合某个教育项目的重要依据！ Buy Universidad de Málaga Diploma《正式成绩单论文没过》有文凭却得不到认证。又该怎么办？？？西班牙毕业证购买，西班牙文凭购买，【q微1954292140】西班牙文凭购买，西班牙文凭定制，西班牙文凭补办。专业在线定制西班牙大学文凭，定做西班牙本科文凭，【q微1954292140】复制西班牙Universidad de Málaga completion letter。在线快速补办西班牙本科毕业证、硕士文凭证书，购买西班牙学位证、马拉加大学Offer，西班牙大学文凭在线购买。特殊原因导致无法毕业，也可以联系我们帮您办理相关材料：１：在马拉加大学挂科了，不想读了，成绩不理想怎么办？ 2：打算回国了，找工作的时候，需要提供认证《UMA成绩单购买办理马拉加大学毕业证书范本》购买日韩毕业证、英国大学毕业证、美国大学毕业证、澳洲大学毕业证、加拿大大学毕业证（q微1954292140）新加坡大学毕业证、新西兰大学毕业证、爱尔兰毕业证、西班牙毕业证、德国毕业证，回国证明，留信网认证，留信认证办理，学历认证。从而完成就业。马拉加大学毕业证办理，马拉加大学文凭办理，马拉加大学成绩单办理和真实留信认证、留服认证、马拉加大学学历认证。学院文凭定制，马拉加大学原版文凭补办，成绩单详解细节，扫描件文凭定做，100%文凭复刻。主营项目： 1、真实教育部国外学历学位认证《西班牙毕业文凭证书快速办理马拉加大学学位证和毕业证的区别》【q微1954292140】《论文没过马拉加大学正式成绩单》，教育部存档，教育部留服网站100%可查. 2、办理UMA毕业证，改成绩单《UMA毕业证明办理马拉加大学学历认证失败怎么办》【Q/WeChat：1954292140】Buy Universidad de Málaga Certificates《正式成绩单论文没过》，马拉加大学Offer、在读证明、学生卡、信封、证明信等全套材料，从防伪到印刷，从水印到钢印烫金，高精仿度跟学校原版100%相同. 3、真实使馆认证（即留学人员回国证明），使馆存档可通过大使馆查询确认. 4、留信网认证，国家专业人才认证中心颁发入库证书，留信网存档可查. 西班牙马拉加大学毕业证(UMA毕业证书）UMA文凭【q微1954292140】高仿真还原西班牙文凭证书和外壳，定制西班牙马拉加大学成绩单和信封。学历认证失败怎么办UMA毕业证【q微1954292140】毕业证工艺详解马拉加大学offer/学位证文凭一模一样、留信官方学历认证（永久存档真实可查）采用学校原版纸张、特殊工艺完全按照原版一比一制作。帮你解决马拉加大学学历学位认证难题。帮您解决在西班牙马拉加大学未毕业难题（Universidad de Málaga）文凭购买、毕业证购买、大学文凭购买、大学毕业证购买、买文凭、日韩文凭、英国大学文凭、美国大学文凭、澳洲大学文凭、加拿大大学文凭（q微1954292140）新加坡大学文凭、新西兰大学文凭、爱尔兰文凭、西班牙文凭、德国文凭、教育部认证，买毕业证，毕业证购买，买大学文凭，【q微1954292140】学位证1:1完美还原海外各大学毕业材料上的工艺：水印，阴影底纹，钢印LOGO烫金烫银，LOGO烫金烫银复合重叠。文字图案浮雕、激光镭射、紫外荧光、温感、复印防伪等防伪工艺。《马拉加大学2025年新版毕业证书西班牙毕业证书办理UMA录取通知书》

Frontier Unlimited Internet Setup Step-by-Step Guide.pdfInternet Bundle Now

HPC_Course_Presentation_No_Images included.pptxnaziaahmadnm

ARTIFICIAL INTELLIGENCE.pptx2565567765676areebaimtiazpmas

Cloud VPS Provider in India: The Best Hosting Solution for Your BusinessDanaJohnson510230

Transport Conjjjjjjjjjjjjjjjjjjjjjjjsulting by Slidesgo.pptxssuser80a7e81

AI REPLACING HUMANS /FATHER OF AI/BIRTH OF AIskdav34

Networking concepts from zero to hero that covers the security aspectsamansinght675

How to Make Money as a Cam Model – Tips, Tools & Real TalkCam Sites Expert

Presentation About The Buttons | Selma SALTIKSELMA SALTIK

all Practical Project LAST summary note.docxseidjemal94

5 Reasons cheap WordPress hosting is costing you more | Reversed OutReversed Out Creative

basic to advance network security conceptsamansinght675

Essential Tech Stack for Effective Shopify Dropshipping Integration.pdfCartCoders

Networking_Essentials_version_3.0_-_Module_7.pptxelestirmen

10 Latest Technologies and Their Benefits to End.pptxEphraimOOghodero

OSI_Security_Architecture Computer Science.pptxfaizanaseem873

原版西班牙马拉加大学毕业证(UMA毕业证书)如何办理Taqyea

Frontier Unlimited Internet Setup Step-by-Step Guide.pdfInternet Bundle Now

HPC_Course_Presentation_No_Images included.pptxnaziaahmadnm

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

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

1- Learn Flexbox & CSS Grid / Environment setup

Recommended

More Related Content

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

More from In a Rocket (14)

Recently uploaded (17)

1- Learn Flexbox & CSS Grid / Environment setup