Responsive Web Design Portfolio

Build a Survey Form!

Survey Form project, the background is entirely green, the font is comic sans and the form options are all low effort

To demonstrate the capability of building forms that are semantically-correct, with proper use/nesting of labels and form elements.

What I would change:

  • Label checkboxes properly
  • Use questions that mimick real-world forms
  • Come up with a prettier design

Time spent: less than two hours

See Survey Form

Build a Tribute Page!

Tribute Page project, dedicated to JC Leyendecker, the background is entirely gray and the links are white, pictures of his illustrations are shown with 1px black borders

To demonstrate an understanding of how to use the more accessible element "figure/figcaption" and how to manipulate images in CSS, an initiation to responsive design.

What I would change:

  • Change the navbar colors to make it more accessible
  • Reset the browser's default padding/margins to 0 so that the footer's width is actually the full width of the viewport.

Time spent: about two hours

See Tribute Page

Build a Technical Documentation Page!

Technical Documentation page project, dedicated to CSS selectors; the layout reminds of some older web sites

First real foray into responsive design (using media queries).
I'm very happy with how this one turned out (and the text was handpicked as well!) It is a pretty simple design and, thus, it is completely responsive!

What I would change:

  • Have the scrollbar inside the page itself
  • The navbar doesn't look very visually appealing, and perhaps I could have picked some better colors

Time spent: five hours

See Technical Documentation Page

Build a Product Landing Page!

Product landing page project, dedicated to a cosmetic brand

First time using grid, non-default fonts, video elements, and mock pictures! It was incredibly hard making my vision match from desktop to mobile, I've learned the importance of mobile-first design!

What I would change:

  • Mobile-first design
  • Tested on desktop only, form may not be accessible on mobile
  • Change the header image
  • Focus on understanding how the grid elements actually work and not just how they look
  • Perhaps better(/more accessible) colors and use a more professional font

Time spent: around ten hours?

See Product Landing Page