Beyond Basic CSS

Typography, Color, Effects, & Animation

William Mead

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.

Enroll now

Or subscribe to Coursera Plus

And get unlimited access to Coursera

Two deals to help you save

We found two deals and offers that may be relevant to this course.

Save money when you learn. All coupon codes, vouchers, and discounts are applied automatically unless otherwise noted.

Valid for a limited time only

Future-proof your career

Access O'Reilly books, live events, courses, and more. Save with an annual subscription.

Take

15%

off

What's inside

Syllabus

Typography and Managing Cognitive Load

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!

Save this course

Save Beyond Basic CSS: Typography, Color, Effects, & Animation to your list so you can find it easily later:

Save

Activities

Be better prepared before your course. Deepen your understanding during and after it. Supplement your coursework and achieve mastery of the topics covered in Beyond Basic CSS: Typography, Color, Effects, & Animation with these activities:

Refresh Typography Basics

Show steps

Review the fundamentals of typography, such as font families, typefaces, and text styles, to strengthen your understanding of the subject matter covered in this course.

Browse courses on Typography

Show steps

Review articles on typography principles
Analyze different typefaces and their impact on web designs

Read 'The Elements of Typographic Style' by Robert Bringhurst

Show steps

Expand your knowledge of typography by reading Robert Bringhurst's seminal work, which provides a comprehensive guide to the principles and practices of typography, enhancing your understanding of the subject matter covered in this course.

Show steps

Read the book
Take notes on key concepts

Practice Typographic Design

Show steps

Engage in regular practice of typographic design through exercises, such as creating typographic posters or designing website layouts, to improve your skills and solidify your understanding of the principles covered in this course.

Browse courses on Typography

Show steps

Find typographic design exercises online
Experiment with different typefaces and layouts
Seek feedback on your designs

Five other activities

Expand to see all activities and additional details

Show all eight activities

Explore Advanced CSS Techniques

Show steps

Follow online tutorials to learn advanced CSS techniques, such as using CSS preprocessors, creating custom CSS frameworks, and implementing advanced layout techniques, to enhance your web design skills.

Browse courses on CSS

Show steps

Identify and select relevant CSS tutorials
Follow the tutorials step-by-step
Implement the learned techniques in your web design projects

Design a Website Layout

Show steps

Create a detailed website layout that incorporates the principles of typography, color theory, and CSS animations covered in the course to demonstrate your understanding of these concepts and improve your design skills.

Browse courses on Web Design

Show steps

Plan the website's layout and structure
Select and implement appropriate typography
Apply color theory and CSS animations

Develop a Website Prototype

Show steps

Create a prototype of a website that incorporates the principles of typography, color theory, and CSS animations covered in the course to demonstrate your understanding of these concepts.

Browse courses on Web Design

Show steps

Plan the website's layout and structure
Implement typography and color schemes
Incorporate CSS animations and transitions
Test and refine the prototype

Assist with a Web Design Project

Show steps

Volunteer your skills in typography, color theory, and CSS animations on a web design project to gain practical experience and contribute to a meaningful cause.

Browse courses on Web Design

Show steps

Identify volunteer opportunities
Contact organizations and offer your assistance
Collaborate on web design projects

Build a Personal Portfolio Website

Show steps

Create a personal portfolio website that showcases your skills in typography, color theory, and CSS animations to demonstrate your proficiency in these areas and build your professional online presence.

Browse courses on Web Design

Show steps

Plan the website's content and structure
Design and implement the website
Incorporate interactive elements, such as animations and transitions
Publish the website and promote it

Career center

Learners who complete Beyond Basic CSS: Typography, Color, Effects, & Animation will develop knowledge and skills that may be useful to these careers: