Skip to content

Pixels to Code Workshop—Studio to Webflow

Photo of Pablo Stanley
Hosted By
Pablo S.
Pixels to Code Workshop—Studio to Webflow

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

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/

Photo of Sketch Together - San Francisco group
Sketch Together - San Francisco
See more events