What are you most proud of, and what would you do differently next time?
This is amazing card that I have coded using HTML, CSS, a little JavaScript.
What challenges did you encounter, and how did you overcome them?
I stuck on box shadow of the parent element when I'm trying to hover child element which is heading then CSS box shadow property not working. So, I have used JavaScript mouseover and mouseout event to achieve this.
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 am proud to use SASS / SCSS for this project and develop this Product Preview Card using mobile first approach
Things I would do differently:
Use CSS frameworks
Develop using desktop first approach
What challenges did you encounter, and how did you overcome them?
When writing my styling, I forgot I was using scss, so I simply just wrote css. However, once I finished the project, I refactored my stylesheet with scss
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 learned and used Framer motion library to make the project look natural with animation.
Also, redux-persist to keep the Redux store in local storage.
What challenges did you encounter, and how did you overcome them?
The hardest challenge for me was the new invoice form/edit invoice form in the project.
I used the library Formik to manage the form with all its state.
This library gives lots of helpful features to manage forms in React without pain :)
What are you most proud of, and what would you do differently next time?
I am very proud that I took less time than QR to do it, that there were things that I felt I couldn't or didn't believe in but my logic in programming helped me a lot!
I couldn't say what I would do differently because each thing is teaching me something new or how to solve any problem.
What challenges did you encounter, and how did you overcome them?
It was a silly challenge that was like placing the image of "Greg Hooper" next to the name but with a "float: left;" I was able to solve it.
What specific areas of your project would you like help with?
I would like to know if I have to improve any aspect of the variables I use and I would love any advice.
What are you most proud of, and what would you do differently next time?
I was confused about the colors, margins, and padding between the elements. I roughly determined the sizing between elements and chose colors to the best of my knowledge that seemed suitable.
What challenges did you encounter, and how did you overcome them?
Render background image in the center.
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 proud that I completed this challenge all by myself.
What challenges did you encounter, and how did you overcome them?
I had a problem where the page always had a horizontal scrollbar when loaded on mobile. Eventually I figured that the issue was, that I had to delete the width of my body part.
What are you most proud of, and what would you do differently next time?
I am most proud of my ability to integrate complex data into a user-friendly chart interface in the chart project. This task required not only technical skills in using React and charting libraries like Chart.js but also a deep understanding of user experience principles to ensure that the data was accessible and understandable. The challenge of transforming raw data into visually appealing and interactive charts pushed me to explore advanced features of the charting library, which significantly enhanced the functionality and appeal of the project.
What challenges did you encounter, and how did you overcome them?
During the chart project, I faced several challenges, including integrating complex data sets into a user-friendly format, ensuring responsive design across multiple devices, configuring deployment on Google Cloud Platform, and managing evolving project scope and deadlines. I addressed these issues by thoroughly researching and selecting appropriate data visualization libraries like Chart.js, adopting a mobile-first design philosophy, leveraging GCP’s documentation and community resources for effective deployment, and implementing agile project management techniques to maintain flexibility and meet deadlines. These experiences enhanced my technical skills and improved my ability to manage complex projects and adapt to new challenges.
What are you most proud of, and what would you do differently next time?
I was able to build it using grid CSS and looking to update it so that it becomes responsive.
What challenges did you encounter, and how did you overcome them?
mainly it was about the floating subcontainer that appears once you hover on the share icon but I managed to overcome it by using the share div as a parent.
Even though it is not showing correctly on the webserver on my end it appears fine but not mad about it I am just happy I made it through.
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 proud of having managed to leave a very identical page, including the mobile version and the desktop version, the image adjustment left me very satisfied. I liked the way I did it, with practice I will make it faster and more practical.
What challenges did you encounter, and how did you overcome them?
There weren't many challenges, but what made me think more was about the horizontal lines in the nutrition table. I also needed to be more attentive to images and formats, both in the mobile and desktop versions.
What specific areas of your project would you like help with?
Maybe before I would need help to create margins or paddings in the image, but I was able to create the spaces equally. Another important area is about changing the thickness and size of attributes in the "ingredientes" and "instruções" part.
What are you most proud of, and what would you do differently next time?
.
What challenges did you encounter, and how did you overcome them?
.
What specific areas of your project would you like help with?
.
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!
