Complete Webflow Bootcamp: From Figma Design to Development from Udemy

Do you want to become a web designer and a web developer, but you don't know how to code? Have you ever wanted to build custom websites without writing a single line of code? This course will allow you to develop your web design and development skills, and you can add web developer to your CV and start getting clients for your skills.

Hi everyone. I'm Arash, and I'm a UI/UX designer and a web developer. In the past few years, I helped over 50,000 designers worldwide to build their own UI/UX design business from the ground up. In this course, I will help you learn and master Webflow comprehensively from scratch.

Webflow is an innovative and brilliant tool for web designers. It allows you to build custom websites visually. Don't get me wrong; it's not a website builder like Wix or Squarespace that comes with extensive limitations. On the contrary, it allows you to build modern and responsive websites without any limitations visually. It's used by everyone from entrepreneurs and start-ups to Dell, Zendesk, etc.

Many designers think that web development is hard, boring, and complex, but I will teach you how to develop amazing websites in a simple, fun, and engaging way.

This is not another development course where you learn HTML & CSS. Instead, you will learn how to convert any design to a fully responsive website with complex animations and interaction without code.

In the first part of the course, I will teach you the basics of web development, and we will go through all the features of Webflow in the Webflow Academy section. In the second part of the course, you will put everything you learned into practice by building a complete website for a design agency from scratch. Next, we will dive into advanced topics like responsivity, animations, and interactions. Last but not least, you will learn how to optimize a website for search engines (SEO).

In the last part of the course, we will talk about the business side of the web design industry. You will learn how to get your very first client, how to price your work, how to prepare amazing proposals, and so much more. Eventually, you will learn how to become a world-class freelance web developer and how to run your own web development business.

With over 11 hours of content across 80+ lectures, I will take you from beginner to expert, and teach you everything you need to know in order to use Webflow in a professional manner.

An amazing course for people with zero web development experience or for experienced UI/UX designers who want to learn and master Webflow and become no-code web developers. By the end of this course, you’ll have a complete, real-world project for your own portfolio, and every student will have the knowledge and confidence to apply for a web developer job.

Don't just take my word for it, see what my past students had to say about my design courses:

"I loved this course. Highly recommended if you want to build real-world designs. loved Arash's style of teaching." - Mustafa Alabdullah

"This course is AMAZING. I really like the content especially the projects. I could finally find a course to take me from the very basic concepts to the most complex part of UI/UX design. I 100% recommend it." - Zhan K

"A comprehensive and detailed course for anyone looking to become a UI/UX designer. Clear and easy to understand explanations. It covers all of the topics required for a real-world professional." - Erikas

"The course was awesome, he went through a lot of features and showed a whole lot of stuff that is going to make me a better UI/UX designer. Thank you Arash." - Sara Brown

"Such an amazing course. I was always looking for a comprehensive course that could teach me everything in one place. I finally found it. I recommend this course to anyone who wants to become a world-class UI/UX designer." - Louis Castillo

Course highlights:

Mastering Webflow
Advanced Tips & Tricks
Build a complete modern website from scratch
A certificate of completion upon finishing the course.

We are so confident that you will love this course that we're offering a 30-day money-back guarantee. So you can sign up today with zero risks.

So, what are you waiting for? Enroll today.

What's inside

Learning objectives

You will learn how to build modern websites with webflow without coding.
You will build a complete modern website from scratch.
You will learn how to convert your figma design to a fully responsive website.
You will learn how to work with complex animations and interactions.
You will learn how to become a successful freelancer.

You will learn how to get clients.
You will learn how to price your work.
You will learn how to prepare amazing proposals.
You will learn how to meet with your clients.

You will learn how to build modern websites with webflow without coding.
You will build a complete modern website from scratch.
You will learn how to convert your figma design to a fully responsive website.
You will learn how to work with complex animations and interactions.
You will learn how to become a successful freelancer.
You will learn how to get clients.
You will learn how to price your work.
You will learn how to prepare amazing proposals.
You will learn how to meet with your clients.

Syllabus

Introduction

In this section we will talk about all the features of Webflow and I will explain each section in detail.

Introduction to Webflow

Environment of Webflow

Introduction to HTML & CSS

Introduction to the Box Model

Webflow Elements

Div Block

Section

Container

Grid

List

Link Block

Button

Typography

Image

Video

Lottie Animation

Forms

Nav Bar

Lightbox

Slider

Tabs

Social Media

Symbols

Important Shortcuts

Layout & Design in Webflow

Classes

Display Settings

Flexbox

Flexbox Challenge

Challenge Solution

Flexbox vs. Grid

Spacing

Size

Position

Backgrounds

Borders

Effects

States

Breakpoint Basics

In this section we will build a responsive and modern website from scratch.

Setting up Your Project

Please download the attached file as it is required for completing the project.

Navigation Bar

Hero Section

Clients Section

Projects Section

Testimonial Section

Services Section

CTA Section

Footer

CMS & Dynamic Content

Project Page - Part 1

Project Page - Part 2

Project Page - Part 3

Contact Page

Introduction to Responsiveness

Responsiveness: Tablet

