Hi everyone, I just finished the fylo data storage component challenge. Feel free to give me some feedback on this one. For those who did not work on this challenge yet I can tell that the most fun part of this challenge was to figure out how to switch the speech bubble from mobile to desktop version with a different type of frame. Just a little googeling helps a lot. But I guess ChatGPT would be the quickest fix ;)
Hello @TAYAKI79*, I commend your effort in achieving such a great design.
Here are a few suggestions from me to help improve your code:
As regards the .numbers-scale container, consider using the <meter> element as this would improve the accessibility. You can have min, max & 'value` attributes do the magic for the storage size labeling. You might want to read more on that here.
Always consider having an accessible HTML structure as this is very important. You can check the Intro to accessibility roadmap on the discord server to get resources on that.
As always, Happy coding!🧑💻
Hello @qu3bin, Amazing lines !
Here are few things I would suggest:
Because of semantics, make the <h3> tag that contains the "30-days ..." a <h2> tag. You can read more on HTML Semantics Here
I can see that you've only used font-weight: 400; in your code. From the style guide, header tags are to have the weight 700. Consider using that in your code.
Happy coding :)!
Hello @ShubhPatel06, Amazing lines you've got!
I have a few suggestion:
Instead of having another <div> inside the <main>, make it the container. This way, the content is accessed directly rather than having it come second.
Why not try reduce the width to try make it similar to the presented on the challenge.
Happy Coding :)
I finally solved this challenge in two days. I'm gonna say this was a very tricky one at least for me as a CodeNewbie. But on the other hand it was fun to work on this challenge sind I learned a couple of things too. In the beginning I was fired up how fast I was by building the mark-up and styling the whole thing but guys the active state really frigging got me =D=D=D
It took me twice as long if not three times longer to solve the hover state issue than simply building the page.
But now I have it set and done and it's time to present it to you. As Always please leave a like or comment and don't hold yourself back if you have any valuable advice for me that brings me further on my coding journey. Appreciate it a lot.
Best regards, Aki aka AkraDEV
Hello @TayAki79, Nice work I really most say but there are few patches to make.
Your <body> should not have a height or width, this way it would maintain the device width. You could see that it stretches out when viewed with different device.
You're having the <header> used wrongly. In this challenge you do not need a header. The header tag is used to contain links for navigation between pages. See here for more on the header tag.
Use the <main> tag to contain all the card element. remove the header and use a <div> as replacement. In that <div>, have a <picture> to house the <img>.
Happy coding :)
