Latest comments

• 

  P

  ca16rg03•30

  @CarmenGasSubmitted 2 months ago

  What specific areas of your project would you like help with?

  I'd appreciate a code review. Any advice would be greatly appreciated. :)

  

  QR code component challenge on Frontend Mentor

  2

  10
  

  Kalpesh Patil•150

  @kalpesh172000Posted 2 months ago

  Good things

  • Really nice and clean code. You also added nice comments to denote part of the html file.
  • Solution looks really close to design.
  • Design is responsive.

  what can you improve

  • Use specified font family and colors to make the solution look more close to the design.
  • As you have used flexbox for body tag the content clips at top and bottom when height shrinks too much. To avoid this give min-height to the body so when height shrinks too much it makes the body scrollable and card won't clip.
  • After doing that add 24px padding to body for nice touch.

  0
• 

  Tarik Raposo Parreira•80

  @tarikraposoSubmitted 2 months ago

  

  Social links profile component

  2

  20
  

  Kalpesh Patil•150

  @kalpesh172000Posted 2 months ago

  Good things

  • Really nice and clean code.
  • Solution looks really close to design.
  • Design is responsive.
  • This is first time ever that I have seen nesting in css. I'll research more about it.

  what can you improve

  • As you have used flexbox for body tag the content clips at top and bottom when height shrinks too much. To avoid this give min-height to the body so when height shrinks too much it makes the body scrollable and card won't clip.
  • After doing that add 24px padding to body for nice touch.

  Marked as helpful

  1
• 

  Yamada MK•170

  @yamadaMk12Submitted 2 months ago

  

  social-links-profile

  2

  30
  

  Kalpesh Patil•150

  @kalpesh172000Posted 2 months ago

  Good things

  • Really nice and clean code.
  • Solution looks really close to design.
  • Design is responsive.

  What can you improve.

  • As you have used flexbox for body tag the content clips at top and bottom when height shrinks too much. To avoid this give min-height to the body so when height shrinks too much it makes the body scrollable and card won't clip.

  Marked as helpful

  0
• 

  MUHAMMAD IBRAHIM•90

  @DevIbrahim07Submitted 3 months ago

  

  Social links profile

  1

  30
  

  Kalpesh Patil•150

  @kalpesh172000Posted 2 months ago

  Good things

  • Solution looks really close to the design.
  • Code is clean and readable.

  Improvements

  • You provided the github profile link and not repository link.
  • You didin't give height to the body. you can can give it by following code.

  body {
      height: 100vh;
  }
  

  0
• 

  shelly004•40

  @shelly004Submitted 2 months ago

  

  Blog Preview Card

  2

  40
  

  Kalpesh Patil•150

  @kalpesh172000Posted 2 months ago

  Good things

  • Solution is almost close to the design.
  • Code is easy to read and understand.
  • You used semantic HTML.

  Improvements

  • Update README.md
  • Make border 1px instead of 2px
  • You used media querri to change the dimentsion of the card but after breakpoint it touches the screen edges. to fix it add padding to the parent container.
  • There is better way to make responsive card <div> without using the media query. It is done with use of max-width and width(with % unit) as follows

  main {
      max-width: 384px;
      width: 100%;
  }
  

  what above code does is that it allows code to grow with width 100% but only until 384px. By using this you wont need to use media querry.

  Marked as helpful

  0
• 

  Benjamin Siret•70

  @BenjaminSiretSubmitted 2 months ago

  What are you most proud of, and what would you do differently next time?

  RAS

  What challenges did you encounter, and how did you overcome them?

  RAS

  What specific areas of your project would you like help with?

  RAS

  

  Blog card - html css

  1

  30
  

  Kalpesh Patil•150

  @kalpesh172000Posted 2 months ago

  Good things

  • Solution is very close to design.
  • Page is responsive.
  • Code is clean and easy to read.
  • Code is properly aligned vertically and horizontally.

  What can you improve

  • Once you set the max-width of the middle card, you can just add padding to card and set the width of inner element like <img> and <div>(which contains the paragraphs) to 'auto'. which would automatically scale the inner elements to the <div> so if size of div changes so does size of inner elements and you wont need to set media querries for them. In below example card can shring but can't grow beyond max-width. It is done with combination of max-width and width(with % unit).

  main {
      background-color: var(--white);
      max-width: 384px;
      width: 100%;
      padding: 24px;
  }
  
  .illustration {
      width: auto;
  }
  
  .card {
      width: auto;
  }
  

  • correct font sizes before breakpoint are 14, 14, 24, 16, 14 and after are 12, 12, 20, 14, 14.

  • you should use sematic tags <main>,<header> etc the way you use <div>, so you could avoid layers of nesting by just appling the same properties to semantic HTML.

  Marked as helpful

  0