Building a Responsive Site with Zurb Foundation

Simpliv

Course

Online

£ 10 VAT inc.

The best Other Education courses

See all

See all

Description

  • Type

    Course

  • Methodology

    Online

  • Start date

    Different dates available

A fascinating journey from the very basics of Zurb Foundation to a complete responsive websiteZurb 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.

Facilities

Location

Start date

Online

Start date

Different dates availableEnrolment now open

About 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

Questions & Answers

Add your question

Our advisors and other users will be able to reply to you

Who would you like to address this question to?

Fill in your details to get a reply

We will only publish your name and question

Reviews

This centre's achievements

2021

All courses are up to date

The average rating is higher than 3.7

More than 50 reviews in the last 12 months

This centre has featured on Emagister for 4 years

Subjects

  • Web Development
  • Editors
  • Media
  • Project
  • Web
  • Scaffolding training
  • Design
  • Approach
  • HTML
  • Options

Course programme

Introducing Foundation 5 lectures 13:51 What Is a Framework? What are the tools required to quickly develop a website without having to manually implement all the best practices?
  • Understanding the concept of frameworks
  • Going through the various existing framework alternatives
Understanding the Working Environment What are the tools that we need for modern web development and how can we use them?
  • Go through the various alternatives for code editors, browsers, and CLI tools
  • Suggest a good combination of tools for the newcomer
  • Provide links to download these tools
Installing Foundation Explain the different download options of Zurb Foundation, and then see how to download, unzip, and start working with it.
  • Looking at Foundation websites and the various download options
  • Downloading and unzipping the complete edition
  • Modifying index.html to see how to interact with the files
Why Use SASS? How can I use SASS to develop a website with Zurb Foundation?
  • Introducing the SASS preprocessor
  • Trying out with SassMeister.com
  • Checking out the official guide for further reading
Scaffolding Our Website How to set up and start working on a new project using the SASS version of Zurb Foundation?
  • Installing the foundation CLI tools
  • Scaffolding a new project
  • Changing some SASS variables to see whether everything is working as expected
Introducing Foundation 5 lectures 13:51 What Is a Framework? What are the tools required to quickly develop a website without having to manually implement all the best practices?
  • Understanding the concept of frameworks
  • Going through the various existing framework alternatives
Understanding the Working Environment What are the tools that we need for modern web development and how can we use them?
  • Go through the various alternatives for code editors, browsers, and CLI tools
  • Suggest a good combination of tools for the newcomer
  • Provide links to download these tools
Installing Foundation Explain the different download options of Zurb Foundation, and then see how to download, unzip, and start working with it.
  • Looking at Foundation websites and the various download options
  • Downloading and unzipping the complete edition
  • Modifying index.html to see how to interact with the files
Why Use SASS? How can I use SASS to develop a website with Zurb Foundation?
  • Introducing the SASS preprocessor
  • Trying out with SassMeister.com
  • Checking out the official guide for further reading
Scaffolding Our Website How to set up and start working on a new project using the SASS version of Zurb Foundation?
  • Installing the foundation CLI tools
  • Scaffolding a new project
  • Changing some SASS variables to see whether everything is working as expected
What Is a Framework? What are the tools required to quickly develop a website without having to manually implement all the best practices?
  • Understanding the concept of frameworks
  • Going through the various existing framework alternatives
What Is a Framework? What are the tools required to quickly develop a website without having to manually implement all the best practices?
  • Understanding the concept of frameworks
  • Going through the various existing framework alternatives
What Is a Framework? What are the tools required to quickly develop a website without having to manually implement all the best practices?
  • Understanding the concept of frameworks
  • Going through the various existing framework alternatives
What Is a Framework? What are the tools required to quickly develop a website without having to manually implement all the best practices?
  • Understanding the concept of frameworks
  • Going through the various existing framework alternatives
What are the tools required to quickly develop a website without having to manually implement all the best practices?
  • Understanding the concept of frameworks
  • Going through the various existing framework alternatives
What are the tools required to quickly develop a website without having to manually implement all the best practices?
  • Understanding the concept of frameworks
  • Going through the various existing framework alternatives
Understanding the Working Environment What are the tools that we need for modern web development and how can we use them?
  • Go through the various alternatives for code editors, browsers, and CLI tools
  • Suggest a good combination of tools for the newcomer
  • Provide links to download these tools
Understanding the Working Environment What are the tools that we need for modern web development and how can we use them?
  • Go through the various alternatives for code editors, browsers, and CLI tools
  • Suggest a good combination of tools for the newcomer
  • Provide links to download these tools
Understanding the Working Environment What are the tools that we need for modern web development and how can we use them?
  • Go through the various alternatives for code editors, browsers, and CLI tools
  • Suggest a good combination of tools for the newcomer
  • Provide links to download these tools
Understanding the Working Environment What are the tools that we need for modern web development and how can we use them?
  • Go through the various alternatives for code editors, browsers, and CLI tools
  • Suggest a good combination of tools for the newcomer
  • Provide links to download these tools
What are the tools that we need for modern web development and how can we use them?
  • Go through the various alternatives for code editors, browsers, and CLI tools
  • Suggest a good combination of tools for the newcomer
  • Provide links to download these tools
What are the tools that we need for modern web development and how can we use them?
  • Go through the various alternatives for code editors, browsers, and CLI tools
  • Suggest a good combination of tools for the newcomer
  • Provide links to download these tools
Installing Foundation Explain the different download options of Zurb Foundation, and then see how to download, unzip, and start working with it.
  • Looking at Foundation websites and the various download options
  • Downloading and unzipping the complete edition
  • Modifying index.html to see how to interact with the files
Installing Foundation Explain the different download options of Zurb Foundation, and then see how to download, unzip, and start working with it.
  • Looking at Foundation websites and the various download options
  • Downloading and unzipping the complete edition
  • Modifying index.html to see how to interact with the files
