Skip to content
OverviewSolutions
26
Comments
239

romila

@romila2003England3,550 points

Hi 👋 and thanks for checking out my profile. I am an undergraduate (university) student, studying Education Studies, and am I'm learning about web/front-end development as a hobby, in my free time. My current skills include HTML, CSS/SCSS and basic JS.

I’m currently learning...

Javascript.

Latest solutions

View more solutions

Latest comments

  • romila•3,550
    @romila2003Posted over 2 years ago

    Hi @101Amine,

    Congratulations for 🎉 for completing another challenge, the CSS grid looks great and is responsive. It is also great that you used the right semantic. There are some suggestions I want to give:

    1. I'm not sure if you know or did it by purpose but on top of the people's names, there are numbers e.g. '11111'
    2. In mobile screen (375px), the Jonathon, Klara and Jeanette cards look quite squashed however Daniel's and Patrick's cards look great. I would suggest making it so that there is just 1 column in mobile screen.

    CSS Grid can be hard/difficult in the beginning however once you get used to it, it will come more naturally so it is great that you now understand the concept. Overall, great work and wish you the best for your future projects 👍.

    Marked as helpful
    0
  • romila•3,550
    @romila2003Posted over 2 years ago

    Hi Vittorio,

    Congratulations for 🎉 for completing your first challenge, the API looks great and is functional. It is great that you used the right semantic and the flex property to center the card. There are some suggestions I want to give:

    1. Your button is missing the type attribute
    2. Since you already gave your .container a max-width, you do not need to have a media query. Instead, you can give your body a margin property to prevent the card touching the side of the screen e.g. margin: 0 10px;
    3. Even though your API is functional on normal browsers, it won't work on Firefox without the clear cache e.g. fetch(URL, {cache: 'no-cache'})

    Overall, great work and wish you the best for your future projects 👍.

    0
  • romila•3,550
    @romila2003Posted over 2 years ago

    Hi Em-ee24,

    Congratulations 🎉 for completing this challenge, your Time tracking dashboard component looks great, and it is great that you used CSS Grid to arrange the cards. I have some suggestions I want to address:

    1. Even though, it is great that you wrapped the main content within the main tag, you should also wrap the footer within the footer tag e.g. <footer class="attribution"></footer>
    2. Your images are missing the alt attribute which is essential for all images
    3. I noticed that all of your CSS and JavaScript is within your HTML file. I would recommend you using separate files as it will be easier for organisation.
    4. In desktop mode, you can use the flex property to center the card e.g.
    body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  flex-direction: column;
}

    Overall, great work and wish you the best for your future projects so keep coding 👍.

    Marked as helpful
    0
  • romila•3,550
    @romila2003Posted over 2 years ago

    Hi Bruno,

    Congratulations 🎉 for completing this challenge, your API component looks great, and it is great that you used flex to center the card. I have some suggestions I want to address:

    1. It is best practice to wrap the main content within the main tag which would ensure that your content is wrapped within the correct landmarks e.g. <main class="container"></main>
    2. Since you have a max-width on your card, there is no need to use a media query.
    3. Even though your API is functional on normal browsers, it won't work on Firefox without the clear cache e.g. fetch(URL, {cache: 'no-cache'})

    Overall, great work and wish you the best for your future projects 👍.

    0
  • romila•3,550
    @romila2003Posted over 2 years ago

    Hi David,

    Congratulations 🎉 for completing this challenge, your FAQ component looks great, and it is great that you used flex to center the card. There are some issues/suggestions I want to address:

    1. It is best practice to wrap the main content within the main tag which would ensure that your content is wrapped within the correct landmarks e.g. <main class="container"></main>
    2. To fix the background issue, you can change the value of height to 100vh so that it covers everything. Also, it is not good to give the body tag, a fixed width property such as 365px or 1440px as this will affect the inner content as well.
    3. I noticed that you took a desktop-first approach however I would strongly encourage you to use the mobile-first approach as it will help with responsiveness and rearranging/changing elements within your body. Also, it is best practice to do so.
    4. In the section tag, you need to use at least 1 header (any between h2 to h6) therefore, you should not nest your img tags within this semantic. You could use the picture tag instead.
    5. Regarding the functionality of your JS, it works however when you click on the same arrow again after it has already been clicked, the Q and A won't close.

    Overall, great work and project and wish you the best for your future projects so keep coding 👍.

    0
  • romila•3,550
    @romila2003Posted over 2 years ago

    Hi Lalit,

    Welcome to the frontend mentor community and congratulations for 🎉 for completing your first challenge, the card looks great. I found some issues I want to address:

    1. It is best practice to wrap the main content within the main tag which would ensure that your content is wrapped within the correct landmarks e.g. <main class="container"></main>
    2. You are missing the title tag within your head tag e.g. <title>QR code component</title>
    3. Your img tag is missing the alt tag.
    4. Rather than using the margin-top property to center the card, you can use flex property instead e.g.
    body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}

    Overall, great attempt and wish you the best for your future projects so keep coding 👍.

    0
View more comments