Responsive landing page using em units desktop first

Community feedback

• 

  P

  Fluffy Kas•7,715

  @FluffyKasPosted about 3 years ago

  Hey, your solution is a good start but there's a few adjustments you could make.

  1. Your font-family doesn't work. You need to follow that link that was given to you in the style guide and select the appropriate font-weights of the font-family. Then google fonts will give you a piece of code that you can put in your html or css. Using that link directly in the head won't work unfortunately ^_^

  2. You could give your background a background-size: contain to cover the whole screen. If you add a background-color as well, it will look like the design. Alternatively, you can use the background property and add both the color and the image, comma separated.

  3. Take a look at the accessibility report! Semantic markup is very important and the report helps a lot if you're not sure what you're doing. Your alt attribute is also incorrect, if you're not sure what they do, here's this cool article, that will help you: (https://axesslab.com/alt-texts/)

  And finally, I'd say as a newbie your focus shouldn't be on reducing your code. Don't stress too much over it, reducing code can come later when you know more or less what you're doing. Then you'll find ways to reduce it yourself and see when it's even appropriate to reduce it. Good luck! :)

  Marked as helpful

  0

  ---

  

  Suraj Jha•35

  @Suraj9505Posted about 3 years ago

  @FluffyKas i thought the font family worked out but i will check it out and thanks for the feedback it was my first challenge so i didnt knew much about them so thanks for the help i will try to improve it. :)

  0
• 

  rikvandersar•145

  @RikvanderSarPosted about 3 years ago

  Hey,

  Great job on this challenge!

  A couple of things I've noticed looking at your code.

  • First of there are a couple of accessibility issues reported, you should get that fixed.
  • Check your html code first and try to replace the divs for semantic html
  • In your CSS your using em units for almost everything. I think em units are particulary usefull for padding and margin in a specific section where you want the section layout to adjust according to the fontsizes in that area. For the height and width of your card or border radius (for example) it might be more logical to use px. Your could use max-width and max-height if you want to keep responsiveness.

  Marked as helpful

  0

  ---

  

  Suraj Jha•35

  @Suraj9505Posted about 3 years ago

  @RikvanderSar thanks for the advice i will keep that in mind and try to do it better :)

  0