Skip to content
Submitted almost 5 years ago

Fylo Data Storage - HTML & CSS

Laura•10
@laura-o7
A solution to the Fylo data storage component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

  1. I researched a lot of options on how to customise the <input> I added for the data storage bar, however everything I attempted to add either didn't change anything at all, or changed the scrollbar down the right hand side of the page (tried using ::-webkit-scrollbar which I don't think worked the way I expected). What is the best way to create a fully functional bar like on this challenge, with the colour gradient too?

  2. The arrow that comes off of the speech bubble - I have used a <div> to create a triangle to place beside it, however what is the correct way to do this as I can only assume with how many issues I encountered creating this, that it isn't the best way at all?

  3. I wasn't able to centre the "185" in the white bubble - I put a margin top but it doesn't seem to modify it at all, however the margin left does. Any insight as to what I'm doing wrong here would be great!

  4. I was going to change some of my px to % for my container positions, however I wanted to find out which way is the best/preferred in development? I don't know if I should've done this to help with responsiveness (if I had remembered to make it responsive that is), or not.

  5. I forgot to make the site responsive so it won't be adapted to mobile - I'd be interested to receive any recommendations on how to learn about responsive layouts as I'm very new to coding and this is the first time I've come across it in my journey.

Any good and bad feedback welcomed so I can learn and improve!

Thanks in advance, Laura.

Code

Please log in to post a comment

Log in

Community feedback

  • Ovidiu-Antonio•3,125
    @ovidiuantonio

    Hello Laura! Here are my answers to your questions:

    1. To make the custom progress bar you need to create 3 elements; the first one is the parent who has the max width (the dark blue bar), inside of it create another div element who will be the progress bar (the gradient bar), and inside of the progress bar you can create another div element who will be the dot (you create it inside of the progress bar because you will want to align it in the right part)

    2. To create shapes in css you can use the clip-path property. See more here

    3. To align things you can use flexbox in most of the cases, just make the parent element displayed flex and then use justify-content and align-items properties to align them the way you want!

    4. If you use px you have more control on your design, but when you use % the values will change as other values change (for ex: on your progress bar, if you give to the gradient bar a width of 85% of the parent element the width will decrease/increase as the width of the parent will decrease/increase)

    5. These are the media queries I use in every solution:

    • 0-600px (mobile)
    • 600-900px (tab port)
    • 900-1200px (tab land)
    • 1200px (large screens)

    Happy coding! Keep going!

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