Advanced CSS Layouts

Type Scale Exercise

Jen Kramer

Jen Kramer

Advanced CSS Layouts

Check out a free preview of the full Advanced CSS Layouts course

The "Type Scale Exercise" Lesson is part of the full, Advanced CSS Layouts course featured in this preview video. Here's what you'd learn in this lesson:

Students are instructed to adjust the type on the home page to match an example image from the starter code in chapter 8 the course repository.


Transcript from the "Type Scale Exercise" Lesson

>> Jen Kramer: And in chapter eight, it's called the you try it type scale? Okay, so what you're going to do now is you've got the book once again. I've got all of the various screenshots of how the fonts are actually supposed to look at this point, okay? And they project really badly so you should look at this on your screen.

The little words on the top, the H1's actually got really small. There are some other size changes that happen here. Notice hat the layout times is actually laid out a little bit more nicely than it was before. [LAUGH] It was kinda ugly before. There's a deep irony and a bad layout for the layout times.

In any case, so you can go ahead and flip through these. There's the home versions. There's also the book version with the changes that are there. And so what I'd like for you to do then is, I've given you in your beginning files, in your CSS, for both the homepage and for the inside page.

I have given you a file called type.css, and I've linked it up to both of those. This is the code that we just wrote, okay? So this is the code from the code pen that we just wrote. It's a starting point. What I'd like for you to do now is to think about what would actually work on this website?

What kind of additional changes do you need to tweak? How do you tweak them? Basically what you did with layout but now you're gonna do it with type. Sound good?

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now