Buying for a Team? Gift This Course
Wishlisted Wishlist

Please confirm that you want to add Building a Responsive Site with Zurb Foundation to your Wishlist.

Add to Wishlist

Building a Responsive Site with Zurb Foundation

A fascinating journey from the very basics of Zurb Foundation to a complete responsive website
4.0 (4 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.
67 students enrolled
Last updated 7/2015
English
$10 $85 88% off
2 days left at this price!
30-Day Money-Back Guarantee
Includes:
  • 2 hours on-demand video
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Have a coupon?
What Will I Learn?
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
View Curriculum
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.
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.

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.
Students Who Viewed This Course Also Viewed
Curriculum For This Course
Expand All 39 Lectures Collapse All 39 Lectures 01:52:43
+
Introducing Foundation
5 Lectures 13:49

Understand what a framework is

What Is a Framework?
02:35

Build a good working environment for web development

Understanding the Working Environment
02:42

Download and start using Foundation on Linux

Installing Foundation
02:36

The SASS CSS preprocessor on Foundation

Why Use SASS?
02:55

Starting a new project using Foundation

Scaffolding Our Website
03:01
+
Making Our Site Responsive
5 Lectures 15:45

An introduction to media queries

Preview 03:29

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

Grasping the Grid System
02:52

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

Seeing Visibility Classes
03:33

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

Why to Go Mobile First?
02:58

Discovering the interchangejs Foundation plugin

Using interchangeJS
02:53
+
Navigating the site
5 Lectures 15:06

How to use off-canvas navigation?

Preview 03:01

How to create top bar menus with Foundation?

Incorporating the Top Bar
02:36

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

Implementing the Sticky-nav
02:55

Creating side navigations with Zurb Foundation

Incorporating the Side-nav
03:21

How to use drop-down content with foundation?

Using Dropdowns
03:13
+
Structuring the Content
5 Lectures 13:09

How to use tabs

Preview 02:47

The importance of good typography

Beautiful Typography
02:50

How to implement a good looking pricing table

Implementing a Pricing Table
02:35

Using accordions to structure the content

Learning Accordions
02:37

How to use the equalizer plugin

Using the Equalizer
02:20
+
Adding Media Content
5 Lectures 15:27

How to create thumbnails

Preview 03:10

Using Block Grids

Understanding the Block Grid
02:14

How to embed videos on your website

Incorporating Flex-video
03:27

Using interchange with media galleries


Learning 'Interchange'
03:49

How to use the clearing lightboxes plugin

Using Lightboxes
02:47
+
Constructing Forms
4 Lectures 10:18

Creating basic forms

Preview 02:11

Using form utilities

Understanding Form Utilities
02:07

Using switches and range sliders

Implementing Switches and Ranges
03:12

Form validation with abide

Using Abide Validation
02:48
+
Buttons and UI Elements
5 Lectures 14:40

How to customize buttons

Preview 03:29

Learning to use panels and alerts

Using Panels and Alerts
02:58

How to integrate tooltips

Learning Tooltips
02:05

Creating modal windows

Adding Modals
02:38

How to create pagination and breadcrumbs

Incorporating Pagination and Breadcrumbs
03:30
+
Conclusions
5 Lectures 14:29

How to customize Foundation

Preview 02:51

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

Optimizing for Deployment
02:41

Free available resources for Zurb Foundation

Using Templates and the Zurb Playground
02:41

Foundation in the real world

What Have We Learned So Far?
02:55

The platform and tools used to move to production

Where to Go from Here?
03:21
About the Instructor
4.0 Average rating
3,624 Reviews
29,776 Students
311 Courses
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.



Report Abuse