1700 Coursera Courses Still Fully Free!

Class Central is learner-supported. When you buy through links on our site, we may earn an affiliate commission.

University of Michigan

Introduction to CSS3

University of Michigan via Coursera

Go to class Write review

Overview

Class Central Tips
The web today is almost unrecognizable from the early days of white pages with lists of blue links. Now, sites are designed with complex layouts, unique fonts, and customized color schemes. This course will show you the basics of Cascading Style Sheets (CSS3). The emphasis will be on learning how to write CSS rules, how to test code, and how to establish good programming habits.

When done correctly, the styling of a webpage can take enhance your page. When done incorrectly the result can be worse than no styling at all. To ensure that your sites do not put up barriers for people with cognitive and/or physical disabilities, you will learn how to evaluate pages using the standardized POUR accessibility guidelines. Upon completion of the course, learners will be able to sketch a design for a given HTML page. Using that design they will use CSS to implement the design by adding fonts, colors, and layouts.

This is the second course in the Web Design For Everybody specialization. Subsequent courses focus on adding interaction with JavaScript and enhancing the styling with responsive design.

It will be difficult to complete this course if you do not have access to a laptop or desktop computer for the homework.

Syllabus

  • Week One: Getting Started with Simple Styling
    • Welcome to Introduction to CSS3! In this course you will learn how to style your pages by taking advantage of the power of CSS3. We will focus on both proper syntax (how to write your styling rules) and the importance of accessibility design (making sure that your style enhances your site, not make it harder to navigate). It is so important that you jump in ready to make mistakes and typos in this course. The only way you will really understand the material is to practice typing it in on your own as often as possible.
  • Week Two: Advanced Styling
    • Colors and fonts are just the start to styling your page. The nice thing about starting with these properties is that they are usually very straightforward to implement. You pick a color and boom - instant, expected results. This week we move on to new properties that tend to require a little bit of tweaking to get the desired results. In particular we will talk about the Box Model, background images, opacity, float, columns, visibility, and designing for different browsers.
  • Week Three: Psuedo-classes, Pseudo-elements, Transitions, and Positioning
    • Have you ever noticed on a web page that some links are blue and others are purple, depending upon if you have clicked on the links? How is it possible to style some anchor tags and not others? This week you will learn how to style pseudo-classes (e.g. a link that has been visiting, an element that has the mouse hovering over it) and pseudo-elements (e.g. the first-letter of a heading, the first line of a paragraph). These elements are not difficult to style, but do require careful coding. It is also the first step to adding simple animation to your site. We end this week with the subject of positioning -- how to get elements to stick to a certain part of your page. Think about annoying pop-up ads. How do the programmers get them to stay RIGHT IN THE MIDDLE OF THE SCREEN despite the fact that you keep trying to scroll them away.
  • Week Four: Putting It All Together
    • This week I am going to do some code review. I will show you how I used pseudo-classes and pseudo-elements to style a table. Then I give you a demonstration of three different navigation bars that utilize different styling options. We will want to step back and talk about how these different options may affect the accessibility of our site. The final step to completing this course is the completion of the peer-graded project. You will have the chance to demonstrate the ability to follow styling guidelines while still putting your own personal touch on the project. Just remember, you need to validate your work for proper syntax and accessibility.
  • Where To Go From Here?
    • If you would like to do more now that you have finished this course, I have a few recommendations. The most important thing is that you continue to practice your skills and always have "something" that you are working on.

Taught by

Colleen Van Lent

Tags

Reviews

4.6 rating, based on 14 Class Central reviews

4.8 rating at Coursera based on 9167 ratings

Start your review of Introduction to CSS3

  • Profile image for Maria Stoica
    Maria Stoica
    As a follow up to introduction to HTML, this course teaches you what you need to know to get started with CSS. It's interesting that they chose not to cover Grid or Flexbox (which are covered in FreeCodeCamp). There is some confusion regarding how alignment is described, and I'm still not quite clear on it, but overall I feel this is the most thorough online course I have taken on CSS.
  • Profile image for Linda Watson
    Linda Watson

    Linda Watson completed this course.

    If you are looking to do web design this is a great course on using CSS3! It is explained and you are given examples along with practice exercises. Two techniques I will be able to use in my website immediately!
  • Jose Luis F F C Borges

    Jose Luis F F C Borges completed this course, spending 5 hours a week on it and found the course difficulty to be very easy.

    Good introductory level course on CSS. Clear explanations by instructor. Three assignments that although not difficult are important to consolidate knowledge.
  • Anonymous

    Anonymous completed this course.

    This is a very good course for beginners. The instructor explains concepts clearly and provides good coding examples. The instructor also provides a list of other resources student can use.
  • Profile image for James Springle
    James Springle

    James Springle completed this course.

  • Colin Khein

    Colin Khein completed this course.

  • Profile image for Rayhaan Pirani
    Rayhaan Pirani

    Rayhaan Pirani completed this course.

  • Sajid Zaman

    Sajid Zaman completed this course.

  • Krešimir Mandić

    Krešimir Mandić completed this course.

  • Charles Starbuck

    Charles Starbuck completed this course.

  • Anestis Kotidis

    Anestis Kotidis completed this course.

  • Asdoost

    Asdoost completed this course.

  • Profile image for Abhilash Vj
    Abhilash Vj

    Abhilash Vj completed this course.

  • Monica Carvajal

    Monica Carvajal completed this course.

Go to class

Never Stop Learning.

Get personalized course recommendations, track subjects and courses with reminders, and more.

Sign up for free