All solutions

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

Writing accessible markup was challenging. The screen reader would not read out error messages if the same error was made more than once (this happened when I used aria-live attribute for error messages). So, to solve that, I put the error message for screen reader inside `` and hid them using CSS.

Now every time an error is committed, the invalid field gets focused automatically and as its focused, the screen reader automatically reads out the label (and hence the error messages).

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

What changes should I make to the flash message to fix this behavior?

Windows Narrator reads out all the contents of the flash message when form is opened in Firefox but in Brave (and possibly other Chromium browsers) it just reads the first line.

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

Take more time to style the layout in tablet viewport width better.

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

Designing the hamburger UI element for the first time was a bit challenging - I was confused whether to use `` element for it or not (as I could use the :backdrop CSS pseudo-class and it automatically makes the rest of content inert when using showModal()). But I ended up not using it.

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

I would like to know if using `` element would have been a better choice. Also, any other feedback or if you find any mistakes or bad practices, I would be grateful to learn from you.

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

Any feedback is welcome 😊

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

Any feedback is welcome 😊

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

Do you think my CSS too long?

• Here's the link to my CSS file
• Any feedback is welcome

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

Designing that share box (for desktop design) was something I did for the first time. It was challenging. Now it looks fairly simple. Although, it's a bit hacky 😅

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

@media (min-width: 769px){
    ...
    .popup{
        justify-content: center;
        position: absolute;
        bottom: 90%;
        right: -2vw;
        left: 23vw;
        background-color: var(--very-dark-grayish-blue);
        padding: 1.25rem 2.5rem;
        border-radius: 10px;
    }
    .icon:hover{
        cursor: pointer;
    }
    button::before{
        display: var(--btnStyle);
        position: absolute;
        bottom: 80%;
        right: 7%;
        content: "";
        inline-size: 0;
        block-size: 0;
        border-top: 10px solid var(--very-dark-grayish-blue);
        border-inline: 10px solid transparent;
    }
}

@media (min-width: 920px){
    .popup{
        right: -4vw;
    }
}

@media (min-width: 1040px){
    .popup{
        right: -6vw;
    }
}

@media (min-width: 1080px){
    .popup{
        right: -20%;
        left: unset;
    }
}

This is styling I added to make that share box responsive. If there's a better way to design the component with shorter/better CSS, please share in the comments.

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

Write shorter CSS code next time.

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

What are some effective ways to make such components (with images) responsive? I faced a lot of problem in making it responsive. My CSS code also crossed 200 lines!

Any feedback is welcome ❤️

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

Any feedback is welcome ❤️

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

Box shadow should be more subtle.

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

Overlay on the image was a bit challenging because I had not done anything like that before. After looking at numerous solutions, I eventually landed on a codepen example which helped me solve this part of the challenge.

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

Any tips on how to make my solution as close to the design as possible (without using design files - Sketch, Figma).

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

I will try to write shorter CSS code next time.

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

Adding gradient box shadow was challenging.

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

Open to feedback ❤️

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

I was really struggling with removing the scrollbar and crawlbar. The reason they were there was that the `` element had its default list-style properties. When I set that to none, the problem was solved.

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

Any feedback related to better rendering of the image - in the sense that it maintains its ratio (meaning, if in desktop view or mobile view the background image takes a height of say 15%, then no matter which width you are at, its height should be 15% of viewport height and the image should still have full width). I don't mean to just set these properties via width or height or background-size and similar things or using vh or other relative units. I guess they won't work for the images provided for this challenge anyway!

Something smarter? So, that browser does the calculation, not the author.

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

Writing semantic markup - referenced MDN, W3 docs (on accessibility)

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

After submitting the solution, I checked the Accessibility report and got no errors at all!

I think there's more to do in terms of writing proper markup, Frontend Mentor's Accessibility Report generator (axe-core) "picks out common accessibility issues" and they also say that the "automated audit is fairly surface level".

But atleast no errors on "surface level audits" 🎉