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

• Frontend Mentor - Advice Generator App solution
  • Table of contents
  • Overview
    • Screenshot
    • Links
  • My process
    • Built with
    • What I learned
    • Continued development
    • Useful resources
  • Author
  • Acknowledgments

Overview

Screenshot

Links

• Solution URL: Right here!
• Live Site URL: Deployed on Vercel

My process

Built with

• Semantic HTML5 markup
• Svelte + Sveltekit
• TypeScript
• WindiCSS
• Flexbox
• Mobile-first workflow

What I learned

I learnt to use the picture tag for displaying different images in certain viewports. This is awesome for building responsive layouts!

<picture class="block mt-3 my-6">
    <source srcset="/pattern-divider-desktop.svg" media="(min-width: 640px)" />
    <source srcset="/pattern-divider-mobile.svg" media="(max-width: 640px)" />
    <img src="/pattern-divider-mobile.svg" alt="" />
</picture>

Continued development

I just discovered the picture tag and how awesome it is; I feel like learning more about HTML tags and HTML in general would be great!

Useful resources

• Picture Tag on MDN Mozilla - This was useful for understanding how the tag works.

Author

• Frontend Mentor - @Shawn Lee

Acknowledgments

Thanks to Ivan I discovered the picture tag.