@FA23BCS233
Latest solutions
Latest comments
- @StergiosHariop
Great job there buddy! Simple and clear. The only thing you need to fix is the border-radius on the image when it is in desktop mode.
Marked as helpful - @Abdulgafar-RiroWhat are you most proud of, and what would you do differently next time?
I am most proud of how I structured the CSS Grid layout to ensure a visually appealing and responsive design across different screen sizes. The use of SASS/SCSS helped me manage styling efficiently by utilizing variables, mixins, and nesting, making the styles more maintainable.
Next time, I would like to:
- Optimize the CSS Grid layout further for better alignment and spacing in larger screen sizes.
- Improve the accessibility by refining ARIA roles and testing the page with screen readers.
- Experiment with CSS animations or hover effects to make the user experience more engaging.
-
CSS Grid Alignment Issues:
- Initially, getting the cards to span correctly (with the first and fifth cards spanning two columns and the third card spanning two rows) was tricky.
- Solution: I fine-tuned the grid-template-rows/columns properties while ensuring consistent spacing between elements.
-
Ensuring Accessibility:
- Making sure the content was readable and*well-structured for screen readers required additional research.
- Solution: I applied the ARIA roles and semantic HTML elements but would love feedback on further improving accessibility.
-
Improving CSS Grid Layout:
- Are there better ways to structure the grid while ensuring flexibility for different screen sizes?
- How can I make the layout more fluid without relying heavily on fixed pixel values?
-
Optimizing SASS Usage:
- Are my mixins and variables used effectively, or is there a more efficient way to manage styling in SASS?
- What SASS best practices could I adopt to make my code even more scalable?
@StergiosHariopHello! some improvements i think you can do are :
- in main tag, remove max-width.
- in articles tag, replace width with 100% (These changes make it look better on responsive, when you make the screen smaller).
- not all avatars have the purple border. Define a class on each and give them different colors as design indicates.
Good job on the grid implementation, keep up the good work!
Marked as helpful - @AkashGaragadWhat are you most proud of, and what would you do differently next time?
-I am proud to I solve the problem by own and here I used CSS properties to make it easy
What challenges did you encounter, and how did you overcome them?-I did not encounter any challenges at the time building it
What specific areas of your project would you like help with?-Centering card in the body of the page
@StergiosHariopHello! if you add:
- height: 100vh in the body CSS, your card will be centered
- also, make the border-radius of the image 10px instead of 20px, to match the design.
Good job overall!
- P@pdoubleu30What are you most proud of, and what would you do differently next time?
As this is my first front end project, I am proud to have started my coding journey. I know this is not perfect, but would really like feedback to improve.
What challenges did you encounter, and how did you overcome them?The biggest challenge that came to mind was the border-radius attribute would not work when I was using padding as well. I googled some solutions and ultimately created a wrapper and applied the padding to that instead of the image.
What specific areas of your project would you like help with?I would like any feedback anyone has. To making my code clearer, to making my end result closer to the actual project solution.
@StergiosHariopHello! I checked your code buddy, here's what you can do to center it:
- in the container class, you can remove the margin-top, margin-left, width and height. Leave only the border radius and background-color.
- in the main tag, add a new class, and use display: flex, justify-content: center, align-items: center and height: 100vh. This will help you center the card inside the body.
Good job on the card, keep up the good work! :)
Marked as helpful - @GuidoPerezR@StergiosHariop
Excellent job!
- @wellsprWhat are you most proud of, and what would you do differently next time?
I'm just happy to apply some grid styling (which I implemented only in the desktop version, while the mobile version utilizes flex). I took the liberty of adding an intermediate version, which I believe is an interesting addition to the design.
What challenges did you encounter, and how did you overcome them?I found this project pretty straightforward. I've implemented a layout transition:
- From mobile version, which I styled as a flex column;
- To an intermediate version styled as a flex row wrap;
- Finally, arriving desktop version that uses grid.
I'd love to receive any feedback about my solution!
@StergiosHariopI liked your solution! The only thing I may point out is that the cards seem to be a little bit smaller in the mobile design (if you take a closer look). Rather than that, job well done!
