@LapupehSubmitted 2 days ago
What specific areas of your project would you like help with?
Any feedback is welcome and will be appreciated!
Toshihito ENDO
@GentleHorseAll comments
- P@GentleHorsePosted 1 day ago
Good job! The result is very close to the original design and in terms of functionality, it seems great! I found one point which could be improved, so allow me to point it out;
- As for subscribe button, implementing the hover effect is nice idea. And if you also style in the same way while user is typing email or selecting the input by making use of "focus" & "focusout" type of "addeventlistener", that could be great.
By the way, your read me file of GitHub repo is well orginzed and easy to understand, nice work!
Marked as helpful0 - @maria202costaSubmitted 6 days agoP@GentleHorsePosted 4 days ago
Looks similar to the provided design, and also it's responsive to small size of screen devices such as smartphones, well done!!
However, there could be several things you could improve;
- You could also create the ideal responsive layout for middle sized screen devices such as tablets
- You can add a triangle shape to pop up elements to make it more "comment-like" shape
0 - P@MihailoSparic01Submitted 9 days agoWhat challenges did you encounter, and how did you overcome them?
This challenge pushed me to learn more about controlling background images, which had been a significant challenge in previous tasks.
What specific areas of your project would you like help with?What is the best practice for things like circles at the beginning of a section and before the footer?
P@GentleHorsePosted 7 days agoAmazing, looks exactly the same as the design file provided! Great Job!!
1 - @karlalasluisaSubmitted 8 days agoP@GentleHorsePosted 8 days ago
The result is close to the design and also the app is responsive for different size of screen, so good job! However there are some points which you could improve;
- You use "Roboto Condensed" as the font, but in the design, "Barlow Semi Condensed" is used.
- You forgot to add the "bg-pattern-quotation.svg" image to the first card. You can easily position the image with set "position" property of the parent ("card") to "relative", and that of the child (image) to "absolute", and set "top" & "left" properties properly. And by using " visibility" property, you can hide the image especially for mobile screens.
- You added margins to each "card" control the gap of grid partially, but you could also control "horizontal gap" & "vertical gap" at the same time with passing two values to "gap" property of the grid parent element --- ex) gap: 24px 32px; // [vertical] [horizontal]
- You forgot to add circle borders to profile images
- The font colors are slightly different from the design file.
If you want to dive into the CSS Grid, there's a very good beginner friendly well-organized website, so I add the link here;
https://blog.bitsrc.io/from-zero-to-grid-hero-illustrated-guide-to-css-grid-essentials-cd1531b56431
Anyway, well done!
0 - @zardrickSubmitted 10 days agoWhat are you most proud of, and what would you do differently next time?
What I’m Most Proud Of:
-
Learning Sass from scratch before taking on this project and effectively applying it to improve maintainability with variables, nesting, and reusable styles.
-
Successfully implementing the cross-like grid layout without using grid-template-areas. Instead, I carefully positioned the cards using CSS Grid while ensuring responsiveness.
-
Sticking to a clean and structured codebase, making the styles easy to manage and read.
What I Would Do Differently Next Time:
-
Experiment with CSS Grid more deeply to see if grid-template-areas could have made the layout even more intuitive.
-
Work on a more refined mobile-first approach to ensure smoother scaling from small to large screens.
-
Optimize the texts styling, particularly spacing and typography, to ensure better readability on all screen sizes.
Challenges & How I Overcame Them.
-
Learning Sass; I had never used Sass before, so I had to learn its syntax and best practices.
-
Positioning the Cards in a Cross-Like Grid Layout; The design required the middle cards (Team Builder & Karma) to be aligned, while the Supervisor and Calculator cards slightly overlapped them. I used CSS Grid with manual positioning, ensuring the layout was responsive without breaking.
I barely get any feedback on my projects, so I would really appreciate any constructive criticism. It would help me understand where I’m lacking and how I can improve. Specifically, I’d love feedback on:
Code Structure & Best Practices: Are there any areas where my code could be cleaner or more efficient?
Accessibility & Readability: Is my design accessible? Are there any improvements I could make for better readability and usability?
Any feedback, big or small, would be greatly appreciated! 😊
P@GentleHorsePosted 9 days agoLooks great and I can tell that you deelpy understand the CSS Grid! The result looks exactly the same as the design file provided. One thing I noticed is that the card content is a bit out of screen for middle sized screens such as tablets since the card width is too wide to fit with 3 cards in one row for these size of screens. Maybe it's nice practice to define the media query for tablet or change the breakpoint size? Anyway, in general, great job!!
Marked as helpful0 -
- @moein-creator-opsSubmitted 10 days agoP@GentleHorsePosted 10 days ago
Looks clean and close to the provided design. Also you use CSS variables to make the code easy to read, great! However, paddings are bit smaller compare to the design file, which leads to the slight different layout as the design. It's a small detail, so I think you can quickly fix it! Well done!!!
Marked as helpful0 - @stefan1959Submitted 27 days agoP@GentleHorsePosted 11 days ago
The layout is almost same as the provided design data, good job! And also responsive design works pretty well and well organized. If I could have something to mention, some font colors and also that of dots are slightly differnt from the design data. It looks the default black color. I guess you forgot to change it?
Marked as helpful0 - @dopekultureSubmitted 12 days agoP@GentleHorsePosted 12 days ago
Layout is the same as the design, great job! And also adding the <a> tag for each link button is also good practice. Hovever, you forgot to style the hover state of buttons with colors - Green: hsl(75, 94%, 57%). But in general, well done!!!
1 - @TinymolyDDSubmitted 13 days agoWhat are you most proud of, and what would you do differently next time?
I’m proud of my ability to closely match the design. While pixel perfect implementation isn’t always necessary, striving for it was both a fun and rewarding experience. Since pixel-perfect implementation can be time-consuming, next time I’d like to find a better balance between accuracy and efficiency.
What challenges did you encounter, and how did you overcome them?One challenge I faced was implementing the hover effect. To solve this, I explored pseudo-class on MDN and experimented with it to achieve the desired effect.
What specific areas of your project would you like help with?I’m currently focusing on Semantic HTML and improving accessibility. I often observe how others structure their code, but I struggle to determine whether their approach is correct. Are there any recommended guidlines or practices for this?
- @Inkognito30000Submitted 14 days ago
