Skip to content
OverviewSolutions
5
Comments
9

Angela Moore

@Cyber-Chic170 points

Aspiring programmer studying the basics of web development!

I’m currently learning...

HTML5, CSS & JavaScript.

Latest solutions

Latest comments

  • Angela Moore•170
    @Cyber-ChicPosted almost 2 years ago

    Wonderful job completing your first challenge! 😊

    In addition to the other feedback you've received for this challenge, I have a few more recommendations:

    • There are games you can play to learn how to center content. I suggest trying Flexbox Zombies, Froggy Flexbox and Grid Garden. All 3 of the games are free.

    • Change your background color. You used a slightly different color. To do this I would change your code from:

    background-color: #c4e4e9;

    to

    background-color: hsl(218, 44%, 22%);

    • Add a <h1> element to your code. All sites should include a minimum of one <h1> element to indicate the the most important (or highest-level) heading on a page.

    • Add a <main> tag around the main content on your webpage. All web pages should include one <main> tag. This is a semantic HTML element that defines the main content on a page such as primary sections, text, articles, etc.

    Example:

    <main>
  <div class='container'>
    <h1>Main heading text</h1>
    <p>paragraph text</p>
  </div>
</main>

    I hope this is helpful! Great work & Happy Coding!

    -Angie

    Marked as helpful
    0
  • Angela Moore•170
    @Cyber-ChicPosted almost 2 years ago

    Wonderful job completing your first challenge! 😊

    I have some recommendations that may improve your site:

    • Change your background color. You used a slightly different color. To do this I would change your code from:
    background-color: #e7ebf9;

    to

    background-color: hsl(218, 44%, 22%);

    • Add a <h1> element to your code. All sites should include a minimum of one <h1> element to indicate the the most important (or highest-level) heading on a page. To fix this, you could change your <h4> element to an <h1> element.

    • Add a <main> tag around the main content on your webpage. All web pages should include one <main> tag. This is a semantic HTML element that defines the main content on a page such as primary sections, text, articles, etc.

    Example:

    <main>
  <div class='container'>
    <h1>Main heading text</h1>
    <p>paragraph text</p>
  </div>
</main>
    • Your code does not look formatted. Formatting your code can make it easier to read. You can format your code using an automatic code formatter such as Prettier · Opinionated Code Formatter.

    I hope this is helpful! Great work & Happy Coding!

    -Angie

    Marked as helpful
    0
  • Angela Moore•170
    @Cyber-ChicPosted almost 2 years ago

    Great job starting your project! 😊

    I have not used Vite and am not sure if this is the information you're looking for, but I think my suggestion may be able to help you:

    I build all of my projects with StackBlitz. You link it to your GitHub account then select the type of project you are trying to create. I select the option to create a Static HTML page, but there are many other options to select including Vite. Your project starts with all of the folders you will need. For example, my Static HTML project starts of with a built in style-sheet, Index folder, JavaScript folder and a second HTML page. Once you are done you can instantly upload your project to GitHub. Additionally, you can also instantly upload your current GitHub Repository to StackBlitz and edit it there. It's a free site that's really easy to use and has helped me immensely.

    Hope this is helpful! Happy coding!

    -Angie

    Marked as helpful
    1
  • Angela Moore•170
    @Cyber-ChicPosted almost 2 years ago

    Your solution looks awesome! Great job completing your first challenge! 😊

    I have a one more recommendation that may improve your site:

    • Add a <h1> element to your code. All sites should include a minimum of one <h1> element to indicate the the most important (or highest-level) heading on a page.

    I hope this is helpful! Happy Coding!

    -Angie

    1
  • Angela Moore•170
    @Cyber-ChicPosted almost 2 years ago

    Wonderful job completing your first challenge! 😊

    I have a few small recommendations that may improve your site:

    • Add an alt attribute to your code. Alt attributes are required for all non decorative images on a website. The QR code on your site will be scanned. This means that the image is not considered decorative and will require a description. To fix this you could add the following to your <img> tag alt="QR code to frontendmentor.io"

    • Add a <main> tag around the main content on your webpage. All web pages should include a <main> tag. A <main> tag is a semantic HTML element that defines the main content on a page such as primary sections, text, articles, etc.

    Example:

    <main>
  <div class='container'>
    <h1>Main heading text</h1>
    <p>paragraph text</p>
  </div>
</main>

    I hope this is helpful! Great work & Happy Coding!

    -Angie

    Marked as helpful
    0
  • Angela Moore•170
    @Cyber-ChicPosted almost 2 years ago

    Your solution looks awesome! Wonderful job completing your first challenge! 😊

    I have a few small recommendations that may improve your site:

    • Add a <h1> element to your code. All sites should include a minimum of one <h1> element to indicate the the most important (or highest-level) heading on a page. To fix this, you could change your <h2> element to an <h1> element.

    • Add an alt attribute to your code. Alt attributes are required for all non decorative images on a website. The QR code on your site will be scanned. This means that the image is not considered decorative and will require a description. To fix this you could add the following to your <img> tag alt="QR code to frontendmentor.io".

    I hope this is helpful! Great work & Happy Coding!

    -Angie

    Marked as helpful
    0
View more comments