All solutions

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

Always proud to complete a challenge. If I had it any other way, I wouldn't do anything different. 1 year ago I had already completed this challenge without ever submitting it. In the meantime, I've moved on, and now that I'm back on Frontendmentor.io with the firm intention of completing every challenge, I realize that I'm moving in the right direction. The difference in code between what I'm delivering today, having reset the challenge from scratch, and the solution I'd coded a year earlier, which will remain well guarded, leads me to believe that I was right to take this break and come back even stronger.

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

This isn't really a problem, but being able to change the style of the HTML details element has been made much easier thanks to a perfect resource for this (link on the README.md of my repository).

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

Nothing in particular is always open to constructive criticism.

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

I'm simply proud to have finished this challenge as always, but also pleased to have been able to do it in a relatively short time compared to usual.

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

Nothing in particular, but I always like to have good resources because I don't have all the properties in my head.

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

I'm open to any criticism that will help me improve, as usual.

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

I'm pretty proud of myself. I wouldn't do anything different; the challenge calls for the use of Javascript, but it's possible to get a similar result without a single line of Javascript.

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

Not using Javascript is one more constraint I've added to myself to solve this challenge. Simply use a checkbox input and play with the :has and :checked CSS selectors. Then all that's left to do is style the whole thing so that the result is visually effective.

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

Nothing in particular. I'm always open to criticism to keep improving.

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

Always proud to finalize new challenges. Right now, I can't think of anything I could have done differently.

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

Nothing in particular, just time wasted on careless mistakes. In this case, I recommend the plastic duck technique... you explain your problem in detail and the solution will come as if by magic.

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

Always open to criticism so I can improve.

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

Just proud to have been able to complete this simple project so quickly. It comes in handy when you don't have a lot of time to keep up.

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

Nothing special.

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

Nothing special.

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

Always so proud to complete a challenge. If I had it to do over again... I'd try to structure my CSS directly in the way I'd done a few commits later, when I reworked my CSS complement.

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

The treatment of the background image and its colors. I couldn't manage it all with blend mode. I had to work around the problem by exporting the original image using multiply mix-blend-mode processing with the green color from Figma.

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

I'd like to see a perfect solution with image processing via mix-blend-mode without having to use an already processed image but rather the raw image.

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

Proud to have completed this small project without difficulty, it helps with confidence, especially as the difficulty of the challenges will increase. I wouldn't do anything different, I'm pretty confident of the work I've done here.

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

Nothing in particular.

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

Nothing in particular. Always open to constructive criticism to improve myself

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

Always proud to submit a solution. If I had to change a few things? I'd respect the breakdown of the components better, because I started with a slightly different breakdown to get the same rendering on the Mobile version and I constantly had to adapt my blocks with countless calculations to correct the size of the spacing.

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

I still have problems with the size of the media supplied in the starter kit. For the main content images, I've intentionally changed the horizontal spacing. As for the footer image, I went looking for the original image online because the medias supplied didn't have the right cropping. Then I simply played with the size and positioning.

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

I've tried to use the BEM methodology but I'm not yet satisfied with my work, it's a first attempt. Please correct me on this point so that I can gradually integrate this method better.

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

I'm always proud every time I submit a challenge. Even if it's not the best version... it's certainly the best I can provide at the moment. I've managed to understand and use a new CSS property. I don't know what I'd do differently, but at this stage, I've come up with this solution... I hope to keep improving.

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

I had to overcome 2 difficulties:

• The absence of a mockup for the tablets left a gap and an infinite number of possibilities as to the responsive behavior of each element. I therefore opted to design a tablet version before being able to finalize the project, in order to have a more detailed vision of each element according to the dimensions of the device used.
• The “mix-blend-mode” property that I learned from the documentation available online. To simplify the whole process for this challenge, I preferred to reimport the background image to its original size, keeping only the opacity at 0.74 to facilitate mixing with white and violet colors.

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

Once again the reponsive aspect and all the other constructive criticism that helps me to progress.

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

Always proud to keep the momentum going. I think I managed the responsive behavior well this time.

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

Background management based on view width. The initial set includes a truncated background for the mobile version and a full background for the desktop version, but nothing in between. According to the mock-up, the original background is the same on both versions, the only difference being its positioning. I therefore preferred to use the same background and adapt its behavior to the width of the view.

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

I'm always open to criticism, which helps me to improve.

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

I'm proud to have completed this challenge. Even if I lacked the foresight to organize each component and its responsive behavior. If I had to do it differently, I'd focus on the responsive behavior of each component from the start, because I'm not fully satisfied with my solution.

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

Positioning certain components (with overlays) was rather tedious, so I had to be patient and play with relative and absolute positions. The backgrounds supplied without the starter set didn't look identical to the Figma model. I therefore re-exported the backgrounds directly to exploit these versions.

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

The responsive behavior of my project. Yes, it's responsive, but I'd like to improve it with a more efficient CSS file that gives more freedom to the components.

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

