All solutions

Here's my solution to the quiz app. It uses vanilla CSS with grid, and React to produce a cross platform quiz that looks great on both mobile and desktop. Any suggestions or critique welcome!

This job board project consists of a front-end built with React, and a back-end built in Django using Django REST framework.

The backend uses the PostGIS extension of PostgreSQL to provide location based filtering, along with the Google Maps API for providing autocomplete on the front-end and geocoding on the back-end. The back-end also provides full-text searching for job names and descriptions.

I tested the layout quite thoroughly on Google Chrome, and iOS Safari. If you encounter any display issues or other bugs, I would be grateful to hear about them.

This turned out to be a bit of work. I have completed a few smaller projects now and wanted a bit more of a challenge.

Building the multi-step form out with React took the most effort, because I wanted it to be possible to return to steps and alter data without losing any subsequent progress. I did not use any CSS libraries and all of the form controls are custom.

Feel free to test it out. The fields on the first page accept any values as long as they aren't blank. I'd be interested in hearing about any layout or logic bugs anybody finds so I can fix them. I tested it out on desktop Chrome, iOS Safari, and Android Chrome.

There's a special effect on the success page if you finish out the process!

This one was easy.

This is my implementation of the Blog Preview Card.

Some unique differences from my other solutions:

• Now using Vite to provide a local dev server, which provides auto reloading across all of my devices. This aids in quick testing on smaller screens.
• Deploying my solution to Render which is fast, and easy.
• Unrelated to tech, I have started forcing myself to use touch typing due to RSI pain in my wrist. Since I am brand new to it, it is irritatingly slow to type anything. I am improving quickly however.

I also subscribed to a pro plan on this website. Having the dimensions available on Figma is certainly a game changer.

Let me know if you notice any issues, or have any suggestions!

Working on getting faster rather than focusing on 100% pixel parity.

This solution took under an hour. Most of the time was spent struggling with getting the background image to look right.

Any input appreciated!

This implementation uses a hybrid approach, on small screens the layout is flex-box and on large screens it's grid.

Note, the use of <q> for the marking up the testimonial messages, and how the document is structured using <article> with <section>'s and respective <header>'s, and a <footer> for the attribution.

This reduces reliance on classes, making the HTML more readable and maintainable.

Found a unique approach to handling the colored card headers using pseudo elements, which opened to door for a unique hover effect! Let me know what you think and if there are any improvements I can make. Thank you.