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.

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

Users should be able to:

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

• Solution URL: Solution of the challenge
• Live Site URL: Live site of the challenge

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

Creating a speech bubble using CSS was something new for me in this project. It was a good starter for me to practice how pseudo-elements like ::before and ::after work. I've also learnt new ways in creating a background behind icons rather than just using the good old mighty padding, which is not possible in this case as the difference in icon dimensions will result them not looking uniform. Flexbox was a really great tool in helping me eliminate this issue. Creating the storage meter was also a really fun experience, even though currently I can only using CSS to make it appear like a meter which has no function at all.

Areas which I want to familiarise myself with after this challenge:

• pseudo-elements
• positioning of elements using grid/flex rather than just tweaking the position
• how background image works
• responsive webpage

• Understanding how background image operates - This is something I always go back to whenever I need to refresher on how background image can be manipulated in order to produce my desired effect.

• Find me here - Charmaine Lee
• Frontend Mentor - @charmainelhm

Practice is a very important learning stage in coding, and I want to thank Frontend Mentor for making it easier for me to do that. With their help, I can focus on understanding the different properties in HTML and CSS with my minimal knowledge on UI and UX design.