Frontend Mentor | Responsive landing page built with Tailwind and React. coding challenge solution

Solution retrospective

I built this landing page following the jpg designs (no access to figma) and paying a lot of attention to detail, since my intention was to test Tailwind, which I didn't really liked.

The most interesting thing I learnt while doing this is the src set property in the html img tag, it let you change the image source depending on a media query, all with html.

Appreciate any feedback

Community feedback

Adriano• 34,090

@AdrianoEscarabote

Posted almost 2 years ago

Hi Tomás Sadone, how are you?

I really liked the result of your project, but I have some tips that I think you will enjoy:

every Html document must contain the main tag, so we can identify the main content, to fix this, wrap all the content with the main tag. HTML5 landmark elements are used to improve navigation experience on your site for users of assistive technology.
images must have alt text unless it is a decorative image, for any decorative image each IMG tag must have empty alt="" and add aria-hidden="true" attributes to make all the assistive technologies of the Web, as screen reader. Learn the differences between decorative/meaningless images vs important content.

The rest is great!

I hope it helps... 👍

Marked as helpful

Tomás Sadone• 70

@TomasSadone

Posted almost 2 years ago

@AdrianoEscarabote Thanks, will fix this. I thought that for decoratives image you just had to leave alt empty, that it's helpful as well

Responsive landing page built with Tailwind and React.

Design comparison

Solution retrospective

Community feedback

Please log in to post a comment

Join our Discord community