HTML & CSS Crash Course Tutorial #8 - CSS Layout & Position 

You have no idea how you have clarified all the very basics of CSS like max-width, width percentage, positioning by showing a live example in website. Thank you so much :)

Thanks for re-igniting my interest on web design. Many people recommend you in some forums as one of the best YT channels for learning web development, and after binge-watching some of your courses, I cannot ever disagree. Keep it up!

Something I really love about these courses is how you deliberately make common mistakes when setting code up so you can explain why they're happening and then show the viewer how to address them. Seriously, it's invaluable. Really deepened my understanding of how these different elements interact!

Voluntarily watched the Ad and never skipped Ad. My way of thanking you for your amazing work and helping us for free. 💖

Been writing CSS since 2001, yet learned a lot! Thanks Shaun!

omg...finally i understand what im doing wrong! Even my teachers wont tell me online what i am doing wrong.......apparently I have used px, instead of % to keep headings/letters inside a banner...it would just glide outside of the image when shrinking the page.

No matter what you make a video on. You know your job well. Being an experienced Software Engineer, I find these so useful for refreshing my concepts and I am sure the beginners find them equally useful. Great job done 💯

It’s my second week of self teaching & first time here, think I’m in the right place , so far everything makes sense here , that’s how it feels. I like the way you explaining positioning.

Man! what a fantastic course this is. Completed in one sitting, and let me tell you that it's worth in gold

You are The Best Teacher Ever! You deserve alot of respect. Be blessed for the content you are sharing to us!

Best tutorial ever on the topic!) I have been watching LinkedIn learning and other RU-vid resources, thankful that I found out this course :)

dear shawn...you bring my stress levels down...you make me a better person...i love you sincerly, your fan

I had given up on understanding Absolute Positioning until I saw this. Now I finally understand. Thank you!!

4 years later this is still very useful for me as a beginner. Thanks so much for really simplifying these CSS concepts

This is the best CSS tutorial on layout and position i have come across since I started learning 3 days ago!!

Hello, Shaun! I'm on my way to become full-stack web-dev. I was for a long time in searching good resource to learn from, then I found your channel. Now I'm nearly done with html and css, thanks to your videos. I did buy your javascript course on udemy in order to support your labor! Thank you very much for your free courses as well!

I really must say that the example you used to explain positioning was the best and only practical example I have ever seen. This is the first example of CSS positioning that I see that gives a REASONABLE CONTEXT of this confusing concept. In all other tutorials that I’ve watched, the instructors really go out of their way to explain but the examples they use to explain it are pointless and don’t give any practical context. So I always finish watching their tutorials frustrated and feeling that something was missing and didn’t know what it was. I didn’t get why I don’t get it already. So finally an example that really shows a reasonable context to use positioning. Thank you very much!! Really Fantastic example and your explanations are spot on!

Now I know how position works after first seen, awesome tutorial!

Just wow. That was a perfect teaching of a subject. Hands down man

Learned more from this video than my advanced webcoding classes. Thanks! :)

Your teaching is amazing, I have never understood positioning until I watched this

Absolutely loving these tutorials but just a bit of feedback: Everything has been incredibly clear up until here: 28:15. This is hard to get my head around and I feel it could be clearer. I am really tired so it might be that though. Anyway, thanks again! Brilliant stuff.

You are great, dude. You can't imagine how good and understandable your videos are. Keep going, you got new subscriber.

I went through the whole course in 2 days using 1.5x speed - trust me you did a god level job - I loved the way you focused on details and positioning is really well explained. I feel like I should go through the whole coure once a month. Keep up the good work.

This is awesome! I'm blown away! I love how you explain is very simple terms.

i know there are so many html and css tutorial out there. but i prefer your teaching style. Thanks!

You are number one in my top 3 of the best instructors, I am seriously happy to have found your channel. I'm grateful 🙏

Thank you. You make learning enjoyable.

Brilliant explanation 10 of 10.

A great tutorial! Really helped me to finally understand CSS positioning.

omg! Thank you so much for these tutorials !! 🙏🏻

Had to watch it 4 times but now I got it. Insane. Thank you m8.

Built my own website after watching your videos. Thanks a lot, was really helpful for front-end development. I am Samarth from India.

I am working through each of the 11 tutorials. #1 to #8 have all been very good. In this tutorial, I think the final Mario web page looks really good and gives the user a good template to work with.

I loved every bit of it

