Skip to content
OverviewSolutions
7
Comments
7
eros77sc
@eros77sc

All comments

  • eros77sc•160
    @eros77scPosted about 1 month ago

    Hello,

    It's great that you completed another challenge! I would love to give you tips and comment on your code, but both your Live Site and GitHub returned a 404 Error! Anyway, congratulations on your achievement!

    Happy coding journey to you!

    0
  • HIGHZIKdc•60
    @HIGHZIKdcSubmitted about 1 month ago
    What are you most proud of, and what would you do differently next time?

    ....

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

    ....

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

    ....

    A Responsive Four Card Feature Section

    1
    eros77sc•160
    @eros77scPosted about 1 month ago

    Hello!

    Congrats on completing another step on Frontend Mentor! Here are a few things I noticed:

    • It's really cool that you chose the mobile-first approach. Besides making the code lighter for mobile users, it ends up being easier for us to write the code since with media queries, you just add things instead of removing them.
    • Something seems to have happened because in the Frontend Mentor screenshot, the page looks very similar to the original. However, when visiting the live site, the cards are spread out, taking up almost the entire width of the page in a row. I’d like to understand Grid better to give you some tips on how to fix this based on your code, but I'll owe you that one for now.
    • One small detail: the body background-color is that --clr-neutral-100: hsl(0, 0%, 98%) you declared, and the cards have the background color you set for them.

    Wishing you a great coding journey!

    0
  • manuel360•110
    @manuel360Submitted about 1 month ago
    What are you most proud of, and what would you do differently next time?

    Being able to insert background images and cleared original html image using visibility and overflow hidden

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

    My challenge was the desktop screen sizing i.e. horizontal layout which is the flex-row;

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

    Am still not that good in css framework but am a pure css person

    Product Preview Card

    1
    eros77sc•160
    @eros77scPosted about 1 month ago

    Hi!

    Great job on creating another page! Here are a few small things I noticed about your code:

    • Good idea using background-image; another possibility could have been to use the <picture> element, allowing the browser to choose the ideal image depending on the size, which would help reduce the amount of code needed for properties like visibility and background.
    • One tip you might want to apply is about the visual organization of your code: try to maintain consistent indentation for selectors, properties, and values. This makes it easier to read and locate information. The same applies to the spacing between each CSS rule.
    • The button could be created with a <button> element instead of <div class="button">, as it not only makes the HTML more semantic but also more accessible. In the end, it allows for the same CSS styling.
    • You mentioned that scaling for desktop was a challenge, but you did a great job! And the mobile version looks really good too.

    Happy coding, take care!

    Marked as helpful
    0
  • eros77sc•160
    @eros77scPosted 3 months ago

    Hello! Congratulations on completing another challenge, it's very well done! Here are a few tips I noticed where you can improve:

    • Your intro-text <h1> receives a color described in the styleguide.md file and also gets font-weight: 400;.
    • In the "Preparation time" section, there is a box surrounding the section with a subtle color (almost transparent) described in the styleguide.md file.
    • Great job using ::marker, but the color of the "Preparation time" markers is different from the other list markers. Also, the numerical list markers are bold.
    • The colors of the titles "Ingredients," "Instructions," "Nutrition," and the table numbers follow the same brown described in the styleguide.md.
    • To better use Semantic HTML, there is no need to use <span> in <li>. You can choose to use <strong> for the words highlighted in bold.

    Keep up the good work, you're doing great!

    Marked as helpful
    0
  • eros77sc•160
    @eros77scPosted 3 months ago

    Hello! I looked at your code and noticed that you placed the links in <button> elements. However, the href attribute is not used with <button> elements, so in this case, it would be ideal to use <a> elements and then style them as buttons using CSS.

    Marked as helpful
    0
  • eros77sc•160
    @eros77scPosted 3 months ago

    Hello, Mohamed! It's great that you're also on the Frontend Mentor journey. I liked your solution, and I'd like to give you some tips, if that's okay with you?

    • It would be helpful if you could review Semantic HTML, as it helps developers, browsers, and assistive technologies to function better. For example, replacing <div> with <main> or <footer>, and also checking the importance of the order of <h1> to <h6>.
    • The color of the "Learning" label is the same as the background!
    • There are other details like borders and box-shadow, and the border-radius could be larger, but I don't want to be too picky with you. You have your own learning journey ahead!
    Marked as helpful
    1
  • Megha S Patil•100
    @meghaspatil1Submitted 4 months ago
    What are you most proud of, and what would you do differently next time?

    I am proude of to post web in live page got to know in detail. web live using github pages, and how to make page responsive using google fonts.

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

    challenge was not able to fix image in box, it took a lot time to fix, but lot of fresh study i got the changes in px , height, weight, border-radius , i did it.

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

    i need help in css stylesheet,some more responsive page, and need to know any more better i would done to make it QR-component more good.

    Responsive page using google fonts

    2
    eros77sc•160
    @eros77scPosted 4 months ago

    Oi, Megha!

    Acabei de finalizar este desafio e vou te dizer... tentar centralizar esse card foi bem desafiante! Você pode tentar usar Flexbox para isso, eu usei assim:

    • Envolvi o <div> do card com um <main>, que também já auxilia a escrever um HTML semântico (lá naquele último <div class="attribution"> esse div pode ser trocado por footer pela mesma função), e no CSS fiz assim: html, body { background-color: hsl(212, 45%, 89%); height: 100%; margin: 0; display: flex; flex-direction: column; }

      main { flex: 1; padding: 0; margin: 0; display: flex; align-items: center; justify-content: center;
      }

    Isso traz o desafio de alinhar esse rodapé, o que também se faz com flexbox! Boa jornada e espero que você tenha ficado muito feliz por ter construído uma página, celebremos!

    0