Responsiveness: Mobile Landscape

Responsiveness: Mobile Portrait

Animations & Interactions - Part 1

Animations & Interactions - Part 2

Animations & Interactions - Part 3

Accessibility

Project Settings

Editor

Publish Your Website

Webflow Plans

In this section you will learn how to optimize your website for search engines.

Intro to SEO

Site Verification & Google Analytics

In this section you will learn some advanced tips and tricks to level up your Webflow projects.

Image Optimization & Lazy Load

Custom Attributes

How to create a pop-up?

Custom Code & Integration

Naming Convention

In this section you will learn about the business side of web design as a freelancer.

Introduction to the Freelance World

How to get clients?

Sending a Proposal

Pricing Your Work

Meeting Your Clients

Webflow Pitch

Webflow Hosting

How to Deliver the Project to the Client?

Conclusion

What to do next?

Bonus Lecture

Activities

Be better prepared before your course. Deepen your understanding during and after it. Supplement your coursework and achieve mastery of the topics covered in Complete Webflow Bootcamp: From Figma Design to Development with these activities:

Review HTML & CSS Fundamentals

Show steps

Reinforce your understanding of HTML and CSS fundamentals to better grasp Webflow's visual representation of these concepts.

Show steps

Review basic HTML tags and attributes.
Practice CSS styling with selectors and properties.
Build a simple webpage using HTML and CSS.

Read 'Don't Make Me Think' by Steve Krug

Show steps

Learn about web usability principles to create more effective and user-friendly websites with Webflow.

View Don't Make Me Think, Revisited: A Common Sense... on Amazon

Show steps

Read the book and take notes on key concepts.
Apply the principles to existing websites and identify areas for improvement.
Consider how these principles can be implemented in Webflow projects.

Follow Webflow's official tutorials

Show steps

Enhance your Webflow skills by working through Webflow's official tutorials, focusing on areas covered in the course.

Show steps

Identify specific Webflow features covered in the course.
Locate and follow the corresponding tutorials on the Webflow University website.
Replicate the tutorial projects within Webflow.

Four other activities

Expand to see all activities and additional details

Show all seven activities

Recreate a website design in Webflow

Show steps

Solidify your Webflow skills by recreating a website design from a screenshot or Figma file.

Show steps

Find a website design you admire or have created in Figma.
Analyze the design and plan the structure in Webflow.
Build the website in Webflow, paying attention to responsiveness and interactions.

Document your Webflow learning journey

Show steps

Improve retention by documenting your learning process, challenges, and solutions while working with Webflow.

Show steps

Create a blog or journal to record your Webflow experiences.
Document new features you learn and challenges you overcome.
Share your insights and code snippets with the community.

Contribute to Webflow forums

Show steps

Reinforce your knowledge by helping others in the Webflow community forums.

Show steps

Browse the Webflow forums for questions related to topics covered in the course.
Provide helpful answers and solutions to other users' problems.
Share your own experiences and insights.

Build a portfolio website in Webflow

Show steps

Showcase your Webflow skills by building a professional portfolio website to attract clients or job opportunities.

Show steps

Plan the structure and content of your portfolio website.
Design and build the website in Webflow, focusing on visual appeal and user experience.
Optimize the website for search engines and publish it online.

Career center

Learners who complete Complete Webflow Bootcamp: From Figma Design to Development will develop knowledge and skills that may be useful to these careers:

Webflow Developer

A Webflow Developer specializes in building websites using the Webflow platform, leveraging its visual interface to create custom designs. This course is extremely valuable for anyone aiming to become a Webflow Developer, providing complete training from beginner to expert. You will discover how to convert designs to responsive websites with custom animations, and you will get the chance to build your portfolio. The course also delves into advanced tips and tricks, SEO optimization, and even the business aspects of web design, essential for any Webflow Developer.

See salaries and explore the career path for Webflow Developer

No-Code Developer

A No Code Developer builds applications and websites using visual development platforms that don't require traditional coding. This course directly aligns with the role of a No Code Developer, focusing primarily on Webflow. The skills learned in this course will prepare you to convert designs into fully responsive websites with complex animations and interactions. This course covers building modern websites from scratch. It teaches you the ins and outs of Webflow comprehensively, and has the potential to transform you into a proficient No Code Developer.

See salaries and explore the career path for No-Code Developer

Freelance Web Designer

A Freelance Web Designer works independently, offering web design services to clients on a project basis. This course is highly beneficial for aspiring Freelance Web Designers, teaching you Webflow comprehensively from scratch. The course provides practical skills in building modern websites, converting designs to responsive sites, and understanding advanced animations. This course is designed to equip you with the knowledge and confidence to start your own web design business, covering topics such as client acquisition, pricing, and proposal preparation.

See salaries and explore the career path for Freelance Web Designer

Web Developer

A Web Developer is responsible for building and maintaining websites, often working with code. This course equips you with the skills to function as a Web Developer with Webflow, a no-code tool. You will gain experience in converting designs into fully responsive web pages. This course offers useful foundations as you learn to navigate Webflow's environment, and will help you develop responsive and modern websites from the ground up. The course also provides insights into optimizing websites for search engines, enhancing the essential skills of a Web Developer.

