Pixels to Code Workshop—Studio to Webflow

Let's design and develop a beautiful site. We'll learn how to build sites with CSS Grid, a CMS (content management system,) and e-commerce. We'll go from ideating in InVision Studio to implementing in Webflow. We'll learn to create responsive layouts using a grid, flexbox, add simple animations, and publish our work to the web.

This is what we'll create:
http://happy-synths.webflow.io

WHAT YOU NEED

• Bring a laptop. Preferably Macbook, so you're able to see the InVision Studio file.
• Create a Webflow account: http://webflow.com
• Install InVision Studio: https://www.invisionapp.com/studio
• Bring your own snacks :)

CURRICULUM
Intro

• A look at the UI
• Quickly testing some tools.
• A look at assets and design made in InVision Studio.

Home Page Hero

• Creating the hero section
• Adding animation to the hero image
• Font Stuff

Home Page II

• Creating a Collection for Blog Posts
• Creating a Collection for Products
• Using Collection Lists for Posts
• Using Collection Lists for Products
• Adding a footer and setting it as a symbol

Blog

• Designing the Blog Post Template
• Creating a Blog Page
• Using the Editor to edit the content of the Blog

Store

• Create a Products Template
• Products Template—Add to Cart + Other Products Section + Footer
• Creating a Product List Page
• Adding a Cart Button—Editing the Cart Wrapper Settings
• Going Over All the E-commerce Getting Started Steps
• Adding Categories
• Overview of Checkout Page
• Overview of the Order Confirmation Page

Final Stuff

• Making our landing page responsive
• Adding SEO Settings and Open Graph Settings and Icons
• Adding a custom domain

Check out Webflow's Meetup page:
https://www.meetup.com/webflow-sf/