Skip to content
OverviewSolutions
19
Comments
8
H.N.S
@hns-dev

All comments

  • Masseh•210
    @Masseh2025Submitted 5 months ago
    What are you most proud of, and what would you do differently next time?

    Im proud of how responsive it is. I think one thing I would do differently next time was give a set time and try to complete the project because often times I seem to doze off elsewhere.

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

    The challanges I encountered was that for the most right card it was kind of hard to make it go there instead of the Jenneate card. I overcame it by trying out different solutions intill I found one that works.

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

    Not really anything specific, and feedback would be helpful.

    Testimonial grid section

    1
    H.N.S•310
    @hns-devPosted 5 months ago

    Great job! Nothing really to add! Keep up the good work! :)

    1
  • ddhay•1,280
    @ddhaySubmitted 5 months ago
    What are you most proud of, and what would you do differently next time?

    Responsive views for multiple devices

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

    No challenges. Production went smoothly.

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

    none

    Responsive four card feature section built using Webflow

    1
    H.N.S•310
    @hns-devPosted 5 months ago

    Great job, I have nothing to comment on. Happy coding! :)

    0
  • Maan Al-Hababi•190
    @MaanAlHababiSubmitted 5 months ago
    What challenges did you encounter, and how did you overcome them?

    Responsive Images! I had to learn about them, and I would appreciate feedback on my approach to styling them.

    I did also encounter problems with flex alignment. The 'Add to Cart' button refused to be aligned to the bottom of my '.product-details' container when it should since I set align-self: flex-end given

    display: flex;
flex-direction: column;
}

    Product Preview Card

    1
    H.N.S•310
    @hns-devPosted 5 months ago

    Hi MaanAlHababi! Good job on completing the challenge!

    It's not that align-self: flex-end didn't work, but there wasn't really any space left to push it down. You can check that in the web dev tool in your browser by clicking on the flex tag beside the element.

    You could add the following line to fill the space in product-details evenly:

    .product-details{
 justify-content: center;
}

    Also, It's recommended not to set a specific height. If you really need to, use min-height property. Setting a specific height lead to responsiveness problems (in your case, the content overflow the product card, and it affected the image a bit.).

    I'm not used to giving feedbacks, so if I wasn't clear enough, let me know. ^^

    Marked as helpful
    0
  • H.N.S•310
    @hns-devPosted 5 months ago

    Good job on completing the challenge!

    Other than the spacing and font family, everything looks perfect! 👏👏 also, I think it's best practice to put the styles in a separate file and avoid inline styling if possible, because it might become hard to edit or manage later on.

    Happy coding! ^^

    0
  • jcoms2003•100
    @jcoms2003Submitted 5 months ago
    What are you most proud of, and what would you do differently next time?

    Set a 30 minute timer and completed it in under! I need to keep working with flex to become more fluent.

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

    No challenges really, just messing with flexbox and its all trial and error.

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

    Just anything if you can find issues. Or, even just recommendations. Thanks in advance.

    Social Links page using flexbox

    1
    H.N.S•310
    @hns-devPosted 5 months ago

    Good job on completing the challenge!

    To make the code more semantic, I'd recommend using "ul" tag for the list of social media links.

    In term of sizes and spaces, I think you could make your solution more closer to the design, although I know how hard it is if you only have the Jpg images (Guessing the numbers was the hardest part for me, too😅)

    Happy coding! ^^

    Marked as helpful
    0
  • Rayco21•130
    @Rayco21Submitted 6 months ago
    What are you most proud of, and what would you do differently next time?

    most proud of being able to solve problems patiently and try out different solutions, which reinforce my knowledge

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

    learned how I can use line-height to center text vertically within a div, width: fit-content to make the width of a block level element to take up only as much space as content needs and img by default is an inline element, which will create a whitespace/line break causing it's container has more height and can be solved by setting its display: block

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

    not anything particularly, would like to know if there's anything I could do better :D

    basic html/css

    1
    H.N.S•310
    @hns-devPosted 6 months ago

    Good job completing this challenge, Rayco!

    It was interesting to see how we tackled some parts differently.

    Here is a hint on how to handle the font size change on different screen sizes without using media queries: clamp(): CSS function

    Happy coding!

    Marked as helpful
    0
  • Denveur•150
    @denveurSubmitted 6 months ago
    What are you most proud of, and what would you do differently next time?

    my determination

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

    the color to use on the projrct

    QR code component

    1
    H.N.S•310
    @hns-devPosted 6 months ago

    Hi, Denveur! Good job on this challenge!

    As this challenge is Free+, all users have access to the design file. You can open the figma file and check which color is used for any part of the design. Personally, when I don't have access to figma files, I use a browser extension called "ColorPick Eyedropper".

    I took a look at your code, here are some improvements you can make:

    • use heading elements for headings instead of <b> element

    Replace this

    <div class="h3"><b>improve your front-end skills by building projects</b></div>

    with this

    <h3>Improve your front-end skills by building projects</h3>

    • Take the attribution block out of the "content" div

    You can put it right before the closing tag of the "container" div. It'll appear next to the card. You can fix that by adding this CSS property in the container class

    flex-direction: column;

    Hope you find this useful :)

    Marked as helpful
    0
  • Nafsuki•245
    @NafsukiSubmitted almost 4 years ago

    I coded desktop first, mobile responsive slider using Sass and flexbox layout. User can use either mouse click/ keyboard left + right arrow key, trackpad & touch screen swipe to slide the testimonials☺️

    -My questions: <1> I tried to change the size of the svg icons smaller for the mobile version, but by changing its width & height, I couldn't make it happen. I googled about it but couldn't find a clue. <2> My screenshot of this challenge looks terrible even after taking a new one🙀 It doesn't look so broken as the screenshot in the real preview for me. So I'm confused. Any idea how I can fix that..?

    If you know how to do it, please let me know:))

    Any feedback & suggestion for improvement would be very much appreciated ☺️🙏!!

    Coding Bootcamp Testimonials Slider using Sass & JS

    1
    H.N.S•310
    @hns-devPosted almost 4 years ago

    I had the same problem with sizing the svg icons. https://css-tricks.com/scale-svg/#the-viewbox-attribute This article and the slack community helped me.

    In short, use svg viewBox attribute to resize svg images. Then, change the height and width using css.

    0