Skip to content
Submitted over 3 years ago

Fylo data storage / sass, mobile first, BEM

Tereza•605
@sirriah
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Fylo data storage component
  • HTML
  • CSS
2junior

Design comparison

SolutionDesign

Solution retrospective

Hi, I finished next challenge. I downloaded the design files long time ago, but I didn't know, how to recreate the meter component. I know that HTML has meter tag but styling this component for all browsers is impossible, so I made it from div tags.

I added some hover effect and title attribute on buttons for better accessibility.

It would be great, if you can give me some feedback about accessibility or sass.

Happy coding 👋👩‍🦰

Community feedback

  • Samuel Palacios•615
    @samuelpalaciosdevPosted over 3 years ago

    Hello, Sirriah 👋

    Well done on this challenge!. Your solution looks nice (almost pixel perfect) and it scales pretty well.

    I only suggest some things😉:

    • Adding outline: none to the buttons with the icons. When I click on them, that outline doesn't look bad but I'd not display it.

    • About your sass stylesheets. I suggest you to watch [this video] (https://www.youtube.com/watch?v=9Ld-aOKsEDk&ab_channel=KevinPowell)

    I really like the way you approach this, keep coding ;).

    0
    Tereza•605
    @sirriahPosted over 3 years ago

    @samuelpalaciosdev Hello, which browser and OS do you use? I work on macOS in Chrome, Firefox and Safari and I don't see any outline after clicking :(.

    0

Please log in to post a comment

Log in with GitHub

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord