Advanced CSS Layouts

Article Layout Exercise

Jen Kramer

Jen Kramer

Advanced CSS Layouts

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

The "Article Layout 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 use custom properties and CSS Calc() to create a webpage matching an example image from starter code in chapter 5 of the course repository.


Transcript from the "Article Layout Exercise" Lesson

>> Jen Kramer: So now, we're going to move on to chapter six, which is the inside page layout for this website. And in your chapter six folder, you will find some images that are going to describe how this pages should look. So at extra large and large dimensions, we want it to look like this.

In other words, we have a floated book, we have a bunch of stuff going on. By the way, everybody take a cool little look there. Look at how the text wraps around the image around that circle. Isn't that amazing? You should be amazed. That is a new cool thing called CSS shapes.

And when we talk about the answers, I'd be happy to show you a little bit about that, cuz that's pretty slick. So this is the way it's gonna work here at extra-large and large dimensions. Here we are at medium dimensions. And you can see that we have things have gotten a bit skinnier here, okay?

Columns going on down. And then finally, here's what it should look like at small dimensions, okay? Look at book dot html, that is your starting file for this. You'll see that I've added to this a page called inside dot css. If you take a look at inside dot css, this is just some of the styling that has to do with that book page.

There's nothing here in terms of layout, so you don't really need to spend any time with this. The file that I would spend time with is the layout dot css. What you're gonna need to do is figure out how to make that inside page. Go on ahead and work through those layouts.

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