Projects in Foundation Framework - Learn By Building 10 Apps

Build a small business website using foundation five, mastering the nav bar, grid system, file structure, and downloading the official package while exploring the project intro and showcase area.

Build a small business website using the Foundation framework, featuring a home page, about page, services dropdown, contact form, header with logo, social icons, a grid and accordion layout.

Learn to apply foundation's 12-column grid to center content, structure the header with a left logo and right social icons, and create a showcase area with panels.

Apply the main CSS to style the home page: set a light gray body, header border, tune social icons, configure the showcase area, and center the content boxes.

Guides building an about page with a sidebar, panels, and foundation styling, then adds an internet marketing page featuring an accordion and a blue tab design, plus a contact form.

Learn to build a photography website gallery using foundation's orbit slider, lightbox, and white box effect, plus grid, modals, and forms, to create home, about, gallery, and contact sections.

Learn to build a minimal photography homepage using foundation's orbit slider, lightbox, and modal components to create a gallery with a simple logo, navigation, and contact form.

Create the about and gallery pages, add a persistent contact modal with a lightbox gallery of six images, and refine layout and navigation using foundation classes.

Learn to implement an accessible contact modal using Foundation's reveal component across multiple pages, with a titled dialog, aria labeling, a contact form, and a close control.

Design the Project H user interface while setting up development environment with the foundation command line interface, npm, node, ruby, and sass, including login, icon menu, and add project forms.

Set up a foundation development environment with SAS, Ruby, and NPM, using compass watch and a custom SAS file. Learn to scaffold with foundation cli, Bouwer, and grunt.

Create a login page in a foundation framework project, wire the form to the index page, and apply colors and styles via a custom SCSS file.

Adapt the login page to build a responsive index with an icon menu for foundation framework projects, using font awesome icons and sass styling for mobile-friendly navigation.

Create the final icon menu and projects page with a two column layout, hover and active states, a white background table showing name, category, start date, and a searchable form.

Duplicate the index layout to create pages for categories, users, messages, and files, and add a project page with a progress bar and a modal editor with a range slider.

Add a project form by placing an add project button in the header, assign data reveal id add form, style with the secondary color, and reuse the form across pages.

Learn to build a real to-do list app with foundation apps, implementing a titlebar and side menu, and managing items in local storage via routing.

Learn to set up foundation for apps and build a mobile to-do list using angular routing, with a title bar and home and about templates, wired through npm and gulp.

Create a to-do list on the home screen using an add to do button that opens a side panel form, stores todos in local storage, and dynamically renders the list.

Add todos to the home screen and show a green success message when added. Delete todos by clicking and update local storage accordingly.

Learn to build a foundation-based web hosting template with an icon nav bar, pricing tables, forms, and Font Awesome icons, using SAS variables and nested styles.

Create a simple, clean web hosting template using Foundation, featuring a navigation bar with Font Awesome icons, a grid layout, and domains, pricing, and support sections.

Finish the home page markup in html, building the showcase area with a seven-column row, a features list with icons, and a large button styled by css.

Learn to implement the final homepage header and showcase styling by configuring header alignment, font sizes, borders, hover and active states, and a showcase background image with color variables.

Build inner pages with CSS, style the middle bar, create a domain search form, implement hosting plans with pricing tables, and validate forms client-side.

Create a custom orbit slider for a fitness club site, with configurable heading, font, and background, including hiding image counts, and build the project structure and icons.

Build a team fitness website using Foundation's grid system and the Orbitz slider, integrate Font Awesome icons, and apply SAS styling to highlight layout and design.

Implement the final home page markup, including the top bar, logo, responsive navigation, a slider placeholder, and a 12-column grid of icon panels with Font Awesome.

Master customizing a foundation orbit slider with css, scss variables, and targeted styling for captions, headings, and navigation, while removing autoplay and bullets for a clean responsive layout.

Builds a multi-page fitness website by adding an about page, classes and trainers sections, and a contact form, using a layout with rows and columns, panels, and active navigation highlights.

Create an e-commerce theme for a smartphone shop using Foundation’s 12-column grid, image slider, and product page tabs, home page, product listing page, single product page, and shopping cart pages.

Create a nonfunctional e-commerce UI mockup named Cell Shopper in Foundation, featuring a top navigation, logo, search, category menus, product grid, lightbox, and add-to-cart workflow.

Implement the final homepage markup with a top navigation bar, search, dropdowns, and a responsive grid showcase, including an image slider and a footer; prepare styles in the next video.

Style the home page by creating a custom css file, defining primary and secondary colors, and applying hover states and borders to the top bar, nav, and showcase menu.

Create a product page modeled after the home page, remove the slider and showcase, and implement a two-column view with a main image, lightbox thumbnails, and specs and support tabs.

Build inner pages by duplicating the product template to create about, contact, and cart pages using foundation components, including panels, grid, forms, and tables, for a responsive layout.

Convert a foundation HTML template into a WordPress theme, set up WordPress on a local Apache server, and build the header, footer, menus, and widget support.

Set up a local WordPress environment with Xampp, configure Apache and MySQL, create a foundation database, and install WordPress to start building a WordPress theme.

Learn to build a custom WordPress theme based on Foundation by creating a theme folder, style.css, header and index templates, and integrating Foundation CSS.

Turn static WordPress templates into a dynamic site by pulling the main menu and posts with WP nav menu and a post loop, then style titles and links with CSS.

Enable WordPress widget support in a foundation theme by creating functions.php, registering a right sidebar, and wiring dynamic_sidebar; then add menu support and style a horizontal main menu.

Build a restaurant website for Prime Steak House, implementing Slick's slider, lightbox, and a grid system for the dinner menu, with downloadable files on GitHub.

Design a clean restaurant site for prime steak house using Foundation grid and a slick slider. Showcase a menu grid, a hover photo gallery with lightbox, and a contact form.

Build the final homepage markup layout with a navigation menu, a placeholder slider, a middle background section, a three-column top sellers grid, and contact, map, and about us sections.

Create and refine the core css for the home page, configuring fonts and a color palette (primary, secondary, link, hover), headings and menu, with a slider planned next.

Complete the home page by implementing the slick slider with images, installing and including slick assets via bower, and initializing the slider to prepare inner pages.

Learn to build a restaurant menu page and a responsive photo gallery using foundation framework, incorporating lightbox2, custom CSS classes, and a contact page in a step-by-step project.