Beyond Basic CSS: Typography, Color, Effects, & Animation

This course is part of Web Development for Beginners Specialization

Instructor: William Mead

Access provided by Financial Conduct Authority

4 modules

Gain insight into a topic and learn the fundamentals.

Intermediate level

Some related experience required

1 week to complete

at 10 hours a week

Flexible schedule

Learn at your own pace

4 modules

Gain insight into a topic and learn the fundamentals.

Intermediate level

Some related experience required

1 week to complete

at 10 hours a week

Flexible schedule

Learn at your own pace

Skills you'll gain

Tools you'll learn

Cascading Style Sheets (CSS)

Details to know

Shareable certificate

Add to your LinkedIn profile

Assessments

4 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 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

In this course, you’ll learn how type communicates and how styling and organization of written content affects the message. You’ll look at advanced features of web fonts and see how type designers are taking the fields of digital type to the next level. Then, you’ll learn about color, color theory, and the practice of using color in your digital products and work with color by exploring gradients, other effects, and work to create a website using techniques learned in this course. Finally, we’ll wrap up the course by learning how to create animations in CSS using transitions, 2d and 3d transformations, as well as keyframes to create sophisticated animations on the web.

Welcome to the course! In this first module, we will start talking about typography. It is often said that 90% of web design is typography, so understanding the basics of how type communicates and how the styling and organization of written content affects the message and speaks to your audience is super important. Let’s get started!

What's included

12 videos1 reading1 assignment2 discussion prompts

12 videos Total 101 minutes

Course Introduction 3 minutes
Module 1 Introduction 2 minutes
History of Typography on the Web, Part 1 5 minutes
History of Typography on the Web, Part 2 8 minutes
History of Typography on the Web, Part 3 8 minutes
Optional Web Font Setup 13 minutes
Basic Web Fonts, Part 1 6 minutes
Basic Web Fonts, Part 2 7 minutes
Basic Web Fonts, Part 3 12 minutes
Basic Web Fonts, Part 4 13 minutes
Basic Web Fonts, Part 5 13 minutes
Basic Web Fonts, Part 6 12 minutes

1 reading Total 1 minute

Course Navigation and Safety Statement 1 minute

1 assignment Total 20 minutes

Module 1 Quiz 20 minutes

2 discussion prompts Total 25 minutes

Learning Goals 10 minutes
Module 1 Discussion 15 minutes

Welcome to the second module! In this module we will look at some more advanced features of web fonts and see how type designers are taking the field of digital type to the next level. We will also dive more into color, color theory, and the practice of using color in your digital products. There are also exciting developments for the use of color on websites through CSS that we will explore.

What's included

12 videos1 assignment1 discussion prompt

12 videos Total 92 minutes

Module 2 Introduction 1 minute
Advanced Web Fonts, Part 1 6 minutes
Advanced Web Fonts, Part 2 10 minutes
Advanced Web Fonts, Part 3 9 minutes
Advanced Web Fonts, Part 4 10 minutes
Typography and Usability in Design 12 minutes
Color Spaces and Formats, Part 1 6 minutes
Color Spaces and Formats, Part 2 7 minutes
Color Spaces and Formats, Part 3 9 minutes
Color in Design, Part 1 6 minutes
Color in Design, Part 2 7 minutes
Color in Design, Part 3 9 minutes

1 assignment Total 30 minutes

Module 2 Quiz 30 minutes

1 discussion prompt Total 15 minutes

Module 2 Discussion 15 minutes

Welcome to the third module! In this module we will continue to work with color by exploring gradients, as well as other effects such as drop shadows and repeating background patterns. You will follow this up by creating a whole website using the techniques learned so far in the course, putting it all together, and hosting it on GitHub.

What's included

16 videos1 assignment1 discussion prompt

16 videos Total 99 minutes

Module 3 Introduction 1 minute
CSS Backgrounds & Effects, Part 1 7 minutes
CSS Backgrounds & Effects, Part 2 8 minutes
CSS Backgrounds & Effects, Part 3 3 minutes
CSS Backgrounds & Effects, Part 4 7 minutes
CSS Backgrounds & Effects, Part 5 5 minutes
CSS Backgrounds & Effects, Part 6 8 minutes
Blog Project, Part 1 7 minutes
Blog Project, Part 2 8 minutes
Blog Project, Part 3 7 minutes
Blog Project, Part 4 7 minutes
Blog Project, Part 5 6 minutes
Blog Project, Part 6 5 minutes
Blog Project, Part 7 8 minutes
Blog Project, Part 8 6 minutes
Blog Project, Part 9 5 minutes

1 assignment Total 20 minutes

Module 3 Quiz 20 minutes

1 discussion prompt Total 15 minutes

Module 3 Discussion 15 minutes

Welcome to the fourth and final module! In this module you will learn how to create animations in CSS. You will use transitions, 2d and 3d transformations, as well as keyframes to create sophisticated animations for the web. Along the way, you will learn about easing and how to use a few positioning properties to help construct sophisticated animations that could be included in your web pages.