Skip to content
Submitted 7 months ago

Responsive Base Apparel using grid

Busoalmiā€¢250
@oluwa-busssy-olami
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Base Apparel coming soon page
  • HTML
  • CSS
  • JS
1newbie

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

I am delighted to share that despite encountering several hurdles during the project, I successfully completed it. Although I am relatively new to JavaScript, I am proud to say that I did not encounter significant challenges while working on the functionality.

What challenges did you encounter, and how did you overcome them?

The major challenge I faced was working on the desktop layout. Initially, I used flex, but I encountered issues with the image container and text container. Then, I switched to grid .main-container { display: grid; grid-template-columns: 1fr 1fr; } .text-container{ width: 500px; } This allowed me to better control the layout and resolve the issues I was facing.

What specific areas of your project would you like help with?

I need assistance in ensuring desktop responsiveness across various screen sizes. Additionally, I am aware that my JavaScript is not good enough. I would greatly appreciate feedback on a better approach I could have taken with the JavaScript aspect of the project.

Community feedback

  • Abdul Khaliq šŸš€ā€¢72,560
    @0xabdulkhaliqPosted 7 months ago

    Hello there šŸ‘‹. Congratulations on successfully completing the challenge! šŸŽ‰

    • I have a suggestion regarding your code that I believe will be of great interest to you.

    MAKING ACCESSIBLE BUTTON :

    • Your solution's button markup is not accessible because it does not have any text content or an aria-label attribute that describes its purpose or function. The alt attribute on the <img> element inside the button is not an adequate replacement for an accessible name.
    • To make the button accessible, you should either add a text label between the opening and closing <button> tags or add an aria-label attribute to the <button> element that describes its purpose or function.
    • Here's an example:
    <button aria-label="Click to submit">
    <img src="images/icon-arrow.svg" alt="" class="icon-arrow">
 </button>

    .

    I hope you find this helpful šŸ˜„ Above all, the solution you submitted is great !

    Happy coding!

    Marked as helpful
    0
    Busoalmiā€¢250
    @oluwa-busssy-olamiPosted 7 months ago

    Thank you. @0xabdulkhalid

    0

Please log in to post a comment

Log in with GitHub

Join 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