@Promerser
P
Fawaz Iwalewa
@fawaziwalewaAll comments
- P@fawaziwalewa
Hi Promerser,
I just reviewed your 'Testimonials Grid Section' project on GitHub. You did a great job using semantic HTML5 and CSS Grid. Using CSS custom properties helps improve maintainability and consistency across the design. To further improve the project, you should consider adding a README.md file that outlines the project's purpose, and the technologies used. You should also consider writing a proper commit message. Overall, your work demonstrates a solid understanding of front-end development principles. Good job!
Marked as helpful - P@rmmcfarlinWhat are you most proud of, and what would you do differently next time?
This was my first time really using a grid layout, so I'm happy I got it to work well. If I find time I might try and re-create with a flexbox layout, I'm not sure what is best.
What challenges did you encounter, and how did you overcome them?getting the SVG icons to maintain scale with shrinking cards / viewport width. I used a fixed position to stick it to the bottom right of the container, so maybe that was part of the problem. At a certain point the icon started overlapping with the text. I got it to scale with the parent container's size, but it would still overlap with the text before my desired breakpoint. I ended up just setting the breakpoint at a wider width before it overlapped, but I'm guessing there's a better solution.
What specific areas of your project would you like help with?Any feedback appreciated, thanks!
P@fawaziwalewaHi rmmcfarlin, You submission shows that you have a solid understanding of front-end development. Your file structure is clear, and the design appears well-organized. However, adding a comprehensive README.md file would greatly enhance the repository by providing context, project details, and usage instructions. Additionally, ensure commit messages are descriptive to reflect changes accurately. Overall, it’s a great start, and these improvements will further elevate the project’s quality. Great effort!
Marked as helpful - @utkarshanikWhat are you most proud of, and what would you do differently next time?
I will follow the method of using vh vw also % while giving size. It helped me a lot to achieve responsive layout. I will focus on more clear and suitable structure. Also i would like to have code reusability by giving same class name for similar components
What challenges did you encounter, and how did you overcome them?This time i came across that image challenge where i have to fit it at one side occupying 50% given space. At the same time only 2 outer corner of it should get rounded and inside corner should remain as normal square corner so achieve it using overflow hidden prop to parent container. Next is vertical layout for mobile screen
What specific areas of your project would you like help with?Again responsive layout for smaller screen. Also i figure out that i can achieve code reusability by having different components under same class. but i am lacking in it . Like giving global font-size , family and color.
P@fawaziwalewaHi utkarshanik, You've done a great job completing the Perfume Preview Card project, it is well-structured and demonstrates a good understanding of front-end development with clean HTML and CSS. However, there are areas where it can be improved. You should try updating the README with actual screenshots, solution details, and project setup instructions would make it more comprehensive and helpful for others. Additionally, adopting a CSS methodology like BEM could improve maintainability, and ensuring the design is fully responsive across all screen sizes will enhance user experience. Adding comments in the code would make it easier to understand and maintain in the future. Lastly, validating the HTML and CSS to fix any potential issues would ensure better compatibility and adherence to standards. Overall, it’s a great project, and addressing these suggestions will make it even better. Well done!
