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.
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 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.
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
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
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?
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
Using Block Grids
How to embed videos on your website
Using interchange with media galleries
How to use the clearing lightboxes plugin
Learning to use panels and alerts
How to integrate tooltips
Creating modal windows
How to create pagination and breadcrumbs
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
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.