No video

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

  Рет қаралды 238,625

Net Ninja

Net Ninja

Күн бұрын

Пікірлер: 190
@agustinbustos3799
@agustinbustos3799 5 жыл бұрын
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!
@NetNinja
@NetNinja 5 жыл бұрын
Wow awesome :D thank you!
@meghaaggarwal8508
@meghaaggarwal8508 4 жыл бұрын
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 :)
@NetNinja
@NetNinja 4 жыл бұрын
You're welcome :)
@Dianacat777
@Dianacat777 Жыл бұрын
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!
@NetNinja
@NetNinja Жыл бұрын
Thanks, really appreciate that :)
@Dianacat777
@Dianacat777 Жыл бұрын
@@NetNinja I'd noticed it throughout your tutorials (currently working through this one and PHP, and seriously, your teaching style is a godsend), and you actually answered a problem I was having with a bit of beginner webdev I was working on - I couldn't figure out why some relative elements weren't taking up space on the page, then today realized they were in a div that was set as absolute. Whitespace allocation wasn't something I'd learned from just googling around how to position stuff, so I really appreciate it coming up so intuitively here! Also the concept of a CSS reset, because that makes everything SO much easier moving forward. Thanks for all the work you've put into these courses!
@egbesampson3568
@egbesampson3568 9 ай бұрын
masterclass teaching very good
@mithrandir2171
@mithrandir2171 3 жыл бұрын
Voluntarily watched the Ad and never skipped Ad. My way of thanking you for your amazing work and helping us for free. 💖
@NetNinja
@NetNinja 3 жыл бұрын
Thanks so much, I really appreciate it! :)
@divyanshubhatnagar4601
@divyanshubhatnagar4601 4 жыл бұрын
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 💯
@ahmedm7298
@ahmedm7298 3 жыл бұрын
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.
@kritikjain3617
@kritikjain3617 2 жыл бұрын
Man! what a fantastic course this is. Completed in one sitting, and let me tell you that it's worth in gold
@Minecrafter1101100
@Minecrafter1101100 4 жыл бұрын
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!
@NetNinja
@NetNinja 4 жыл бұрын
Thanks so much, really appreciated :)
@ArtByArja
@ArtByArja 4 жыл бұрын
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.
@robertbibong1040
@robertbibong1040 2 жыл бұрын
You are The Best Teacher Ever! You deserve alot of respect. Be blessed for the content you are sharing to us!
@hitthecity2
@hitthecity2 4 жыл бұрын
Been writing CSS since 2001, yet learned a lot! Thanks Shaun!
@michaelengher9895
@michaelengher9895 3 жыл бұрын
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!
@NetNinja
@NetNinja 3 жыл бұрын
Thank you so much 😃
@ItunuAyegbokiki
@ItunuAyegbokiki Ай бұрын
You are so goood, but I rather suggest that you write your codes so that we will be able to follow you orderly, and without any confusion
@redfolgers2233
@redfolgers2233 4 жыл бұрын
dear shawn...you bring my stress levels down...you make me a better person...i love you sincerly, your fan
@bobcobb2253
@bobcobb2253 3 жыл бұрын
I had given up on understanding Absolute Positioning until I saw this. Now I finally understand. Thank you!!
@asaanchaudhury1721
@asaanchaudhury1721 3 жыл бұрын
This is the best CSS tutorial on layout and position i have come across since I started learning 3 days ago!!
@nsj5673
@nsj5673 4 жыл бұрын
You are great, dude. You can't imagine how good and understandable your videos are. Keep going, you got new subscriber.
@NetNinja
@NetNinja 4 жыл бұрын
thank you!
@md.baianulhoquerukon9745
@md.baianulhoquerukon9745 Жыл бұрын
@@NetNinja you're welcome😁
@mehriabdukodirova9155
@mehriabdukodirova9155 4 жыл бұрын
Best tutorial ever on the topic!) I have been watching LinkedIn learning and other KZfaq resources, thankful that I found out this course :)
@ArchanaSingh-hd3ug
@ArchanaSingh-hd3ug 4 жыл бұрын
Built my own website after watching your videos. Thanks a lot, was really helpful for front-end development. I am Samarth from India.
@dms6553
@dms6553 Жыл бұрын
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.
@ikeiris
@ikeiris 2 жыл бұрын
You are number one in my top 3 of the best instructors, I am seriously happy to have found your channel. I'm grateful 🙏
@NetNinja
@NetNinja 2 жыл бұрын
Wow, thank you Ike! :) that's much appreciated!
@strangerinyourchair
@strangerinyourchair 4 жыл бұрын
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.
@Lenny4400
@Lenny4400 2 жыл бұрын
Dear friend you are doing a good job break ing things for the people! Keep it that way.
@lisaheesters4508
@lisaheesters4508 4 жыл бұрын
Learned more from this video than my advanced webcoding classes. Thanks! :)
@codedynamics1
@codedynamics1 3 жыл бұрын
😳
@imebasseyisua-ikoh4167
@imebasseyisua-ikoh4167 6 ай бұрын
4 years later this is still very useful for me as a beginner. Thanks so much for really simplifying these CSS concepts
@NetNinja
@NetNinja 6 ай бұрын
Glad it was helpful! :) thanks for watching
@assadullah7816
@assadullah7816 2 жыл бұрын
Tnx u sir : After 2 months of searching finaly i fully understand the position properties
@JHatLpool
@JHatLpool 4 жыл бұрын
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.
@NetNinja
@NetNinja 4 жыл бұрын
Thanks :). Glad you like it.
@SuperOnlyP
@SuperOnlyP 4 жыл бұрын
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.
@nicholaslewis279
@nicholaslewis279 2 жыл бұрын
Out of everyone I've watched, you're the only one who actually described what the viewport is lol
@ibrahimcious
@ibrahimcious 4 жыл бұрын
i know there are so many html and css tutorial out there. but i prefer your teaching style. Thanks!
@marisakirisame659
@marisakirisame659 2 жыл бұрын
Your teaching is amazing, I have never understood positioning until I watched this
@davidfrews
@davidfrews Жыл бұрын
Had to watch it 4 times but now I got it. Insane. Thank you m8.
@weareloved
@weareloved 2 жыл бұрын
omg! Thank you so much for these tutorials !! 🙏🏻
@sam4457
@sam4457 Жыл бұрын
"All right there gang "this are great tutorials💯
@NetNinja
@NetNinja Жыл бұрын
Thanks Sam! :)
@Palaan92
@Palaan92 Жыл бұрын
You are the best tutor and I am big fan of your Style to teaching us... Thank You ☺️.... For teaching us Sir💗😊...
@NetNinja
@NetNinja Жыл бұрын
So nice of you :) thanks for watching Syed!
@yinonb172
@yinonb172 3 жыл бұрын
Best HTML & CSS Tutorial, explanations are greats and brights.
@SantoshPun123
@SantoshPun123 5 жыл бұрын
Your explanation is freakin awesome... Overall 10/10 rating :)
@NetNinja
@NetNinja 5 жыл бұрын
Thanks so much 😊
@ArtVandelayInc
@ArtVandelayInc 3 жыл бұрын
Just wow. That was a perfect teaching of a subject. Hands down man
@egbesampson3568
@egbesampson3568 9 ай бұрын
you make the web so easy and understanding for everyone
@emantsrifemantsal2834
@emantsrifemantsal2834 4 жыл бұрын
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)
@MrSmellyPotato
@MrSmellyPotato 5 жыл бұрын
Now I know how position works after first seen, awesome tutorial!
@myjava2844
@myjava2844 3 жыл бұрын
You redefined UI design from zero to hero.
@chammu6936
@chammu6936 3 жыл бұрын
Clear explanation.Please upload the video on different CSS units(%,em,rem,px) and when to use what unit?
@danieletchie9955
@danieletchie9955 27 күн бұрын
Net Ninja I'd like to say you have made CSS so easy for me thanks I appreciate all your effort And also I want to say that maybe after each tutorial maybe just like a minute or two show the coding, as a learner I may touch somewhere on my mouse and with that I have made a mistake and when I save and preview I will not be having the same result as you have so just saying for my self and others out there. Thanks
@Lucas_V.P.
@Lucas_V.P. Жыл бұрын
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!!
@hafsathalilu3148
@hafsathalilu3148 3 жыл бұрын
This is awesome! I'm blown away! I love how you explain is very simple terms.
@miriammiriamxoxo
@miriammiriamxoxo 4 жыл бұрын
Its looking beautiful, just in time!! Now just sit and wait for the new Mario movie to come out :D
@DarkMaze05
@DarkMaze05 3 жыл бұрын
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.
@mikenje5409
@mikenje5409 4 жыл бұрын
Brilliant explanation 10 of 10.
@garyfxxk
@garyfxxk 3 жыл бұрын
for those have problems with centering the 'nav ul' , change 'max width' from 1200px to ur computer resolution size (e.g mine 1080px)
@BondTop10ThemeSongs
@BondTop10ThemeSongs Жыл бұрын
text-align: center; needs to be added for 'nav ul' (at 23:10)
@prasadingole7315
@prasadingole7315 2 жыл бұрын
You explain it very well, I learn lots of from your video, Thanks man!
@romko-romario
@romko-romario 3 жыл бұрын
A great tutorial! Really helped me to finally understand CSS positioning.
@gorgeelibertad5456
@gorgeelibertad5456 3 жыл бұрын
you deserve all the likes subscribes and shares. THANK YOU!
@anuragthakur5787
@anuragthakur5787 2 жыл бұрын
Had to watch this 2 times but I got it all great explanation ✌
@julietegbule5532
@julietegbule5532 3 жыл бұрын
I swear you are awesome. Finally someone taught me how to position my page . Big ups man . Are you on udemy
@kashifdeshmukh9340
@kashifdeshmukh9340 Жыл бұрын
Awesome Course and Very easy to understand.
@hussainbabonji4207
@hussainbabonji4207 Жыл бұрын
i really loved the way you designed this course thank you
@NetNinja
@NetNinja Жыл бұрын
Happy to hear that! :) thanks Hussain
@ARTdeas
@ARTdeas 4 жыл бұрын
What a Tutorial, Amazing , unbelievable, thank you very much
@hospitaller100
@hospitaller100 4 жыл бұрын
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!
@avinashsingh9898
@avinashsingh9898 8 ай бұрын
bro makes us humble by writing hex codes casually
@arese9202
@arese9202 4 жыл бұрын
You're a good teacher🥺
@arv1204
@arv1204 4 жыл бұрын
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?
@iamsandwich
@iamsandwich 2 жыл бұрын
2 years late, but text-align: center; in the nav ul In case anyone else gets this problem
@codedynamics1
@codedynamics1 3 жыл бұрын
Thanks Shaun! Ur the greatest, along with Brad ☺️👨‍💻
@Shakeel714
@Shakeel714 3 жыл бұрын
Thanks Shaun for creating and sharing wonderful tutorials
@mohitwayde249
@mohitwayde249 3 жыл бұрын
Superb👍
@harryflim
@harryflim 5 жыл бұрын
Excellent explanation
@rafatmuizmahmud2698
@rafatmuizmahmud2698 4 жыл бұрын
I loved every bit of it
@toluwanielemosho7308
@toluwanielemosho7308 5 жыл бұрын
Youre my CSS mentor bro
@alexroy4235
@alexroy4235 3 жыл бұрын
Best of the best tutorial
@eazlai
@eazlai 4 жыл бұрын
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?
@sdarcy29
@sdarcy29 3 жыл бұрын
OMG , mate you should be a tutor. Why cant this be the norm when teaching.
@allanjchiang
@allanjchiang Жыл бұрын
Commenting for the KZfaq algorithm :)
@markzait2750
@markzait2750 Жыл бұрын
Very useful and clear video. Thank you!
@NetNinja
@NetNinja Жыл бұрын
Glad it was helpful! :) thanks for watching Mark
@pankajrawat7435
@pankajrawat7435 4 жыл бұрын
"Dhanyabad !" It Means Thank You in Hindi !!!
@astrix8812
@astrix8812 4 жыл бұрын
"Dhanyawaad" hota hai bhai
@travelselects272
@travelselects272 5 жыл бұрын
Thank you. You make learning enjoyable.
@francomateoturco306
@francomateoturco306 9 ай бұрын
I hope you read this comment, what do you think about flexbox? should i use it for display ? could you do a tutorial about it ? thank you so so so much for your videos ! much appreciated your time and dedication
@siddhartharoychowdhury2489
@siddhartharoychowdhury2489 3 жыл бұрын
Best Teacher. Or I should say Best Sensei ;)
@NetNinja
@NetNinja 3 жыл бұрын
Thanks! 😃
@syeedimtiaz2974
@syeedimtiaz2974 Жыл бұрын
Thank you very much for a well planned tutorial .
@amongdoomers9464
@amongdoomers9464 4 жыл бұрын
best of css😍😍
@codigoninja
@codigoninja 4 жыл бұрын
Great tutorial series, thank you so much!
@Victor-vw5zq
@Victor-vw5zq Жыл бұрын
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!
@remaztoti2587
@remaztoti2587 4 жыл бұрын
thank you so much much love to u mr. ninja ur the best keep up the good work
@jeffxcc
@jeffxcc Жыл бұрын
This is great! I'm getting it.
@NetNinja
@NetNinja Жыл бұрын
That's great to hear Jeffrey! :)
@keyos27
@keyos27 5 жыл бұрын
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?
@NetNinja
@NetNinja 5 жыл бұрын
Hey, correct. I have 2 complete playlists for flex and grid. But I think it’s important to understand all the basics first.
@keyos27
@keyos27 5 жыл бұрын
@@NetNinja Definitely! Thank you for reply.
@beetlejuice5786
@beetlejuice5786 3 жыл бұрын
Very accessible, nice end product.
@dineshr3841
@dineshr3841 3 жыл бұрын
Best tutorial and it's very useful...👍🏻
@NetNinja
@NetNinja 3 жыл бұрын
Thanks a lot 😊
@aminmouhamed2502
@aminmouhamed2502 3 жыл бұрын
the best ninja
@Ceasar-Empire
@Ceasar-Empire 3 ай бұрын
Thanks Shaun you've been doing an amazing work I have a little issue, I was trying to tag my h1 as you did yours in this tutorial in my Css file, but it's not working, I mean the border, text color etc non is showing
@thstudio007
@thstudio007 4 жыл бұрын
I've been following this course from the very beginning. It's really easy to follow. However, the menu is not centered yet :P
@joonaspuurtinen6396
@joonaspuurtinen6396 2 жыл бұрын
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.
@speakerspeak7722
@speakerspeak7722 3 жыл бұрын
Thank to net ninja😍😍
@michaelfestus3619
@michaelfestus3619 2 жыл бұрын
You’re too Good man
@emadnova8182
@emadnova8182 3 жыл бұрын
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?
@amansinghbhadauria2818
@amansinghbhadauria2818 3 жыл бұрын
He mistakenly used the class "join" two times, once for the list element and other for the section inside main, and that's why that bug in the "Join the club" list element.
@PcHabitat
@PcHabitat 5 жыл бұрын
Can you change the color of the navbar at around 150px from the top by doing a sticky header??
@acquij
@acquij Жыл бұрын
My brain is fried, but in a good sense; this will take a bit of re-viewing as some concepts make sense immediately / intuitively while others will likely just need repetition..
@egbesampson3568
@egbesampson3568 9 ай бұрын
pls one question ninja why is it that you avoid using the caps lock like writing in capital letters thanks
@Hgj-hb9bd
@Hgj-hb9bd 5 жыл бұрын
0 dislikes... Nice ❤
@MilanB
@MilanB 5 жыл бұрын
What do you think about tailwind css?
@reviewer3448
@reviewer3448 3 жыл бұрын
I understood all your explanations, I just didn't understand where you got 140px for the sticky positioning. Why can't I just get it stick at top 0px? When it comes across the navigation bar?
@jakobgoldbach903
@jakobgoldbach903 2 жыл бұрын
At 15:11 - why is the margin of the h1 in the header not background-color filled until you add padding to the header?
HTML & CSS Crash Course Tutorial #9 - Pseudo Classes & Elements
16:47
How to Properly Layout A Website (For Beginners)
14:50
The Website Architect
Рет қаралды 579 М.
Kids' Guide to Fire Safety: Essential Lessons #shorts
00:34
Fabiosa Animated
Рет қаралды 17 МЛН
Glow Stick Secret Pt.4 😱 #shorts
00:35
Mr DegrEE
Рет қаралды 11 МЛН
The Giant sleep in the town 👹🛏️🏡
00:24
Construction Site
Рет қаралды 21 МЛН
Get 10 Mega Boxes OR 60 Starr Drops!!
01:39
Brawl Stars
Рет қаралды 19 МЛН
The secret to mastering CSS layouts
17:11
Kevin Powell
Рет қаралды 277 М.
Learn CSS Positioning Quickly With A Real World Example
8:32
Slaying The Dragon
Рет қаралды 641 М.
HTML & CSS Crash Course Tutorial #7 - Chrome Dev Tools
11:50
Net Ninja
Рет қаралды 137 М.
Learn Flexbox CSS in 8 minutes
8:16
Slaying The Dragon
Рет қаралды 1,5 МЛН
10 CSS Pro Tips - Code this, NOT that!
9:39
Fireship
Рет қаралды 2,2 МЛН
HTML & CSS Crash Course Tutorial #10 - Intro to Media Queries
22:36
10 modern layouts in 1 line of CSS
21:39
Chrome for Developers
Рет қаралды 1,1 МЛН
CSS Crash Course For Absolute Beginners
1:25:11
Traversy Media
Рет қаралды 4,4 МЛН
Kids' Guide to Fire Safety: Essential Lessons #shorts
00:34
Fabiosa Animated
Рет қаралды 17 МЛН