Html css and bootstrap solution of profile card

Community feedback

• 

  Raymart Pamplona•16,100

  @pikapikamartPosted about 3 years ago

  Hey, great work on this one. The layout both desktop and mobile seems fine, but the background of circle are missing.

  Checking your repo, on your body tag, instead of using the / path, this is for root path, but on github, it doesn't work that way, you need a relative path from your css. The declaration for your background should start ../ since your css and images have different folder. ../ means go up by one level.

  Some other suggestions would be:

  • The alt text on the card, on the little circles, it should have been left empty like alt="". Do not use alt="..." something like those, if a image is meaningful, add a descriptive alt, if the image is for decoration, use alt="".
  • The alt text of the person should have been that person's name, like `alt="victor crest".
  • Do not start using heading tag from h5 or other, use h1 first and use other headings tags, but only incrementally adding 1 level to the previous heading tag you use. Example, you used h1 then you should have h2 as the next heading and not h3 or h4. Do not skip.
  • ul element should not have another direct child element except for li element.

  <ul>
    <li></li> # no other element should be a direct child except for li
  </ul>
  

  Just a solution suggestions, you could check this solution, it is from Grace. You can see some sr-only text also in there which is really great when supporting screen reader users.

  Aside from those, great job.

  Marked as helpful

  0

  ---

  

  faiyaz rahman•260

  @faiyaz-rahman13Posted about 3 years ago

  @pikamart thanks for pointing out my mistakes and it was very helpful also but still now I didn't understand why my background isn't working on GitHub although it is working on my desktop. and thanks for the suggestion I will try to implement those h1 tags and then others and thanks for the solution suggestion also from grace it was very helpful. and please kindly show me how to fix that background thing . thank you

  0

  

  Raymart Pamplona•16,100

  @pikapikamartPosted about 3 years ago

  @faiyaz-rahman13 Hey, as you can see:

  background-image: url(images/bg-pattern-top.svg), url(images/bg-pattern-bottom.svg);
  

  That is your declaration in the body tag right. Now, looking at your folder structure, you have these:

  css
    - > style.css
  images
    - > all the images inside here
  design
  .....
  

  Now, on your local machine, using the path / works, because the root on the local machine, points to the same folder we are working with, but using / in github won't work, it does point to something else.

  Now, instead of your before background-image declaration, you should do these:

  background-image: url("../images/bg-pattern-top.svg"), url("../images/bg-pattern-bottom.svg");
  

  As you can see, I added the ../ path, this means, whatever directory I am in, go up top by one level, since your style.css is inside the css folder right, if I use the ../ it would go up top. Example

  css
    | -> style.css # I am in here
  images
    | -> the images that you need is in here
  
    If I use background: url("../"): below
  
  css # I will be here
    | -> style.css
  images
    | -> images that you need is in here
  
  After that, I could now target the images folder, since I am at the same level as it is, and use the
  
  background-image: url("../images/bg-pattern-top.svg"), url("../images/bg-pattern-bottom.svg");
  

  Marked as helpful

  0

  

  faiyaz rahman•260

  @faiyaz-rahman13Posted about 3 years ago

  @pikamart thank you so much for your help. your advice is really helpful. I have completed another challenge please check out that solution. I would love to know how can I improve my skill and make them more efficient. thank you😊.

  0