Essential CSS Concepts

Grow your skills with Coursera Plus for $239/year (usually $399). Save now.

Essential CSS Concepts

This course is part of Frontend Development Specialization

Instructors: Kevin Powell

Included with

Learn more

3 modules

Gain insight into a topic and learn the fundamentals.

Intermediate level

Recommended experience

6 hours to complete

Flexible schedule

Learn at your own pace

3 modules

Gain insight into a topic and learn the fundamentals.

Intermediate level

Recommended experience

6 hours to complete

Flexible schedule

Learn at your own pace

What you'll learn

Build fully styled, responsive websites using HTML and CSS.
Apply advanced CSS techniques like flexbox, z-index, and specificity to solve real-world design challenges.

Skills you'll gain

Tools you'll learn

Cascading Style Sheets (CSS)

Details to know

Shareable certificate

Add to your LinkedIn profile

Assessments

3 assignments

Taught in English

See how employees at top companies are mastering in-demand skills

Learn more about Coursera for Business

logos of Petrobras, TATA, Danone, Capgemini, P&G and L'Oreal

Build your subject-matter expertise

This course is part of the Frontend Development 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 3 modules in this course

This course gives you the practical skills to build and style professional websites with CSS. Starting with the fundamentals, you’ll practice hands-on challenges that cover layout, typography, colors, and buttons before moving into more advanced concepts including positioning, z-index, and CSS specificity.

Throughout the course, you’ll build a coworking space site and an NFT site, applying new techniques in real-world scenarios. You’ll explore how margins, flexbox, and selectors work, while learning to debug and refactor your code for clean, maintainable results. Each lesson introduces you to concepts step by step, ensuring you can both understand and apply CSS confidently. By the end, you’ll not only know how to create stylish, responsive page layouts but also how to organize CSS efficiently, handle tricky issues such as vertical alignment, and design with consistency across sections and elements. With challenges, guided projects, and applied examples, this course prepares you to bring your creative designs to life with CSS.

Learn how to build a structured, well-styled website from scratch using semantic HTML and practical CSS techniques, while tackling common layout challenges and enhancing interactivity.

What's included

1 assignment33 plugins

1 assignment Total 30 minutes

Build an NFT Site Graded Assignment 30 minutes

33 plugins Total 130 minutes

Welcome to interactive lessons! 1 minute
Essential CSS Concepts Intro 1 minute
Build an NFT Site Intro 1 minute
Semantic HTML - Header, Main, Section, Footer 6 minutes
Set up the CSS basics 4 minutes
Aside: Margins - strange behaviour 6 minutes
Header 4 minutes
The first section - image 3 minutes
The first section - text 6 minutes
Aside: Hover and active states 10 minutes
The first section - links 3 minutes
Aside: background full width 6 minutes
Content Container 4 minutes
CSS organisation 3 minutes
The second section colors 3 minutes
The second section imgs 4 minutes
Style the Footer 2 minutes
Grouping Selectors 4 minutes
Warning: Viewing Problems 1 minute
Aside: Specificity 6 minutes
Aside: Compound selectors 6 minutes
Aside: Compound selectors and specificity 5 minutes
Line-height debug 3 minutes
CSS specificity and !important keyword 3 minutes
Aside: Buttons/Links 3 minutes
Style the buttons individually 6 minutes
Aside: Inline-block 4 minutes
Space out the buttons 3 minutes
Aside: A main class and a modifier class 4 minutes
Refactor the buttons 3 minutes
Aside: Flexbox flex-wrap 1 minute
Aside: Overflow 6 minutes
Aside: CSS float 5 minutes

This course challenges you to apply core CSS skills through practical exercises, helping you refine layouts, typography, colors, and interactive elements to create polished, adaptable designs.

What's included

1 assignment21 plugins

1 assignment Total 30 minutes

CSS Fundamentals Challenges Graded Assignment 30 minutes

