Flexbox vs Grid
1.5 هزار بار بازدید -
4 سال پیش
-
CSS Grid allow content to
CSS Grid allow content to be arranged on a webpage in a 2 dimensional grid rather than the single dimension flex-box axis. This video goes over the basics of CSS grid to get you started laying out webpages. It also shows a responsive gallery example that works on desktops and mobile devices without any media queries.
learn to use CSS grid command so you can lay out your website to be responsive and mobile friendly. CSS grid is a great companion to flexbox and every web designer should know how to use it. this tutorial shows how to use CSS grid to layout different elements on a website to make professional designs. no coding experiences necessary and the tutorial can be completed by beginners.
0:00 - Introduction
0:16 - Setup Visual Studio Code Workspace
0:48 - Grid HTML
1:31 - styles.css
2:06 - default CSS styles
3:03 - style grid items
3:55 - Grid vs Flexbox
4:26 - Setup Grid Columns
7:15 - Setup Grid Rows
9:43 - Grid item positioning
12:18 - Grid Gap
12:30 - Align and Justify Items
14:05 - Make Image Gallery
17:10 - Responsive Grid Gallery with minmax
18:30 - Object-fit cover
20:25 - Initialize Repository
20:35 - Publish to GitHub
Artist Portfolio Website Video Series
1- Setup Domain and Hosting with GitHub Student Developer Pack and Namecheap - Free Domain and Web Hosting with GitH...
2 - Enforce HTTPS with GitHub Pages and Namecheap - Enforce HTTPS in GitHub Pages with Na...
3 - Setup Visual Studio Code with GitHub Integration - Visual Studio Code with GitHub Integr...
4 - Basic HTML Crash Course and Page Structure - HTML & GitHub Basics with Visual Stud...
5 - Basic CSS Crash Course - Complete CSS: Styling Your HTML Page ...
6 - CSS Flexbox - Flexbox in 15 Minutes - Crash Course
7 - CSS Grid - Flexbox vs Grid
8 - Portfolio Gallery in CSS Grid with Lightbox - CSS Grid Responsive Image Gallery wit...
9 - Example Portfolio Site from Start to Finish (in production)
.
.
.
.
Looking for What Make Art merch?
https://teespring.com/stores/what-mak...
Other links for your browsing.
What Make Art? on Twitter:
Twitter: whatmakeart
What Make Art? on Instagram:
Instagram: whatmakeart
You can support this channel on Patreon! Thanks to contributions from viewers like you, What Make Art? can continue making useful art tutorials for all. If you’d like to join the supporters who help make this content possible, you can find out how at the link below. Thank you for your consideration of support!
Patreon: WhatMakeArt
#css #cssgrid #webdesign
learn to use CSS grid command so you can lay out your website to be responsive and mobile friendly. CSS grid is a great companion to flexbox and every web designer should know how to use it. this tutorial shows how to use CSS grid to layout different elements on a website to make professional designs. no coding experiences necessary and the tutorial can be completed by beginners.
0:00 - Introduction
0:16 - Setup Visual Studio Code Workspace
0:48 - Grid HTML
1:31 - styles.css
2:06 - default CSS styles
3:03 - style grid items
3:55 - Grid vs Flexbox
4:26 - Setup Grid Columns
7:15 - Setup Grid Rows
9:43 - Grid item positioning
12:18 - Grid Gap
12:30 - Align and Justify Items
14:05 - Make Image Gallery
17:10 - Responsive Grid Gallery with minmax
18:30 - Object-fit cover
20:25 - Initialize Repository
20:35 - Publish to GitHub
Artist Portfolio Website Video Series
1- Setup Domain and Hosting with GitHub Student Developer Pack and Namecheap - Free Domain and Web Hosting with GitH...
2 - Enforce HTTPS with GitHub Pages and Namecheap - Enforce HTTPS in GitHub Pages with Na...
3 - Setup Visual Studio Code with GitHub Integration - Visual Studio Code with GitHub Integr...
4 - Basic HTML Crash Course and Page Structure - HTML & GitHub Basics with Visual Stud...
5 - Basic CSS Crash Course - Complete CSS: Styling Your HTML Page ...
6 - CSS Flexbox - Flexbox in 15 Minutes - Crash Course
7 - CSS Grid - Flexbox vs Grid
8 - Portfolio Gallery in CSS Grid with Lightbox - CSS Grid Responsive Image Gallery wit...
9 - Example Portfolio Site from Start to Finish (in production)
.
.
.
.
Looking for What Make Art merch?
https://teespring.com/stores/what-mak...
Other links for your browsing.
What Make Art? on Twitter:
Twitter: whatmakeart
What Make Art? on Instagram:
Instagram: whatmakeart
You can support this channel on Patreon! Thanks to contributions from viewers like you, What Make Art? can continue making useful art tutorials for all. If you’d like to join the supporters who help make this content possible, you can find out how at the link below. Thank you for your consideration of support!
Patreon: WhatMakeArt
#css #cssgrid #webdesign
4 سال پیش
در تاریخ 1399/07/30 منتشر شده
است.
1,522
بـار بازدید شده