CSS Flow: Inline-block (Clip 18): Gentle Introduction to CSS for Beginners
Lay out block elements into horizontal columns using display: inline-block and use the developer tools Elements tab to debug layout issues
Use this link for the full course playlist: • Gentle Introduction to CSS for Beginners
Lesson Links
"display": https://developer.mozilla.org/en-US/d...
To view the code for the "coding along" exercises in this lesson, click the link below. This takes you to my GitHub, which is a site for storing code files. You can then copy/paste text from those files (saving you some typing) or compare your code to the code from the exercise.
Layout (index.html): https://github.com/DeborahK/Gentle-In...
Layout (style.css): https://github.com/DeborahK/Gentle-In...
Content
00:00 Inline-block elements
00:06 CSS display property
00:30 Coding Along: display: inline-block
03:36 Use developer tools to debug layout issues
04:38 Key points
Course Description
Every web page you see has some style: colors, fonts, backgrounds, layout. This course provides a gentle introduction to CSS, or cascading style sheets, for styling your websites.
You'll learn about CSS, where to define styles, CSS syntax, selectors, and the CSS box module. You'll try out CSS layout features and explore how styles cascade. Throughout this course, you'll style a web page.
Audience
• Anyone new to web development.
• Students considering a web developer career.
• Existing web developers that want to reinforce their CSS knowledge.
• Those that manage or interact with web developers to better understand what CSS is and how it's used.
This course assumes you are familiar with the basics of HTML. If not, consider watching this HTML course first: • Gentle Introduction to HTML for Begin...
This is the fourth course of the "How to Become a Web Developer" series.
