Diego Alves• 190
@DiegoAlvees
Submitted
What specific areas of your project would you like help with?
In Vercel the button and input styles did not appear, can anyone tell me why? in VScode using npm run dev they appeared normally
Pattaraporn Tulathum
@rainof
All comments
- Pattaraporn Tulathum• 200
@rainof
Posted
Great job, keep it up! While I'm not familiar with Vercel configuration, I do have a small suggestion about font imports. Since you're only using 'Space Mono,' it would be more efficient to import just that font. I noticed several unrelated fonts like 'Barlow' and 'Montserrat' in the
@importstatement (at 'src/index.css' line 1), which you might not need.Marked as helpful
0 - Pattaraporn Tulathum• 200
@rainof
Posted
Great effort! I have a few suggestions to enhance your design:
- Add
cursor: pointerwhen hovering over the timeframes. - Apply
cursor: pointerto interactive elements and consider changing the color on hover. - You might also find Figma useful for exploring different styles and sizes.
0 - Add
What challenges did you encounter, and how did you overcome them?
Verification and routing ere challenging!
What specific areas of your project would you like help with?
Anything would be helpful!
Pattaraporn Tulathum• 200@rainof
Posted
Wow! This looks very close to the original design.
0- P🔅 Yuliya 🐈• 240
@O-Julia-O
Submitted
What are you most proud of, and what would you do differently next time?
I am proud of using flexbox and grid a lot here, i learnt a lot about it thanks to this project.
What challenges did you encounter, and how did you overcome them?
I encountered with placing all items with grids, I spent a lot of time to understand how to do it like in design. But the most helpful was site where i could create similar schema of grid.
What specific areas of your project would you like help with?
I need help with creating the message share. How did you guys created in your project? Have you used clip-path? Or you just downloaded the message picture and put in html?
Also I'm still struggling with positioning, how can I improve it ?
Also I had problem with border-radius, i did it for block div "content", and added overflow:hidden, but it cut the message "share", so I deleted it. I added left border-radius to picture and deleted overflow: hidden. Please, share your experience, how did you solve this problem?
Pattaraporn Tulathum• 200@rainof
Posted
Great work! In my case:
- I implemented the message message using a
divthat toggles visibility. - I used clip-path to trim the image and adjusted the text position with
transform: translate(), though I’m not sure it was the most effective approach.
0 - I implemented the message message using a
- Pattaraporn Tulathum• 200
@rainof
Posted
Great effort! Just a small suggestion: you could add
hovereffect to your buttons.Marked as helpful
1 - Michel Ribbens• 120
@AmanoLX
Submitted
What are you most proud of, and what would you do differently next time?
Probably I was overthinking a few things but in the end, it all worked out how I wanted it. Inline styles based on expressions for example and the automatic creation of class names for every specific article item which I used to set up the area grid layout.
What challenges did you encounter, and how did you overcome them?
Made some small mistakes which cost me a lot of time to figure out why things in the grid area layout were not working. After a while I spotted it and got it working.
What specific areas of your project would you like help with?
The goal is to write styled components in React but need to learn a lot more to get there.
Pattaraporn Tulathum• 200@rainof
Posted
Excellent work! This is a minor comment, but it would be beneficial to double-check Kira's quote to ensure accuracy.
0 - dynamic109• 230
@dynamic109
Submitted
What are you most proud of, and what would you do differently next time?
i was able to build according to the provided design
What challenges did you encounter, and how did you overcome them?
i encountered problem with displaying the icons
What specific areas of your project would you like help with?
Would appreciate help on the icon part, it is still not showing
Pattaraporn Tulathum• 200@rainof
Posted
Great job! To resolve the issue of displaying different icons in each box, you should use the
mapfunction to iterate and display them. Here’s how you can do it:1.Create an Array of Image Paths:
const image_files = [ 'images/icon-1.svg', 'images/icon-2.svg', 'images/icon-3.svg', 'images/icon-4.svg' ];2.Use
mapto Loop Through Each Topic:{topics.map((topic, index) => ( <div key={index} className={`sub_topic sub_topic-${index % image_files.length}`}> <div className="topic_name">{topic.name}</div> <p className="topic_description">{topic.description}</p> <img src={image_files[index % image_files.length]} alt={`icon-${index + 1}`} /> </div> ))}This method ensures that each topic box displays a different icon by cycling through the images in the
image_filesarray.0 - dynamic109• 230
@dynamic109
Submitted
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?
Encountered challenges with recreating the given design
What specific areas of your project would you like help with?
.
Pattaraporn Tulathum• 200@rainof
Posted
Excellent work! To align more closely with the original design, please adjust the background color and fix any remaining font issues, like the "Add to Cart" text.
0 - Pchelsea-here• 140
@chelsea-here
Submitted
What are you most proud of, and what would you do differently next time?
I'm proud of setting up the recipe format and app as if it were one of many objects. That helped it become more of a real world problem for me.
I spent a lot of time trying to get the format of the ordered list right. In hind sight, it might've been easier to match exactly using a custom bullet rather than trying to work with the default.
What challenges did you encounter, and how did you overcome them?
I struggled with getting the last to be omitted without overcomplicating the map. {!isLast &&...} came to the rescue!
What specific areas of your project would you like help with?
Best practice critiques are appreciated!
Pattaraporn Tulathum• 200@rainof
Posted
Nice work!
0 - PAkshay Jain• 50
@i-rebel-aj
Submitted
What are you most proud of, and what would you do differently next time?
Given the practice with previous two challenges I was very easily able to create a card component and align it at centre in my view screen. It was essentially like quite comfortable for me
What challenges did you encounter, and how did you overcome them?
The biggest challenge in this project was definitely the responsive design getting the width of the card correctly for different viewports
What specific areas of your project would you like help with?
I require a little more help in understanding how to tackle problems in regard to responsive design beyond that it was smooth
Pattaraporn Tulathum• 200@rainof
Posted
Great respect for your effort! It's very close to the original design. Keep up the excellent work!
0 - abigbroomstick• 70
@abigbroomstick
Submitted
What are you most proud of, and what would you do differently next time?
I am most proud of being able to use Flexbox more comfortably and would practice using Media queries better next time!
What challenges did you encounter, and how did you overcome them?
I had some problems choosing the correct font size and padding to make it a close to the preview as possible. I tried to use Figma to calculate the measurements.
What specific areas of your project would you like help with?
How do you better judge the layout and measurements of each elements to make it precise?
Pattaraporn Tulathum• 200@rainof
Posted
Outstanding effort! Keep up the great work!
0 - samir-Deve• 350
@samir-Deve
Submitted
What are you most proud of, and what would you do differently next time?
It was beginner newbie level, I am not newbie of course :)
What challenges did you encounter, and how did you overcome them?
I encountered no challenges !
What specific areas of your project would you like help with?
No thanks !!!
Pattaraporn Tulathum• 200@rainof
Posted
Great achievement!
1
