I used HTML and CSS to complete this challenge.

Community feedback

• 

  Jen•1,230

  @En-JenPosted over 4 years ago

  Hey there, nice job for your first project!

  1. One thing I'd suggest is making sure to always add some text for alt="" in your html for images. The alt attribute is required so that the alternative text will display if the image can't be displayed or if the user is using a screen reader.

  2. Another thing is that it is always best practice not to use inline CSS in your html because it's very difficult to override if you need to later on down the road. Instead of using inline CSS, you can simply give that element a class, and then use that class name as a selector in your style.css file.

  3. Instead of using the <b> tag in your html to make certain elements bold, I would suggest just giving those elements a higher font-weight value in your CSS. I would set the font-weight for the body to 400 and then the elements that you want bolder to 700. To do that, when you copy and paste the <link> element for the Google font into your html, make sure to select all the font weights you'll need in your project (in this case, 400 and 700).

  4. Don't forget to make the mobile background appear on smaller screen sizes.

  5. Add some padding on the right and left sides of the lower box at smaller screen sizes so that the bar that shows how much storage space is being used doesn't span the entire width of the box.

  This is a bit of a challenging project for a beginner, so really good work. Keep up the great work! - Jen

  1