From the course: Building a Responsive Single-Page Design with PostCSS

Unlock the full course today

Join today to access over 22,400 courses taught by industry experts or purchase this course individually.

Looking at our single-page responsive design

Looking at our single-page responsive design

From the course: Building a Responsive Single-Page Design with PostCSS

Start my 1-month free trial

Looking at our single-page responsive design

- [Voiceover] Before we get started, let's take a look at our finished product so you can take a peek at the features of what we're going to be building. This is a simple, single-page design with a few different sections that offer different layouts. So, for example, at the very top you can see that we have some navigation, right here, with a branding piece on the left, as well as a message at the bottom. We're going to be using Flexbox to build this design without using any floats, including the navigation. And we have a little bit of animation in the navigation and in other places. So this next section has a two-column layout. you can see that this photo is right here, but when I make the site a little less wide, that photo will go away. That gets handled with Media Queries. And you can see that there's also some full-screen images that are throughout the different places on the website. In the Products section, we have a layout that is partially constrained by a container, right…

Contents