Projects in Foundation Framework - Learn By Building 10 Apps

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.

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.

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.

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.

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.

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.