Your One-Stop Shop to Learn Webflow for Freelancing

While building a website using custom code, if you face a problem and can't figure out what is happening or what needs to be done, it's a common practice to share a minimal code with others on platforms such as StackOverflow to get their help.

One of the great features of Webflow is the ability to share your projects with others. If you encounter problems, it's much easier for others to help you with your issues if you share the link to your project with them. In this video, I will show you exactly how you can do that.

In this lecture, I explain what grids are, how you can adjust element height and width in a grid layout and I will also talk about auto and manual positioning of elements inside a grid block. I will also show you how you can create a class type for an element and reuse it throughout your website.

In this video, I show you how you can create new pages for your Webflow websites. We also explore other elements in the Webflow Designer and apply different styling. I also show you how you can add Combo classes to your existing classes so that you can assign specific styling to some of the elements with the same class name.

In this lecture, I cover different things that you need to know about navbars in Webflow. We also touch on some techniques for making your website responsive as well as the navbar.

The first main project in this course is to use what we have learned so far to create a beautiful website. In this section, you also learn how to create Symbols and re-use them through your website, add override fields to make changes from one Symbol to another, talk about best practices for making layouts, responsiveness, SEO, and much more.

In this lecture, we start building the hero section of the home page for our first project. During this lecture, I will show you how you can set different position types for elements, how to add gradient background colors to website elements, and also how you can add Lottie animations to your website.

In this lecture, while fixing the responsiveness of the hero section, I explain to you some new techniques that we can use to make sure our website looks good on all devices and different screen sizes.

In this lecture, while working on the App Features section, I will show you how you can use what we learned about combo classes in Webflow to conveniently make similar sections with minor differences. We also make sure our App Feature sections are responsive.

During this lecture, we test our knowledge of Grid Blocks in Webflow by making a footer section. We make sure this section is responsive, and I will also briefly explain how we can make the navbar remain on the top of the viewport as we scroll on the page.

Symbols are important features in Webflow. You can turn your elements into symbols and reuse them throughout your website. In this lecture, we learn exactly how to use Symbols to make our development process faster.

During making the Teams Member section of the About page, I will show you how you can use the override feature of Webflow Symbols to repeat a design but make changes to individual elements of the Symbol.

In this lecture, you will learn how to use dropdown menus as accordions to display Frequently Asked Questions on your website.

At the end of this lecture, you will be confident with integrating forms, adding reCAPTCHA security, and also adding Google Maps to a website. I will also walk you through the process of getting reCAPTCHA and Google Maps API keys and securing them.

In this lecture, we finalize our first website by linking the Contact form section to the corresponding item in the navbar, checking responsiveness on larger devices (large screens, TVs, etc.), learning how to add some basic SEO to our website, and finally, I will show you how to use Webflow Editor after the website is published.

The main topics covered in this video include animations triggered by the mouse movement in the viewport as well as building a loader for while website page is loading

Element triggers are used to apply cool animations when you click, hover, or scroll an element in the website. In this video, we build our way up from simple effects to creating a neat submit button animation.

This lecture focuses on how you can create scroll-based animations for different elements on the page. I will also talk about horizontal scrolling extensively in this lecture so you can combine horizontal scrolling with vertical scrolling on a single webpage for the ultimate user experience.

This is an exciting lecture. You will learn how to add some cool skew effects to images in a webpage as you scroll and also, I will show you how you can add two different scroll progress indicators to a webpage as well as how you can make a Lottie animation play as you scroll in the screen.

An in-demand skill as a Webflow developer is to be able to create eye-catching interactions. In this video, I will show you how you can create a custom cursor and what you need to know to make it work properly.

This lecture is a big one. Together, we will put what we have learned so far into practice and start adding animations to the static website that we built in the last section. While working on the website, I also teach you some techniques to animate text elements, buttons, and also navigation links. You will also learn what are some of the considerations that you need to take into account when adding animations and interactions to a website.

We will test our knowledge by building a portfolio website for ourselves during this big section. Topics that will be discussed in more detail in this section are including the following:

• Custom fonts

• Custom navigation menu

• Responsive text size

