How to Build a Website with Webflow – Design. Build. Launch. Episode 5

Episode 5: Building a Website in Webflow.

In this video we will build our websites desktop version in Webflow. So we have designed our website in Adobe XD Exported the assets and imported them into Webflow, and setup a style guide to use to build our website.

We will start by setting a container max-width for the site, which will be the wrapper for all of the content including the hero, skills, projects, about and footer sections. We will build each one of these sections until we finish at the footer.

Next we will do a full width block for the footer background outside of the container and start to add our navigation. Then to finish off this tutorial we will add our functionality to our nav so that our site scrolls to each section when a link is selected.

In the next episode we will make the website completely responsive. So I will see you for that in episode 6.
Enjoy the video πŸ˜€

For this project you will need two tools:
Sign Up for Webflow (affiliate): https://webflow.grsm.io/caleredwards
Download Adobe XD: https://www.adobe.com/products/xd.html

New Videos Every Tuesday & Thursday!

Have a Great Day! Join the Notification Squad: click the bell πŸ””
Subscribe: http://www.youtube.com/user/CalerEdwards?sub_confirmation=1

Learn UI/UX Design and Adobe XD πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»(60% OFF)
Learn: https://www.udemy.com/ui-ux-design-using-adobe-xd/?couponCode=CALER60

Join the channel and become a Member ❀️
Get exclusive content from me and help support the channel.
Join: https://www.youtube.com/channel/UCfzOLBT7jyHFcaTgwmnttog/join

SOCIAL: @CalerEdwards πŸ’™
Dribbble- https://dribbble.com/CalerEdwards
Instagram- https://www.instagram.com/CalerEdwards
Twitter- https://twitter.com/CalerEdwards
Behance- http://behance.net/CalerEdwards
Website- http://caleredwards.com

Hangout on the Discord server! πŸ’œ
Discord: https://discord.gg/qP9CJYE

β–Ά Music: Epidemic Sound 🎹

What is Design. Build. Launch. ?
If you missed the Introduction Video you can check it out here:

Episode 1: https://youtu.be/WmWjhLm-31M
Episode 2: https://youtu.be/oJLqJaX_Jhk
Episode 3: https://youtu.be/Df_0_MS7waI
Episode 4: https://youtu.be/GG32zFKmMcM

#Webflow #AdobeXD #NoCode

You May Also Like