Styling with CSS – Layouts and Visual Design
Keep adding new skills with 10,000+ programs for $239 (usually $399). Save now.
Styling with CSS – Layouts and Visual Design
This course is part of The Art of Doing - Web Development for Beginners Specialization
Included with
Recommended experience
Recommended experience
What you'll learn
Understand and apply basic CSS rules and selectors to style web elements
Master Flexbox and CSS Grid for responsive, dynamic layouts
Use CSS transitions and animations to create interactive design elements
Build practical projects to enhance your skills in creating multi-page websites
Skills you'll gain
Tools you'll learn
Details to know
See how employees at top companies are mastering in-demand skills
Build your subject-matter expertise
- Learn new concepts from industry experts
- Gain a foundational understanding of a subject or tool
- Develop job-relevant skills with hands-on projects
- Earn a shareable career certificate
There are 4 modules in this course
This course features Coursera Coach!
A smarter way to learn with interactive, real-time conversations that help you test your knowledge, challenge assumptions, and deepen your understanding as you progress through the course. In this course, you'll master CSS to create visually stunning web pages with effective layouts and design elements. Starting with the basics of styling, you’ll learn how to use CSS rules to manipulate text, images, and elements to craft well-organized and visually appealing web designs. As the course progresses, you’ll dive into layout systems such as Flexbox and Grid, which will enable you to design responsive and flexible web pages for a range of devices. The course begins with the essentials of CSS, including selectors, writing rules, and styling elements like colors, fonts, and widths. You will apply these concepts as you build projects like a storefront website, using CSS to style multiple pages, including the homepage, about page, and contact page. Then, you will explore advanced layout systems such as Flexbox and CSS Grid to create sophisticated, responsive designs. You'll also learn how to use transitions and animations to enhance the interactivity and user experience of your pages. This course is perfect for beginners who want to learn CSS and web design fundamentals. No prior knowledge of CSS is required. By the end of the course, you’ll be able to create fully styled, functional websites with engaging layouts and dynamic effects.
In this module, we will cover the essentials of CSS, from writing basic rules to using selectors for styling HTML elements. You’ll learn how to set widths, define font sizes, and apply color in your designs. You will also kick off your first project, the "Store Front" website, and apply these CSS fundamentals to style your pages.
What's included
8 videos2 readings1 assignment
8 videos•Total 107 minutes
- Writing CSS Rules•16 minutes
- CSS Selectors•16 minutes
- Defining Element Width•15 minutes
- Defining Font Size•14 minutes
- Defining Color•12 minutes
- Store Front Preview•5 minutes
- Store Front Project - Part 1•17 minutes
- Store Front Project - Part 2•12 minutes
2 readings•Total 20 minutes
- Introduction to the Course 'Styling with CSS – Layouts and Visual Design'•10 minutes
- Full Specialization Resources•10 minutes
1 assignment•Total 15 minutes
- CSS Basics - Assessment•15 minutes
In this module, we’ll explore key CSS styling elements such as the Box Model, text styling, and customizing lists and tables. You’ll also dive into the display property to control the layout of block and inline elements. You’ll continue building your "Store Front" project, applying these concepts to create a polished and functional design.
What's included
9 videos1 assignment
9 videos•Total 146 minutes
- The Box Model•22 minutes
- Styling Text•14 minutes
- Styling Lists and Tables•14 minutes
- The Display Property: Block Values•16 minutes
- The Display Property: Inline Values•17 minutes
- Store Front Two Preview•5 minutes
- Store Front Two Project Part 1•21 minutes
- Store Front Two Project Part 2•17 minutes
- Store Front Two Project Part 3•20 minutes
1 assignment•Total 15 minutes
- CSS Styling Elements - Assessment•15 minutes
In this module, we will dive into CSS layout systems, including Flexbox and Grid, to create complex, responsive web designs. You’ll learn how to structure your layouts using these systems and apply them in the "Search Engine" project, designing a layout inspired by Google’s homepage with a combination of Grid and Flexbox.
What's included
9 videos1 assignment
9 videos•Total 133 minutes
- Flexbox Basics•16 minutes
- Using Flexbox with HTML Elements•14 minutes
- Grid Basics•22 minutes
- Using Grid with HTML Elements•20 minutes
- Search Engine Preview•4 minutes
- Search Engine Project Part 1•16 minutes
- Search Engine Project Part 2•22 minutes
- Search Engine Project Part 3•6 minutes
- Debugging an Issue•13 minutes
1 assignment•Total 15 minutes
- CSS Layout Systems - Assessment•15 minutes
In this module, we will focus on adding dynamic visual effects to your web pages using CSS transitions and animations. You’ll learn how to animate elements with keyframes, apply smooth transitions for hover effects, and use pseudo-classes to improve user interaction. This will all come together in the final CSS project, where you’ll build and animate a website with engaging, interactive elements.
What's included
9 videos1 reading3 assignments
9 videos•Total 143 minutes
- Pseudo Classes•19 minutes
- CSS Transforms•17 minutes
- CSS Transitions•21 minutes
- CSS Animations•14 minutes
- Final CSS Project Preview•5 minutes
- Final CSS Project Part 1•13 minutes
- Final CSS Project Part 2•17 minutes
- Final CSS Project Part 3•18 minutes
- Final CSS Project Part 4•19 minutes
1 reading•Total 10 minutes
- Conclusion to the Course 'Styling with CSS – Layouts and Visual Design'•10 minutes
3 assignments•Total 90 minutes
- Full Course Practice Assessment•15 minutes
- CSS Transitions and Animations - Assessment•15 minutes
- Full Course Assessment•60 minutes
Earn a career certificate
Add this credential to your LinkedIn profile, resume, or CV. Share it on social media and in your performance review.
Instructor
Explore more from Mobile and Web Development
Why people choose Coursera for their career
Frequently asked questions
Yes, you can preview the first video and view the syllabus before you enroll. You must purchase the course to access content not included in the preview.
If you decide to enroll in the course before the session start date, you will have access to all of the lecture videos and readings for the course. You’ll be able to submit assignments once the session starts.
Once you enroll and your session begins, you will have access to all videos and other resources, including reading items and the course discussion forum. You’ll be able to view and submit practice assessments, and complete required graded assignments to earn a grade and a Course Certificate.
More questions
Financial aid available,
