Webflow: how to create a website without code

The course program moves from simple to complex: from basic layout to animation creation. You will learn the ready-made tools in Webflow, and if they are not enough for your ideas, you will implement them yourself with the help of code from the knowledge base.

You will make a total of two projects in the portfolio of different levels of complexity. First you will apply your new knowledge about the designer, and in the final work you will try to go beyond the Webflow templates.

At the end you will learn how to make projects of any complexity on your own and get eternal access to the knowledge base in Notion for advanced study.

Course program

Introduction session: introduction and course roadmap
Introduction to the Redis Agency and the trainer
Course roadmap: how we will learn
course concept

Basics: getting ready for the layout
breakpoints and choice of devices: desktop, tablet, smartphone
grid usage
additional states of elements (UI kit and Styleguide)
using autolayout in Figma
image containers
animation approach and preparation

Files and publishing a test page
folder and file structure
file formats: what to save files in, how to compress them and what sizes are appropriate
how to upload materials to Webflow
Fonts connection

Page Structure
what is HTML
what a div is and how to use it
text elements
images
buttons and links

Styling Elements #1
what is CSS
How to create a class for an element
how to create a modifier
how to create a combo class
how to change tag styles
element dimensions
text styles

Styling #2 elements
what margin, padding, and background are and how to use them
stroke
image insertion

Flexbox
how flexbox works
examples of use: learning how to assemble simple structures from elements

Rubber adaptation
vw: what it is and how to read it
examples of use
assembling elements relative to the width of the browser window

Parsing student projects
Learning how to position elements: position
relative, absolute, fixed, sticky
examples of use

Adaptives
device selection
how breakpoints work

Rubber layout
How to prepare a layout for a rubber layout
how to make a style guide for a rubber layout
how to use the sizes of text styles in em.

Layout with grid
how grid works
examples of use

Styling elements
Input form and input elements
input box customization

Animations
how it works
examples of use
Animation when displaying on the screen
animation when hovering the mouse
scrolling animation
animation
How to do horizontal scrolling in Webflow without code
mouse move over element: animation when moving the cursor over an element

CMS collections
CMS list and connection on page
Template CMS collections
reuse CMS collections
scheme in Miro

Parsing student projects