Its looking beautiful, just in time!! Now just sit and wait for the new Mario movie to come out :D

Best HTML & CSS Tutorial, explanations are greats and brights.

Excellent explanation

Dear friend you are doing a good job break ing things for the people! Keep it that way.

"All right there gang "this are great tutorials💯

Your explanation is freakin awesome... Overall 10/10 rating :)

Great tutorial series, thank you so much!

best of css😍😍

I suggest understanding block and inline, how box model is applied to block element, default margin padding of element before watching this video. I got confused for the first time when I watched it.

bro makes us humble by writing hex codes casually

Youre my CSS mentor bro

It's like watching a cooking show haha. Nicely done! Btw I'm watching your tutorials on udemy and they are so great! thanks a lot!

What a Tutorial, Amazing , unbelievable, thank you very much

Tnx u sir : After 2 months of searching finaly i fully understand the position properties

Thanks Shaun for creating and sharing wonderful tutorials

You are the best tutor and I am big fan of your Style to teaching us... Thank You ☺️.... For teaching us Sir💗😊...

you make the web so easy and understanding for everyone

this is so practical many cool websites that i visited contain a lot of these commands (also some contain js which i'll watch next)

Out of everyone I've watched, you're the only one who actually described what the viewport is lol

Dude, your Videos are overall so well done! I even figured out, that you dont need to experiment with the nav tag. If you inspect the header and hover over the outer field of the "block graphic" it shows you the exact measurement of the element in pixels on the webpage! So you can just read that off :)) in this case you couldve instantly seen that it were 147.88 pixels, so pretty accurate with the 148" in the video :D Greetings from Germany man, you are helping us out so much!!

You explain it very well, I learn lots of from your video, Thanks man!

Clear explanation.Please upload the video on different CSS units(%,em,rem,px) and when to use what unit?

Sir, thank you so much! I've only been coding for 3 weeks now and I had a very hard time understanding this. I was beginning to think I choose the wrong hobby.

Thanks Shaun! Ur the greatest, along with Brad ☺️👨‍💻

thank you so much much love to u mr. ninja ur the best keep up the good work

You redefined UI design from zero to hero.

You're a good teacher🥺

for those have problems with centering the 'nav ul' , change 'max width' from 1200px to ur computer resolution size (e.g mine 1080px)

Thank you very much for a well planned tutorial .

Had to watch this 2 times but I got it all great explanation ✌

Thank you for your free tutorial training course I'm learning a lot! just a question I noticed that the navigation titles are a bit way off the center how can I center it completely?

Superb👍

Awesome Course and Very easy to understand.

i really loved the way you designed this course thank you

thank u so much u give us hope..

Still the best, thank u...

Very accessible, nice end product.

Best of the best tutorial

Very useful and clear video. Thank you!

Best tutorial and it's very useful...👍🏻

This is great! I'm getting it.

I swear you are awesome. Finally someone taught me how to position my page . Big ups man . Are you on udemy

you deserve all the likes subscribes and shares. THANK YOU!

Commenting for the RU-vid algorithm :)

"Dhanyabad !" It Means Thank You in Hindi !!!

Thank to net ninja😍😍

0 dislikes... Nice ❤

Best Teacher. Or I should say Best Sensei ;)

Thanks dear

Why do you hard code font sizes (e.g. 48px @ 31:12)? It seems that this will make the website less responsive. Why not use font sizing approaches that are more dynamic?

I've been following this course from the very beginning. It's really easy to follow. However, the menu is not centered yet :P

Thx

how many videos going to be in this category ?? great tutorials.

thank you so much

thank you very much, these videos are excellent btw I have one question you used display: inline-block for nav section under banner can we use display: flex for it? and handle it with justify-content: space around? is there any difference?

you have so cute taste, it's a pleasure to look at your work!

You’re too Good man

the best ninja

OMG , mate you should be a tutor. Why cant this be the norm when teaching.

Is the little white space to the left of the banner driving you insane? He fixes it at 25:38 Turns out it is just the margin of the body!

Great take a bow 👍🏻

Hello The Net Ninja! Which theme are you using in these videos? It certainly looks like Monokai++ but it is a bit dimmer with the colors than what I have found which is more pleasing to eyes.

Hi, Ninja. This is my first time utilizing "white-space" property. I am just wondering if you are not using the layout system like Flex or Grid in order not to make this series complicated for the beginners?

Can you change the color of the navbar at around 150px from the top by doing a sticky header??

you are god bro