We may earn an affiliate commission when you visit our partners.
Course image
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

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!
Read more
Color and Accessibility
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.
Visual Effects with CSS
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.
CSS Animation and User Experience
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.

Good to know

Know what's good
, what to watch for
, and possible dealbreakers
Teaches fundamental principles of typography, which is essential for effective communication in design
Covers advanced features of web fonts and explores innovative approaches in digital typography
Provides a comprehensive understanding of color theory and its practical applications in digital products
Introduces CSS animations, showcasing techniques for creating engaging and sophisticated web experiences
Emphasizes accessibility and cognitive load, ensuring inclusive and effective communication through typography
Involves hands-on project work, allowing learners to apply the concepts and techniques learned throughout the course

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

Reading list

We haven't picked any books for this reading list yet.

Share

Help others find this course page by sharing it with your friends and followers:
Our mission

OpenCourser helps millions of learners each year. People visit us to learn workspace skills, ace their exams, and nurture their curiosity.

Our extensive catalog contains over 50,000 courses and twice as many books. Browse by search, by topic, or even by career interests. We'll match you to the right resources quickly.

Find this site helpful? Tell a friend about us.

Affiliate disclosure

We're supported by our community of learners. When you purchase or subscribe to courses and programs or purchase books, we may earn a commission from our partners.

Your purchases help us maintain our catalog and keep our servers humming without ads.

Thank you for supporting OpenCourser.

© 2016 - 2024 OpenCourser