Course curriculum

  • 1

    Day 1: Discover Your Brand

    • Welcome

    • Join Our Learning Community

    • Warm Up: Show Us What You Have So Far

    • Personal Brand Builder
  • 2

    Week 1: Build Custom Websites With No Code - Pre Work

    • Introduction To No Code Website Building

    • Pre-Work 1: What Are Domains?

    • Pre-Work 2: What Is Hosting?

    • Pre-Work 3: SEO (Search Engine Optimization)
  • 3

    Week 1: Introduction to Webflow

    • Before You Start

    • Introduction to The Designer

    • HTML & CSS for Beginners

    • Introduction To The Box Model

    • Element Hierarchy

    • Navigator Panel

    • The Add Elements Panel

    • Section Link

    • Container

    • Columns

    • Div Block

    • Nav Bar

    • How To Structure Content on Webflow

    • Background Images, Colors, Gradients and Videos

    • Exercise 1: Build A Nav Bar and Hero Section

    • Forms

    • Exercise 2: Build A Form

    • Slider

    • Exercise 3: Build A Full-Screen Slider

    • Symbols

    • Style Panel Overview

    • HTML Tags

    • Classes

    • States

    • Exercise 4: Build Hover Effects To Buttons

    • Layout Settings

    • Spacing

    • Display Settings

    • Flexbox

    • Grid

    • Flexbox vs. Grids

    • Position

    • Exercise 5: Build Portfolio Project Grids

    • Introduction To Responsive Design

    • Breakpoints

    • Exercise 6: Make A Page Responsive

    • Introduction to Interactions

    • Triggers and Animations

    • Exercise 7: Animate Your Hero Header

    • Prepare to Publish: Add SEO and Meta Descriptions

    • Optimize Your Webflow Website On Social Media: OpenGraph

    • Exercise 8: Optimize SEO and OpenGraph Settings

    • Optional: Request 1 Live Session
  • 4

    Week 2: Personal Branding Design - Personal SEO and Logo Design

    • Warm Up Project: Personal Brand Audit

    • Project 1.1: Take Action To Build Positive Online Presence - LinkedIn

    • Project 1.2: Take Action To Build Positive Online Presence - Dribble and Behance

    • Project 1.3: Take Action To Build Positive Online Presence - Instagram

    • Introduction to Personal Brand Logo Design

    • Types of Logos and How To Use Them

    • Customizing Types for Logos

    • Project 1.4: Personal Logo Design

    • Optional: Request 1 Live Session
  • 5

    Week 3: Personal Branding Design - Color, Typography and Personalized Elements

    • Typography Refresher: Web Typography

    • Project 2.1: Personal Brand Typography Design

    • How To Create Effective Color Palettes?

    • Project 2.2: Personal Brand Color Palette Design

    • Refresher Add On - Visual Design: 0-100

    • Personalized Brand Elements

    • Project 2.3: Design Your Own "Personalized Branding Elements"

    • Optional: Request 1 Live Session
  • 6

    Week 4: Portfolio Website Design

    • Ways to Build Your Website's Information Architecture

    • Project 3.1: Define Your Site's Information Architecture

    • Project 3.2: Design Your Site

    • Optional: Request 1 Live Session
  • 7

    Week 5: Portfolio Website Build (with Live Sessions)

    • Project 4.0: Document Your Existing Site

    • Project 4.1: Build Your Approved Design Using the CMS of Your Choice

    • Required: Schedule 2 Live Sessions
  • 8

    Week 6 - Part 1: Storytelling for Designers

    • Rules of Great Storytelling

    • Using Storytelling for Design

    • Project 5.0: Add Storytelling Elements Into Your Portfolio Design
  • 9

    Week 6 - Part 2: Portfolio Critique (Live Sessions)

    • Required: Schedule 3 Live Sessions

    • Finish Up: Push Your Website Live

    • Share Your Site With Us!
  • 10

    Week 6 - Part 3: Promote Your Work (Bonus)

    • Join Communities

    • A Master Collection of Resources for Designers

    • Optional: Submit Your Site For Awards!
  • 11

    End of Program Survey

    • Please Review Our Program on Course Report, SwitchUp, Google and Facebook

    • How Did Everything Go?