Grid CSS Responsive Website Layout – "Mobile First" Design



Add MailTag to your browser (it’s free) ➜
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!

ONE TIME DONATIONS:

VISIT MY WEBISTE: Check Out My Udemy Courses

FOLLOW TRAVERSY MEDIA:

25 comments

  1. I had been watching your videos for different concepts… shoutout to u for making wonderful videos… it's good to see ur face for the first time…

  2. I've been practicing CSS for almost a year after starting from your videos. I still come back to these beginner videos. There's always a little nuance that I missed, like how to better structure my HTML and create better ids and class names so as to maximize my CSS reusability, and how to style my elements better so that I don't have to write as many media queries. I love your content man.

  3. ✔️ Good quality
    ✔️ starts from scratch
    – we implement the mobile version first, just after that we focus on the grid for larger screens
    – we start with making the markup
    @tool: lifeserver pluggin visuel studio code, opens the .html file and auto reloads on changes
    @tool: emmet pluggin. Turn syntax header#className.IdName into <header class="className" id="Idname" </header>
    @emmet: turns lorem20 into a textpassage of 20 words
    #action: making img appear more transparent then text, by adding the img NOT to the header, but to a div below, which gets the properties

  4. Did you have any particular reaosn to choose 'em' over 'rem' when you were setting the Core Styles for this web? I think using em for font-size is a bad pattern not to mention I didn't see a clear reason why you'd choose 'em' units when defining outer most divs and not for children divs and/or elements.

    Supposedly, 'em' units it's when it's depending on its parent element's relative size so they resize.

  5. thank you so much sir ….. I have started my learning journey after watching your vedios and also taking your udemy course for Html and css…..lots of love from India

  6. Is mobile first really the best approach ? as it is designless somehow. For very simple landing page it can works okay but if you want to be different from another company or add navbar etc, isn't it harder to code than going desktop/full details first ?
    It's still kind of confusing, even after reading about it since yesterday.

  7. Thank you so much teaching me. I like that you leave the small mistakes in the html because then it causes me to pause the video and see if I can figure it out before continuing to play the video where you give the solution.

Leave a comment

Your email address will not be published. Required fields are marked *