Skip to content
OverviewSolutions
30
Comments
20

PastaSus

@PastaSus520 points

I’m a mysterious individual who has yet to fill out my bio. One thing’s for certain: I love writing front-end code!

Latest solutions

View more solutions

Latest comments

  • AymaneOnline•500
    @AymaneOnline
    What are you most proud of, and what would you do differently next time?

    I loved the entire challenge, I found it difficult and time consuming to create every section manually. Probably I'll consider trying one of those UI Libraries out there, it might make my life easier inchAllah.

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

    I've encountered many challenges. For example, dealing with the accessibility on the features section. I need to make the features navigation focusable, and be able to navigate when hitting 'enter'. And many more.. Alhamdulillah with AI we could find the solution easier, but sometimes I still need to deal with it manually because a lot of time the AI doesn't help much.

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

    I would appreciate every feedback, specifically on how to improve the accessibility of my solution.

    bookmark-landing-page-master

    #accessibility#lighthouse#tailwind-css#vite
    1
    PastaSus•520
    @PastaSus
    1. The colors you used are kinda off from the given color(the bg color of buttons, the curvy bg color behind the decorative images on the hero and features.
    2. On the feature tab you were using carousel-like animation which is pretty weird since its not a carousel and doesn't feel natural when it gets animated. Its better if the animation/transition feels natural since it would enhance UX.
    3. tablet layout on hero is not what i expected it broke at the 768px breakpoint
    4. your nav menu is activating when i click the LOGIN button on the tablet layout thats weird!!
    5. text input must be cleared on successful submission on the form
    6. The outline usually only appears when we are tabbing through the site not when clicking a faq accordion.
    Marked as helpful
  • PastaSus•520
    @PastaSus

    1.the solution is far from the desired design. Although we dont have to be perfect when copying the design as much as possible we want it to still be close to it. Pay attention to detail

    2.I recommend going back some of your parts in CSS to read the articles in the learning paths here in front-end mentor specifically in Grid. also im seeing your about section paragraph overflowing in the preview which is not what we want.

    3.Your cta link "SHOP NOW" btn doesnt have a hover state...

    Marked as helpful
  • Aman Singh•370
    @Aman11b
    What specific areas of your project would you like help with?

    Well, if anyone could help me with the deployment of such projects via gh-pages, I’d really appreciate it. I face difficulties again and again while doing it through the terminal, mostly because the .gitignore keeps blocking the dist folder. In the end, I just dragged and dropped it manually, but I’m eager to learn how to do this process smoothly. I’m posting this question so please feel free to correct my mistakes and guide me through the proper way.

    Loopstudios landing page

    #accessibility#cube-css#sass/scss#bem
    1
    PastaSus•520
    @PastaSus

    Use aria-label on the menu button Replace or complement the .sr-only span with:

    aria-label="Open menu"

    Dynamically update aria-expanded In your JavaScript, make sure you toggle aria-expanded based on menu state.

    Use aria-live="polite" if visually hidden text changes dynamically Only if you're using .sr-only text that updates (e.g. "Menu opened").

    Use only one <h1> per page Change section headings like:

    <h1>The leader in interactive VR</h1>

    to:

    <h2>The leader in interactive VR</h2>

    Add aria-label to each <nav> element Example:

    <nav aria-label="Main navigation">

    Improve alt text for images Avoid alt text like alt="image-curiosity", and write meaningful descriptions, e.g.:

    alt="VR rendering of the Curiosity rover"

    Wrap gallery items in <a> if they are clickable If users are expected to click on a gallery image/title, use:

    <a href="#" class="gallery__image"> <img ... /> <h2>...</h2> </a>

    Add a skip link for accessibility Add at the top of <body>:

    <a href="#main" class="skip-link">Skip to main content</a>

    Then give <main> an id="main".

    Disregard some of these if you've already done so Read through the articles in front-end-mentor it will help you improve alot

  • PastaSus•520
    @PastaSus

    1.You forgot to set cursor: pointer on the image — it's important for interactive elements. 2.No need to use the <section> tag just to wrap the image; a <div> or <figure> is more appropriate unless it’s a full semantic section. 3.As much as possible try to do it like this when using svgs: <img src="svg.svg"> when using SVGs. It's more performant due to browser caching and keeps your HTML clean — though inline SVG still has its use cases like styling or animation.

  • PastaSus•520
    @PastaSus

    Areas for Improvement

    1. ❌ Misuse of <div> inside <button>

      ✅ You avoided this in most cases, but verify if the cart button thumbnails had wrappers that violated this.

      If any <div> is used inside a <button>, replace it with a <span> or just style the <button> directly using pseudo-elements (::before, ::after) or extra <span> elements.

    2. ❌ Broken HTML

      </sapn> on line 284 should be </span>. This is a typo that breaks the DOM.

      Fix all such mismatched tags before running accessibility or validation tests.

    3. ⚠️ aria-controls Without ID Matching

      The hamburger menu button has aria-controls="primary-navigation", which is correct — but make sure id="primary-navigation" exists and the data-visible state is used correctly in JS for toggling.

      Currently, data-visible="false" is set, but no aria-expanded toggling logic is shown.

    4. ❌ Hidden Elements With display: none for ARIA Live Regions

      If any content is updated with aria-live, you must not use display: none — instead, use visually-hidden (CSS that hides visually but still accessible to screen readers).

      The cart dropdown and .cart-empty both use display: none, which is fine unless you want those announced to screen readers.

    5. ⚠️ SVGs Missing role="img" or aria-hidden="true"

      Decorative SVGs (like icons) should use aria-hidden="true" and no alt.

    tons of features you are missing that are in the challenge also like the cart feature, the add to cart quantity items not adding up its total properly its only adding by 1...

  • PastaSus•520
    @PastaSus

    things you can fix:

    1. Bg color should off white actually
    2. Desktop nav links color should be dark grayish blue

    overall i think you did pretty good

    i can see some techniques i can apply to my code also like the menu btn set to absolute and then changing the value of src while using js instead of having two buttons on my markup

View more comments