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)
Creating a clean & simple website with Webflow Hero Image
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.
Play Icon
1 — Intro
2:35
Play Icon
2 — Navigation & Project Setup
14:45
Play Icon
3 — Hero Section
13:13
Play Icon
4 — Our Services & About
17:29
Play Icon
5 — Blog / Collection
19:47
Play Icon
6 — Our Speakers
8:07
Play Icon
7 — Events
12:11
Play Icon
8 — Call to Action
9:19
Play Icon
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.
Play Icon
10 — Responsive (Tablet)
11:31
Play Icon
11 — Responsive (Mobile Landscape)
17:01
Play Icon
12 — Responsive (Mobile Portrait)
7:46
Play Icon
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.
Play Icon
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.
Play Icon
15 — Rich Text Styling + Desktop Blog Detail
30:24
Play Icon
16 — Blog Detail Responsive & Tweaks
13:15
Play Icon
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.
Play Icon
18 — Final UI/UX Tweaks
18:48
Play Icon
19 — SEO
5:02
Play Icon
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.
Play Icon
21 — Job board - Homepage (Part 1)
42:06
Play Icon
22 — Job board - Post Detail (Part 2)
8:49
Play Icon
23 — Job board - Responsive Design (Part 3)
9:43
Play Icon
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! 

You may also like these

Dashboard UI Kit 3.0Dashboard UI Kit 3.0
The first and the largest design kit (Sketch, PS,XD) for web apps and dashboards developed in React with open roadmap and monthly updates. With second release we're counting 60 new screens including 4 full conceptual apps.
Cards 2.0 — Webflow FrameworkCards 2.0 — Webflow Framework
Cards 2.0 are Symbol based Framework/UI Kit for creating beautiful landing pages or wireframes within minutes directly in Webflow with ready to be published code.
Cards - Webflow UI KitCards - Webflow UI Kit
Clonable Webflow Style UI Kit prepared fully in Webflow Designer. Full of most commonly used components and 28 beautifully designed & coded cards. All ready to copy & paste into your future projects!
Interested in More?

SUBSCRIBE FOR UPDATES

I'm focusing more and more time on building stuff for the community, releasing short Webflow courses and give away more freebies in the future.

Thank you! I'll let you know when I cook something up!
Oops! Something went wrong while submitting the form.
LET'S WORK TOGETHER

Contact Me

I'm currently available for Webflow projects and fun side projects. Feel free to drop me a message.

Write an Email