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 Portfolio Project Grids

Instructions

Build a similar portfolio grid like the one below. You may find a couple of portfolio thumbnail images online to replace the ones shown in the image. The goal is not to make it look exactly the same but to practice building with flexbox.

You do not have to connect portfolio images to another page like you would in a live website.

Make one element on screen “sticky” (such as the menu bar, just the logo, or the vertical text on the side bar) using what you learned in CSS positioning.

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