Mastering Foundation Zurb. Tutorials From A to Z

Dec 11, 2013

There are so many website frameworks out there, seems like everyone who can create it for their own needs and requirements, does it just like that. Moreover, you can find many useful tutorials that will make it possible for you to master these toolkits easily and quickly.

As for the most-popular frameworks we can spell out three names Bootstrap, Foundation and Skeleton. These three are tried and tested sets of code that you can make use of when developing a website/web application.

They provide a pre-formed structure which ensures that you don’t have to create every tiny piece of code from scratch each time you create a website or any other web application.

These frameworks can save you a lot of time but also, ensure that common problems and requirements can be completed easily, efficiently and cleanly.

If you're not familiar with one of these names check out the following comparison table. All parameters of these frameworks are displayed there in a clear and straightforward manner.

Foundation Zurb Tutorials

If you think that Foundation Zurb satisfies your needs, and requirements of your projects, here are some tutorials that will help you code better with this framework.

It turned out that Foundation is not that rich with tuts as all other frameworks. So if you know where to find lessons or manuals to master Zurb Foundation, you are free to add them in the comments below.

* * *
A Beginner’s Guide to Zurb Foundation 3: The Grid

Foundation Zurb Tutorials

Foundation framework by default, uses 940px wide grid. However, the grid is fluid, so as your viewport becomes narrower than 940px, the grid will adapt.

* * *
Responsive Web Design with Foundation

Foundation Zurb Tutorials

It’s hard to talk about web design today without bringing up Responsive Web Design (RWD). Here, we walk you through Foundation and how you can use it for your RWD workflow.

* * *
Foundation for Beginners: The Grid System

Foundation Zurb Tutorials

Here is one more tutorial dedicated to the grid system of Foundation Zurb.

* * *
Thinking Mobile-First with Zurb – Foundation 4

Foundation Zurb Tutorials

Foundation 4 is a mobile-first responsive design framework. The self-proclaimed “most-advanced responsive front-end framework in the world” jumped to a whole new level.

* * *
Part 1

Zurb Foundations basics using their index as a start and adding your own navigation.

* * *
Part 2

Zurb Foundation basics part two. Cover using the row column structure and creating a modal.

* * *
Part 3

* * *
Instant Zurb Foundation 4 - Book

Foundation Zurb Tutorials
The book walks you step-by-step from downloading and installing Foundation 4 to building a responsive website in a few hours. You can build websites based on flexible grid structure, include some basic elements in it and assign complex behaviors to them.

* * *
That's it guys. If you got something to add, comments section at the bottom is waiting for your contribution 🙂

Alex Bulat
v Complain

Recommend this post to others!

Found the post interesting? You might also like:

Become the first to comment

Last Updated : Dec 10, 2019

Rating of post