All solutions

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

I'm most proud of the comprehensive date validation I implemented. It was a complex task to account for all the edge cases, such as invalid dates and future dates, but I managed to create a robust validation system. Next time, I would like to improve the user experience by adding animations to the age calculation results, making the app more dynamic and engaging.

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

The biggest challenge I faced was calculating the age in years, months, and days accurately. Working with dates can be tricky due to the varying number of days in each month and leap years. I overcame this by thoroughly researching the Date object in JavaScript and implementing a solution that accounts for these variations.

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

I would appreciate feedback on my date validation code. I'm wondering if there's a more efficient or cleaner way to handle all the edge cases. Also, I'd like to know if there are better ways to structure my JavaScript code to make it more readable and maintainable. P.S: I think it's not clean code as I completed this challenge hastily without adding any comments or properly naming variables xD..

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

I'm most proud of the email validation functionality I implemented. It was a challenge to ensure that the form would correctly identify and reject improperly formatted email addresses, but I was able to achieve this using Web API Validation in JavaScript. Next time, I would like to explore more advanced form validation techniques, perhaps incorporating a library or RegEx to handle this more efficiently.

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

One of the main challenges I faced was making the form responsive for different screen sizes. I initially struggled with getting the layout to look right on mobile devices. However, by using a mobile-first design approach and carefully implementing media queries, I was able to create a layout that looks good on both mobile and desktop screens.

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

I would appreciate feedback on my use of CSS Flexbox for the layout. I'm still learning and would like to know if there are more efficient or cleaner ways to achieve the same result. Additionally, I would like to know if there are better ways to handle form validation in JavaScript.

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

I'm most proud of successfully implementing an interactive rating component that responds to user input and changes its state accordingly. I learned how to use the forEach method to loop through an array of button elements and add event listeners to each one. I also learned how to use classList to add and remove classes from elements. If I were to do this project again, I might explore other ways to handle user interaction, such as using different JavaScript methods or libraries.

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

One of the main challenges I encountered was designing the layout using flexbox and implementing a mobile-first workflow. To overcome this, I spent time studying flexbox and how to use it effectively. I also researched and practiced mobile-first design principles. This experience taught me a lot about responsive design and how to build interfaces that work well on a variety of screen sizes.

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

I would like help with improving the user experience of the rating component. Specifically, I'm interested in feedback on how to make the rating selection more intuitive and satisfying for users. I'm also open to suggestions on how to improve the responsiveness of the design, especially for very small or very large screen sizes.

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

I am most proud of successfully implementing the JavaScript functionality for the FAQ accordion. It was rewarding to see the hide/show feature come to life through DOM manipulation.

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

One challenge I encountered was figuring out how to make the background image cover only the top 25-35% of the viewport height.

Initially, I used the background image URL along with a second background color of light pink and positioned it at the top with a size of 100% (width) and 35vh (height), as shown in the code below. However, I noticed that as I reduced the height, the width was also shrinking. I tried various adjustments to the background properties to make it full width and 25% height, but I couldn't achieve the desired result.

body {
  background-image: url(./assets/images/background-pattern-desktop.svg);
  background-size: 100% 35vh;
  background-position: top;
  background-repeat: no-repeat;
  background-color: var(--lightPink);
  font-family: "Work Sans";
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  font-size: 16px;
}

Eventually, I overcame this challenge by using another div with a class called "background" and setting its width to full and height to 35vh. This solved the background positioning problem.

body {
  background-color: var(--lightPink);
  font-family: "Work Sans";
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 16px;
}

.background {
  background-image: url(./assets/images/background-pattern-desktop.svg);
  position: absolute;
  top: 0;
  min-height: 35vh;
  z-index: -1;
  width: 100%;
}

However, I'm still curious why the background-size property didn't work for the image as expected. :confused:

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

I would appreciate feedback on my approach to solve he background-image issue and would be happy to know from anyone why background-size property didn't work for the image as expected ?

Thanks, FEM is amazing community !!

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

This challenge was my fourth Frontend Mentor challenge, and it has significantly helped understanding the flex and esp. various list styles. Also it was fun making a recipe page again after months. Learning never stops!

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

One of the challenges I encountered during this project was making the list as same as design files, esp. adding the space between markers and list text. Initially, I thought text-indent will work here and then realised the next line is not correctly indented. However, padding to left helped me.

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

I would appreciate feedback on how to further improve my CSS skills, particularly in optimizing layouts for different screen sizes and devices.

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

This challenge was my third Frontend Mentor challenge, and it has significantly contributed to enhancing my CSS skills.

Sometimes, I found myself making adjustments as I went along because I missed certain details initially. Next time, I would pay more attention to details in the design specifications from the beginning.

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

One of the challenges I encountered during this project was ensuring proper spacing of elements with the correct margins and padding. In my previous solutions, I struggled with this aspect and often forgot to reset the default padding and margins for all elements using the * selector. To overcome this challenge, I referred back to my CSS learnings, which helped me remember the importance of resetting default styles and utilizing the * selector to adjust margins and padding uniformly across all elements.

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

I would appreciate feedback on how to further improve my CSS skills, particularly in optimizing layouts for different screen sizes and devices. Additionally, suggestions on how to streamline my workflow and improve my attention to detail when implementing design specifications would be valuable.

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

Doing this in relatively less time than previous challenge made me feel really good about myself. Looking forward to solve more!!!

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

There was this task of aligning the avatar correctly and making it just a little above the bottom left corner. I aligned it by using flex and then centering the avatar name using flex-axis properties.

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

If I look closer to my solution I feel life my padding around the image is little off and not matching with the design files. I tried to re-attempt my solution from scratch, though still the spacing is not right. Help on the aspects of correctly spacing part of design files will be much appreciated :-)

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

This was a great challenge. I used CSS flex box to centre the component however this can also be done with CSS Grid. Next time, I would try to use Grid.

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

This challenge was quite easy though I found it hard to make the `` position correctly in the QR component. And also getting the correct box shadow was quite a challenge for me.

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

Having said that I used flex, though I wasn't able to align the text with the exact spacing as provided in design files. I used margins and padding in the `