All solutions

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

This project is currently the best I made and the most proud of. I really loved coding this dictionary.

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

Astonishment, a challenges I encountered was to set an error on the input when this one is empty. I used an realtime api call with a debounce and you don't need to press enter or click to submit your word. So I can't use the onSubmit function to prevent an empty input. Instead, I choose to made a verification into the handleChange function.

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

I used the handleChange function to check if the input is empty or not, this is the function :

function handleChange() {

if (!event.target.value) {
  setInputError('Whoops, can’t be empty…');
} else {
  setInputError('');
}

setWord(event.target.value);

}

I think there is a better way to do this. Actually, the network request will be made, even if the input is empty.

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

The calculator can convert all the units in real time.

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

Two big challenges :

• How to manage correctly the conversion between one unit to all others.
• How to create the Limitations of BMI section correctly, with the grid tool?

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

• How to create the Limitations of BMI section correctly, with the grid tool?

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

This challenge was pretty cool and easy to implement

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

I didn't encounter specific challenges on this one!

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

At first glance the challenge seems rather simple. But it's a lot harder than expected! I tried to create the most generic form possible from my level, and the simplest to use. I think I can improve the FormGroup component to add the Label inside him and automatically generate the id and apply him to both label and input.

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

I encoutered a lot of challenges, such as:

• The custome radio button
• The custom checkbox
• The layout with one colum on mobile and two columns on tablet and up
• The gap between the radio button, label and error message that is different from other inputs

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

I need some review on my layout and the custom input :

• My TwoColumns component is a good solution?
• My custom radio and checkbox input are good? I first create the icon myself with before and after element, but then I switched to use an svg icon with background property

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

A little challenge but I love that kind of design!

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

I didn't encouter specific challenge.

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

For example, I have this global css variable : --spacing-xs: 12px;

If I want tu use it : padding-top: var( --spacing-xs);

But what if I want to have em instead of px? I tried something like this: calc((var(--spacing-xs) / 16px) * 1em) But it didn't work.

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

I think I did a pretty good job of following the design.

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

The biggest challenge for me was to manage the lists. I first tried to use the native html element (ol and ul) but I didn't succeed to follow the figma model with that solution. I finally recreated a component from scratch to manage the bullet and the number marker and all the cases. An other challenge with this list was to managed the case where we need to add some weight on the first few words. I used the dangerouslySetInnerHTML onto the li element of my List component to pass a element from my array of strings.

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

I'm not sure about my List component. Can I improve it? An alternative?

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

I think my design is pretty similar to the figma model.

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

I encountered several problems:

• How to perfectly place svg background with rounded bottom border.
• How to correctly manage margin between two sections : if two section have a 100px margin between them, who manage this margin? Top section with margin-bottom or bottom section with margin-top?
• Figma fonts engin render is not the same as google chrome or firefox font engine render.
• I have difficulty finding a compromise between a perfect rendering with the model and a fluid design, which adapts to all screens.

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

• Spacing between section
• Managing background image position (like bg-pattern-1.svg etc) perfectly
• Using tokens for font-sizes / padding / margin or raw values?

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

I think it's a pixel perfect!

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

The best challenge was to detect the font-size change between mobile and tablet (and up). The difficult part about these font-size changes is that only the footer size doesn't change.

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

I need some review about the font-size management I used. I had hardcoded the css variable here, only for the footer, to be sure the size will be the same all the time : https://github.com/AurelienWebnation/frontend-mentor/blob/ff22ecd100e6ce0b4485cd3c3b39ff51bba9528b/blog-preview-card/src/App.tsx#L99

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

This is a very small project so I'm not proud about anything ahah.

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

I put a max-width on the description paragraph to match the design. So the words are correctly broken. But I'm not sure about that solution.

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

This is a right solution: https://github.com/AurelienWebnation/frontend-mentor/blob/7dca1f0bbb80ff92f6fd0f1d74aabf3c82f3aeff/qr-code-component/src/components/QrCode/QrCode.tsx#L43 ?