Skip to content
OverviewSolutions
7
Comments
2
Vanessa M.
@mendezpvi

All comments

  • Vanessa M.•90
    @mendezpviPosted 8 days ago

    Hi @aeleneh, nice job.

    I have some observations:

    • You can replace some div's with semantic tags:
      • The heading class with a <header> tag.
      • The card-grid class with a <section> tag.
      • Each card can be an <article>.
    • As for the title, I consider it to be one line: Reliable, efficient delivery Powered by Technology
      • You can separate it by wrapping the Powered by Technology part in a <span> and styling it.
    • Avoid styling directly in the HTML.
      • The width and height of the image can be managed from the CSS.
    • Give the <main> a minimum and maximum width in pixels:
      • When you test it in the inspector, it either gets too narrow or it expands too much.

    Here is a link to my solution, which is based on a mobile-first approach. You can take a look at it and maybe you will find some useful information.

    0
  • Vanessa M.•90
    @mendezpviPosted 11 days ago

    Hi Hager Yasser, here are some observations:

    1. Create a separate CSS file.
    2. IDs should be reserved for JavaScript interactions. Use classes (class) instead for styling.
    3. Use semantic tags:
    • id="main-container" should be <main>.
    • id="firstRow" or similar IDs should be <section>.
    1. Fix the content structure:
    • id="offers" replace it with an <h2>
    • id="tutorial" appears to represent a list; replace it with an unordered list <ul> and use <li> for its items.
    1. In the href attribute of the link inside the attribution section, include the URL to your repository.
    2. No need to reset the body padding, browsers already apply a default padding of 0, so resetting it is unnecessary.
    3. The current background color doesn’t match the design. Make sure to use the color specified in the project’s style guide.

    Happy coding!

    Marked as helpful
    0