Profile-Card-Component-Solution

Community feedback

• 

  Bryan Li•3,530

  @Zy8712Posted about 1 year ago

  Your site looks pretty good. To add in the two circles to the background you need to use background-image and background-position. Here is what I did:

    background-color: var(--theme-dark-cyan);
    background-image: url("./images/bg-pattern-top.svg"), url("./images/bg-pattern-bottom.svg");
    background-repeat: no-repeat, no-repeat;
    background-position: right 52vw bottom 35vh, left 48vw top 52vh;
    /* top img is offset 52 percent of the vw from the right and offset 35 of the vh from the bottom*/
    /* bottom img is offset 48 percent of the vw from the left and offset 52 of the vh from the top*/
  

  Hope you find this useful 👍

  Marked as helpful

  1

  ---

  

  Gerardo Garcia•170

  @GGSWEngineerPosted about 1 year ago

  @Zy8712 this was just the comment I needed, thank you!

  0
• 

  Mennatallah Hesham•1,490

  @Mennatallah-HishamPosted about 1 year ago

  Hi Gerardo,

  I can see your effort, You did great 👍

  Here are some suggestions to improve your code:

  Headings

  • each page should have one h1 tag,h1 helps the web understand the content. also skipping h1 may confuse assistive technology users.

   <h1>Victor Crest</h1>
  

  ALT

  • images should have descriptive alt text, which is important for SEO and screen reader users

  <img src="" alt=" Headshot of Victor Crest"
  

  Accessibility

  • you can use aria-labelledby to define a name/relation between the number and their titles for screen readers

  <p aria-labelledby="title">80k <p>
  <p id="title"> follower </p>
  
  

  SEO

  • you can add meta description for better SEO, it provides a brief summary of a web page

  <meta name="description" content="..........."/>  
  

  here are some helpful articles:

  • headings best practices

  • headshot alt

  • alt text

  • meta description

  • aria-labeledby

  hope you find this helpful. Happy Coding

  Marked as helpful

  0

  ---

  

  Gerardo Garcia•170

  @GGSWEngineerPosted about 1 year ago

  @Mennatallah-Hisham hi! thank you for your comment, made the changes and its looking much better!

  0