How to build a simple responsive layout with CSS grid

preview_player
Показать описание


I'll show you how to build a simple two-column responsive layout, and explain the basic properties of how CSS grid works.

0:00 - Intro
0:18 - Setup project files
3:12 - Using Live Sass VS Code extension
6:49 - Adding gradient backgrounds, tweaking styles
8:18 - Creating the grid template, using the "fr" unit
10:44 - Using Firefox grid inspector
13:30 - Changing the grid template styles
13:48 - grid-template-columns and repeat() function
14:15 - grid-template-rows
15:04 - Placing grid child items using grid-column and grid-row
18:38 - Building the two-column layout

_____________________________________

SUPPORT THE CHANNEL
👏🏽 Hit the THANKS button in any video!

WANT TO LEARN WEB DEV?
Check out my courses:

RECOMMENDATIONS

🔽 FOLLOW CODER CODER

#webdevelopment #coding #programming
Рекомендации по теме
Комментарии
Автор

Just wanted to thank you. I followed your web developer plan that you posted on IG. I can't remember the date but it was a plan to become to front end developer. I signed up for LinkedIn online classes. I learned html CSS javascript and python.
I got hired last month as a entry level developer and I love it. Your story about how you started with data entry gave me the confidence to apply to jobs.

jp-cbsw
Автор

I have watched several videos on CSS Grind in past 1-2h and I was more confused than I was before watching any videos. Until I landed on your channel, you my lady are a code queen :D U got yourself a sub for life. Thank you a lot.

Moordu
Автор

Getting back into coding and wanting to update my website. This was extremely helpful and yet so simple. Thank you for this!

agoatlayingabout
Автор

Not overly simplified or complicated, perfect!

germansiciliano
Автор

thank you! your presentation is clear and I love that you went beyond the objective of the talk to show more tips and tricks..

tmly
Автор

I love how this video was a cover to expose more people to grid 😅❤️☮️ Awesome explanations, Jessica!

ozzyfromspace
Автор

It was really simple and knowledgeable, loved it.

anuvabkumarrit
Автор

Many thanks for your effort Jessica, keep it up!

TheSclare
Автор

Explained Very Well mam...
I was facing some Issues with Grid Columns ... But you have resolved it for me for life time

forthepeople
Автор

Awesome. Exactly what I was looking for.

GBobFree
Автор

Thank you so much for a great video once again, I'm going the self-taught web dev route and I've been taught so much from your videos.

military_grade_dev
Автор

you have a very good teaching skills. keep it up!

jssecrets
Автор

This is a really awesome channel. Hope to see more from you in the future.

GuiltyNoticer
Автор

Another amazing video! Thank you so much for creating such helpful content 😆

beccuh
Автор

amazing video, clear explanation. great content !

guhkunpatata
Автор

Although I normally get Bootstrap to take care of this for me, this was certainly a very detailed tutorial. Thank you.

ANdRWISCOOL
Автор

Great content and really like your teaching style.

jaggyjut
Автор

continue providing such awsome tutorials please

alfredbrown
Автор

Your videos are awesome! Well explained, and you even go further into explaining the smallest details. Keep up the good content! I am already subbed with a post notty ;)

zmatical
Автор

Another amazing video! Thank you very much for creating such helpful content. your channel is really awesome!

alire
visit shbcf.ru