Just proud to keep going. It was an easy challenge, considering the ones I've already achieved.

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

Nothing in particular

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

I'm always open to criticism, which helps me to improve.

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

Just proud to keep going. It was an easy challenge, considering the ones I've already achieved.

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

Nothing in particular

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

I'm always open to criticism, which helps me to improve.

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

I managed to stylize the radio inputs and deliver a result that met the brief. I don't think I'd do it any differently, even if using a framework or a library would undoubtedly be quicker - my aim is to work from the basics.

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

It's been a while since I've used vanilla javascrip. I've tried to do a few clean things by cutting and re-cutting my functions to limit the responsibility of each, although there's still a lot of room for improvement.

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

I don't know, but as always... feel free to suggest areas for improvement.

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

Another challenge met. I think I've done a pretty good job of managing the Hero section image according to devices, even if I'm still frustrated by the behavior of certain elements when the page is stretched from a mobile width to a tablet and then to a desktop. Should I create more generic classes instead of managing each component one by one? Would this speed up development?

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

Positioning the image in the hero section according to device was particularly difficult, especially as it's a simple image, whereas the Figma model is made up of a multitude of shapes to recreate the image, which makes it difficult to take cues such as image size according to device and exact positioning. I don't think I've achieved pixel perfection. I created transparent rectangles on the Figma to take measurements 🤫🤫🤫

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

The management of Html elements Picture, Source, Img, etc... in order to have a dynamic management of images directly in Html. I don't know if I've done this section right, I'm open to criticism to improve.

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

I managed to finalize this project fairly quickly. This has given me confidence which will help me in my next challenges. I should get used to using the Html img element instead of using the background of a div to display images.

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

Nothing in particular.

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

Nothing in particular but I'm open to any criticism that will help me improve.

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

I managed to deliver a solution faster than usual. Of course, this is only a static solution. I'll come back to this project later to develop the dynamic version.

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

Nothing in particular for the moment. The challenge will be to make this version dynamic in the future.

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

Nothing in particular about this project at the moment.

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

I've finally come up with a solution that satisfies me. After doing and undoing each Css class a hundred times to get it right. I'm proud not to have given up. If I had to change something in my approach, I'd try to sit down before starting and think more about the project organization, containers, divs, etc...

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

It may sound silly, but using a variable font and configuring it in css so that it perfectly matches the characteristics of the model. I first thought of using the static font available in the Kit but it didn't match the design perfectly... then I found the perfect static version available online but preferred to persevere and use the variable font directly. Thanks to the fonts.google.com page which explains how to do it very well.

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

For managing backgrounds with curves or patterns in SVG, I used the ::before and ::after approach to create contents that I used as a basis for making giant circles or “filters” on which to position images. I'm very curious about other ways of solving this that are simpler and/or more efficient.

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

I'm still proud to have completed this challenge, continuing my positive momentum.

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

Using the Details and Summary html elements and customizing them required a certain amount of effort, which I was able to overcome with patience and th goods resources. Managing the distortion of the background according to the width of the device also required a little revision of the way the Css properties background-size and background-position work.

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

I had to limit the size of the content of the Html Summary element so that the icon would be visible. I thought I could get away with a simple

.childOfSummary{
display: flex;
justify-content: space-between;
}

But the icon more or less popped out of the parent div without me really understanding why. After several attempts, I ended up arbitrarily limiting the size of the content of the Html Summary element to leave enough space for the icon.

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

I finally use the BEM methodology for my Css. I also learned how to modify a child's Css when hovering over the parent. And I'm still proud because this is the third challenge I've submitted.

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

I couldn't remember how to manage the effect on a child following the hover on a parent but I quickly found the answer.

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

Nothing special about this challenge.

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

Even if I didn't learn anything special because I already had the basics for this challenge (Of course, there's always room for improvement) I'm still proud to have completed this challenge, because it's another step towards achieving my goals, and it has an impact on my reward system, my motivation and the positive dynamic I want to maintain.

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

Getting the effect on the hover to be perfect is the hardest part of this challenge. Unfortunately I haven't found the perfect solution, so I've simply put in a simple hover effect with an ease-out transition and a transition time of 1s. It doesn't look as good, but it's simple and effective.

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

Specifically... how do you find the perfect transition for the button... it needs to be able to turn green instantly on hover/focus and dissipate more slowly when the hover/focus leaves the button.

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

It's the first challenge I've submitted and I'm proud of myself for that. For me, it's the start of a new dynamic.

Technically, I started with the 100% mobile version before tackling the tablet and desktop versions. Perhaps I should create the 3 versions in parallel, to make sure I have an html structure adapted to all devices.

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

Stylize ordered lists, unordered lists, hr and tables.

MDN Web Doc , W3Schools and CSS-Tricks were my best friends.

And I finally use

• a stylized div instead of a hr
• a stylized span instead of a li::marker

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

I'd like a more efficient CSS structure that respects certain nomenclature such as the BEM methodology or others...