CSS Grid Crash Course 2022 - Best Webhosting

ULTRAFAST, CHEAP, SCALABLE AND RELIABLE! WE STRONGLY RECOMMEND ACCU WEB HOSTING COMPANY

Watch Web Development Traversy Media Video: CSS Grid Crash Course 2022.
This crash course will teach you all of the fundamentals of CSS Grid

⭐ Sponsor: InMotion Hosting!
https://bit.ly/35rBjYU

💻 Code:
https://github.com/bradtraversy/grid-crash

👇 Website & Courses:
https://traversymedia.com

💖 Show Support
Patreon: https://www.patreon.com/traversymedia
PayPal: https://paypal.me/traversymedia

👇 Follow Me On Social Media:
Twitter: https://twitter.com/traversymedia
Instagram: https://www.instagram.com/traversymedia
Linkedin: https://www.linkedin.com/in/bradtraversy

Timestamps:
0:00 - Intro
0:50 - Sponsor
1:28 - Slides
4:29 - HTML & Base CSS
7:28 - Creating a Grid
7:53 - grid-template-columns
9:16 - repeat()
9:32 - Gap Spacing
10:17 - Row Height
10:55 - grid-auto-rows
11:15 - minmax()
11:45 - grid-template-rows
13:19 - Grid Browser Tools
14:03 - Align & Justify
17:08 - Grid Column Span
18:46 - Grid Row Span
20:28 - Responsiveness
23:03 - Grid Template Areas
32:22 - Testimonials Grid Project Intro
33:40 - Testimonials HTML
37:18 - Base & Card Styling
45:40 - Grid Styling
49:52 - Media Query & Span Resets

Published: Thursday, July 14, 2022 9:21 PM
Category: Web Development Traversy Media

30 Views

Related Videos

Popular
CSS Grid Layout Crash Course

by Best Webhosting Added 6 years ago 105 Views / 0 Likes

In this video we will look at the new CSS Grid layout and how to create grid based layouts and alignments. We will look at properties for containers and items. CODE: Code for this tutorial http://www.traversymedia.com/downloads/cssgrid.zip BUILD A CSS GRID WEBSITE: https://www.youtube.com/watch?v=moBhzSC455o BECOME A PATRON: Show support & get perks! http://www.patreon.com/traversymedia ONE TIME DONATIONS: http://www.paypal.me/traversymedia FOLLOW TRA
Flexbox Crash Course 2022

by Best Webhosting Added 3 years ago 37 Views / 0 Likes

Flexbox is used for space distribution, positioning and alignment in CSS. 💻 Project Code: https://codepen.io/bradtraversy/pen/JjrzzOW 👇 Website & Courses: https://traversymedia.com 💖 Show Support Patreon: https://www.patreon.com/traversymedia PayPal: https://paypal.me/traversymedia 👇 Follow Me On Social Media: Twitter: https://twitter.com/traversymedia Instagram: https://www.instagram.com/traversymedia Linkedin: https://www.linkedin.com/in/bradtravers
MongoDB Crash Course 2022

by Best Webhosting Added 3 years ago 30 Views / 0 Likes

In this video, I will introduce you to MongoDB Atlas, the multi-cloud application data platform from MongoDB, and walk you through how to set up and connect to the database, loading sample data and performing CRUD operations. This video will provide you with a basic understanding and way to get started with MongoDB Atlas, but you will learn that there are a variety of other features and ways to interact with your data available, providing you the flex
Popular
Pure CSS Responsive Masonry Grid Layouts | Grid Like Pinterest with Html CSS only - No jQuery

by Best Webhosting Added 6 years ago 122 Views / 0 Likes

Please LIKE our Facebook page for daily updates... https://www.facebook.com/Online-Tutorial-Html-Css-JQuery-Photoshop-1807958766120070/ Track: ElementD & Chordinatez - Radiate (feat. Mees Van Den Berg) [NCS Release] Music provided by NoCopyrightSounds. Watch: https://youtu.be/KPdPJr20loE Free Download / Stream: http://ncs.io/RadiateYO
Popular
Curso de CSS GRID: 1.- Primeros pasos y Creando Nuestra Primera Grid

by Best Webhosting Added 6 years ago 125 Views / 0 Likes

En este primer capitulo vamos a dar nuestros primeros pasos y crearemos una grid desde cero con este nuevo sistema. • Blog de diseño web: http://www.falconmasters.com •️ Curso Completo de Diseño Web: https://goo.gl/XDC8vU •️ Curso Completo de PHP: http://tutorialdephp.com/ •️ Curso de Bootstrap 4: https://goo.gl/utQ1GF --- • Código HTML del video: https://github.com/falconmasters/curso-css-grid/blob/master/grid.html • Código CSS del video: https://git
Popular
Responsive Masonry layouts Using CSS Grid | CSS3 Grid