• Text animations and interactions

• Lottie animations on scroll

• Mouse hover and click animations (customized for touch screens)

• Horizontal scrolling

• Text and element reveal effect

• Follow mouse move in the viewport or over an element

• Custom sliders

• Webflow CMS

• Form with interactions and animations

• and much more...

In this lecture, we start our portfolio project by setting up the project settings. Then we will talk about responsive font sizes for different screen sizes and how we can use vw and em units to build professional production-ready websites.

In this lecture, we will add nav menu elements to the website and make sure all of the elements are responsive.

In this lecture, we will work on some simple and complex mouse click and hover animations to make our navigation menu and its elements work properly.

In this lecture, we work on several text animations and interactions to give a lively look to the hero section.

Adding some scroll animations is always a good idea for a good-looking site. That's what we will do in this lecture for the hero section.

In this lecture, we continue working on the home page by adding a section for "About me" where we also work on more scroll-based animations

In this last section of the home page, we work on adding our footer section with some mouse cursor move and hover animations. We make sure our home page is fully responsive and finally, we add a very cool scroll progress indicator to our home page.

Bringing common sections from the home page by creating symbols, adding reveal animations on hover, and more.

This is a big lecture. We explore Webflow's slider element and then we create our own slider to showcase projects with some custom slider indicators without needing to add any custom code. We also explore different Webflow elements to show Youtube and other types of videos including the Lightbox element.

Contact Section is the last section of our portfolio website. During this lecture, we work on more interactions and effects as well as connecting our contact section with the corresponding navigation menu link.

Webflow CMS is a powerful tool for both developers and content editors. What we will talk about in this lecture will pave the wave for our portfolio website CMS integration. Make sure to watch this lecture to learn what Webflow CMS is and what all you can do with it.

Search Engine Optimization (SEO) is an important piece of a website. Without a good SEO, your websites will rank low in search engines and it will be very hard to find them. There are some basic SEO tools in Webflow that are easy to use and every Webflow developer should know of. In this lecture, we cover all the basic SEO for our portfolio website and also integrate Google Analytics into our published website to make sure we collect crucial information about the website such as the number of visits, time spent on each page, and much more.

Signing up for a paid account enables developers to add custom code to their websites. In this lecture, we learn what custom codes are, why we may need them, and how we can add them to our Webflow pages or the entire project.

Creating a custom cursor is always encouraged for a portfolio website or in general for "Creative" development. Webflow allows you to design and style your own custom cursors, but you need to apply some CSS custom code to allow the actual mouse cursor to interact with other elements. In this lecture, we address that problem and also dive deeper into how we can identify touch screen devices without having to rely completely on Webflow's screen size breakpoints.

In the previous lectures, we talked about adding Custom CSS and HTML embed to our project. In this lecture, we use custom Javascript code to facilitate page transition animations as well as dynamically assign the 4-digit year to the copyright section of our project.

An important step in building any website is to connect it to a custom domain. Websites will look unreliable, unsecured, and unprofessional without a custom domain that represents a person, business, or product clearly. In this lecture, we will connect our Webflow website to a domain on Namecheap.com.

Adding a site plan to connect a custom domain on Webflow can get very costly. If you work for a client, they normally cover the hosting costs. However, if you are building websites for yourself (or even some of your clients), you may need to save some money and so, that's exactly what we cover in this lecture.

I will show you step-by-step instructions to take your website code outside Webflow and host it on Github Pages. During the process, we will learn about some common git commands and I will explain to you how you can make changes to your website in the Visual Studi Code environment (or any other similar IDE of your choice). We finally connect our Github Pages to our custom domain on Namecheap. Knowing this process can give you an advantage when trying to save money for your clients as well.

We wrap up our custom code section by taking care of one last piece on our website. In this lecture, I show you how you can connect the contact form on your website to the Formspree platform. We will not need to do any backend coding, and everything will be taken care of in HTML and Javascript.

It has been a great honor for me to be a part of your Webflow journey. I hope that you all enjoyed learning in this course as much I did making the course.

Thank you, and I wish you all the best in your personal and professional lives.