Community Feedback

    • HTML
    • CSS

    Three Column design using Mobile first approach, HTML, CSS & Emmet

    2
    kens_visuals2,855 | Posted 3 minutes agocommented on Muaaz08's "3-column preview card component" solution

    Hey @Muaaz08 πŸ‘‹πŸ»

    I have some suggestions to help you fix the accessibility issues and some other things.

    • In your markup, <div class="container">...</div> should be <main class="container">...</main>. This will fix the accessibility issues. Just, don't forget to generate a new repot once you fix the issues.
    • Next, instead of separately giving border-radius to each card, you can do the following:
    .container {
        border-radius: 10px;
        overflow: hidden;
    }
    
    • Also, for the car icons, add aria-hidden="true”, because they are for decoration only. You can read more about aria-hidden here.
    • I won't go into many details about resetting CSS, but I'll leave this cool article here, which will make more sense than my brief explanation.
    • Lastly, I suggest adding transition: all 0.2s; to the button and the links, this will make :hover smoother.

    I hope this was helpful πŸ‘¨πŸ»β€πŸ’» you did a great job for the second project, nicely done. Cheers πŸ‘Ύ

    0
    • HTML
    • CSS

    social proof section

    2
    kens_visuals2,855 | Posted 11 minutes agocommented on Ace953's "Social proof section" solution

    Hey @Ace953 πŸ‘‹πŸ»

    I have some quick tips to help you fix the accessibility issues and some other things.

    • First, in your markup, <div class="wrapper">...</div> should be <main class="wrapper">...</main> and <div class="attribution">...</div> should be <footer class="attribution">...</footer>. These will fix the accessibility issues. Don't forget to generate a new repot once you fix the issues.
    • For the star icons, add aria-hidden="true”, because they're for decoration. You can read more about aria-hidden here.
    • Also, add min-height: 100vh to body so the background-image can stretch all the way down.
    • Lastly, as already suggested, remove overflow: hidden; otherwise, the user can only see the half of the content.

    I hope this was helpful πŸ‘¨πŸ»β€πŸ’» Other than that, you did a great good job, nicely done. Cheers πŸ‘Ύ

    0
    • HTML
    • CSS

    Resposive Layout Using CSS Grid

    1
    kens_visuals2,855 | Posted 18 minutes agocommented on Matt Cowan's "Huddle landing page with a single introductory section" solution

    Hey @mattbcowan πŸ‘‹πŸ»

    I have some suggestions for the project.

    • First, in desktop viewport width, remove margin-top for footer, because it adds some unnecessary scrolling to the page.
    • Next, even though it doesn't look like a list, footer icons should be in ul and each icon could be in li which in it has a tag.

    I hope this was helpful πŸ‘¨πŸ»β€πŸ’» you did a superb job with this one, no accessibility or HTML issues, and it's responsive, keep that up. Cheers πŸ‘Ύ

    0
    • HTML
    • CSS

    HTML, CSS, &Sass

    3
    kens_visuals2,855 | Posted 26 minutes agocommented on Henry Zheng's "3-column preview card component" solution

    Hey @LonelyBuddy πŸ‘‹πŸ»

    I have some suggestion for the project.

    • First, instead of separately giving border-radius to each card, you can do the following:
    main {
        border-radius: 0.5rem;
        overflow: hidden;
    }
    
    • For the car icons, add aria-hidden="true”, because they're for decoration. You can read more about aria-hidden here.
    • Also, I suggest adding transition: all 0.2s; to the button and the links, this will make :hover smoother.

    I hope this was helpful πŸ‘¨πŸ»β€πŸ’» overall, you did a great job, well done. Cheers πŸ‘Ύ

    1
    • HTML
    • CSS

    Responsive stats preview card using flex

    2
    kens_visuals2,855 | Posted 31 minutes agocommented on Ivana Cliffords's "Stats preview card component" solution

    Hey @IvanaCliffords πŸ‘‹πŸ»

    I have some suggestions to help you fix the accessibility issue and some other things.

    • First, <div class="attribution">...</div> should be <footer class="attribution">...</footer>. This will fix the accessibility issue, but don't forget to generate a new repot once you fix the issues.
    • Next, add these to lines to fix the background:
    .background-image {
        background-repeat: no-repeat;
        background-size: cover;
    }
    
    • For the card, and in general, avoid using fixed heights because they're not really responsive.
    • Instead of height you can do this:
    .card-content {
       padding: 4rem 4rem 6rem 2rem;
    

    and this will make it more responsive and the card will look closer to the design.

    I hope this was helpful πŸ‘¨πŸ»β€πŸ’» other than that, you did a great job for your second project, nicely done. Cheers πŸ‘Ύ

    0
    • HTML
    • CSS

    Responsive stats preview card using flex

    2
    Ivana Cliffords20 | Posted about 1 hour agocommented on Ivana Cliffords's "Stats preview card component" solution

    So why isn't my design-solution comparison updating after me fixing the error that caused it to look funny? I tried updating my screenshot and it's not working :/

    0
    • HTML
    • CSS

    3 Column Cards With Mobile-First Workflow

    1
    kens_visuals2,855 | Posted about 1 hour agocommented on Logan's "3-column preview card component" solution

    Hey @afewfirstnames πŸ‘‹πŸ»

    I have a quick tip to help you fix the accessibility issues and some other things.

    • In your markup, <div class="container row">...</div> should be <main class="container row">...</main> and this will fix the accessibility issue. Don't forget to generate a new repot once you fix it.
    • Next, the car icons, should have aria-hidden="true”, because they are for decoration only. You can read more about aria-hidden here.
    • Also, perhaps you forgot to include, but the headings have different font-family. You can find the link in style-guide.md
    • I won't go into many details about resting CSS, but I'll leave this cool article here, which will make more sense than my brief explanation πŸ™ƒ
    • Lastly, I'd reduce transition from 0.35s to 0.2s, but it's just my personal opinion.

    I hope this was helpful πŸ‘¨πŸ»β€πŸ’» Well done, you did a great job for the second project, keep it up. Cheers πŸ‘Ύ

    0
    • HTML
    • CSS

    Typemaster Responsive Layout

    1
    P
    Gregg Christofferson175 | Posted about 2 hours agocommented on Fraser Watt's "Typemaster pre-launch landing page" solution

    Hey @fraserwat πŸ™‹β€β™‚οΈ

    Nice job! Practically pixel perfect.

    What I would do to fix your orange filter is remove all the styles associated with image-filter::before. Then on .image-filter I would add the orange background color and the same border radius as your image. Then on your image I would add mix-blend-mode: multiply. You might add some opacity, maybe .75 to lighten the image up a bit too for a better match. Here's an example:

    https://codepen.io/Gregg-Christofferson/pen/qBXapGJ

    Hope that helps!

    0
    • HTML
    • CSS

    Social Proof Section

    1
    Ken185 | Posted about 3 hours agocommented on Ogundeyi Joshua's "Social proof section" solution

    Great job!

    Just a quick suggestion to remove your accessibility issues: Avoid hopping headings from <h1> to <h3>. Without having an h2 on your page.

    You should also wrap the attribution div with a <footer>

    0
    • HTML
    • CSS

    stats-preview-card-component-main

    1
    Alan10 | Posted about 4 hours agocommented on Fernanda Vidal's "Stats preview card component" solution

    Hi Fernanda. Your project is almost pixel-perfect. The one problem you have is the picture. You loaded it with HTML, but this doesn't allow for much customization. You'll need to load it with CSS if you want the color to look more like the design. When loading with CSS, you'll want to apply the linear-gradient value of the background-image property. You'll also want to apply the brightness value of the filter property. This will correct the coloring of the picture. Lastly, the image doesn't resize well to some middling resolutions. You'll want to apply the aspect-ratio property to it to correct this.

    0
    • HTML
    • CSS

    social proof section

    2
    Fernando ValdΓ©s GarcΓ­a105 | Posted about 4 hours agocommented on Ace953's "Social proof section" solution

    You should remove the overflow: hidden property from the body, since on smaller screens the bottom part of the page is being cut off, and mobile views this is a bigger issue

    0
    • HTML
    • CSS

    Responsive Order Summary Component with Semantic HTML & CSS

    1
    CyrusKabir985 | Posted about 5 hours agocommented on Christopher J Mendez's "Order summary component" solution

    hello my dear friend β™₯ you did good and clean but here some advice :

    • for background you can just give a 0 0 position and then 100% 430px to bg size.
    • in hover state " change " button not have an underline if you look to main design but you did great my friend go ahead for more challenges
    1
    • HTML
    • CSS

    Simple card web page using HTML and CSS only

    1
    CyrusKabir985 | Posted about 5 hours agocommented on Ivana Cliffords's "Profile card component" solution

    hello my dear friend β™₯ you can easily solve the svg background problem by simply just using background properties in right way

    • so you have two so you just separate them with "," in background property. then set the position of them from right and bottom ( i mean change default direction which is left and top) then using vh and vw (vh for y , vw for x).sorry if my English is bad also you can check others or mine solution for that background too.
    • other problem in your project is color. that name , numbers are not pure black if you see style guide you can find out.
    0
    • HTML
    • CSS

    Responsive Page!

    1
    Jesse Ma75 | Posted about 7 hours agocommented on Eduardo Nascimento's "Social proof section" solution

    Not a bad start! I'd recommend looking into updating the semantic elements of your upper-half part. You have a header tag wrapping the actual header and the star review section. I think it'd be wise to actually separate the star review section as its own section to be more semantically valid

    0
    • HTML
    • CSS
    • JS

    Room homapge | React

    1
    Kirin175 | Posted about 7 hours agocommented on Trofimov Egor's "Room homepage" solution

    I'd Say increase the padding in the About our furniture Section, also add a bit of delay in the slideshow and ease in transition

    0
    • HTML
    • CSS

    Responsive stat preview component

    5
    Eduardo Nascimento70 | Posted about 7 hours agocommented on aditya dubey's "Stats preview card component" solution

    Hello! I'd suggest you try using SASS for your styling code, i'ts way cleaner and easier to write CSS using SASS mixins, nesting and variables!

    1
    • HTML
    • CSS

    Three Column Card

    2
    Candela Bramucci440 | Posted about 8 hours agocommented on Nabil-Y's "3-column preview card component" solution

    Hey this looks really nice! Here are some picky details that I would change: -The cards are typically articles, not sections (see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/article). So is better to do main>article>div (each part of the big card is a div) -Instead of btn-one, btn-two, btn-three, you could use variables. Put a '--color-accent' and change for every div

    But these are minor things, you did great πŸ˜ƒ

    1
    • HTML
    • CSS

    Flexbox

    2
    Babajide Peter Oyafemi100 | Posted about 8 hours agocommented on Eriton_'s "3-column preview card component" solution

    @Both-Eritons I believe it is better you get a PC so that your websites and web applications come about better than this. Regards.

    1
Slack logo

Join our Slack community

Join over 80,000 people taking the challenges, talking about their code, helping each other, and chatting about all things front-end!