Installing Foundation Explain the different download options of Zurb Foundation, and then see how to download, unzip, and start working with it.
  • Looking at Foundation websites and the various download options
  • Downloading and unzipping the complete edition
  • Modifying index.html to see how to interact with the files
Installing Foundation Explain the different download options of Zurb Foundation, and then see how to download, unzip, and start working with it.
  • Looking at Foundation websites and the various download options
  • Downloading and unzipping the complete edition
  • Modifying index.html to see how to interact with the files
Explain the different download options of Zurb Foundation, and then see how to download, unzip, and start working with it.
  • Looking at Foundation websites and the various download options
  • Downloading and unzipping the complete edition
  • Modifying index.html to see how to interact with the files
Explain the different download options of Zurb Foundation, and then see how to download, unzip, and start working with it.
  • Looking at Foundation websites and the various download options
  • Downloading and unzipping the complete edition
  • Modifying index.html to see how to interact with the files
Why Use SASS? How can I use SASS to develop a website with Zurb Foundation?
  • Introducing the SASS preprocessor
  • Trying out with SassMeister.com
  • Checking out the official guide for further reading
Why Use SASS? How can I use SASS to develop a website with Zurb Foundation?
  • Introducing the SASS preprocessor
  • Trying out with SassMeister.com
  • Checking out the official guide for further reading
Why Use SASS? How can I use SASS to develop a website with Zurb Foundation?
  • Introducing the SASS preprocessor
  • Trying out with SassMeister.com
  • Checking out the official guide for further reading
Why Use SASS? How can I use SASS to develop a website with Zurb Foundation?
  • Introducing the SASS preprocessor
  • Trying out with SassMeister.com
  • Checking out the official guide for further reading
How can I use SASS to develop a website with Zurb Foundation?
  • Introducing the SASS preprocessor
  • Trying out with SassMeister.com
  • Checking out the official guide for further reading
How can I use SASS to develop a website with Zurb Foundation?
  • Introducing the SASS preprocessor
  • Trying out with SassMeister.com
  • Checking out the official guide for further reading
Scaffolding Our Website How to set up and start working on a new project using the SASS version of Zurb Foundation?
  • Installing the foundation CLI tools
  • Scaffolding a new project
  • Changing some SASS variables to see whether everything is working as expected
Scaffolding Our Website How to set up and start working on a new project using the SASS version of Zurb Foundation?
  • Installing the foundation CLI tools
  • Scaffolding a new project
  • Changing some SASS variables to see whether everything is working as expected
Scaffolding Our Website How to set up and start working on a new project using the SASS version of Zurb Foundation?
  • Installing the foundation CLI tools
  • Scaffolding a new project
  • Changing some SASS variables to see whether everything is working as expected
Scaffolding Our Website How to set up and start working on a new project using the SASS version of Zurb Foundation?
  • Installing the foundation CLI tools
  • Scaffolding a new project
  • Changing some SASS variables to see whether everything is working as expected
How to set up and start working on a new project using the SASS version of Zurb Foundation?
  • Installing the foundation CLI tools
  • Scaffolding a new project
  • Changing some SASS variables to see whether everything is working as expected
How to set up and start working on a new project using the SASS version of Zurb Foundation?
  • Installing the foundation CLI tools
  • Scaffolding a new project
  • Changing some SASS variables to see whether everything is working as expected
Making Our Site Responsive 5 lectures 15:47 Learning Media Queries Learning what media queries are and how to use them.
  • Explain the need for media queries
  • Explore media queries in Foundation
  • Try media queries
Grasping the Grid System Learning the basics of the grid system and designing our site so as to use it.
  • Explain how grid systems work
  • Design some content using the grid system
  • Use the grid system with media queries
Seeing Visibility Classes Adopting a more semantic approach to our code, and learning how to use visibility classes.
  • Explain the need for semantic code
  • Refactor the code
  • Introduce visibility classes with a simple example
Why to Go Mobile First? Explaining the advantages of a mobile-first approach and refactoring the code to follow it.
  • Explain the need for a mobile-first approach
  • Refactoring the code
Using interchange.js Learn about foundation.js and see how to use it in a responsive design scenario.
  • Introducing interchange.js
  • Implementing a responsive banner using intercghange.js to serve images of different sizes
  • Explaining other possibilities of interchange.js, and showing a simple example
Making Our Site Responsive. 5 lectures 15:47 Learning Media Queries Learning what media queries are and how to use them.
  • Explain the need for media queries
  • Explore media queries in Foundation
  • Try media queries
Grasping the Grid System Learning the basics of the grid system and designing our site so as to use it.
  • Explain how grid systems work
  • Design some content using the grid system
  • Use the grid system with media queries
Seeing Visibility Classes Adopting a more semantic approach to our code, and learning how to use visibility classes.
  • Explain the need for semantic code
  • Refactor the code
  • Introduce visibility classes with a simple example
Why to Go Mobile First? Explaining the advantages of a mobile-first approach and refactoring the code to follow it.
  • Explain the need for a mobile-first approach
  • Refactoring the code
Using interchange.js Learn about foundation.js and see how to use it in a responsive design scenario.
  • Introducing interchange.js
  • Implementing a responsive banner using intercghange.js to serve images of different sizes
  • Explaining other possibilities of interchange.js, and showing a simple example
Learning Media Queries Learning what media queries are and how to use them p Implementing the Sticky-nav Using a sticky nav to jump to different sections of a web page.
  • Explain when to use a sticky nav
  • Create the portfolio page
  • Building a sticky...

Additional information

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

See related categories

Building a Responsive Site with Zurb Foundation

£ 10 VAT inc.

The best Other Education courses

See all

See all