Now, I want to focus on accessibility, making the menu keyboard- and screen reader-friendly with ARIA. I’d also like to optimize performance by implementing lazy loading for images and learn how to add smooth animations to dropdowns and the mobile menu. Lastly, I want to dive into unit testing for Angular components.
I’d like help optimizing the CSS code for better performance and browser compatibility. Additionally, I’m seeking suggestions to improve the design’s accessibility.
I’d appreciate help with:
i am proud of achieving this exact layout and improving my knowledge and skills of css grid
What challenges did you encounter, and how did you overcome them?none
What specific areas of your project would you like help with?none
"Congratulations on the challenge, it turned out great and very similar!"
i'm really proud of this solution, i did it all by myself having in consideration all the notes of my peers.
What challenges did you encounter, and how did you overcome them?i knew it was a grid challenge, so i tried to made all the components grid-type, eventually y realized that only the big container with the cards should be grids and use flexbox in the others.
What specific areas of your project would you like help with?flexbox
Hello!
Congratulations on your work! Your solution has evolved very well, and although there are some areas that can be improved, you’re on the right track.
I was pleased to see that you used a CSS Reset. Consider creating a separate .css file for it and importing it into the HTML—this helps with code organization, readability, and future maintenance. Additionally, it’s a good practice to include font references directly in the HTML.
Your choice of Display Grid was a great solution, but I would suggest experimenting with Display Flex to improve the responsiveness of the cards. A few adjustments to the font size and weight can also make a significant difference in the overall visual appeal.
You’ve already mastered CSS and are ready to explore frameworks that can make building future pages easier. How about trying Bootstrap or Tailwind in your next project?
If you need any help, feel free to reach out to me. Once again, congratulations on your solution!
I am glad to learn about flexbox and css and use it in this project and thanks to other resources i found online and other ai models which helped me finish this project.
What challenges did you encounter, and how did you overcome them?I had challenges in using grid layout and using the pseudo selector and assisgn the property
You did an excellent job using pure CSS. Well done!
Just consider adjusting the font size of the main title, as it currently matches the subtitle in size but with a different weight. Additionally, the text inside the card has some padding on the right.
Making these small tweaks will likely make your solution even more accurate.
atleast done
What challenges did you encounter, and how did you overcome them?font selecting
What specific areas of your project would you like help with?Almost same but not perfect
Your solution looks really good. There are just a few visual tweaks needed:
Overall, your solution is great. If you need any help, I’m here to assist.
Finishing this project
What challenges did you encounter, and how did you overcome them?Image. I have to adjust the image pixel by pixel per size of the screen. The colors, I don't know if it's just me but I had a hard time differentiating the colors?
What specific areas of your project would you like help with?Any feedback will be much appreciated. Thank you!
It seems that the image is a bit distorted, probably because you applied specific height and width settings, which affected the original aspect ratio. Try to work with the image tags and avoid altering the height directly on the image.
The background color is different from the provided solution. Please review the spacing and border-radius of both the card and the image. This is often an aspect people overlook, especially since it can be challenging to redesign just from the image without the Figma file.
Overall, your solution is very good. Great job on your work! Keep studying, practicing, and improving. If you need any help, feel free to reach out. Best of luck!
O que me deixou mais satisfeita nesse projeto foi ter conseguido deixar ele responsivo para telas menores, visto que era um desafio para mim.
Parabéns pela solução! Ficou muito bom, nota-se que você desenvolveu bem sua folha de estilo com CSS. Acredito que já está no nível para implementar uma lib como o Bootstrap ou Tailwind. Continue se esforçando que o resultado virá, se precisar de algum apoio pode contar comigo.
