All solutions

I built the solution mobile first using CSS Grid with

• 1 column and 3 rows for mobile
• 2 columns and 2 rows for desktop, with the image spanning the 2 rows in the 2nd column

Is this a good way to approach the grid?

Accessibility I tried linking the error text with the input by adding aria-describedy="subscribeErrorText" to the input field when the error is shown. Is this legitimate? Are there other/better ways of doing it?

Any other feedback on the layout and the code is appreciated :) Have fun

Ok, now I know why I haven't seen many solutions for this challenge - it just isn't as easy as it seems :)

Generally, I am happy with how the solution turned out :) I tried to implement the original design at 1440x800px as close as possible, while keeping the layout flexible, leting it contract and expand naturally for smaller/larger screens - both horizontally and vertically.

Questions

Accessibility - menu and slider navigation use button elements. I wonder how slider image and content can be made more accessible? Feedback and references appreciated.

Slider I coded the slider with some JS, JSON and CSS transitions. Image transitions are not the best, i guess, but I'll practice that in the future. I haven't coded a slider since I discovered OwlCarousel, so let me know what you think.

I'd be glad if you shared any thoughts!

PS. I dealt with so many little quirks, that I listed some reference articles in resources.txt, it's available in the repository.

Have fun coding!

Submitting my first solution, yey!

1. I am trying to stick to the BEM naming convention and keep selector specificity consistent.

2. I am also practicing my CSS Grid skills.

Any feedback on how I handled those is appreciated :)

Thanks for reading and happy coding! :)