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: Animate Your Hero Header

Instructions

Choose a project you did in Webflow that has a hero header. Animate the text and button. You can be creative in how you animate it based on what you learned. 

Make sure you are not animating everything. Keep animation movements smooth and subtle. 

Here is an inspiration for you. You do not have to replicate all the animation you see here. Design your own animation and execute your vision in Webflow.

Some advanced animation will require custom coding. As a beginner, we will use what’s most readily available within the platform. 

Submission 

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