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:
mhm it's not a better set image width on vw? and body height to 100vh?
I thought one of the advantages of using grid is eliminating the need for media queries.
Thank you <3
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…
Nice tut..
Great video, added a lot of value to my css knowledge
Sir you are great keep posting responsive tutorials and keep teaching peace. Love from India
Thank you! I learned a-lot from this video! Brad, your efforts are appreciated!!!
You are one f**king fantastic teacher dude! Thanks so much for this vid 🙂
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.
graat video
Thank you so much for sharing. Really clear and organized.
23:14
What difference would it make on the opacity if we had put the background-image on the header#showcase
thanks for the video short sweet and helpfull!!! great work
Great Video
Man, you're amazing
Your contents are amazing.I started Vue and Angular with your courses. Thanks from Iran.
✔️ 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
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.
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
its really good
Thank You ! Is the most explained tutorial, it really helps me to understand the structure very well
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.
I think it's the first time I don't see you with your hat ^^
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.