Design comparison
Solution retrospective
The CSS structure, organized with SASS and the CUBE CSS methodology, worked very well and kept the code clean and modular. Using Astro components also improved the code structure, making it more readable. Next time, I might try a framework like Tailwind CSS to streamline styling even further and to make styling faster and more consistent.
What challenges did you encounter, and how did you overcome them?One main challenge was setting up the CSS Grid layout, especially achieving an overlapping effect between the header and main sections. This required a careful setup of grid rows and columns, particularly in the desktop view. Experimenting with different grid configurations helped achieve a result close to the design. For animations, I kept them straightforward—one for site load and another for the image slider transition. Keeping these animations simple made them manageable to implement effectively.
What specific areas of your project would you like help with?Feedback on CSS structure and animations would be very helpful. Suggestions on improving the CSS organization or refining the animations would be useful, especially if there are ways to make them more effective without extra complexity. Also, any recommendations for improving HTML, JavaScript, or accessibility would be appreciated, as these adjustments could enhance the code’s overall quality and accessibility.
Community feedback
- @wendyhamelPosted 8 days ago
Nice job here!
Nice solution for the layout with the grid. You could figure out some stages in between the mobile layout and the desktop layout. The sections and images are a bit largeon the higher end before your breakpoint, this pushes the content out of view.
There is some room for more semantic use of html elements instead of the div's. Article is a nice option for the sections with information. This also improves accessibility.
The animations are a bit jarring for my taste. The images are large and they have to move over a large empty space but is's mostly because the previous content does not animate out.
I use Alpine.js in my projects, combined with Tailwind.css. It helps with these transitions. It makes coding them a lot easier.
Happy Coding!
Marked as helpful0@kaamiikPosted 6 days ago@wendyhamel Thanks. Yeah I should work more on animations. It was the first time I deeply tried to use them.
0
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord