O'Reilly logo

Mobile First Design with HTML5 and CSS3 by Jason Gonzalez

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Chapter 3. Building the Gallery Page

In the previous chapter, we did a lot of work and we built quite a base for the rest of our portfolio site. With the knowledge we now have and the small amount of code we wrote on top of the 320 and Up framework, we can really start to move fast. In this chapter, we are going to do just that. We are going to build a gallery of panels that will be stacked for narrow screens and tiled for wide screens. To do this, we are going to use the same basic approach that we did in the previous chapter for the triad of content panels at the bottom of our page.

Creating the wireframe

Before we jump into the code, let's take a look at some wireframes. The following screenshot shows how our screen should look on a small screen: ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required