Webflow is the web design tool of the future. Learn how to professionally transform beautiful layouts into full-featured websites. Benefit from real-world insights and learn how to use Webflow to turn real client jobs into reality.
Webflow is used by more than 3.5 million users. The web design tool allows designers and teams to turn their layouts intobeautiful websites, all without programming knowledge. With Webflow you can finally implement your own designs with pixel precision. There are no limits to your creativity.
You'll learn everything you need to create beautiful layouts with Webflow. No topic will be left out.
Jonas has already implemented a large number of customer projects and provides you with a process so that you can confidently implement customer projects with Webflow yourself in the future.
Animations breathe life into static content. In the Webflow Masterclass, you'll learn everything you need to know about animations.
Finally, you no longer need a developer to breathe life into your layouts. With Webflow, you can create your designs completely on your own, pixel-perfect.
If you've been making your pages with content management systems like WordPress, now is the time to switch to Webflow. With the web design tool you gain 100% control over your web design.
Agencies can implement website projects with Webflow not only more cost-effectively, but also significantly faster. Absolutely no compromises have to be made.
-min.webp)
At VisualMakers we cooperate with absolute experts. For this reason, the Webflow Masterclass is presented by Jonas Arleth. Jonas has been a freelance web designer for more than 10 years and has already implemented a large number of customer projects with Webflow. In addition, he publishes weekly matching content on his YouTube channel, Web & Design Podcast and blog.
Our masterclasses follow certain principles and values. All lessons are designed without fuss and unnecessary information. Your time is important!
All lessons build on each other and are interconnected in the modules. This way you learn step by step and can directly apply what you have already learned.
All examples in our masterclass are real use cases from our experience.s o you have a direct reference to the learning content and can implement them directly in your own company.
At VisualMakers, we make community a priority. Get support from other Masterclass graduates, exchange ideas and learn with and from each other.
After successfully completing the Masterclass, we will certify you as a Webflow Expert by VisualMakers. With this you can show your future clients or employers that you really know your stuff.
All lessons build on each other and are interconnected in the modules. This way you learn step by step and can directly apply what you have already learned.
1.1 - Welcome and how to get the most out of this online course (3:31 min)
1.2 - What is Webflow anyway? (3:19 Min)
1.3 - Copying elements from other Webflow projects (5:06 Min)
1.4 - Using shortcuts and Webflow Finder (04:09 Min)
2.1 - Webflow Designer fast forward (14:18 min)
2.2 - Understanding HTML and CSS (8:56 min)
2.3 - Understanding the box model (5:40 min)
2.4 - Hierarchies and inheritance in web design (9:10 min)
2.5 - Selectors and CSS classes (19:13 min)
2.6 - Logical naming of selectors (12:43 min)
2.7 - Understanding different units - vw, vh, %, px, em (16:35 min)
2.8 - Introduction to Grid - Magazine layouts (23:00 min)
2.9 - Introduction to Flexbox - Positioning Elements (11:53 min)
2.10 - Positioning Elements (Position) (13:59 min)
2.11 - Preparing and Importing Images Correctly (15:38 min)
2.12 - Preparing and Embedding Icons and SVG Vector Graphics Correctly (6:48 min)
2.13 - Working with Symbols (Components) (8:20 min)
2.14 - Creating Symbols Building Kit - Case Study Customer Project (5:46 min)
3.1 - Intro (1:53 min)
3.2 - Include font (6:26 min)
3.4 - Create project template and style guide (21:21 min)
3.5 - Create spacing globally (12:19 min)
3.6 - Use containers and maximum widths (14:57 min)
3.7 - Structure pages properly (12:26 min)
3.8 - Keep SEO in mind when creating headlines (8:54 Min)
3.9 - Create main navigation with dropdown and language switcher (33:03 Min)
3.10 - Create full-screen mobile navigation (20:18 Min)
3.11 - Text on image (11:17 Min)
3.12 - Open video in popup (04:54 Min)
3.13 - Slideshow - Simple (10:54 Min)
3.14 - Slideshow - Advanced (28:08 Min)
3.15 - Gallery in Overlay Lightbox (12:58 Min)
3.16 - Rich Text Element (6:13 Min)
3.17 - Embed Google Maps Maps (6:30 Min)
3.18 - Create Forms and Send Automatically (15:58 Min)
3.19 - Embed Search Function (7:12 Min)
3.20 -SEO Page Settings (Search Engine Optimization) (10:24 Min)
3.21 - Making a Page Responsive (46:11 Min)
3.22 - Creating Your Own Responsive Breakpoints (6:19 Min)
3.23 - Hiding or Replacing Elements on Specific Devices or Sizes (6:27 Min)
4.1 - Intro 1:43 min)
4.2 - Overview, analysis and layout preparation (7:09 min)
4.3 - Create Webflow project (4:38 min)
4.4 - Add custom font (5:37 min)
4.5 - Create font sizes and style guide (2:33 min)
4.6 - Make font sizes responsive (8:03 min)
4.7 - Create and include icon font (4:11 min)
4.8 - Define Containers and Maximum Widths (2:58 Min)
4.9 - Build Main Navigation - OnePager (5:26 Min)
4.10 - Build Mobile Navigation (with Lottie Animation) (16:06 Min)
4.11 - Create Hero Section (Text on Image) (7:24 Min)
4.12 - Include Background Videos (Text on Video) (6:37 Min)
4.13 - Define and Reuse Global Spacing (5:32 Min)
4.13 - Define SEO friendly headlines and styles (5:32 min)
4.13 - Hero Section with two images side by side (5:32 min)
4.13 - Arrange text boxes side by side (custom grid) (5:32 min)
4.13 - Create image slideshow (5:32 min)
4.13 - Nest different content in tabs (5:32 min)
4.13 - Include all content from layout (5:32 min)
4.13 - More customizations (5:32 min)
4.13 - Footer and imprint/privacy subpages (5:32 min)
4.13 - Make page responsive (5:32 min)
4.13 - Create simple image scroll animation effect (5:32 min)
4.13 - Create simple SlideUp effect on text elements (5:32 min)
Payment in instalmentsfor three months. Includes unlimited access and all future updates.
*the payment, the course and also the support is handled by our partner Jonas Arleth and his team
Pay upfront and save an additional €26 compared to installment. Includes unlimited access and all future updates.
BUY NOW* ->*the payment, the course and also the support is handled by our partner Jonas Arleth and his team
.svg)
%201Logo256.webp)
%201.webp)