CSS Display Property Tutorial for Beginners | Block, Inline, & Inline-Block Types

[@DaveGrayTeachesCode]

Display is a powerful property in CSS. It can impact your page in many ways. In this tutorial, we'll not only review block and inline display values which we learned from beginning HTML, but we will also learn about the hybrid-value inline-block. We will use the display: inline-block value as we build an example navbar. If you are just getting started with CSS, I recommend going to the start of this CSS for Beginners playlist: kzbin.info/aero/PL0Zuz27SZ-6Mx9fd9elt80G1bPcySmWit

[@Knards]

Dave, am very happy to see how your channel has grown. Your teaching delivery and content is worth the growth

[@DaveGrayTeachesCode]

Thank you! 💯🙏

[@NamNguyen-oz8uj]

Progress over perfection! Thank you for your advice Dave 🙏

[@DaveGrayTeachesCode]

That's right! It's always a reminder for myself, too. Keep up the good work and you're welcome! 🚀

[@MichaelJosephGFX]

Thanks, Dave! The box model & display types is by far the hardest part for myself and many others to comprehend, and you nailed it with this lesson. Subscribed. I'll be coming back to practice more and try to really get these ideas down. CSS can be difficult at first, but I can see this making sense eventually. Also, I really think The Odin Project would benefit from your work. Their curriculum is amazing, but honestly at times it is too difficult to understand anything. I feel if they shared your work it would help a ton. Cheers!

[@DaveGrayTeachesCode]

Thank you, and I'm glad I helped!

[@uniquebanda69]

lots of love from India ❤️ please upload DAILY content✌️

[@DaveGrayTeachesCode]

Thank you 🙏

[@ecomadvisor.]

15:38 confused 😕

[@JigsawXop]

Dave sir ur the best 💛....love form India

[@DaveGrayTeachesCode]

Thank you! And hello to India! 👋

[@NinaGrace-zh3ko]

Thank u so much. I have been watching all your videos and I'm improving so much. ❤❤

[@andromilk2634]

I suppose for the horizontal navbar you could also have used a "Inline" display as well because in your example, you are not using block level properties on the horizontal list items which would require a inline-block level.

[@OlubunmiAlade]

I really love your teachings thank you very much

[@gtlnook8223]

black hat SEO can hide mambo jambo keyword

[@imran_ashraf]

Hi Dave, Love the CSS videos! Can you please do a video on Flexbox and another on CSS Grid? Also can you please elaborate on when to use which ie Flexbox or CSS Grid? Thanks, Dave

[@DaveGrayTeachesCode]

Thank you! 🙏 I have both coming up very soon. You don't have to choose one or the other. You can use them together. No right or wrong answer there. Whichever you are most comfortable with and gets the job done.

[@miftakhusysyiroth9301]

you're so kind. I love you

[@DaveGrayTeachesCode]

🙏🙏

[@TriLiCiT]

Hey Dave. Thanks for your videos and you got a new sub. I originally came across your channel upon dying research on how to set resets and overall widths heights because I've been battling my css and flex to make my sites responsive ect. I work graveyards so whilst at work I'll just listen to tutorials cause everyone has something different to say and thus far, you've been the best. This is after investment in Udemy, books, ect. I especially love that you cover topics others don't i. e. your video on seeting margin and padding reset in the * selector song with setting width height in body and html selectors to fix horizontal and vertical overflow

[@DaveGrayTeachesCode]

Thank you! Glad I could help! 💯

[@elvispontes4165]

I am just a beginer when it comes to frot end. I am always coming back to your videos when I have some doubt or forget something, and never get disappointed. Thanks a lot for sharing great content.

[@DaveGrayTeachesCode]

You're welcome!

[@ahmad-murery]

Hello Dave, it's very useful that you provided a practical example to using the display property, 12:30 according to MDN margin-inline will apply to the element's logical start/end, meaning that the start/end of an element may change depending on writing-mode, direction, and text-orientation properties, using both margin-inline-start/margin-inline-end removes all the hassles when building bidirectional websites (where we need to consider swapping left and right margins and paddings in RTL languages) I think MDN should add links to your videos Thanks

[@DaveGrayTeachesCode]

Great info, Ahmad! Yes, MDN is my favorite reference / docs site. I appreciate your recommendation and wow, that would be a BIG honor if it ever truly happened. 🚀

[@ahmad-murery]

