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.
60 students enrolled
$19
$85
78% 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

Discover

Find online courses made by experts from around the world.

Learn

Take your courses with you and learn anywhere, anytime.

Master

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

What 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.

Curriculum

Section 1: Introducing Foundation
02:35

Understand what a framework is

02:42

Build a good working environment for web development

02:36

Download and start using Foundation on Linux

02:55

The SASS CSS preprocessor on Foundation

03:01

Starting a new project using Foundation

Section 2: Making Our Site Responsive
03:29

An introduction to media queries

02:52

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

03:33

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

02:58

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

02:53

Discovering the interchangejs Foundation plugin

Section 3: Navigating the site
03:01

How to use off-canvas navigation?

02:36

How to create top bar menus with Foundation?

02:55

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

03:21

Creating side navigations with Zurb Foundation

03:13

How to use drop-down content with foundation?

Section 4: Structuring the Content
02:47

How to use tabs

02:50

The importance of good typography

02:35

How to implement a good looking pricing table

02:37

Using accordions to structure the content

02:20

How to use the equalizer plugin

Section 5: Adding Media Content
03:10

How to create thumbnails

02:14

Using Block Grids

03:27

How to embed videos on your website

03:49

Using interchange with media galleries


02:47

How to use the clearing lightboxes plugin

Section 6: Constructing Forms
02:11

Creating basic forms

02:07

Using form utilities

03:12

Using switches and range sliders

02:48

Form validation with abide

Section 7: Buttons and UI Elements
03:29

How to customize buttons

02:58

Learning to use panels and alerts

02:05

How to integrate tooltips

02:38

Creating modal windows

03:30

How to create pagination and breadcrumbs

Section 8: Conclusions
02:51

How to customize Foundation

02:41

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

02:41

Free available resources for Zurb Foundation

02:55

Foundation in the real world

03:21

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

Over the past ten years Packt Publishing has developed an extensive catalogue of over 2000 books, e-books and video courses aimed at keeping IT professionals ahead of the technology curve. From new takes on established technologies through to the latest guides on emerging platforms, topics and trends – Packt's focus has always been on giving our customers the working knowledge they need to get the job done. Our Udemy courses continue this tradition, bringing you comprehensive yet concise video courses straight from the experts.

Ready to start learning?
Take This Course