by Best Webhosting Added 6 years ago 108 Views / 0 Likes

Enroll My Course : Next Level CSS Animation and Hover Effects https://www.udemy.com/course/css-hover-animation-effects-from-beginners-to-expert/?referralCode=90A9FFA7990A4491CF8D ------------------ Join Our Channel Membership And Get Source Code Everyday Join : https://www.youtube.com/channel/UCbwXnUipZsLfUckBPsC7Jog/join ------------------ All Icon Used in This Video From Flaticon and Content From https://www.who.int/emergencies/diseases/novel-corona
Popular
Curso de CSS GRID: 8.- Grid Implícita

by Best Webhosting Added 6 years ago 104 Views / 0 Likes

En este capitulo vamos aprender como cambiar el tamaño de los elementos de la Grid Implícita y como cambiar el flujo de la grid. • Blog de diseño web: http://www.falconmasters.com •️ Curso Completo de Diseño Web: https://goo.gl/XDC8vU •️ Curso Completo de PHP: http://tutorialdephp.com/ •️ Curso de Bootstrap 4: https://goo.gl/utQ1GF --- • Código HTML del video: https://github.com/falconmasters/curso-css-grid/blob/master/grid-implicita.html • Código CSS
Popular
Curso de CSS GRID: | Introducción y Que es CSS Grid

by Best Webhosting Added 6 years ago 116 Views / 0 Likes

Bienvenido a este nuevo curso en el que aprenderás el sistema de CSS Grid para realizar estructuras de sitios web mas complejos. • Blog de diseño web: http://www.falconmasters.com •️ Curso Completo de Diseño Web: https://goo.gl/XDC8vU •️ Curso Completo de PHP: http://tutorialdephp.com/ •️ Curso de Bootstrap 4: https://goo.gl/utQ1GF --- Redes Sociales: • Twitter @falconmasters: http://www.twitter.com/falconmasters • Pagina de Facebook: http://www.faceb
Popular
Curso de CSS GRID: 5.- Grid Areas

by Best Webhosting Added 6 years ago 111 Views / 0 Likes

En este capitulo vamos aprender sobre las grid areas que nos permitirán definir espacios para colocar nuestros elementos. • Blog de diseño web: http://www.falconmasters.com •️ Curso Completo de Diseño Web: https://goo.gl/XDC8vU •️ Curso Completo de PHP: http://tutorialdephp.com/ •️ Curso de Bootstrap 4: https://goo.gl/utQ1GF --- • Código HTML del video: https://github.com/falconmasters/curso-css-grid/blob/master/grid-area.html • Código CSS del video:
How to Create a Grid Gallery

by Best Webhosting Added 6 years ago 95 Views / 0 Likes

Grids display your images in neat columns and rows. Images will be displayed in uniform sizes. Pro-tip: Grids allow for pagination, which is perfect if you have many pictures you want to display. Ideal for an interior design portfolio, artwork showcase, or any one-pager website. Ready to build your website with Website.com? 1. Select a template 2. Customize 3. Click "Publish" Your website is LIVE! Start creating your website with Website.com! http://w
Popular
Curso de CSS GRID: 4.- Posicionamiento

by Best Webhosting Added 6 years ago 110 Views / 0 Likes

En este capitulo vamos aprender como posicionar elementos dentro de nuestra grid usando números de linea. • Blog de diseño web: http://www.falconmasters.com •️ Curso Completo de Diseño Web: https://goo.gl/XDC8vU •️ Curso Completo de PHP: http://tutorialdephp.com/ •️ Curso de Bootstrap 4: https://goo.gl/utQ1GF --- • Código HTML del video: https://github.com/falconmasters/curso-css-grid/blob/master/posicionamiento.html • Código CSS del video: https://gi
Tutorial WP Rocket 2022 Cómo Mejorar la Velocidad de mi Página Web en WordPress 2022

by Best Webhosting Added 3 years ago 38 Views / 0 Likes

🔴 COMPRAR WP ROCKET: 👉 https://www.renatoyacolca.com/go/wp-rocket En este video te voy a enseñar como mejorar la velocidad de tu página web en WordPress con WP Rocket de forma Fácil y Rápida, paso a paso desde Cero. Y no te preocupes no tienes que saber de programación, vamos a usar el plugin WP Rocket, en donde vas a poder configurar todas las opciones necesarias para optimizar tu sitio web. Yo te voy a enseñar todos los pasos. Todo el tutorial se va