21 plugins Total 63 minutes

CSS Fundamentals: Challenges | Introduction 1 minute
CSS Fundamentals: Challenge #1 - Setting up the layout 1 minute
CSS Fundamentals: Solution #1 - Setting up the layout 3 minutes
CSS Fundamentals: Challenge #2 - Google fonts 1 minute
CSS Fundamentals: Solution #2 - Google fonts 2 minutes
CSS Fundamentals: Challenge #3 - Setting up the typography 1 minute
CSS Fundamentals: Solution #3 - Setting up the typography 3 minutes
CSS Fundamentals: Challenge #4 - Making things a little more fancy 2 minutes
CSS Fundamentals: Solution #4 - Making things a little more fancy 8 minutes
CSS Fundamentals: Challenge #5 - Breathing Room 2 minutes
CSS Fundamentals: Solution #5 - Breathing Room 7 minutes
CSS Fundamentals: Challenge #6 - Playing with colors 1 minute
CSS Fundamentals: Solution #6 - Playing with colors 3 minutes
CSS Fundamentals: Challenge #7 - The finer details 1 minute
CSS Fundamentals: Solution #7 - The finer details 5 minutes
CSS Fundamentals: Challenge #8 - Creating buttons 3 minutes
CSS Fundamentals: Solution #8 - Creating buttons 6 minutes
CSS Fundamentals: Challenge #9 - Fancier headings 1 minute
CSS Fundamentals: Solution #9 - Fancier headings 5 minutes
CSS Fundamentals: Challenge #10 - Working with what you have 2 minutes
CSS Fundamentals: Solution #10 - Working with what you have 5 minutes

This course guides you through building a coworking space website while mastering CSS positioning, alignment, and layering techniques to create a functional and visually appealing layout.

What's included

1 assignment13 plugins

1 assignment Total 30 minutes

Build a Coworking Space Site Graded Assignment 30 minutes

13 plugins Total 67 minutes

Intro 3 minutes
Build the foundations 10 minutes
Aside: margin: auto on flexbox children 9 minutes
Position the menu icon 2 minutes
Aside: Position: relative & absolute 9 minutes
Add the image banner 5 minutes
Add buttons 6 minutes
Stop the vertical stretch on the button 3 minutes
Aside: Position Fixed 5 minutes
Add the chatbox 5 minutes
Aside: z-index 6 minutes
z-index challenge 2 minutes
Outro 2 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.

Instructors

Kevin Powell

Scrimba

5 Courses 9,885 learners

Offered by

Scrimba

Explore more from Mobile and Web Development

Packt
Styling with CSS – Layouts and Visual Design
Course
Packt
CSS Modern Responsive Web Design – Build 5 Websites
Course
EDUCBA
CSS: Design & Optimize Responsive Web Pages
Course
Board Infinity
Advanced CSS Techniques & Responsive Design
Course

Why people choose Coursera for their career

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."

Jennifer J.

Learner since 2020

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

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."

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."

Open new doors with Coursera Plus

Unlimited access to 10,000+ world-class courses, hands-on projects, and job-ready certificate programs - all included in your subscription

Learn more

Advance your career with an online degree

Earn a degree from world-class universities - 100% online

Explore degrees

Join over 3,400 global companies that choose Coursera for Business

Upskill your employees to excel in the digital economy

Learn more

Frequently asked questions

To access the course materials, assignments and to earn a Certificate, you will need to purchase the Certificate experience when you enroll in a course. You can try a Free Trial instead, or apply for Financial Aid. The course may offer 'Full Course, No Certificate' instead. This option lets you see all course materials, submit required assessments, and get a final grade. This also means that you will not be able to purchase a Certificate experience.

When you enroll in the course, you get access to all of the courses in the Specialization, and you earn a certificate when you complete the work. Your electronic Certificate will be added to your Accomplishments page - from there, you can print your Certificate or add it to your LinkedIn profile.

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.