What are you most proud of, and what would you do differently next time?
I am proud of thinking that I was able to follow the objective closely in terms of looks.
What challenges did you encounter, and how did you overcome them?
As a beginner, I was having trouble with which unit and values should I use in CSS, even though unsure, I just stuck to using em or sometimes rem. The most challenging part I encountered here is the JS for the accordion, where i was able to solve by learning how to call each element and some basic JS.
What specific areas of your project would you like help with?
Learning some tips for creating code which is more efficient and easy to understand, compared to my work here, is much appreciated.
What are you most proud of, and what would you do differently next time?
after learning HTML and CSS for almost a month, I can eventually create a project out of my knowledge. However, I will do better for the next project and try to apply responsive CSS functions more.
What are you most proud of, and what would you do differently next time?
Im glad i found this use case that provides such a beatiful design where I could practice some new techniques and approaches such as The Compound Component Pattern for React and Styled Components library in order to create reusable components.
What challenges did you encounter, and how did you overcome them?
At the first glance, it was pretty challenging to figure out how to implement and organize the Compound Components to be as more reusable as possible especially for the modal that contains some state and for that I implement it using the ContextAPI to encapsulate the state internally within the component itself so that I could use it in other areas when needed.
What are you most proud of, and what would you do differently next time?
I successfully implemented a custom theme, and I enjoy the end design! I'm also getting used to BEM notation, which I appreciate.
Nonetheless, I feel like I've used far too many grids. Thankfully, the website lacks unexpected overflows. I may check other solutions for diverse approaches.
What challenges did you encounter, and how did you overcome them?
No challenges encountered. I've made a very similar site before.
What specific areas of your project would you like help with?
Any alternate ways of making the layout are welcome, I used display: grid pretty much everywhere.
What are you most proud of, and what would you do differently next time?
I am proud of myself for building a theme switcher using React. I was also to make a reusable component with different information for each element.
What challenges did you encounter, and how did you overcome them?
I had a challenge adding the top border color since I used a reusable component and tailwind CSS. I had to create a separate mapping object for the colors.
What specific areas of your project would you like help with?
What are you most proud of, and what would you do differently next time?
I'm glad I managed the cards to look relatively similar to the preview. I optimised for 2 sizes, mobile and desktop, however in future I would like to re-do it in a way that the design looks good on tablet or semi-large screens, i.e. changes to 2 column as opposed to currently showing 3 which is not as nice as I would like to.
What challenges did you encounter, and how did you overcome them?
While I thought this would be just another simple challenge that would cement my CSS knowledge, I actually had a moderately hard time trying to figure out how to make all the images, texts and titles in the correct position. I ended up using flexbox styles, since all the other attempts failed.
What specific areas of your project would you like help with?
I struggled with keeping the card titles within card borders when changing screen size. When shrinking the screen, the cards get proportionally smaller while the title gets pushed up outside the upper border. I'm not sure how to stop it and only keep the title within the card lines.
What challenges did you encounter, and how did you overcome them?
One challenge I faced was checking if the date was invalid. What I found was that if the other input fields were invalid (i.e Day was set to something higher than 31), then both error messages would pop up. My solution was to do an initial check to see if any input elements contained the aria-invalid="true" attribute first, then check if the date was invalid.
What are you most proud of, and what would you do differently next time?
I am proud of seeing the project to the finish line, learning more, and learning how to manage version control along the way. It's been a blast so far and I look forward to many other projects.
What challenges did you encounter, and how did you overcome them?
It took me a while to figure out how to get the shadow box right for the edging of the card, but with enough tweaking and research I was able to get it accurate.
What specific areas of your project would you like help with?
I am curious what is best practice when it comes to using div's and span's, I've seen people use both of them, so I would like to know in what situation would you use one or the other. For this project personally for me I chose to seperate my areas to be styled using div's and it worked out well.
What are you most proud of, and what would you do differently next time?
Using Astro Actions and Zod for the form validation. I would try to use a Vue component, as an Astro Island, the next time.
What challenges did you encounter, and how did you overcome them?
I wanted to use a separate Astro component as the success message, but could not find a way to show/hide it dynamically. I ended up having to scrap that idea and place the HTML for the message within the index file and use JavaScript to hide/display it.
What specific areas of your project would you like help with?
I used margin to place the button in the success message at the bottom. It seems to me that there should be a better way to do this instead of using a huge margin value that I eye-balled to get right. Should I be able to use something like grid or flex to automatically position it at the bottom?
What are you most proud of, and what would you do differently next time?
nothing. just chilling
What challenges did you encounter, and how did you overcome them?
nothing.
What specific areas of your project would you like help with?
learn
Join our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
