@yannancls
Derik Boghozian
@psychederikAll comments
- @psychederik
I love the media query breakpoints you added. Your app looks excellent. Also, your code is so neat and simple. I could learn a lot from studying your code!
One obvious issue is the size of the elements on desktop, they're a bit small but other than that you did a beautiful job. It's hard getting the sizes correct without the Figma files T.T
I downloaded a Windows app called PowerToys. It has a lot of useful tools like a pixel ruler and color picker you can use globally on your PC. Its free and totally worth checking out if you're running Windows. That way you can measure the design images and have a better estimate of what size you should make the width/height.
Great job, keep up the good work👍
Marked as helpful - @Grimm-NWhat are you most proud of, and what would you do differently next time?
I enjoy adding effects and extending block actions. I added a flip side to the cards with additional info and a call to action. 😊
In the future, I plan to use JSON files more often. I feel like it would have been more convenient to store the content there in this case.
What challenges did you encounter, and how did you overcome them?I spent quite a while experimenting to find the perfect effect for displaying the flip side of the card. After some trial and error, I finally chose a smooth
What specific areas of your project would you like help with?animationwith a small touch of JS. 😅I'm always excited to get any advice, notes, or even criticism—bring it on! It helps me grow, and I seriously appreciate it! 😄💡
@psychederikLove that you went an extra step ahead and added that fitting background, awesome! It looks incredible 👍
- @ronaldyonggiWhat challenges did you encounter, and how did you overcome them?
Having issues where when I used the illustration images svg, somehow the displayed image would have additional white space either at the top or bottom. I ended up getting rid of the padding in my desktop design to get rid of the extra whitespace, although this causes my final design to not have padding unlike the desired design
What specific areas of your project would you like help with?Anyone else having issues with the illustration svg files, where when displayed you'll see extra white space?
@psychederikFirst off, great job! Your app functions as intended.
To answer your question, I'm not 100% sure where the extra white space is coming from on your illustration svg. If I had to guess, maybe check these two things: .image { "width: 100%" } , OR perhaps try using the <picture> element instead of determining the size with a React className.
I am still in the earlier stages of the React learning process so these are just my guesses. Hope you find a solution to the extra white space! Keep up the great work 👍
- @Zeke-CachiWhat are you most proud of, and what would you do differently next time?
For this project, I wanted to dust off my React knowledge, since it was some time since the last time i did any code with it. I like the simple yet usable cart, and overall how it turned out (disclaimer: i just eyeballed the design, since i only had the image to copy it)
What challenges did you encounter, and how did you overcome them?Not a lot of challenges really, just didn't remember how to deploy a React Vite project to Github pages hah
@psychederikSweet project 🥁💥 Looks great and function properly. Maybe add a light background color for more clarity on the buttons and cart? Otherwise runs very smooth. Vite is so quick. Keep up the good work 👍
- @duncan-chegeWhat are you most proud of, and what would you do differently next time?
-
My proficiency in tailwind CSS is improving
-
Learning how to add an event to a button and assigning an action to another element when the button is clicked was interesting
- Using the Tailwind CLI on my static webpage was hectic because of inconsistent compilations. I should use the CDN for static web pages and the CLI for frameworks
@psychederikVery nicely done. Your project looks great and you code is very clean.
-
- P@MikDra1@psychederik
It looks like you have 3 rows instead of 2 rows. Also, i dont think you need relative on all of your sections. Maybe removing that will help your layout look perfect. Otherwise, great job 👍
Marked as helpful - P@aeosmanoglu@psychederik
Excellent work. Your code is very clean and the result is perfect. Only one thing i could recommend is using correct HTML semantics: Body>Main>Header -> Article>Section -> Footer
Otherwise, great job 👍
Marked as helpful - @tolgatopkac@psychederik
Everything looks good except of course the layout and position of the article itself. I tried to read your code but I've never used svelte and couldn't really tell what was happening. I had trouble getting my article to be perfectly centered too. Try messing with viewport height and viewport width.
- @fullstackdevelopperWhat are you most proud of, and what would you do differently next time?
Je progresse dans la prise en main github. Cependant, j'ai perdu un temps fou a essayer de mettre ma page en ligne. J'espere m'ameliorer sur ce point la prochaine fois en prenant moins de temps
What challenges did you encounter, and how did you overcome them?Encore une fois mon plus grand obstacle etait de rendre la page visible en ligne. A vrai dire, je ne sais moi meme pas comment l'ai-je surmonte. je dirais seulement que la fois precedente j'ai fait mieux
What specific areas of your project would you like help with?La responsivite de mes pages
@psychederikThe design looks good but the responsiveness needs work.
Marked as helpful - @Justina-RWhat are you most proud of, and what would you do differently next time?
I’m most proud of my progress and how I’ve effectively utilized resources. Next time, I’ll focus on continuous improvement to keep growing even more.
What challenges did you encounter, and how did you overcome them?I wanted to try different methods for adding fonts and creating a more responsive design without relying heavily on media queries. It was challenging since I didn’t have much knowledge in that area, but with some research, I was able to solve it.
What specific areas of your project would you like help with?As I mentioned in other challenges, my biggest concern is with responsive design and whether I’m applying it correctly. I’d appreciate help in that area.
@psychederikThe design looks great but there are a few issues on the live site. First, the size is changing for every stretch of the window size and second, there are no hover effects. I like your code, it is well structured and easy to read. I think it will be best for you to learn how to make the size remain consistent with window size and also add the hover effects (check Figma files and hit the play button on top right to view the functional prototype).
Marked as helpful - @Lordgebrio@psychederik
Nice code. Improve the size and correct the background color. The solution is almost perfect 👍
