Skip to content
OverviewSolutions
5
Comments
5
Hrid Chakraborty
@hrid-chakraborty

All comments

  • Hrid Chakraborty•70
    @hrid-chakrabortyPosted 18 days ago

    Awesome work!! The card looks great!!

    I have a few observations/suggestions which I hope will help you:

    1. For the body style, the min-width has been set to 100vh instead of 100vw (maybe a typo). Setting this to 100vw makes it much more responsive.

    The affected code block:

    body {
    min-width: 100vh;  // Change this to 100vw
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--Cream);
}

       

    1. It is recommended to use semantic html (eg. <article>, <header> etc.) over plain <div> and <span> as it offers more meaning and has several benefits:
    • It helps search engines index the content properly.
    • It also enables screen readers and other assistive technologies to communicate elements properly to the user.
    0
  • Shakthivel Ramesh Nirmala•50
    @shakthivel-rnSubmitted about 1 month ago
    What are you most proud of, and what would you do differently next time?

    I learned about specificity of rules when using media queries to make the website responsive

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

    It was difficult to make the website responsive, because for mobile layout, there was new set of changes that was different from tablet and desktop layout

    Recipe Page using HTML and CSS

    2
    Hrid Chakraborty•70
    @hrid-chakrabortyPosted about 1 month ago

    Amazing attention to detail. The website looks really close to the original design. Moreover, it is very responsive.

    0
  • HM-Jubaer•80
    @HM-JubaerSubmitted about 1 month ago
    What challenges did you encounter, and how did you overcome them?

    Designing without Figma can be quite challenging. I really hope Frontend Mentor starts providing free Figma files for projects from the Newbie to Junior levels.

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

    I'd take any advice!

    Social Links Profile

    2
    Hrid Chakraborty•70
    @hrid-chakrabortyPosted about 1 month ago

    The blog card which you have built is truly impressive. A very good use of transform on the card and transition on the button. In fact, I got to learn a lot from your code.

    I have a very small suggestion: Changing the cursor to a pointer on hover could improve user experience. It can be done like so:

    .btn {
   cursor: pointer;
}
    Marked as helpful
    1
  • Hrid Chakraborty•70
    @hrid-chakrabortyPosted about 1 month ago

    The blog card that you have built is excellent.

    To make it perfect, you could add a hover effect to change text to yellow on the blog title. (As mentioned in the "challenge" section of README.md). Also, a custom README.md file (not the one provided by frontendmentor.io) would be very helpful.

    0
  • Hrid Chakraborty•70
    @hrid-chakrabortyPosted about 1 month ago

    I would like to start by saying that you have built the QR component really well.

    Here are some observations/suggestions which I hope are helpful:

    1. When opening the website, the card appears on the bottom middle section of the page instead of the center.
    2. When resizing the window, the card is appearing on the left of the page. (Hint: both these problems can be solved using flexbox )
    3. It would be best practice to put the styles in a separate .css file. Improves code readability.
    4. Just a small nitpick, but it would look much nicer if some more padding is added inside the card. Also, you could use custom fonts (like Outline from style-guide.md) from Google fonts.

    Overall, the component looks really nice. I hope my feedback has been helpful.

    0