Free Youtube Webflow Course (Beginner Level)

Creating a Clean & Simple Website with Webflow

In this series of 24 videos, I'll walk you through creating a website beforeyoushine.com. We will be creating Homepage, Page for collecting emails, Blog and Blog Detail.
Watch now on Youtube
Clone the Project (Free)
What and why?

Real-world project with going through most of the Webflow elements and features

Creating a Clean & Simple Website with Webflow is a course for everyone starting with Webflow. It's a great starter course for moving from design tool to Webflow. We will start with the homepage being designed in Sketch a recreate it using most of the Webflow features. We will create multiple collections, work around Grid and FlexBox we will also cover some of the basics around SEO and we will make the site live together on Webflow hosting.

At the end of the day, this is a really nice example of a real-world project with going through most of the Webflow elements and features to help you really dive into the tool and start creating your own websites!

In the next video course I'll focus on recreating and documenting my redesign/better coding of my Portfolio. Let me know your thoughts and stay in touch via any of my social networks.
Part 1

Creating Homepage

In the first part I'll walk you through creating the homepage. This will be the foundation for the whole project. We will create the Home cover, create About us and Services and setup multiple collections to have most of the content dynamic and end up with CTA and footer. Possibly the easiest way and guide to create simple landing page with Webflow.
1 — Intro
2:35
2 — Navigation & Project Setup
14:45
3 — Hero Section
13:13
4 — Our Services & About
17:29
5 — Blog / Collection
19:47
6 — Our Speakers
8:07
7 — Events
12:11
8 — Call to Action
9:19
9 — Footer + Desktop View Done
7:55
Part 2

Homepage - Responsive

In the second part in 4 videos we will cover all the parts of creating responsive design in Webflow. In this part we will in 57 minutes of uncut video create all the breakpoints and cover the most difficult one - Webflow menu component. We will also cover how different it's to create responsive version in Webflow than in Sketch or Figma.
10 — Responsive (Tablet)
11:31
11 — Responsive (Mobile Landscape)
17:01
12 — Responsive (Mobile Portrait)
7:46
13 — Responsive (Navigation)
12:38
Part 3

Subscribe - 1st Subpage

In this part we will create a submission form for people who would like to participate in internship programs in Prague. This is a nice example of coming soon or newsletter page. We will create a simple one-input page to collect email addresses.
14 — Sign Up Form (1st Subpage)
22:26
Part 4

Blog Detail & Home

Part 4 is all about creating a blog. One of the most common use case of Webflow. We will stick to the dynamic content pulled from Blog Posts collection which we started on the homepage and take it to the end. By creating Blog detail, styling Rich Text element in a separate page called Styleguide and end up by creating Blog home with 2 random ordered sections.
15 — Rich Text Styling + Desktop Blog Detail
30:24
16 — Blog Detail Responsive & Tweaks
13:15
17 — Blog Home & Quotes Randomizer
15:00
Part 5 - 7

Final UI/UX Tweaks + SEO + Making the site live with Webflow Hosting

In the last 3 videos/parts we will polish the whole website, make everything clickable and connected to the live content. We will cover SEO basics mainly to create nice sharing options for the blog and all subpages and in the last bit we will take the site live and move it from WIX to Webflow Hosting.
18 — Final UI/UX Tweaks
18:48
19 — SEO
5:02
20 — Going Live with Webflow Hosting
8:18
Part 8 - Job Board

Job Board & Dynamic Sharing Buttons

[March 2020] Update - 4 new videos of creating a simple job board for the Before You Shine community and recreating the Internships page. We will create 2 more collections and 2 new pages - Homepage of all the internship job posts and the detail of the job post. In the extra video (number 24) I'll show you how to create dynamic sharing buttons so your audience is able to share their posts on Twitter or Facebook.
21 — Job Board - Homepage (Part 1)
42:06
22 — Job Board - Post Detail (Part 2)
8:49
23 — Job Board - Responsive Design (Part 3)
9:43
24 (Extra) — Dynamic Sharing Buttons in Webflow
12:40

Creating a Clean & Simple Website with Webflow

24 videos  — 6 responsive pages — 6 hours of video content and all of that for free and live on Youtube. Feel free to reach out with any question or feedback! And now — go get better at Webflow!