@@DaveGrayTeachesCode I found that the examples you provide focusing on one topic at a time without being crammed with unnecessary codes, so why not 😉.

[@DenisGloba]

Great Work dave gray Thanks

[@DaveGrayTeachesCode]

Very welcome!

[@Pareshbpatel]

CSS: Block, In-line and Inline-Block elements beautifully and clearly explained. Thanks, Dave {2022-04-5}

[@DaveGrayTeachesCode]

Thank you, Paresh! 🙏🙏

[@TravinskiyVladislav]

Thank you, Dave

[@Habib80]

🔥🔥🔥

[@letuslearnmore]

Great teacher❤

[@mithunshaw4269]

Hi Dave.. Thanks for the video.. I have completed all 10 CSS video.. Are you going upload more videos on CSS that you have mentioned on video #10 that you cover display visibility in future.. Can we also get project on this just for practice?

[@DaveGrayTeachesCode]

Yes, this series is currently underway with more videos to come. 🚀

[@mithunshaw4269]

@@DaveGrayTeachesCode okay thanks Dave ... One more question I am planning for react js after HTML CSS and JavaScript, can I opt for react js after them? Please suggest.. React js and react native both are same right? If i follow your react js code for windows i will definitely be able to code them for Android and iOS as part of react native? Your suggestions will highly be appreciated!

[@DaveGrayTeachesCode]

@@mithunshaw4269 HTML, CSS, and JS is a good path to start. React and React Native are similar, but they are not the same. React Native is for mobile apps.

[@mithunshaw4269]

@@DaveGrayTeachesCode thankyou so much Dave.. sorry for taking your valuable time by asking so much things. One more lasst question is then that means I need to do two separate course right one for react js and another for react native?

[@fabrice9848]

Thanks again for teaching us the basics.

[@DaveGrayTeachesCode]

You're welcome! 💯

[@Grihlo]

Thanks for another great lesson Dave!

[@DaveGrayTeachesCode]

Glad you liked it! 💯

[@stanislavaksenov1700]

I had a hard time understanding the term inline-block, but after your explanations it all became clear. Thank you very much for your videos!

[@DaveGrayTeachesCode]

You're very welcome!

[@crust5532]

Dave love your videos 😊❤️.Which theme you are using???

[@DaveGrayTeachesCode]

Thank you 🙏 GitHub theme 🚀

[@nishgro191]

Hello Dave!! Take love. You do awesome things with less code and more efficient way.

[@DaveGrayTeachesCode]

Thank you for the kind words!

[@behroozyazdani6023]

Hi, thanks 👍👌, display is important property but many don't care about it.

[@DaveGrayTeachesCode]

You're welcome! 🙏 A CSS course is not complete without it 💯

[@vishwamperiasamysubramania131]

Hi, Please could you make a video on box-shadows and text-shadows.

[@DaveGrayTeachesCode]

Thank you for the request! 💯🙏

[@vitalijgrabovan2061]

Wow, yesterday I have finished watching 9th part and was sad because i thought that its the last one and today there is a 10th so I am happy again :D Thank you Dave !!!

[@DaveGrayTeachesCode]

Thank you! 🙏 There is still more to come. Usually one a week.

[@synen]

@@DaveGrayTeachesCode Fabulous series Dave!

[@trynottolaugh5645]

Can you please do a video on Responsive web design?

[@DaveGrayTeachesCode]

Please continue in this CSS series and you will find my tutorial on responsive web design.

[@trynottolaugh5645]

@@DaveGrayTeachesCode okay Thanks 😊

[@michaelanietiejackson5795]

You are my best tutor.

[@DaveGrayTeachesCode]

Thank you!

[@roydeloiza6663]

One of the best.

[@DaveGrayTeachesCode]

Thank you!

[@iambrijeshtoo]

Thank you! ♥

[@DaveGrayTeachesCode]

You're welcome!

[@ajaysan2765]

Thank You

[@DaveGrayTeachesCode]

Welcome!

[@synen]

Dave, do you have UDEMY courses ? Thank you.

[@DaveGrayTeachesCode]

I do not. I am looking forward to releasing a premium course, but I may not use the Udemy platform.

[@synen]

@@DaveGrayTeachesCode Understood, looking forward to it, best wishes.

[@CTILET]

Thank you Dave!

[@DaveGrayTeachesCode]

You're welcome!