CSS Tutorial for Absolute Beginners - Learn CSS3

Overview

Save Big on Coursera Plus. 7,000+ courses at $160 off. Limited Time Only!

Grab it

Embark on a comprehensive CSS3 tutorial designed for absolute beginners, guiding you through the process of building a responsive website. Learn the fundamentals of CSS3 syntax, cascading styles, and web design principles. Start by setting up your development environment with HTML and CSS files, then explore essential concepts like CSS reset, default styles, and reusable classes. Master techniques for styling navigation bars, main content, and footers while implementing responsive design using media queries. Dive into advanced topics such as BEM naming conventions, pseudo-selectors, and Unicode symbols. Gain practical knowledge on using developer tools, addressing cross-browser compatibility issues, and optimizing your workflow with VS Code extensions. By the end of this tutorial, you'll have a solid foundation in CSS3 and responsive web design, equipped with the skills to create visually appealing and functional websites.

Syllabus

Intro
CSS needs HTML
CSS3 definition
CSS cascades / CSS3 syntax
Dive into CSS
Start with the HTML code
Create your CSS file
Link your CSS3 to your HTML5
Add Live Server to VS Code
Chrome Dev Tools Mobile View / Responsive Web Design
CSS Reset / Select All
Setting Default CSS Styles
Defining Reusable CSS Classes
Applying Classes to HTML
Styling the navbar
BEM naming convention
Styling the main element
Applying styles to the posts
Changing the placeholder images
Styling the footer
Fixing the link scroll with scroll-margin-top
Using CanIUse.com to identify an iOS / Safari issue
Adding a media query for responsive web design
Post columns or equal height or not?
Adding more posts to the page
Updating the navbar to handle more links
Adding a pseudo-selector to the images
Adding a unicode symbol
Conclusion