Skip to content
OverviewSolutions
7
Comments
8
Ashish Kumar
@0KAshish

All comments

  • Ashish Kumar•140
    @0KAshish

    Hello there! 👋

    Great job on continuing your work with the Testimonials grid section!
    You're making solid progress, and your efforts are clearly visible. 🚀

    Here is one thing I want to say that you forgot to add double inverted symbol image in first card background your font family looks cool.

    You're on the right track with a clean and thoughtful structure.
    Keep up the great work—and happy coding! 😊

  • william nyaranga•80
    @William-nyarash
    What challenges did you encounter, and how did you overcome them?

    coming up with the desktop layout for the four cards as per the given design. Any help on how I can easily come up with such layouts

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

    Layout, how to position elements on a certain layout arrangement.

    Responsive four card layout

    2
    Ashish Kumar•140
    @0KAshish

    Hello there! 👋

    Great job on continuing your work with the Four card feature section!
    You're making solid progress, and your efforts are clearly visible. 🚀

    Here are a few suggestions to help refine your solution further:

    • You haven’t used an h1 tag for the main heading—consider adding it for better accessibility and structure.
    • Instead of using a <div> to show the top border color on each card, try using CSS like:
      border-top: 5px solid red; (or cyan, orange, or blue based on your design)
    • In mobile view, the top heading and paragraph are not centered—adjust text alignment or use flexbox to center them properly.
    • In desktop view, the four-card section is not centered. Consider using flex/grid layout and margin utilities to center the content on the page.
    • Be sure to maintain the correct typography and color combinations as specified in the design.

    All the relevant details—such as font styles, and colors are available in the style-guide.md file. Make sure to refer to it for precise implementation. ✨

    You're on the right track with a clean and thoughtful structure.
    Keep up the great work—and happy coding! 😊

    Marked as helpful
  • Ashish Kumar•140
    @0KAshish

    Hello there! 👋

    Great job on building the product-preview-card-component-main!
    You've done an impressive job applying layout and styling principles. 🚀

    Your layout and structure look good, but here are a few suggestions to make it even better:

    • Try to closely follow the design provided.
    • It seems the specified font family wasn’t applied.
    • The paragraph color could better match the style guide.
    • The spacing between elements needs slight adjustment for better alignment.
    • The body background color doesn't fully match the design specs.

    All the necessary details—including colors, fonts, font weights, and spacing—are available in the style-guide.md file. Be sure to review it carefully for a more polished and accurate result. ✨

    Overall, this is a clean, thoughtful, and well-executed solution.
    Keep up the amazing work—and happy coding! 😊

  • Ashish Kumar•140
    @0KAshish

    Hey, I wasn’t able to access your code files. I think your repository might be private, which is why it’s not visible. Could you please make it public so I can take a look?

  • Randy Sekyere•40
    @Randy-22
    What challenges did you encounter, and how did you overcome them?

    One important lesson I learned from this project is that custom styling for each element on a webpage can be challenging and confusing if not planned carefully. What really helped me manage this complexity was using BEM (Block Element Modifier) naming conventions for my HTML elements. This approach made it easier to structure and apply consistent styles across the project.

    I also realized that setting margins and padding requires thoughtful planning. Every spacing decision affects the overall layout, so it’s important to be precise and consistent to maintain visual balance and avoid clutter.

    A Responsive Recipe page

    2
    Ashish Kumar•140
    @0KAshish

    Hello there 👋 Great job on building the Recipe Page!

    You've done an impressive job applying layout and styling principles.

    • 🎯 Layout & Structure:
      Your .recipe layout is very well-executed—responsive at every breakpoint! Honestly, I was amazed by how clean and flexible your layout is. I even tried to replicate it myself, but my version got a bit too complicated 😅. Your grasp of CSS is clearly solid. I'd love to connect and learn more from you if you're open to it!

    • ✨ Styling:
      The color palette and hover effects are spot on. I also appreciate how well you handled responsiveness with media queries. Using :root for design tokens is a great touch—makes your styles easy to manage and scale. Awesome work!

    Overall, this is a clean, thoughtful, and well-executed solution. 🚀

    Keep up the amazing work—and happy coding! 😊

    Marked as helpful
  • Gregor de Cillia•190
    @GregorDeCillia
    What specific areas of your project would you like help with?

    I am still not sure what the right strategy for the responsive card width/padding is. It seems to match up in the sizes from the designs but there might be a more elegant way (with clamp?) for those two properties.

    Responsive card with social link buttons

    2
    Ashish Kumar•140
    @0KAshish

    Hello there 👋. Great job on building the Social Links Profile card!

    You've done well applying layout and styling principles. Here's a quick review with some suggestions to improve your code:

    • 🎯 Layout & Structure:
      Your use of Flexbox and the centered .card layout is solid! Using margin: auto with a flex parent is a great way to center elements vertically.

    • ✨ Styling:
      The color palette and hover effects are on point and responsive design is nicely handled with the media query. Great job using :root for design tokens!

    🛠 Suggestions for improvement:

    • 🔁 Use semantic HTML:
      Consider using <a> tags for the social links instead of <button>. These are links to external sites, so semantically, anchor tags are more appropriate.

    • 🧹 Clean up unused rules:
      Currently, all buttons are <button> elements but are functioning as links. Also, you may want to remove or rework the .attribution absolute positioning if it causes overlap in smaller viewports.

    • 📱 Mobile tweaks:
      You already have responsive padding on the card — nice! Just ensure that the layout doesn’t get too squished on smaller devices (e.g., padding around buttons can be reduced slightly if needed).

    Overall, this is a clean and solid solution. With just a few semantic improvements, it’ll be even better! 🚀

    Happy coding! 😊

    Marked as helpful
  • Ashish Kumar•140
    @0KAshish

    Hello there 👋. Good job on completing the challenge!

    I was also trying to get the exact design, but it looks different on comparing however everything is according to design well your code looks good:

    😊The solution you submitted is solid.

    Happy coding!

  • kieranichiban•30
    @kieranichiban
    What are you most proud of, and what would you do differently next time?

    This was a decently straight forward. I decided to change up the colors a bit and just the general size of the card. I thought it was a little big at first

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

    my biggest challenge was getting github and git desktop set up. i think i finally did it though!

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

    i didnt add the mobile version yet but was planning on adding a media query page. Just wanted to get some feed back on my initial code. is it too complicated?

    QR code HTML and CSS

    1
    Ashish Kumar•140
    @0KAshish

    Hello there 👋. Good job on completing the challenge!

    I have some suggestions about your code that might interest you:

    • 🔧 If you're trying to center your QR component, you've used unnecessary CSS. You can achieve the same result more cleanly using either CSS Grid or Flexbox.

    Here’s an example using Grid:

    body {
  width: 100%;
  height: 100vh;
  display: grid;
  place-content: center;
}

    And here’s how you can do it with Flexbox:

    body {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

    These methods are more concise and recommended for centering content both horizontally and vertically.

    • 🎨 Try to maintain the design system by keeping consistent values for:
      • Background color
      • Height & width
      • Font color
      • Spacing

    Sticking to the provided design system improves visual consistency and makes your code more professional.

    • 🧹 There seems to be a lot of unused CSS in your stylesheet. Cleaning that up will make your code easier to read and maintain.

    I hope you find it useful! 😊 Overall, the solution you submitted is solid but could use a few quick fixes. Keep it up!

    Happy coding!