html/css

Community feedback

• 

  Asilcan Toper•2,960

  @KapteynUniverse

  Posted 6 months ago

  Hey, ronilucylucy, nice job. It is been a while since a made a long feedback. First of don't get depressed and. Take your time, rest if you are stuck, solutions of the problems usually comes to mind when you are taking a break.

  Starting mobile layout and then designing desktop is easier. When you write the HTML, it is mostly mobile layout without CSS. Before writing a single line of code thinking about what to do, how to do helps too.

  HTML is responsive by default. We are the ones breaking it. For example width: 350px; and width: 400px; on the .text and .div_images p. Don't use fixed values, use max-width instead. Also grid template areas needs to change too for mobile layout, like:

  grid-template-areas: 
   "div_2images"
   "div_3images";
  

  but it won't solve everything. I like to use flex-wrap on some cases. You can also use flex-wrap: wrap; on all_columns.

  Never use fixed values for the font sizes. So people with visual impairment can adjust the font size on their browser. Use rem for the font sizes and media queries. You can also use clamp function for better responsiveness

  Do not skip heading levels. Also if you used them for sizes don't

  Images needs to have an alt text, and that alt text should be meaningful, unless they are decorative. For this challenge, i think person avatars and socials are not decorative.

  You can put # to the href of anchor tags for placeholder.

  Some transitions for the active states might be good too.

  I recommend you to use a modern css reset for every project. You can check Andy Bells reset too.

  01

  Marked as helpful