Become a Skillthrive author!

Level 3

Web designer and developer portfolio

Your friend, Wilfred Brett, needs your help coding the new web design and development portfolio he finished designing.

Challenge info

What's included

Challenges include all the assets you would expect from a designer in real-world projects, plus some resources to help you complete the Challenge.

  • Organized Figma design file
  • Detailed desktop, tablet, and mobile layouts
  • Comprehensive design system
  • Relevant fonts, colors, SVGs, and images
  • Alternative Solutions from members
  • Straightforward quick-start guide
  • Recommended list of learning resources
  • Access to member-only Discord channels

Challenge brief

Your Challenge is to create a portfolio for Wilfred Brett, a web designer and developer in Atlanta, Georgia. The design includes some more advanced topics like a modal for portfolio items, a custom cursor, a click-to-copy text function, an animated text marquee, and a horizontal scroll reveal effect for viewing portfolio images.

Your Challenge is complete when:

  • The website is as close to the original design as possible

  • The website is responsive and viewable on multiple screen sizes

  • Elements have the correct state styles (hover, focus, etc.)

  • Includes proper semantic HTML 

  • Includes metadata tags for SEO best practices

  • Custom cursor on portfolio item links and email click-to-copy

  • Clicking on email copies text to the clipboard

  • The portfolio modal opens when clicking on the portfolio title link or preview image

  • Clicking on the "X" icon closes the modal while preserving your original scroll position

  • The modal images can be viewed with a horizontal scroll (review the Figma prototype for an example)

Join our Discord server to ask for help and share what you've learned!

How it works

When you start a Challenge, you will navigate to a new Solution created for you in the dashboard. This page is where you can read the Challenge brief, download the files, and submit your final Solution.

There's no time limit to complete a Challenge, and you can use any programming language, library, or framework you want.

Once the Challenge is complete, you submit a Solution from the dashboard. Your Solution should be as close to the included design as possible. Do not replace fonts, colors, or other styles. Treating this like actual client work is most helpful to your skill development.

When you submit a Solution, you will be required to provide a link to the final project that points to a GitHub repository. That way, the rest of the community can view your work and learn from your code. Another requirement is you submit a live version of your Solution hosted on one of our approved host providers.