Hesam

Latest comments

• 

  David Gichuru•360

  @dxiDavidSubmitted about 2 years ago

  

  Product preview card component challenge Using CSS Flexbox

  #accessibility

  2

  30
  

  Hesam•420

  @hesam-fattahiPosted about 2 years ago

  Hey there!👋 Good job on finishing the challenge .

  Here are some tips to improve your code:

  • Your component should be wrapped with main element.

  • And for other elements like headings and paragraphs, there is no need to wrap them around div.

  • You can use picture and source for you image, which doesn't need a media query in CSS for changing images. More info on MDN.

  • For accessibility reasons, the img alt text shouldn't be empty. It should describe the image.

  • You might wanna add to the media query's viewport since there are many phones with viewports larger than 375px, therefore the flex-direction doesn't change to column and the component won't look good on phones with bigger screens.

  If you need further clarification l, I would be happy to help.

  Happy coding :)

  Marked as helpful

  0
• 

  isamardzija•280

  @isamardzijaSubmitted over 2 years ago

  

  Static Profile Card

  1

  10
  

  Hesam•420

  @hesam-fattahiPosted over 2 years ago

  Hey there👋 Good job!

   

  • For background patterns, Instead of using keyword values for your background-position, you can use percentages for the X and Y coordinates. Play with the numbers to get as close as possible to the design. More info on MDN.

   

  • You should also add background-repeat and set it to no-repeat.

   

  • The profile picture, due to accessibility reasons, should have alt attribute. It should describe what the image is. More info on W3.

  Good luck.

  0
• 

  Karin Lee•50

  @kleeblattdevSubmitted over 2 years ago

  

  3-column-preview-card-component with flexbox

  1

  20
  

  Hesam•420

  @hesam-fattahiPosted over 2 years ago

  Hey there!👋

  • For the border-radius to work, you must add overflow: hidden; to your article.

  Good luck on your future projects.

  Marked as helpful

  0
• 

  Hesam•420

  @hesam-fattahiSubmitted over 2 years ago

  

  Signup page

  #sass/scss

  1

  20
  

  Hesam•420

  @hesam-fattahiPosted over 2 years ago

  There is a problem when I test it on my phone. The "container" seems to have 0 padding on the right. Does anybody else have this problem?

  When I inspect it on the laptop, even with smaller viewports, there is no problem.

  0
• 

  Leonardo Rodrigues Gomes•160

  @gomes-leonardoSubmitted over 2 years ago

  

  profile-card-component-main

  3

  20
  

  Hesam•420

  @hesam-fattahiPosted over 2 years ago

  Hey there 👋 Nice work!

  • For the circles on the background, you can put the two img elements outside the card component and use absolute positioning.

  • Also, the card component should be a main element. Using div is bad practice.

  Happy coding :)

  0
• 

  Mateus Barbosa•20

  @mteusbarbosaSubmitted over 2 years ago

  

  Responsive page using flex and media query

  2

  60
  

  Hesam•420

  @hesam-fattahiPosted over 2 years ago

  Hello there!👋 Congratulations on finishing this challenge.

  • You can make your component responsive only by using grid or flexbox and avoid using media queries.

  Using flex-wrap and flex, If you want to use flex. More info: flex-wrap.

  Using auto-fit and minmax(), If you want to use grid. More info: responsive-grid.

  • Also in picture element, you can use source so that you don't have to write anything on CSS and adding media query to change the image.

  More info on MDN.

  If you need further clarification, feel free to reach out to me.

  Keep up the good work.

  Marked as helpful

  1