Pixels to Code Workshop—Studio to Webflow

Hosted By
Pablo S.

Details
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/

Sketch Together - San Francisco
See more events
Webflow
398 11th St · San Francisco, CA
Sponsors
Pixels to Code Workshop—Studio to Webflow