CSS Display Property Tutorial for Beginners | Block, Inline, & Inline-Block Types
ฝัง
- เผยแพร่เมื่อ 4 ก.ค. 2024
- Web Dev Roadmap for Beginners (Free!): bit.ly/DaveGrayWebDevRoadmap
This CSS display property tutorial for beginners will help you learn the difference between block, inline, and inline-block display types. We will build a simple nav bar using the inline-block display type.
🚩 Subscribe ➜ bit.ly/3nGHmNn
🚀 This lesson is part of a CSS for Beginners tutorial series playlist:
• CSS Tutorials for Begi...
🔗 All Resources for this CSS Tutorial Series: github.com/gitdagray/css_course
📬 Course Updates ➜ courses.davegray.codes/
CSS Display Property Tutorial for Beginners
(00:00) Intro
(00:05) Welcome
(00:26) Setup
(01:25) CSS Display Property
(01:37) display: block
(04:51) display: inline
(06:30) display: inline-block
(07:51) block vs inline vs inline-block
(08:38) When is inline-block useful?
(08:59) Styling a simple nav menu
(14:11) Display types flex and grid
(14:28) Display type none
⚙ Web Dev Tools:
🔗 Chrome Browser: www.google.com/chrome/
🔗 Visual Studio Code (VS Code): code.visualstudio.com/
🔗 Live Server VS Code Extension: marketplace.visualstudio.com/...
🔗 vscode-icons VS Code Extension: marketplace.visualstudio.com/...
🔗 Github Themes VS Code Extension: marketplace.visualstudio.com/...
🔗 W3C CSS Validator: jigsaw.w3.org/css-validator/
🔗 Specificity Calculator: specificity.keegan.st/
📚 References:
🔗 MDN CSS: developer.mozilla.org/en-US/d...
🔗 MDN CSS Basics: developer.mozilla.org/en-US/d...
🔗 MDN CSS Selectors: developer.mozilla.org/en-US/d...
🔗 MDN - How to Apply Colors to HTML Elements with CSS: developer.mozilla.org/en-US/d...
🔗 MDN - CSS Values and Units: developer.mozilla.org/en-US/d...
🔗 MDN - The Box Model: developer.mozilla.org/en-US/d...
🔗 MDN - Styling Lists: developer.mozilla.org/en-US/d...
🔗 MDN - Display Property: developer.mozilla.org/en-US/d...
📚 Typography Resources:
🔗 MDN: Fundamental Text and Font Styling - developer.mozilla.org/en-US/d...
🔗 CSSFontStack.com: Websafe Fonts - www.cssfontstack.com/
🔗 MDN: Styling Links - developer.mozilla.org/en-US/d...
📚 Color Resources:
🔗 Coolors Contrast Checker: coolors.co/contrast-checker/1...
🔗 WebAIM Contrast Checker: webaim.org/resources/contrast...
🔗 Coolors Palette Generator: coolors.co/
🔗 HTML Color Codes: htmlcolorcodes.com/
✅ Follow Me:
Github: github.com/gitdagray
Twitter: / yesdavidgray
LinkedIn: / davidagray
Blog: yesdavidgray.com
Reddit: / daveoneleven
Was this tutorial about the CSS Display Property for Beginners helpful? If so, please share. Let me know your thoughts in the comments.
#css #display #property
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: th-cam.com/play/PL0Zuz27SZ-6Mx9fd9elt80G1bPcySmWit.html
I really love your teachings thank you very much
Dave, am very happy to see how your channel has grown. Your teaching delivery and content is worth the growth
Thank you! 💯🙏
Thank you, Dave
Progress over perfection! Thank you for your advice Dave 🙏
That's right! It's always a reminder for myself, too. Keep up the good work and you're welcome! 🚀
Great teacher❤
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.
You're welcome!
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!
Thank you, and I'm glad I helped!
Thank you Dave!
You're welcome!
Thanks for another great lesson Dave!
Glad you liked it! 💯
Great Work dave gray Thanks
Very welcome!
Thanks again for teaching us the basics.
You're welcome! 💯
Thank you! ♥
You're welcome!
One of the best.
Thank you!
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
Thank you! Glad I could help! 💯
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.
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!
You're very welcome!
Thank You
Welcome!
Dave sir ur the best 💛....love form India
Thank you! And hello to India! 👋
Hello Dave!! Take love. You do awesome things with less code and more efficient way.
Thank you for the kind words!
You are my best tutor.
Thank you!
CSS: Block, In-line and Inline-Block elements beautifully and clearly explained. Thanks, Dave
{2022-04-5}
Thank you, Paresh! 🙏🙏
you're so kind. I love you
🙏🙏
lots of love from India ❤️
please upload DAILY content✌️
Thank you 🙏
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
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.
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
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. 🚀
@@DaveGrayTeachesCode I found that the examples you provide focusing on one topic at a time without being crammed with unnecessary codes, so why not 😉.
Hi, thanks 👍👌, display is important property but many don't care about it.
You're welcome! 🙏 A CSS course is not complete without it 💯
Dave love your videos 😊❤️.Which theme you are using???
Thank you 🙏 GitHub theme 🚀
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 !!!
Thank you! 🙏 There is still more to come. Usually one a week.
@@DaveGrayTeachesCode Fabulous series Dave!
🔥🔥🔥
Hi, Please could you make a video on box-shadows and text-shadows.
Thank you for the request! 💯🙏
Can you please do a video on Responsive web design?
Please continue in this CSS series and you will find my tutorial on responsive web design.
@@DaveGrayTeachesCode okay Thanks 😊
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?
Yes, this series is currently underway with more videos to come. 🚀
@@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!
@@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.
@@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?
Dave, do you have UDEMY courses ? Thank you.
I do not. I am looking forward to releasing a premium course, but I may not use the Udemy platform.
@@DaveGrayTeachesCode Understood, looking forward to it, best wishes.
black hat SEO can hide mambo jambo keyword