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.

2 — Navigation & Project Setup

3 — Hero Section

4 — Our Services & About

5 — Blog / Collection

6 — Our Speakers

8 — Call to Action

9 — Footer + Desktop View Done

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 — Responsive (Mobile Landscape)

12 — Responsive (Mobile Portrait)

13 — Responsive (Navigation)

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)

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

16 — Blog Detail Responsive & Tweaks

17 — Blog Home & Quotes Randomizer

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

20 — Going Live with Webflow Hosting

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)

22 — Job board - Post Detail (Part 2)

23 — Job board - Responsive Design (Part 3)

24 (Extra) — Dynamic Sharing Buttons in Webflow

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!

Watch now on Youtube

Clone the Project (Free)

You may also like these

Dashboard UI Kit 3.0

Dashboard 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.

View Product Get for $44

Cards 2.0 — Webflow Framework

Cards 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.

View Product Get for Free

Cards - Webflow UI Kit

Cards - 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!

View Product Get for Free

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.

BUILT WITH LOVE (ON MY OWN) IN WEBFLOW