Course info
Mar 24, 2015
2h 29m

Millions of web designers use Foundation as a part of their workflow. This course introduces web developers to the power of Foundation 5, a free CSS Framework from Zurb. This hand-on course will cover download, setup, development, and deployment of multiple web pages that demonstrate the power of Foundation as a responsive, mobile-first design tool.

About the author
About the author

Paul Cheney is a professor of Web Design and Development at Utah Valley University, where he teaches Responsive Design. He also owns his own web design company, which allows him to keep current in the field and share the latest technology with his students.

More from the author
Hands-on JavaScript Project: JSON
1h 16m
Oct 26, 2018
Best Practices for Responsive Web-forms
1h 10m
May 31, 2018
Hands-on Responsive Web Design 4: Navigation
1h 36m
Jan 22, 2018
More courses by Paul Cheney
Section Introduction Transcripts
Section Introduction Transcripts

Responsive Images
Now that you have your very own copy of Foundation, let's get some work done on our header using the power of responsive images. By now you know who I am, so let's just get started. In this module we will review the need for responsive images and then create two different sets of three responsive header images in Photoshop. Next we will add the images to our site and then add the HTML and CSS to make them work properly. Also in the header we have a phone number and some social icons we need to add. Then we're going to change direction and look at the 12-column grid system provided by Foundation 5 in how to set up a basic row with columns. As we create and modify various column combinations, we will look at the results on various mobile devices.

Content is king, and Foundation does it well. Let's keep our project going by trying out some basic tags along with a really sweet block grid for an image gallery. In this module we will see how Foundation handles some of the most common HTML tags. Then we will use the block grid provided in Foundation to present a bunch of differently sized images in rows and columns. Next we will use the Foundation tabbed content to present information on three different terms in the same space. Then we will demonstrate how to dynamically scale a YouTube video so that it maintains proportion as it changes width on different devices. Finally, we will look at a callout panel as a way to draw attention to part of a website.

I love sliders, and after this unit you're going to love them too. A site with a touch-enabled slider for mobile that uses the same action for desktop is what you're going to learn in this module. Well, I haven't gone anywhere, so let's begin. In this module we will see what happened to the depreciated Foundation 5 slider. We will then select a replacement slider from a recommended list. Next we will download and install and connect the other slider to our project. Then we will open up a graphics file and show you how to create sliders using the Generate Assets feature of Adobe Photoshop. Finally, we will test our finished website on multiple browsers and mobile devices.

Forms and Buttons
The web contains a dark monster that everyone hates and knows as a web form. Seriously, when was the last time you told yourself that you really enjoyed filling out a web form? Let's tame this monster with Foundation and a little smart design. In this module we will review the purpose of web forms, identify six rules for making good forms, and review the anatomy of a form. Then we will demonstrate the code form for built-in Foundation and build a form in our HTML editor. Finally, we will examine different button styles and then test our project on multiple browsers and mobile devices.