Web Flow Design

Course Content

Beginner

Welcome class
What is webflow. Introduction of low code tool
Open a webflow account, Create webflow project, overview of webflow designer interface
Explore all the elements of webflow
All about class and id
Explore webflow style panel (with div)
Explore webflow style panel (with text)
All about text and Images (heading, paragraph, text elements)
Show a section building
Give a practice task that students will make a section with a single heading, text and images, and change the fonts, stylings etc

Mid-level

How to structure a page
Introduction to figma
Basic knowledge about figma
How to build a section from figma design.
Give a practice task to make a single section from figma to webflow
Intro to cms, and use the cms to show dynamic contents
Intro to finsweet and client-first library system and show a full website design that we are going to build
Clone a client first template and explain about the style guide and edit the style guide according to the design
Start on project 1
Continue project 1
Finish project 1
Start on Project 2
Continue to Project 2
Continue to Project 2
Finish project 2
Start project 3
Continue project 3
Continue project 3
Finish project 3
Intro to relume library
Start project 4
Continue project 4
Continue project 4
Finish project 4
Talk about px , rem. Em
Starting on a full company website project.
Company website project. class 1
Intro to components and how to use it.
company website project. Class 2
company website project. Class 3
company website project. Class 4
Talk about the finsweet plugin and how to use it for multiple cases.
Talk about animations, Give futuristic and professional animations to our website
Give a finishing touch, optimize assets, remove unused classes, etc
Talk about SEO and optimization, website title, meta description and thumbnail, favicon
Give a demo template in Figma to practice and build it in Webflow

Advance- level

Advanced functionality of cms – like sorting, conditional visibility, showing limit, etc
CMS slider, custom slider etc
Use finsweet attributes and filter system
Show some cools animations to work
Talk about cloanables and how to copy
Webflow performance best practices: Optimizing website performance for speed and load times
Image optimization: Compressing and optimizing images for faster loading
All about JavaScript in Webflow: Embedding custom JavaScript code for complex functionalities
Guidelines for building Carrier as a Webflow developer

Extra classes

Student Ratings & Reviews

No Review Yet

Course Content

Beginner

Welcome class

What is webflow. Introduction of low code tool

Open a webflow account, Create webflow project, overview of webflow designer interface

Explore all the elements of webflow

All about class and id

Explore webflow style panel (with div)

Explore webflow style panel (with text)

All about text and Images (heading, paragraph, text elements)

Show a section building

Give a practice task that students will make a section with a single heading, text and images, and change the fonts, stylings etc

Mid-level

How to structure a page

Introduction to figma

Basic knowledge about figma

How to build a section from figma design.

Give a practice task to make a single section from figma to webflow

Intro to cms, and use the cms to show dynamic contents

Intro to finsweet and client-first library system and show a full website design that we are going to build

Clone a client first template and explain about the style guide and edit the style guide according to the design

Start on project 1

Continue project 1

Finish project 1

Start on Project 2

Continue to Project 2

Continue to Project 2

Finish project 2

Start project 3

Continue project 3

Continue project 3

Finish project 3

Intro to relume library

Start project 4

Continue project 4

Continue project 4

Finish project 4

Talk about px , rem. Em

Starting on a full company website project.

Company website project. class 1

Intro to components and how to use it.

company website project. Class 2

company website project. Class 3

company website project. Class 4

Talk about the finsweet plugin and how to use it for multiple cases.

Talk about animations, Give futuristic and professional animations to our website

Give a finishing touch, optimize assets, remove unused classes, etc

Talk about SEO and optimization, website title, meta description and thumbnail, favicon

Give a demo template in Figma to practice and build it in Webflow

Advance- level

Advanced functionality of cms – like sorting, conditional visibility, showing limit, etc

CMS slider, custom slider etc

Use finsweet attributes and filter system

Show some cools animations to work

Talk about cloanables and how to copy

Webflow performance best practices: Optimizing website performance for speed and load times

Image optimization: Compressing and optimizing images for faster loading

All about JavaScript in Webflow: Embedding custom JavaScript code for complex functionalities

Guidelines for building Carrier as a Webflow developer

Extra classes

Talk about resources, where to find images, fonts, icon

How to seek solutions to problems and think like a developer

Some extra things to learn

How to stand out in the crowd and look for work.

Student Ratings & Reviews

Mexemy