Frontend Mentor - Fylo data storage component solution

This is a solution to the Fylo data storage component challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources
• Author

Overview

The challenge

Users should be able to:

• View the optimal layout for the site depending on their device's screen size

Screenshot

Links

• Live Site URL: Netlify

My process

Built with

• Semantic HTML5 markup
• TailwindCSS utilities classes
• Flexbox
• Mobile-first workflow

What I learned

Being the first time I'm using TailwindCSS, I find it very challenging and I am very glad I was able to complete it after 12 hours of coding... Would probably have spent less time if I were to use vanilla CSS but I'm glad I beginning to get hold of TailwindCSS and its utility classes...

If you want more help with writing markdown, I'd recommend taking freeCodeCamp Responsive Layout Course to learn more.

Continued development

A firm grip of TailwindCSS...

Useful resources

• Resource 1 - This helped me to understand the structure of tailwind...
• Resource 2 - This is an amazing video helped me undsrstand the calc() function in tailwind as it wasn't explained to details...
• Resource 3 - To get my desire icon...
• Resource 4 - To edit icon...

Author

• Website - Taiwo Jazz Personal Portfolio
• Frontend Mentor - @TaiwoJazz
• Twitter - @Taiwo__Jazz