Frontend Mentor - Advice generator app solution

This is a solution to the Advice generator app challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Table of contents

• Screenshot
• Links
• My process
  • Built with
  • What I learned
  • Useful resources

Screenshot

Links

• Live Site URL: https://advice-generator-liart.vercel.app/

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• Mobile-first workflow

What I learned

I learned how to use the <picture> tag and how I can switch between two images to determine screen resolution, before I used background image and media querie to determine what the image with picture would be makes it much easier and reduces the css lines. And I also remembered how the fetch api works. I'm going to do other projects to fix this learning even more

<picture>
  <source
    srcset="/images/pattern-divider-desktop.svg"
    media="(min-width: 1024px)"
  />
  <img src="./images/pattern-divider-mobile.svg" alt="" />
</picture>

Useful resources

• Boas práticas para escrever um HTML profissional - Rocketseat - This helped me to use good html skills, plus it gave me an intro about accessibility attributes and using lighthouse to check page quality.
• picture - This is an amazing article that helped me understand how to switch between two images for certain devices of different resolutions. I recommend it to anyone who is still learning this concept.
• Buttons do not have an accessible name - This is an amazing article that helped me understand how to label a button so that it is accessible to people using assistive technology.