What you'll learn

By the end of this course, you will know the basic features of Foundation
You will know how Foundation builds in Responsive Design
You will know how to use the built-in Foundation image slider
You will know how to use the Foundation grid system
In this course, you will know the major components of Foundation 5

Course content

5 sections • 21 lectures • 2h 1m total length

Welcome to the Class3:28
Intro to Frameworks2:32
Downloading Foundation3:03
Download foundation from the site and use the default CSS option for a simple four-column layout with default fonts, or customize by excluding elements and colors, including an SAS option.

The Foundation grid3:04
Adding Logo6:58
Set up a blank page, move course assets into the surf shop project, and add the logo inside a 12-column grid using a large-6 column, then preview.
Adding Nav, Part 14:51
Adding Nav, Part 23:39
Adding nav menu, Part 35:47
Adding the Hero Image3:51
Finishing the home page10:55
Finish the home page by setting a 12-column grid with a four-column image beside an eight-column text block, nesting another 12-column grid to create two rows, finishing the footer.
Footer7:24
Implement a responsive Foundation 5 footer using a 12-column grid with a left copyright area and a right-aligned navigation list, showcasing class right and class left utilities and responsive stacking.

Starting the Lessons.html page4:14
Create the lessons page by duplicating the index, keep the logo, nav, and footer, replace content with a picture and text beside it, and hard-code links for testing.
Adding CSS5:16
Adding Lessons Table, Part 14:11
Adding Lessons Table, Part 26:55
Adding Pricing Table7:39
Add a pricing table to the page by copying foundation documentation. Configure beginner and advanced classes with price and a buy now button, and adjust the layout and footer.

Requirements

Basic HTML/CSS knowledge

Description

In this course, we will live code a simple four-page website built using the web framework, Foundation.

Foundation 5 is an open-source framework created by ZURB, a design agency in California. They released the 5.0 version of the product in late 2013 and this course is based on the latest version.

It is one of the more popular frameworks available on the Web today and is absolutely free.

The purpose: Make websites beautiful without a lot of work. This course walks you through some of Foundation's core features that produce beautiful websites with a little effort.

It contains almost all of the CSS styling you will need for a website and a lot of cool jQuery tools to extend your website. It also allows you to make your website responsive so it can be viewed on mobile designs.

This course will walk you through creating a website from scratch using the framework. You do not need to be an expert in HTML or CSS. But if you know the basics, it will take you a long way.

If you do not know the basics, we will create the elements of the website and will answer any questions you have.

Who this course is for:

Web Design Students
Web Enthusiasts
New to Web Design

What you'll learn

Explore related topics

Course content

Class introduction3 lectures • 9min

Creating the Home Page8 lectures • 46min

Creating the Lessons Page5 lectures • 28min

Creating the Rentals Page3 lectures • 27min

Creating Contact Page2 lectures • 11min

Requirements

Description

Who this course is for: