VOOZH about

URL: https://www.coursera.org/learn/packt-styling-with-css-layouts-and-visual-design-3dssp

⇱ Styling with CSS – Layouts and Visual Design | Coursera


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

Included with

Gain insight into a topic and learn the fundamentals.
Beginner level

Recommended experience

1 week to complete
at 10 hours a week
Flexible schedule
Learn at your own pace

Gain insight into a topic and learn the fundamentals.
Beginner level

Recommended experience

1 week to complete
at 10 hours a week
Flexible schedule
Learn at your own pace

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

Details to know

Shareable certificate

Add to your LinkedIn profile

Assessments

6 assignments

Taught in English

Build your subject-matter expertise

This course is part of the The Art of Doing - Web Development for Beginners Specialization
When you enroll in this course, you'll also be enrolled in this Specialization.
  • 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 videosTotal 107 minutes
  • Writing CSS Rules16 minutes
  • CSS Selectors16 minutes
  • Defining Element Width15 minutes
  • Defining Font Size14 minutes
  • Defining Color12 minutes
  • Store Front Preview5 minutes
  • Store Front Project - Part 117 minutes
  • Store Front Project - Part 212 minutes
2 readingsTotal 20 minutes
  • Introduction to the Course 'Styling with CSS – Layouts and Visual Design'10 minutes
  • Full Specialization Resources10 minutes
1 assignmentTotal 15 minutes
  • CSS Basics - Assessment15 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 videosTotal 146 minutes
  • The Box Model22 minutes
  • Styling Text14 minutes
  • Styling Lists and Tables14 minutes
  • The Display Property: Block Values16 minutes
  • The Display Property: Inline Values17 minutes
  • Store Front Two Preview5 minutes
  • Store Front Two Project Part 121 minutes
  • Store Front Two Project Part 217 minutes
  • Store Front Two Project Part 320 minutes
1 assignmentTotal 15 minutes
  • CSS Styling Elements - Assessment15 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 videosTotal 133 minutes
  • Flexbox Basics16 minutes
  • Using Flexbox with HTML Elements14 minutes
  • Grid Basics22 minutes
  • Using Grid with HTML Elements20 minutes
  • Search Engine Preview4 minutes
  • Search Engine Project Part 116 minutes
  • Search Engine Project Part 222 minutes
  • Search Engine Project Part 36 minutes
  • Debugging an Issue13 minutes
1 assignmentTotal 15 minutes
  • CSS Layout Systems - Assessment15 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 videosTotal 143 minutes
  • Pseudo Classes19 minutes
  • CSS Transforms17 minutes
  • CSS Transitions21 minutes
  • CSS Animations14 minutes
  • Final CSS Project Preview5 minutes
  • Final CSS Project Part 113 minutes
  • Final CSS Project Part 217 minutes
  • Final CSS Project Part 318 minutes
  • Final CSS Project Part 419 minutes
1 readingTotal 10 minutes
  • Conclusion to the Course 'Styling with CSS – Layouts and Visual Design'10 minutes
3 assignmentsTotal 90 minutes
  • Full Course Practice Assessment15 minutes
  • CSS Transitions and Animations - Assessment15 minutes
  • Full Course Assessment60 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

Offered by

Why people choose Coursera for their career

👁 Image

Felipe M.

Learner since 2018
"To be able to take courses at my own pace and rhythm has been an amazing experience. I can learn whenever it fits my schedule and mood."
👁 Image

Jennifer J.

Learner since 2020
"I directly applied the concepts and skills I learned from my courses to an exciting new project at work."
👁 Image

Larry W.

Learner since 2021
"When I need courses on topics that my university doesn't offer, Coursera is one of the best places to go."
👁 Image

Chaitanya A.

"Learning isn't just about being better at your job: it's so much more than that. Coursera allows me to learn without limits."

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.

If you complete the course successfully, your electronic Course Certificate will be added to your Accomplishments page - from there, you can print your Course Certificate or add it to your LinkedIn profile.

This course is currently available only to learners who have paid or received financial aid, when available.

Yes. In select learning programs, you can apply for financial aid or a scholarship if you can’t afford the enrollment fee. If fin aid or scholarship is available for your learning program selection, you’ll find a link to apply on the description page.

Financial aid available,