Grid CSS Responsive Website Layout – “Mobile First” Design

Grid CSS Responsive Website Layout – “Mobile First” Design

By  |  December 28, 2017  |  Website Designing  |  Comments

Add MailTag to your browser (it’s free) ➜ https://goo.gl/qZf5Pj
Thank you MailTag for sponsoring this video

In this video we will build a “mobile first” single page website layout using the CSS Grid. We will use modern techniques including relative em units, media queries and even a little flex.

CODE: Codepen

BECOME A PATRON: Show support & get perks!
http://www.patreon.com/traversymedia

ONE TIME DONATIONS:
http://www.paypal.me/traversymedia

VISIT MY WEBISTE: Check Out My Udemy Courses
http://www.traversymedia.com

FOLLOW TRAVERSY MEDIA:
http://www.facebook.com/traversymedia

http://www.instagram.com/traversymedia
https://discord.gg/traversymedia
Video Rating: / 5

About the Author: Han Shuyen

14 Comments

  1. Avetis TG

    on December 28, 2017 at 2:13 pm -

    i have done your flex part with grid

    #section-b ul {
    padding-left: .5em;
    padding-right: .5em;
    display: grid;
    grid-template-columns: repeat(3, 10fr);
    grid-gap: 1em;
    }
  2. WioSwitch To Switch Digital Pin On/Off

    on December 28, 2017 at 2:58 pm -

    👍👍👍👍👍
  3. Haroon Malik

    on December 28, 2017 at 3:03 pm -

    I Hit Susbcribe now :)
  4. Dat Nguyen

    on December 28, 2017 at 4:00 pm -

    Thanks for sharing. Great content!
  5. Matt Senko

    on December 28, 2017 at 5:02 pm -

    i have a question. my images in section B do not line up. All yours do. Is that because they are the same size or did CSS do something that I missed?
  6. Funfetti Gaming

    on December 28, 2017 at 5:06 pm -

    i am working on my website blackhillgaming.com @Traversy Media i am going to need a developer like you hit me up
  7. Chris Chandler

    on December 28, 2017 at 5:08 pm -

    Great video! CSS Grid is the way to go for layouts.
  8. John Karns

    on December 28, 2017 at 6:00 pm -

    Thank you very much. Fantastic tutorial. Great content and explanation.
  9. Bradley Clarkson

    on December 28, 2017 at 6:53 pm -

    Nice job man another killer tutorial, i love the part where he was thinking of how amazing Arron Judge is and said Batting instead of Padding... Takes a big man to admit the dominance of a Rival. Just Busting Balls Bro... Great work im hooked on your tuts..
  10. Abh19021

    on December 28, 2017 at 7:14 pm -

    You are an amazing man. I think you should make one more CSS grid tutorial.
  11. Mark Dyck

    on December 28, 2017 at 8:03 pm -

    Awesome! This was the first time I've followed along and built a page too. What a great way to learn. Thank you!
  12. Steven Kenneth

    on December 28, 2017 at 8:52 pm -

    Great video. There is so much to learn when it comes to html 5 and CSS. Do you do special request videos? Say for instance I wanted to build a specific website, would you take this on?
  13. The Mexican Guy

    on December 28, 2017 at 9:07 pm -

    Hey brad, what do you use to record your videos?

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.