Unit 11: Intro to Photoshop
Unit 12: Design Accessibility
Unit 13: Product Design Thinking
Unit 14: User Experience Design
Unit 16: Introduction to Design Portfolios
Unit 17: Portfolio Development
Unit 18: Personal Branding
Unit 19: Case Studies
Unit 20: Portfolio Website Design
Unit 21: Career Coaching
2 of 2

Exercise: Build A Nav Bar and Hero Section


Replicate the following navigation menu and hero header design in Webflow, using the knowledge you just learned. 

Observe the white space in the design and try to replicate that using paddings and margins in Webflow. 

Things To Note

You may find any plant images online to replace the plant image in the example. You can also use a substitute logo/icon to replace the logo in the example. The goal is not to make it exactly the same as the example, but to help you practice translating design to the web using no-code tools. 

For the text, you may use placeholder text such as Lorem Ipsum. Source placeholder text here.


Publish your project and copy the [yourprojectname].webflow.io link. Save it for your review session.

Friendly Reminder

Due to Webflow free account restrictions, you are only allowed to have 2 free pages within a project and only 2 free projects. To keep your free account while still learning the tool, you have the following options:

  1. If you want to submit time-limited, unique URLs for each exercise, delete your page once you received written feedback and comments and create a new page for the next exercise as long as you stay within the 2 page maximum per project.
  2. Use the same page and do all the exercises in that page, but with different sections. You can add a section in between to label which exercise is which. Submit the same updated link to subsequent exercises.
  3. When you are reaching the end of the course, you may consider paying for it if you like it for your portfolio. 

If you run into problems with your exercise projects, please document all of them and ask during your review session.  

Assignment Submission
Scroll to Top