Mobile-first design using bootstrap and flexbox

Hello @ChamuMutezva, thank you very much for the feedback. I highly appreciate it. I will start looking into this things moving forward.

When it comes to the unit used, usually the desings come with px instead of rems/ems, would it be a good practice to simply convert them, or still use them as instructed?

Hi Cleyrol Santana

I have gone through your project, here is some issues to look at:

1. One of the images has the following alt value alt="star-icon" , in my opinion this image should have an empty value because it is just a decorative image. An alt value has more to do with the content of the image (the message carried in the image) rather than what the image is. The alt value has to be descriptive such that in the event that the image fails to load , the meaning presented by the image will still be clear.
2. Use semantic html where possible to improve the accessibility of the site, the elements that you used for the questions and answers are not accessible when using a keyboard. The user should be able to use a keyboard only if that's the preference of the user. One quick solution is to use the details summary element. You may then not need the javascript
3. Generally , it is important to set min-height: 100vh; on the body element instead of height: 100vh; , as that allows content to be scrollable if it does not fit the body.
4. The main element has width: 380px; , explicit sizes can cause responsive issues , where like in this case devices under 380px will not be able to view the page in full
5. Font sizes should be in either rems or em, see the following article for a detailed explanation font sizes