All solutions

What are you most proud of, and what would you do differently next time?

This is my first attempt at a React form which has thrown up some challenges - I can see why devs don't like to use React for forms.

What challenges did you encounter, and how did you overcome them?

Validating the form data - especially email addresses - was a challenge. This was especially evident in trying to conditionally render errors and ensuring that errors were only flagged on the second render but would then vanish after correct info was entered. useRef(), has() in CSS and the + selector in CSS were invaluable in getting this right - along with some trial and error!

What are you most proud of, and what would you do differently next time?

I wanted to use my React skills here after not creating a React project in a while and it went smoothly. I've learned a lot about structuring the actual project and will be using less code from the get go next time.

What challenges did you encounter, and how did you overcome them?

It was fiddly to get the heights on the questions and answers to look right. I'm averse to too much mark up but I think it might have saved time here but just submitting to it and using divs to solve layout problems - especially with max-heights and padding causing me issues with looking right.

What specific areas of your project would you like help with?

I couldn't quite get the header image looking right. I'll be interested in how others laid out the main image.

What are you most proud of, and what would you do differently next time?

I deliberately wanted to avoid Grid this time as I've been using it a lot and want to ensure I'm flexible with the methods I'm using.

What challenges did you encounter, and how did you overcome them?

I've never styled inputs and messages based on validated inputs before which was cool. I've managed to make the validation function modular/scalable too so if I wanted to add other fields to validate I could do so with very little new code.

What are you most proud of, and what would you do differently next time?

I put this together pretty quickly except for some time spent trying to overcome a bullet point issue. I seem to be googling less and less these days too.

What challenges did you encounter, and how did you overcome them?

I wanted a responsive image in the header and discovered the element which I'd somehow never encountered at all before. I've really enjoyed playing around with this element and I can see it's going to be my new best friend going forward.

What specific areas of your project would you like help with?

I struggled to find a solution for vertically centering a bullet point on a multi line and spent a loooong time trying to find a solution. I didn't want to over engineer a solution using a 4 pixel wide/high circular div and flexbox so I left them how they are and will review some others solutions to see if they managed to find a way.

What are you most proud of, and what would you do differently next time?

After a hiatus this is my second project and it's nice to feel the code start to flow easily again.

What challenges did you encounter, and how did you overcome them?

The main image wasn't behaving itself in grid so I decided to change my element to a and slap the image in as a background image and it went much more smoothly from then on.

What are you most proud of, and what would you do differently next time?

For personal reasons my Web Development journey has been on hold for a while. I was great to come back into a simple project like this.

What challenges did you encounter, and how did you overcome them?

I'd recently started to really dive into grid just before my learning hiatus and was starting to do well. I wish I'd started here with Grid rather than trying to keep it "simple" with margins all over the place. Lesson learned.

What specific areas of your project would you like help with?

None but feedback is welcome.

Really enjoyed this for a quick project. A got in a bit more practice with grid which is great and really used clamp for the first time which I really enjoyed. I'm looking forward to using clamp in a bigger project to really get my hands dirty.

I decided to restart this project after almost finishing the whole thing to change the tech from Flexbox and positioning to Grid and it was absolutely the correct thing to do despite being a lot of work.

Grid really is fantastic and unless a layout is very simple I'll opt for Grid over Flexbox from now on.

The only thing I'm not sure about is the gradients don't look quite right but looking at the Figma files all the values are the same so I'm not sure what's wrong here.

A good little project. I suspect I can refactor the code down a bit which I'll come back to but hopefully the code is straightforward to read. The JS was more complicated than I initially thought and took a bit of googling.

Another good little challenge - the translucent overlay but not translucent eye in the middle had me thinking for a bit.

One takeaway for me - when the desktop layout and mobile layout look this similar make sure you don't accidentally scroll over to the other design and enter all the wrong widths, heights and margins. Lesson learned there!

A few sneaky little gotchas in here which were great to have to think around.:

1: The main images being just slightly different on the desktop-sized view had me scratching my head for a while.

2: I had to Google mix-blend-mode as I'd never heard of it. Handy!

3: I used nth child for the first time to keep the classes under control as I was applying a grid-area to a bunch of child elements.

All in all a great challenge :)

Enjoyed working on this as a break from a larger premium challenge. Also, this was a usefully tricky project to sharpen my CSS Grid skills and had to think outside the box a bit to get the background looking right too.

First project using the Figma file with PRO sub. SO worth it as it saves a lot of back and forth but there is some margin issue with text elements that I can't figure out. Even following design doc to the letter text was never quite right but I managed to manually adjust around it. Something to do with margin/alignment of text elements I think...

Pretty happy with this but it is tricky to be sure colours and font-sizes are right without the design files. I think my CSS might be a bit verbose too. I seem to have a lot of classes for colours!

Interesting challenge as the desktop view highlighted some less flexible code I used in the mobile view

My first Frontend Mentor challenge. Happy to receive feedback if anyone has any thoughts!