Creating websites on Webflow - course RUB 31,900. from Uprock, training 4 months, date November 27, 2023.

instagram viewer

THEORY

Introduction

In this lesson you will learn about the course and how the training will proceed. Get acquainted with the features and purposes of the free and paid plans of Webflow. You will also learn how to structure work on a project from analysis to launch.

• What is this course about?
• How the course works
• Plans and rates
• Site Plans
• Account Plans
• Review and Layout Analysis
• Layout acceptance checklist
• Work plan
• Preparing the layout for layout
• Export and optimize images
• Preparing other files

THEORY

Web structure

In this lesson, you will get acquainted with the basic elements of a web page and the principles of block layout on which the Webflow service works. Basic knowledge will help you understand the basic terminology of web development. You will learn what a web page hierarchy is and what it consists of. Explore the Navigator panel to understand how the element structure is created and displayed in Webflow.

• Block layout and basic HTML and CSS
• Hierarchy of site elements
• Navigator panel
• Practice: Planning the site structure

THEORY

Project creation and publication

In this lesson, you will learn how to register on the Webflow website and create a project, learn the limitations on the number of projects and pages in a project. You will understand what modes of operation exist in the Webflow service. And also learn how to activate your account and publish your site using the Publish drop-down panel.

• Registration and creation of a project
• Publishing a website
• Share project
• Cloning a project
• Cloning a custom template

THEORY

basic settings

You will become familiar with the basic project settings in the Project Settings mode. As a result, set up the project, upload images into folders and create the UI Kit.

• Project Settings
• Connecting your domain
• Site files
• General project settings
• Setting up basic styles
• Uploading images
• UI Kit of main elements

PRACTICE

Elements

In this lesson you will learn about ways to add elements to a site page and what elements cannot be located inside their own kind. Learn what basic elements exist to create a website and what their purpose is. Finally, create the site structure and add content to the elements.

• Adding elements
• Overview of the main elements
• Overview of functional elements
• Personalization of elements
• Practice: Creating the main structure of the site
• Practice: Adding elements and classes

PRACTICE

Element styles

You will become familiar with concepts such as Classes and Combo Classes and learn about their purpose. As a result, add classes to Sections, Containers, Images, Texts.

• General principles
• Overview of simple sections of the Style panel
• Style Manager panel overview
• Element states
• Practice: Adding Content to Elements

PRACTICE

Style settings. 1 part

You will study the composition of the Style panel and examine the Layout section, which is used to configure the arrangement of elements relative to each other.

• Style Panel: Layout Section
• Practice: Detailed layout of sections 1 and 2

PRACTICE

Style settings. part 2

You will continue to explore the composition of the Style panel and examine the Grid element, which is responsible for the way elements are arranged, which is ideal Suitable for creating a variety of complex grid layouts, including tables that can easily be converted to cards on mobile screens.

• Style Panel: Grid Element
• Practice: Detailed layout of sections 3 and 4

PRACTICE

Style settings. Part 3

You will continue to study the composition of the Style panel and study the Size section, which allows you to determine the size of the element, set minimum and maximum width and height values, and customize the behavior of child elements that go beyond borders parent element.

• Style Panel: Size Section
• Practice: Detailed layout of sections 5 and 6

PRACTICE

Site pages

We'll take a look at the Pages panel. Let's find out what types of pages exist and how to customize them. As a result, you will create 7-8 sections of the site.

• Site pages
• Practice: Detailed layout of sections 7 and 8

PRACTICE

Secondary functions

You will learn about additional features that help you while working on a project, as well as in finding training materials. As a result, you will create 9-10 sections of the site.

• Helper functions in Designer mode
• Practice. Detailed layout of sections 9 and 10

PRACTICE

Symbols and Patterns

Learn how to create Symbols from elements or groups of elements in Webflow to manage repeating blocks and content. As a result, you will layout the navigation menu, Navbar, set up anchor links and create symbols for the Menu and Footer.

• Symbols panel overview
• Review of ready-made Layouts
• Creating Characters
• Practice

PRACTICE

Adaptive layout

In this lesson you will learn the basics of adaptive layout and become familiar with the concept of “Breakpoints”. As a result, create an adaptive tablet and mobile version, an adaptive one for large screens, and an adaptive menu.

• Basics of adaptive layout
• Breakpoints
• Adaptability check
• Website adaptation for mobile screens
• Website adaptation for large screens
• Testing adaptability

EXTENDED CAPABILITIES

Animation. 1 part

You'll learn the general principles of animation, learn how to animate link buttons and other hover elements, and animate the first screen.

• General Animation Principles
• Triggers
• Setting up triggers
• Animating elements on hover
• Anchor links

EXTENDED CAPABILITIES

Animation. part 2

You will learn what global animation is. As a result, learn how to create it.

• Global animation
• Component Animation
• Animation when loading and scrolling the page

EXTENDED CAPABILITIES

Inserting third party code

You will understand why you need to insert third-party code. Get to know the Embed component. Learn how to integrate third-party code, for example, connect comment services or a map widget. In practice, learn how to insert the card code.

• Embed Component
• Inserting code in page settings
• Inserting code in project settings
• Inserting code in element settings (Custom Attributes)
• Inserting the map on the site

EXTENDED CAPABILITIES

Analytics and SEO

Learn what web analytics and SEO are and why they are needed. You will understand how to connect Analytics and set up SEO pages.

• Connecting Analytics
• Connecting Yandex Metrica and Google Analytics
• Setting up SEO in page settings

EXTENDED CAPABILITIES

Completion of the project

Once again, go through all the stages of creating a website. You will figure out how to approve and transfer the site to the client. Learn how to connect a website to a domain on Webflow hosting, upload the website and install it on your hosting.

• Checklist for checking the site
• Approval and handover of the project to the client
• Connecting a website to a domain on Webflow hosting
• Uploading the site and installing it on your hosting

EXTENDED CAPABILITIES

Bonus

Graduation project