See salaries and explore the career path for Web Developer

Web Designer

A Web Designer crafts the visual elements and layout of websites, focusing on aesthetics and user experience. This course helps you develop web design skills comprehensively, allowing you to build custom websites visually using Webflow. With the skills acquired from the course, especially in converting designs to responsive websites with complex animations, you can create stunning and functional designs, making you a highly sought-after Web Designer. The course's focus on practical projects helps build your portfolio, proving your ability to design agency websites from scratch.

See salaries and explore the career path for Web Designer

Frontend Developer

A Frontend Developer focuses on the user-facing aspects of a website, handling the layout, design, and interactivity. This course empowers you to become a Frontend Developer by teaching you to build custom websites without coding using Webflow. You can use the skills learned in the course to convert designs into fully responsive websites with complex animations and interactions. The course is useful for those looking to convert Figma design into a fully responsive website, a crucial skill for Frontend Developers.

See salaries and explore the career path for Frontend Developer

UIUX Designer

A UIUX Designer ensures that digital products are both visually appealing and easy to use, combining user interface and user experience considerations. With this course, you can enhance your UIUX capabilities by mastering Webflow, allowing you to bring your designs to life without coding. This course also helps you convert designs into fully responsive websites with animations, and will help you understand the basics of web development. Students will find this course especially useful for improving their portfolios.

See salaries and explore the career path for UIUX Designer

Digital Marketing Specialist

A Digital Marketing Specialist is responsible for developing and implementing marketing strategies to promote a company online. A course like this may be useful to Digital Marketing Specialists, as the course will help you build and optimize websites. You will learn practical skills that include conversion of designs to responsive websites, and improving website search engine optimization. Optimizing the quality and appeal of a website may help you see improved results in your marketing campaigns, helping you become a highly effective Digital Marketing Specialist.

See salaries and explore the career path for Digital Marketing Specialist

Search Engine Optimization Specialist

A Search Engine Optimization Specialist is responsible for improving a website's visibility in search engine results. This course may be useful for Search Engine Optimization Specialists, as it includes a section on optimizing websites for search engines (SEO). You will also learn how to convert designs to responsive websites, and implement complex animations. You will also learn some advanced tips and tricks. These practical skills will allow you to implement effective SEO strategies and drive organic traffic to websites.

See salaries and explore the career path for Search Engine Optimization Specialist

UX Designer

A UX Designer focuses on the user's experience with a product, ensuring it is intuitive, efficient, and enjoyable to use. A course like this may be useful for UX Designers, as it teaches how to convert any design to a fully responsive website with animations and interaction without code. This course may also help you develop your web design and development skills, and you can add web developer to your CV. This is a great way to further enhance the user experience of digital products.

See salaries and explore the career path for UX Designer

User Interface Designer

A User Interface Designer focuses on the visual layout and interactive elements of a website or application. A course like this may be useful to User Interface Designers, as it empowers you to bring your designs to life using Webflow, a no-code web development tool. The course will help you develop your web design skills, and add web developer to your CV. It can also help you learn and master Webflow comprehensively from scratch, making the process more efficient and visually appealing.

See salaries and explore the career path for User Interface Designer

Web Project Manager

A Web Project Manager oversees the planning, execution, and completion of website development projects. This course may be useful to Web Project Managers, offering insight into the entire web development process on Webflow. The course will help you develop web design and development skills. You will also learn how to convert designs to responsive websites, and implement complex animations, which will allow you to understand the challenges and timelines involved in each stage. This knowledge equips you to better manage web projects and communicate effectively with development teams.

See salaries and explore the career path for Web Project Manager

Ecommerce Specialist

An eCommerce Specialist manages and optimizes online sales platforms to maximize revenue and customer satisfaction. This course may be useful to eCommerce Specialists, providing the ability to build and customize online stores using Webflow without coding. You will also learn how to convert designs to responsive websites, and implement complex animations. The course will help you design visually appealing and functional websites, and improving the user experience, ultimately driving sales and customer engagement.

See salaries and explore the career path for Ecommerce Specialist

Technical Writer

A Technical Writer creates documentation and guides for software, hardware, and other technical products. This course may be useful to Technical Writers, as the skills will help you understand and clearly explain technical concepts related to web development and Webflow. You will also learn how to convert designs to responsive websites, and implement complex animations. The course will help you communicate technical information to a wider audience, and enhance your ability to write effective and accessible technical documentation.

See salaries and explore the career path for Technical Writer

Marketing Automation Specialist

A Marketing Automation Specialist implements and manages software platforms that automate marketing tasks and campaigns. This course may be useful to Marketing Automation Specialists, providing insight into the technical aspects of website design and development using Webflow. Understanding how to convert designs to responsive websites can lead to improvements in marketing workflows, and an improved understanding of customer engagement. This will help you create effective marketing campaigns.

See salaries and explore the career path for Marketing Automation Specialist

Complete Webflow Bootcamp

From Figma Design to Development

What's inside

Learning objectives

Syllabus

Save this course

Activities

Career center

Reading list

Share

Similar courses