All solutions

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

I've build this project mostly on my own. It took me 5 days but I have learned a lot from it. What I like about it is that it is very simple and straight-forward.

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

I struggled to increase the product's quantity number in the first place, then to add the clicked product to the cart and finally to remove the item from cart.

In the end I managed to do it all, with only a few lines of code for each challenge.

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

Any advice or tip on how I should organize and build any React project in the future is very much appreciated !🙏

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

The search bar and the 'not available' fields were pretty tough.

----Search Bar---- The search bar's no results error message was tricky to fit for small devices so I decided to replace the placeholder text of the input field with the 'No results' string and add an error class to it. The final result looks smooth and visually appealing.

---Null Fields--- I managed to check the empty user values and return the 'Not Available' string and also add the lower opacity class to them dynamically.

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

I'm curious how to create an animation/transition effect for the advice id number and text whenever I click on the button to request another advice.

Would appreciate if anyone knows how to do it and give me a tip! 🙏

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

I'm proud that I succeeded to build this component using mostly Tailwind CSS. Next time I would use less classes from Tailwind and do more styling using Vanilla CSS.

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

The challenging part was to select one button at a time. The solution was to check if there is an existing selected button whenever the user chooses another rating option and set its state to false.

Data attributes for button state were the highlight of this challenge 🌟

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

I would like to know how can I refactor my JavaScript code to be more readable and efficient.

Hello 👋! I'm Adrian and this is my solution for this challenge.

🔨Built with:

• Semantic HTML 📄
• ARIA attributes
• CSS Reset
• CSS variables
• CSS Grid
• CSS Flexbox
• Utility classes
• Mobile-First Approach📱

💡Lighthouse scores:

• 100% for Best Practices and SEO ✅
• 93% for Accessability ✅
• 91% for Performance ✅

Any suggestions and/or improvements are welcome and happy to hear! 😊

Hello 👋! I'm Adrian and this is my solution for this challenge.

🔨Built with:

• Semantic HTML 📄
• ARIA attributes
• CSS Reset
• CSS variables
• CSS Grid
• CSS Flexbox
• Utility classes
• Mobile-First Approach📱

💡Lighthouse scores:

• 100% for Performance, Best Practices and SEO ✅
• 97% for Accessability ✅

Any suggestions and/or improvements are welcome and happy to hear! 😊

Hello 👋! I'm Adrian and this is my solution for this challenge.

🔨Built with:

• Semantic HTML 📄
• CSS Reset
• CSS variables
• CSS Grid
• Utility classes
• Mobile-First Approach📱

💡Lighthouse scores:

• 100% for Performance, Accessibility, Best Practices and SEO ✅

Hello 👋! I'm Adrian and this is my solution for this challenge.

🔨Built with:

• Semantic HTML
• CSS Reset
• CSS variables
• CSS Grid
• Utility classes
• Mobile-First Approach📱

💡Lighthouse scores:

• 100% for Performance, Accessibility, Best Practices and SEO

Hello 👋! I'm Adrian and this is my solution for this challenge.

🔨Built with:

• Semantic HTML
• CSS Reset
• CSS variables
• Data attributes
• CSS Grid and Flexbox
• Utility classes
• Mobile-First Approach📱

💡Lighthouse scores:

• 100% for Performance, Best Practices and SEO
• 97% for Accessibility

Hello everyone! 👋

What do you think of my solution for this challenge? Any suggestions or improvements you can think of? For me, the responsiveness for the desktop version seems a bit clunky.

Also, I struggled with the background image. I couldn't position properly the main image around it so that it looks like the design.

Would love your feedback.

Thanks! 😊

Hello everyone! 👋

What do you think of my solution for this challenge? Any suggestions or improvements you can think of?

Would love your feedback to learn and improve.

Thanks! 😊

Hello everyone! 👋

What do you think of my solution for this challenge? Specifically the code for the user profile picture. I tried to make it fit the design as much as possible but I couldn't make it responsive.

Any suggestions or improvements you can think of? Would love your feedback to learn and improve.

Thanks! 😊

Hello everyone! 👋

What do you think of my solution for this challenge? I tried to make it as responsive as possible for different screen widths, zoom and browser font size.

A problem that I encountered and couldn't solve was to increase de width size for the top hero image for mobile and tablet so that it fits the design. Whenever I increase its width, the whole container's width would grow with it. I tried using position absolute to the image but that didn't work 100%. It solves the problem with the container growing with the image but it makes the image overlap with the text. Any ideas about achieving this?

Any other suggestions or improvements you can think of, I would love your feedback to learn and improve.

Thanks! 😊

Hello everyone! 👋

What do you think of my solution for this challenge? Specifically the code for the Tablet and Desktop versions. I tried to make it as responsive as possible for different screen widths, zoom and browser font size.

Any suggestions or improvements you can think of? Would love your feedback to learn and improve.

Thanks! 😊

Hello everyone! 👋

What do you think of my solution for this challenge? Specifically the code for the grid container and cards. I tried to make it as responsive as possible for different screen widths, zoom and browser font size.

Any suggestions or improvements you can think of? Would love your feedback to learn and improve.

Thanks! 😊

Hello everyone! 👋

What do you think of my solution for this challenge? Specifically the code for the grid container and cards. I tried to make it as responsive as possible for different screen widths, zoom and browser font size.

Any suggestions or improvements you can think of? Would love your feedback to learn and improve.

Thanks! 😊

Hello everyone! 👋

What do you think of my solution for this challenge? Specifically the code for the grid container and cards. I tried to make it as responsive as possible for different screen widths, zoom and browser font size.

Any suggestions or improvements you can think of? Would love your feedback to learn and improve.

Thanks! 😊

Hello! 👋

What do you think of my solution for this challenge? I tried to make it as responsive as possible for different screen widths, zoom and browser font size.

Any suggestions or improvements you can think of? Would love your feedback to learn and improve.

Thanks! 😊

Hello! 👋

What do you think of my solution for this challenge? I tried to make it as responsive as possible for different screen widths, zoom and browser font size.

Any suggestions or improvements you can think of? Would love your feedback to learn and improve.

Thanks! 😊

Hello guys! 👋

What do you think about this solution for the challenge? Any things that you might have added or changed inside the code?

I would love to know your take on this and any other feedback is very much appreciated! 😊

Thanks!

Hello 👋! I'm Adrian and this is my solution for this challenge.

1.🔨Built with:

• Semantic HTML
• CSS Reset
• CSS Custom Properties
• CSS Grid and Flexbox
• Utility classes
• Mobile-First Approach📱

2.The class names are using BEM methodology.

3.Lighthouse scores:

• 100% for Best Practices and SEO
• 90% for Accessibility
• 93% for Performance.

Hello guys!

What do you think about my mobile version of the website? More precise about the .container class with the margin values I chose in order to have the required space for the card.

Also, what do you think about the breakpoints I set? I would love to know your insights.

A problem I couldn't fix is when I click on the buttons, the top left part of the border is grey instead of white. What's the reason?

Thanks in advance! ☺️