Responsive Design with Foundation 5 | Sandy Ludosky | Skillshare

Responsive Design with Foundation 5

Sandy Ludosky

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
26 Lessons (2h 17m)
    • 1. Welcome to the workshop!

      foundation_5.zip
      1:21
    • 2. Intro to the Responsive Grid

      foundation_5.zip
      1:53
    • 3. Basic Grid

      3:39
    • 4. Small & Medium Grids

      4:26
    • 5. Advanced Grid (Nesting)

      8:35
    • 6. Offset Columns

      4:10
    • 7. Centered Columns

      8:18
    • 8. Source Ordering

      9:10
    • 9. Block Grid

      6:33
    • 10. Responsive Image Slider (Orbit.js)

      8:14
    • 11. "About Us" (Panel)

      1:53
    • 12. Content Slider & Equalizer.js

      10:39
    • 13. Video Popup (Modal.js)

      3:51
    • 14. Accordion.js

      3:43
    • 15. Portfolio Gallery (Clearing Lightbox.js)

      3:55
    • 16. Interactive Contact Form (Alert.js)

      11:42
    • 17. Social Media (Foundation Font Icons)

      5:26
    • 18. Interchange Responsive Content

      6:48
    • 19. Adaptive Content (Media Queries)

      5:53
    • 20. Responsive Navbar

      6:24
    • 21. Intro to Tab.js

      3:31
    • 22. Tabs Customization

      3:28
    • 23. "Team" Section Tab

      3:49
    • 24. Tooltip.js

      3:00
    • 25. Vertical Tabs

      1:04
    • 26. Tabs & Media Queries

      5:20

About This Class

Foundation 5 is a responsive framework that makes it faster to learn and to code.

This workshop will help you get up to speed with rapid responsive prototyping. Hand-on and project-based, students will learn :

  • the fundamentals of the Foundation frameworks : CSS, components and javascript dynamic features
  • media queries 
  • build responsive web pages with the help of demos and exercises

This course will teach you how to create functional and responsive sites working accross multiple devices (desktop, tablets and mobiles). Classes include:

  • A complete guide to the responsive grid
  • A tour of the numerous CSS components & Key UI elements
  • Dynamic features Integration with orbit slider, reveal modal, Accordion, Lightbox..
  • Mobile user experience optimization
  • Interactive Exercices
  • & 2 responsive web projects developmentVIEW FINAL PROJECT

This workshop is the fastest way to get you up and running with Rapid Prototyping, Mobile First & Easy Customization

So, let's get started with Foundation 5, the most advanced responsive Framework !