đ Key Learning Outcomes
- Gain a strong foundation in CSS, learning how to style text, create navigation bars, headers, footers, and add icons to your web pages.
- Understand the box model, CSS variables, and how to manage layout with Flexbox and Grid for responsive designs.
- Develop practical skills in creating and styling a professional portfolio website from scratch using modern CSS techniques.
- Learn to make your website responsive, ensuring it looks great on mobile, tablet, and desktop devices.
- Explore advanced CSS features like gradients, media queries, and icon integration for enhanced visual appeal.
đ¨âđĢ About the Course
This course, taught by Jen Kramer, is an introduction to CSS for beginners, focusing on practical, hands-on learning. You'll start with the basics of styling text and build up to more complex tasks like creating navigation bars, headers, and footers. The course culminates in the creation of a professional portfolio website, where you'll apply everything you've learned. Along the way, you'll explore essential concepts like Flexbox, Grid, CSS variables, and responsive design to ensure your websites are both stylish and functional.
đ¯ Target Audience
- Beginners who are new to CSS and want to learn how to style websites effectively.
- Developers who want to build a solid foundation in CSS before moving on to more advanced topics.
- Designers looking to transition into web development by learning how to create and style web pages.
- Anyone interested in creating a professional portfolio website from scratch using HTML and CSS.
â Requirements
- Basic understanding of HTML is recommended.
- No prior experience with CSS is required.
đ Course Content
- Introduction to CSS: Get an overview of what CSS is and what you will achieve by the end of the course. Set up your development environment and project files.
- Text Styling: Learn how to style text, including font sizes, colors, and spacing. Explore CSS variables and the box model.
- Navigation Bar: Create and style a navigation bar using Flexbox. Add icons and make the navigation responsive for different screen sizes.
- Additional Styles: Add a call-to-action button, style a footer, and create responsive layouts using media queries.
- Portfolio Project: Build and style a portfolio section using CSS Grid. Make your project responsive and explore advanced layout techniques like overlapping items.
- Finalizing the Website: Transfer your project from CodePen to VS Code, complete the home page, and build an "About" page to finish your website.
Drop a comment
Getting Started with CSS by Jen Kramer
Log in to leave a feedback
Loginđ Psst! Interested in More CSS Courses?
Bootstrap 5 From Scratch: Build 5 Modern WebsitesVideo
by Brad Traversy
đšī¸ Levels: đą Beginner
âŗ Duration: 13 hours
đ¤ Price: 25
Get Started with Flexbox CSS LayoutsVideo
by Chris Achard
đšī¸ Levels: đą Beginner
âŗ Duration: 0.5 hours
đ¤ Price: Subscription
đ§âđģ Learning Platform: Egghead.io
Learn CSS: Responsive DesignWrittenInteractive
by Jiwon Shin
đšī¸ Levels: đ Intermediate
âŗ Duration: 2 hours
đ¤ Price: Subscription
đ§âđģ Learning Platform: Codecademy