@SusanGithaigaN
Latest comments
- P@banban1023
Your page's interactive features are generally very well implemented — basic functions like clicking, toggling, and input validation all work smoothly. However, there are still some areas of detail that could be improved to further enhance the user experience:
Lack of visual interaction cues: It's recommended to add cursor: pointer to clickable elements such as buttons, navigation items, and radio options, to help users clearly recognize which elements are interactive.
Images not displaying: Some image paths appear to be incorrect, resulting in failed image loading.
Radio buttons can't be selected by clicking on the text or box: Consider associating labels properly with radio inputs so users can select them by clicking on either the label text or surrounding area.
- @220100dungvanP@banban1023
Your page interaction and styling are both very well done — clean, clear, and thoughtfully implemented. However, one area that seems to be missing is responsive design.
In its current state, the layout doesn't adapt to different screen sizes, which may affect usability on mobile or tablet devices. Incorporating responsive techniques, such as media queries or flexible layouts, would make your project more accessible and user-friendly across a wider range of devices.
Overall, great work so far — just a bit more attention to responsiveness would make it even stronger!
- @SimonHicklingP@banban1023
From your code, it's clear that you have a solid grasp of CSS3, which is really impressive! There are a few minor areas where the design could be matched more closely, but overall, you've clearly understood how to build and structure a project — and that's a great achievement. Keep up the good work!
Marked as helpful - @ruperthnyagesoaP@banban1023
Everything looks great overall! Just a few tiny style differences to watch out for.
- @Tonny-Blair-DanielP@banban1023
You've done a great job utilizing the CSS framework for the page! However, in real-world development, the default styles of the framework might not perfectly align with the design mockups. In such cases, you can add some custom CSS or override the framework's styles to fine-tune the visual details. This approach ensures the final output closely matches the design while maintaining code flexibility
Marked as helpful - @PxMachWhat specific areas of your project would you like help with?
I have a grid with 3 columns and 2 rows containing 5 cells:
The first cell spans columns 1 and 2 in the first row.
The second cell occupies column 3 in the first row.
The third cell is in column 1 of the second row.
The fourth cell occupies column 2 of the second row and 1/3 of column 3.
The fifth cell occupies the remaining part of column 3 in the second row.
i have a problem with the fourth. Or i just had to use Flexbox, not necessarily a CSS grid?
P@banban1023Regarding this layout, since the elements in the top and bottom rows aren’t strictly aligned, relying solely on Grid might not offer enough flexibility. Your approach is already well thought out, but to achieve more precise control, I’d recommend combining Flexbox—after all, Flex excels at managing alignment within individual rows or columns.
Additionally, based on the design mockup, the first row’s height could be adjusted to roughly twice that of the second row. This would enhance the visual hierarchy and improve overall balance.
