Lessons from Sweating the Small Stuff

Hello! Welcome. Please enjoy my projects from the FreeCodeCamp Visual Web Design Certificate

Product Design lessons learnt from 9 started projects, 5 completed projects and a lot of Design, HTML, CSS, and Accessibility.

If you enjoyed any of these projects, had questions, feedback or want to talk about working together β€” I'd love to hear from you.

The best way to contact me is on Twitter, please get in touch!

Lighting bolt. Icon

A Tribute to Technological Innovators

Project 1: Designing a tribute page

Main Focuses: Hierarchy, fluid images, alternating grid layout

Project goal, complete! βœ…

View the site at A Tribute to 200 years of Technological Innovators

Clipboard. Icon

Mastering HTML Forms

Project 2: Designing a sign-up form

Main Focuses: Responsive forms, clear labels & form structure

Goals, achieved! πŸŽ‰

Sign up at Mastering Forms

Layout Silhouette. Icon

Designing a Product Landing Page

Project 3: Designing a Product Landing Page

Main Focuses: Hierarchy, breaking the grid, bold layout

Grid === broken πŸ”¨

Visit the landing page at Adding spice to life: Product Landing Page

Vector Pen Tool. Icon

Designing a Small Design System

Project 4: Technical Documentation Page

Main Focuses:

  • Systems-thinking
  • Hierarchy
  • Responsive design with a lot of content
  • Effective navigation
  • Clear stucture
  • Strong layout
  • Clear copy & product writing

Project Complete πŸ€Έβ€β™‚οΈ

See the Seed CSS site at Seed: Utility CSS Code Snippets

The most exciting and ambitious project by a big margin, and the biggest learning opportunity of all 5 projects ⭐️✨

Bar Chart. Icon

Showing the Work: FreeCodeCamp Projects Portfolio

(This page!)

Project 5: A personal portfolio of work. (See my full portfolio at https://jasontcrabtree.com )

Main Focuses: Bold colour palette, experimental navigation

Job done πŸ’»

View the site at Visual Web Design: A FreeCodeCamp Certificate

Blowing Wind. Icon

Case Study:

What I learnt about Product Design from designing and coding 5 websites for a FreeCodeCamp Visual Web Design Certificate

Main Focuses: Lessons learnt & next steps

Project, done! Onwards to the next goal 🎯

Read the case study: Coming Soon!