How To Make CSS Grid Responsive
#CSSGrid #MediaQueries #HTML5 #VSCode #WebDevelopment
In this video, we built a 2 column layout with CSS grid and media queries to make it responsive viewports.
Software used
1)Visual studio code
2)Mozilla Firefox
VSCode extensions
1)Live Server
2)HTML5 Snippets
References & Resources
1)https://www.w3schools.com/css/css_grid.asp
2)https://en.wikipedia.org/wiki/Media_queries
3) https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
4)https://www.w3schools.com/tags/tag_meta.asp
Credits
Intro video by Tayon Combs
Video written by Tehillah Kangamba
Music
Theme song: Nato Poppins & Scaasi - #BMore(https://open.spotify.com/album/1X0S9lqJocFWLFO1Ng7u0g)
Music from Uppbeat (free for Creators!):
https://uppbeat.io/t/sensho/glow
License code: UMZ1BHOIZM2LMQCA
Music from Uppbeat (free for Creators!):
https://uppbeat.io/t/soundroll/poem
License code: MY34QE3QGPMSKELH
Music from Uppbeat (free for Creators!):
https://uppbeat.io/t/bosnow/through-the-clouds
License code: GZRWH1MUNT454E4Z
Music from Uppbeat (free for Creators!):
https://uppbeat.io/t/soundroll/all-the-things-you-love
License code: NEFAZM4OCGH2JOJ2
Music from Uppbeat (free for Creators!):
https://uppbeat.io/t/pryces/lateflights
License code: 82BBPPKZ0SKE11KB
Music from Uppbeat (free for Creators!):
https://uppbeat.io/t/all-good-folks/jump-jive
License code: HSL3ZPP6IF6X7DBU
Music from Uppbeat (free for Creators!):
https://uppbeat.io/t/fe77a/vacation-collective
License code: CQKN04AMYKMUX7SQ
-
4:08
Code Boxx
3 months agoReponsive Equal Height Columns In HTML CSS
-
3:40
Code Boxx
6 months ago3 Ways To Create Responsive Sidebars In HTML CSS
119 -
33:48
NeoDev
1 year agoYour First Responsive Menu - JS and CSS
11 -
1:48
Code Boxx
4 months agoSimple List Grid View In HTML CSS
5 -
0:59
Code Boxx
4 months agoResponsive Horizontal List In HTML CSS
-
19:39
NeoDev
1 year agoResponsive Carousel Problems with CSS only.
10 -
19:03
ABGTutorials
1 year agoLearning CSS: Make sense of Flexbox, Grid, and Media Queries!
13 -
1:51
Code Boxx
5 months agoResponsive Circle With Text In HTML CSS
1 -
2:48
Code Boxx
6 months agoVery Simple Responsive Image Gallery (HTML CSS)
23 -
33:57
Pixel Rocket
2 years agoCSS Grid Crash Course
27