Skip to content
OverviewSolutions
6
Comments
7
P
mpujazon
@mpujazon

All comments

  • P
    mpujazon•120
    @mpujazonPosted about 16 hours ago

    Hello @ADR-39,

    I really like your solution!

    I’d recommend setting the ´height´ to ´100vh´ to help center the grid section vertically.

    Great CSS work and nice job making it mobile-first!

    Best regards, Miguel

    0
  • Paul Wonka•160
    @pdoubleu30Submitted 4 days ago
    What are you most proud of, and what would you do differently next time?

    Proud to have utilized grid for the first time. I would try to do this challenge quicker and more accurately next time.

    What challenges did you encounter, and how did you overcome them?

    I had challenges implementing grid but utilized online resources to help work through it.

    What specific areas of your project would you like help with?

    anything and everything. i'm new to coding but would love any feedback to improve, especially to reduce the amount of code.

    css, html, grid

    2
    P
    mpujazon•120
    @mpujazonPosted 3 days ago

    Hello @pdoubleu30!

    I think your solution is very accurate, even without seeing the design file, you have a great eye!

    Good use of semantic HTML tags, and it seems to be nicely responsive.

    I would also recommend paying a bit more attention to code indentation, as it really improves readability.

    Regarding the CSS, I suggest using variables to store your colors. This helps reduce repetition and makes the code easier to maintain. You can declare them in the :root selector like this:

    :root{
    /* Color Variables */
    --grey-500: #4D4F62;
    --grey-400: #6A7178;
    --white: #FAFAFA;
    --red: #EA5454;
    --cyan: #44D3D2;
    --blue: #549EF2;
    --orange: #FCAE4A;
}

    You can then use it like this:

    body{
    color: var(--grey-500);
    background-color: var(--white);
}

    I also recommend using grid-template-areas to position your cards in the grid, I think it's easier to work with.

    Congratulations on your code — keep coding!

    Marked as helpful
    1
  • P
    mpujazon•120
    @mpujazonPosted 5 days ago

    Hello Franck, Nice work! Keep using semantic HTML tags as you have been—they're well applied. The page is responsive across a wide range of screen sizes.

    I appreciate your use of relative units like rem, and it's great to see that you followed a mobile-first approach.

    Moreover, your solution is nearly pixel-perfect compared to the design.

    Congratulations—keep it up!

    0
  • P
    mpujazon•120
    @mpujazonPosted 17 days ago

    Hello @ruhit1000!

    I have reviewed your code, and I really like your coding style.

    In the HTML, you used semantic tags and meaningful class names, and the structure is well-organized. I noticed a small indentation issue on lines 22-24, but it's nothing to worry about.

    In the CSS, I find the way you declare variables very clean and useful -I’ll take note of that for my future projects-.

    I also noticed that you use the rem unit, which makes the responsive behavior work very well.

    Kind regards!

    Marked as helpful
    0
  • P
    mpujazon•120
    @mpujazonPosted 17 days ago

    Hello @LeboucFranck!

    I have reviewed your code and really appreciate the solution you provided.

    First of all, I find your HTML code very readable, semantic, and well-structured.

    From my perspective, your solution looks pixel-perfect, congratulations!

    Kind regards.

    1
  • wawawoh•180
    @wawawohSubmitted 18 days ago
    What challenges did you encounter, and how did you overcome them?

    media previews

    What specific areas of your project would you like help with?

    any feedback is helpful

    Blog preview card

    3
    P
    mpujazon•120
    @mpujazonPosted 17 days ago

    Hello @wawawoh! I can see that the card is not centered on the screen. You are using Flex, but it is not centering the card. To fix this, you need to specify the height of the container that holds the card—in this case, the body. The following code will display it correctly:

    body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh; /* Ensures full height of the viewport */
  width: 100vw; /* Ensures full width of the viewport */
  margin: 0; /* Removes default margin */
}

    Kind regards.

    0
  • jad7121•10
    @jad7121Submitted 18 days ago
    What are you most proud of, and what would you do differently next time?

    I am most proud of to be able to make the design responsive. In every webpage or web design , a key component is to make it responsive both web and mobile formats

    What challenges did you encounter, and how did you overcome them?

    I had no challenges since i already had enough skills in Html and Css

    What specific areas of your project would you like help with?

    I have been able to develop what i was told to. I do not need help for now

    Responsive QR CODE design using Html and Css

    1
    P
    mpujazon•120
    @mpujazonPosted 18 days ago

    Hello @jad7121! I reviewed your code and I recommend not specifying the <img> width directly in the HTML. It would be better to handle it in the CSS for more flexibility and cleaner structure.

    Also, I couldn't preview how the responsive design works because the page isn't displaying correctly. I noticed a typo in your file name, it's written as iindex.html. I suggest renaming it to index.html so the page can load properly. Once that's fixed, don't forget to generate a new screenshot to compare your solution with the expected result.

    Happy coding!

    0