Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

All comments

  • P
    Michał• 80

    @Michal-Majchrzak

    Posted

    Hey Ramkumar 👋, your solution looks really good and faithful to the original design. Your CSS code is also well organized and readable.

    Keep up the good work 👍 and Happy coding 😀

    0
  • Anuska Jose• 10

    @JoseRaiders

    Submitted

    What are you most proud of, and what would you do differently next time?

    I am most proud of the following:

    • Responsive design: the card adapts well to the two given screen sizes (mobile: 375px & desktop: 1440px), which is a huge accomplishment for me. Ensuring a consistent user experience across devices is key.
    • Pixel-perfect implementation: Although the Figma design didn't mention all the dimensions, I did my best to match the design as closely as possible, especially when considering details like spacing, colors, and typography.
    • Code structure: I kept my HTML and CSS as organized as possible making use of the BEM methodology and semantics.
    • Hover effect: Subtle interactions like the hover state over the title adds an elevation for user experience.
    • CSS variables: Implementing variables for colors, fonts, and sizes would make future changes or theme switching easier.
    • Flexbox: While the card may look great, digging into more advanced CSS layout techniques like Flex provides more control over responsiveness and creative possibilities.

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

    Achieving the responsive design was the challenge. Having to ensure that the blog card looks good across different screen sizes can be tricky, especially when dealing with image scaling and maintaining layout consistency. I overcame this by the use of media queries. Media queries help to adjust the layout and make the design responsive.

    Also, matching the design to the pixel-perfect was another challenge, especially with spacing and font weights. To combat this challenge, I did the best I could with what the Figma design provided.

    Blog Preview Card

    1

    P
    Michał• 80

    @Michal-Majchrzak

    Posted

    Hey Anuska 👋, congrats on finishing challenge, i like your solution it looks really good.

    If you don't mind i have one suggestion. In the design for the mobile view the main image is cropped on the left and right side, you can achive this result by using object-fit: cover property on the img element and in the same time setting width and height of the img. By using object-fit: cover browser will try to fill rectangle of the img element but image will keep original aspect ratio.

    I hope this was helpful, Happy coding😄

    0
  • Matthew Lancaster• 120

    @lank81

    Submitted

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

    I'm still having issues with my media query. I tried to change the image and border radius when shrinking to 768 or less. I wasn't seeing the results I expected. I tried to have ChatGPT and GitHub Co-Pilot look over my work and there were no suggestions to fix my issue.

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

    Media Queries

    Product Page Preview Challenge

    2

    P
    Michał• 80

    @Michal-Majchrzak

    Posted

    Hey @Matthew 👋, here are some suggestions that may help you with this challenge

    • to change product image based on viewport width you can use picture and source elements inside HTML file. This resource: Responsive Images helped me to implement this in my solution.

    • inside your .container class you can change flex-direction to column when width is less than 768 px so the image would be displayed on top.

    • additionaly inside media query you are using > to apply styles to img element that is direct child of the element with .container class.

    .container > img {
      border-top-left-radius: .625rem;
      border-top-right-radius: .625rem;
    }

    This rule is not applied because direct children of .container are divs with .column class. You can change this to .container > .column > img then top-left and top-right border radius will be applied to image.

    I hope this is helpful, Happy Coding😀

    Marked as helpful

    1
  • P
    Michał• 80

    @Michal-Majchrzak

    Posted

    Hey @aohinoyi 👋, great job on finishing the challenge

    I have some suggestions to help improve your solution :

    • text inside h2 and p elements should be switched in places. In the design the heading is Improve your front-end skills by building projects and the rest is in paragraph.
    • there is additional left and right padding between text and edges of the QR image, you can add it to your .card-text class to make your solution look more like the design.

    Happy Coding 😀💻

    Marked as helpful

    0