A fascinating journey from the very basics of Zurb Foundation to a complete responsive website

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.

Who this course is for

If you're looking forward to create complete websites, live mock-ups, or HTML templates, this video course is for you. 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 you will learn 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