Simple HTML and CSS

Community feedback

• 

  Joran Minjon•610

  @DrKlonk

  Posted about 4 years ago

  Hi Maja,

  I agree with the others that CSS Flexbox is a great way to accomplish flexible layouts. I'd like to add Flexbox Froggy as an additional resource to practice with it!

  Happy coding!

  Cheers, Joran

  01
• 

  tediko•6,700

  @tediko

  Posted about 4 years ago

  Hello, Maja Szczechowicz! 👋

  Congrats on finishing your first challenge! Your solution looks very good and also responds well. Here's my few tips:

  • Read about semantic. Semantic elements lead to more consistent code, they are easier to read and improve accessibility.
  • Instead of using floats read about flexbox and its possibilities. Flexbox provides a more efficient way to lay out your web components, align and distribute space among items in a container, even when their size is unknown and/or dynamic.
  • Change the alt attributes for the icons, as they don't add any extra context for screen reader users. Since your images are decorative your alt text should be provided empty (alt="") so that they can be ignored by assistive technologies.
  • Try to work on the proper class naming. Your classes aren't descriptive and also hard to read in the code. One of many benefits of proper class naming is that you know what to expect from a certain class without looking at code, even if you aren’t the person who created it or if it was written a long time ago. The name of a selector should be self-descriptive and readable. For example instead of .rectangle you can name it .container. Good luck with that, have fun coding! 💪

  02
• 

  Shomy032•270

  @Shomy032

  Posted about 4 years ago

  1 . Your cards are not centered vertically on desktop view , solution : use flexbox or grid insted of float , that way you can do it easily , ( Floats work really well in small cases like when there's an element, such as a button, that you'd like to move to the right of a paragraph. But the real issue arises when you start using floats to lay out entire web pages. And the reason for that is: floats are not meant for layouts , instead use flexbox or grid)

  2 . Maybe you can add property ' transition ' on your buttons , so when you hover them color change smoothly ( for example : transition : all 300ms linear ; ),

  3. you can add tagret="_blank" , on your link to github , so its open on new page.

  helpful links for research :

  Flexbox

  Grid

  Transition

  Target blank

  Anyway great work , if you have any more questions feel free to ask , and keep up coding :)

  01