Building a Responsive Site with Zurb Foundation

A fascinating journey from the very basics of Zurb Foundation to a complete responsive website
4.3 (6 ratings)
Instead of using a simple lifetime average, Udemy calculates a
course's star rating by considering a number of different factors
such as the number of ratings, the age of ratings, and the
likelihood of fraudulent ratings.
63 students enrolled
82% off
Take This Course
  • Lectures 39
  • Length 2 hours
  • Skill Level All Levels
  • Languages English
  • Includes Lifetime access
    30 day money back guarantee!
    Available on iOS and Android
    Certificate of Completion
Wishlisted Wishlist

How taking a course works


Find online courses made by experts from around the world.


Take your courses with you and learn anywhere, anytime.


Learn and practice real-world skills and achieve your goals.

About This Course

Published 7/2015 English

Course Description

Zurb Foundation is one of the most diffused best performing front-end design frameworks out there.

Dealing with browser compatibility, media queries, style consistency, and effective layouts could be a huge pain today, but Foundation comes to the rescue. With minimal effort, it allows you to create a production ready, responsive website or is a great starting point for a highly customized project.

Building a Responsive Site with Zurb Foundation will show you every major aspect of the framework, as well as general best practices and workflow tips, guiding you through the process of creating a live mock-up for a photography website. Every video will introduce some of Foundation's features and will use them to enhance the website in order to provide a practical experience with all the topics.

The course begins with an empty folder, where we'll install the Zurb Foundation framework and will start adding new pages and enhancements to cover all the key aspects of the framework itself.

We begin our journey by explaining why there is a need for a framework, how to set up a modern working environment, and how to scaffold a new project with Zurb Foundation. We'll then immediately introduce some responsive design key concept as well as the advantages of a mobile-first approach and how Foundation helps us with these scenarios.

As we advance through the course, we'll introduce all the major aspects of the framework, translating them in working code for our website. We are going to deal with navigation techniques as well as typography, content elements, and forms. As we come to an end, we'll emphasize how to deal with media elements in a responsive environment, trying out different approaches to effectively show image galleries both on desktop and mobile.

Through the whole course, we'll witness some general best practices such as using a semantic mark-up using SASS and how to optimize our work for deployment. Finally, we'll cover some JavaScript elements, showing how Foundation helps us introduce some dynamism on our website with nearly no programming knowledge.

At the end of the course, you will have the skills to create responsive websites starting from scratch by making use of all the Foundation elements

About the Author

Andrea Moretti is a freelance developer. He has worked on various websites using Zurb Foundation Framework as well as big web application projects where Foundation is used side to side with other technologies. He is an active open source contributor and is actually maintaining Foundation templates for static site generator such as Middleman and Docpad.

He teaches JavaScript and PHP at Fusolab 2.0 in Rome and is an active member of the RomaJS JavaScript user group. He's passionate about beautiful code, functional programming, syntactic sugar, and sugar-free chocolate.

He is also a photographer and photo assistant, having worked on assignments for the major Italian magazines as well as luxury hotels, art galleries, Italian textile firms, big corporations, and food-related events.

What are the requirements?

  • To effectively follow this course, you should have a very basic knowledge of HTML and CSS syntax. Knowing how to use a terminal would also be helpful to fully understand the coding workflow.

What am I going to get from this course?

  • Scaffold a new website using Zurb Foundation
  • Play with a responsive design using Foundation's grid system and media queries
  • Create effective site navigation optimized for both desktop and mobile platforms using side-nav and magellan
  • Master different content elements using powerful Foundation classes and great typography balance
  • Show effective media elements such as flex-video, interchange, and lightboxes without penalizing mobile users
  • Design beautiful forms to deal with user input
  • Use Foundation JavaScript plug-ins to make the content a bit more dynamic and pleasant for the viewer
  • Customize the Framework style to transform mock-ups into production-ready websites

Who is the target audience?

  • If you're looking forward to create complete websites, live mock-ups, or HTML templates, this video course is for you.

What you get with this course?

Not for you? No problem.
30 day money back guarantee.

Forever yours.
Lifetime access.

Learn on the go.
Desktop, iOS and Android.

Get rewarded.
Certificate of completion.


Section 1: Introducing Foundation

Understand what a framework is


Build a good working environment for web development


Download and start using Foundation on Linux


The SASS CSS preprocessor on Foundation


Starting a new project using Foundation

Section 2: Making Our Site Responsive

An introduction to media queries


How to use the grid system and why is it so useful?


Refactor the code to be more semantic, and then introduce visibility classes


What are the benefits and how to adopt a mobile-first approach?


Discovering the interchangejs Foundation plugin

Section 3: Navigating the site

How to use off-canvas navigation?


How to create top bar menus with Foundation?


How to implement a sticky navigation bar on our portfolio page?


Creating side navigations with Zurb Foundation


How to use drop-down content with foundation?

Section 4: Structuring the Content

How to use tabs


The importance of good typography


How to implement a good looking pricing table


Using accordions to structure the content


How to use the equalizer plugin

Section 5: Adding Media Content

How to create thumbnails


Using Block Grids


How to embed videos on your website


Using interchange with media galleries


How to use the clearing lightboxes plugin

Section 6: Constructing Forms

Creating basic forms


Using form utilities


Using switches and range sliders


Form validation with abide

Section 7: Buttons and UI Elements

How to customize buttons


Learning to use panels and alerts


How to integrate tooltips


Creating modal windows


How to create pagination and breadcrumbs

Section 8: Conclusions

How to customize Foundation


Understand the workflows and best practices for real-world web deployment


Free available resources for Zurb Foundation


Foundation in the real world


The platform and tools used to move to production

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

Packt Publishing, Tech Knowledge in Motion

Packt has been committed to developer learning since 2004. A lot has changed in software since then - but Packt has remained responsive to these changes, continuing to look forward at the trends and tools defining the way we work and live. And how to put them to work.

With an extensive library of content - more than 4000 books and video courses -Packt's mission is to help developers stay relevant in a rapidly changing world. From new web frameworks and programming languages, to cutting edge data analytics, and DevOps, Packt takes software professionals in every field to what's important to them now.

From skills that will help you to develop and future proof your career to immediate solutions to every day tech challenges, Packt is a go-to resource to make you a better, smarter developer.

Packt Udemy courses continue this tradition, bringing you comprehensive yet concise video courses straight from the experts.

Ready to start learning?
Take This Course