All solutions

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

I'm proud of getting the form so that the NVDA screen reader notifies users of errors in a reasonable way.

For a project this size, I probably wouldn't do too much different. My CSS could use some more organization here.

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

I had a hard time taking advantage of native browser HTML5 form validation with React. I wrote a little hook that takes a ref to an element that allows me to use validation information on render, as well as a MessageBoxInput component that helps automate some error messages.

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

Any tips for better accessability, or organization in React projects would be nice!

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

I think the organization of my components in this project is pretty good, and I'm proud of that.

I had to add my own JS for the details elements to only open one item at a time on FireFox, since it doesn't support the "name" attribute on details elements it seems. I'm sure the JS I used makes the page less accessible, and I'd like to know how to rectify that.

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

The background image was tricky until I realized two different ones were provided. Once I realized that it was pretty easy to use a media query to switch between the two background images.

If I weren't as experienced, I'm sure using pseudo-elements for the FAQs heading and the buttons would have been a bit tricky for some.

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

I'd like to know how to manage accessibility when JS is involved and showing/hiding content on screen when users click things.

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

At first I created the rating system using buttons inside of a form element, before I realized that that didn't really provide any form data, and probably wasn't particularly accessible. So, instead of doing that I challenged myself to re-style radio buttons to look like the design.

I think next time I would make a another, dedicated component for the project, and make it more flexible regarding the messages shown.

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

Re-styling the radio buttons was a bit of a challenge, especially getting keyboard stuff working as I'd expect. But it was fun, and I figured it out with a bit of research. I'm not 100% certain it's accessible though, so perhaps I should install a screen reader.

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

Any comments on the accessibility of my approach with the invisible radio buttons would be appreciated.

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

I liked my organization of colors with CSS variables, using names such as --primary --primary-accent, and --background-accent. Theoretically that should allow me to switch the color theme easily if needed.

I focused mostly on the style on this one. If I were to do it more seriously, I'd probably make this component consume and render recipe data to me more reusable.

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

I hadn't touched tables in a while, and I had to research how to write them again. I also encountered weird behavior with padding on table rows- and I found through research I had to apply padding to / elements instead.

Styling the table was interesting too, and it was fun to use the :not() operator to exclude a bottom border from being applied to the last table.

I also had to research how to add padding between text content in a `` element and it's bullet. Figured out I could just using padding for that.

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

I researched how to center the bullet points vertically with long text, but couldn't exactly figure it out. Admittedly, my research was haphazard and I kind of just tried stuff.

I could have made custom bullet points, but I wasn't exactly feeling that. If there's a way to do it without creating custom bullet points, a hint would be nice!

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

I like how close it seems I got my solution to the design.

I didn't have to split all my components up so much for this project- none of them are re-used. Next time I'd probably just put nearly everything in one components since it's simple enough.

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

I had a bit of an issue sticking the footer I made to the bottom of the page while keeping the rest of the content centered on the page. It's something I haven't tried to do before- but the solution was simple- nest the main content inside of a `` tag.

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

If I were to get any suggestions, I would ask suggestions on how I can manage Component styles more effectively.

Nearly always, for bigger projects, I find that I want to re-use some component but the styles I applied to it aren't great for what I want to do. That didn't crop up in this project though.

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

I'm proud of using CSS variables and using clamp() to do the font-size challenge and keep the size of the card in check at different screen sizes. I think overall the structure of my CSS code is pretty neat.

I think there may be a better way to manage the size of the card. Overall, I really like how it turned out.

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

The most challenging part was managing the aspect ratio of the card. I used clamp() to manage it. I should perhaps look into the aspect-ratio CSS property next time and see what I can do to manage the size and shape of these centered layouts better.

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

If I were to receive help, I think I'd like pointers relating to managing the size and shape of centered layouts like this one, and in the QR Code Component project.

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

I'm happy I got it done, but I'd probably use CSS Grid next time.

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

I found that it was a bit difficult for me to get the correct ratio between the image and the text with flexbox. I got it as close as I could for now. Next time, I'd use CSS Grid and see if I could make it work better.

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

I'm not sure I need help with this one, though I do need more practice. This has revealed exactly how rusty I am with CSS- a lot of things happened I didn't expect while working on the project!