Community Feedback

    • HTML
    • CSS

    Profile card component

    1
    Ivan Geier55 | Posted 37 minutes agocommented on Luis's "Profile card component" solution

    Hey, Luis! Thank you for your solution. I was checking your code and find a way to solve a problem that I was handling with the background. ;)

    0
    • HTML
    • CSS

    Mobile first site using HTML, CSS, and Flexbox

    1
    dewslyse190 | Posted about 2 hours agocommented on Tamera's "Stats preview card component" solution

    Hello Tamera.

    Congrats on building your first project. You did good on this challenge.

    In simple terms, margins create extra space around an element while padding creates space within an element. These links from MDN Web Docs should be helpful πŸ”½

    For breakpoints ('media query min/max-width'), you can use these examples from w3schools as a reference

    /* Extra small devices (phones, 600px and down) */
    @media only screen and (max-width: 600px) {...}
    
    /* Small devices (portrait tablets and large phones, 600px and up) */
    @media only screen and (min-width: 600px) {...}
    
    /* Medium devices (landscape tablets, 768px and up) */
    @media only screen and (min-width: 768px) {...}
    
    /* Large devices (laptops/desktops, 992px and up) */
    @media only screen and (min-width: 992px) {...}
    
    /* Extra large devices (large laptops and desktops, 1200px and up) */
    @media only screen and (min-width: 1200px) {...}

    All the best

    0
    • HTML
    • CSS

    Simple Card using HTML, CSS

    2
    dewslyse190 | Posted about 2 hours agocommented on Saurabh Kumar's "Stats preview card component" solution

    Hi saurabh25102000 πŸ‘‹

    Below are some suggestions that may address your challenges.

    Q1. Adding the property overflow: hidden; to your .main-card selector, should fix your overflow problem.

    Q2. You can use the flexbox layout module.

    Q3. Same answer as Q2. See the example below (flex properties added at the end)

    .main-card {
        width: 1200px;
        margin: 200px auto;
        border-radius: 10px;
        background-color: hsl(244, 38%, 16%);
        overflow: hidden;
        display: flex;
        flex-direction: row-reverse;
    }

    Addressing the preceding challenges solves the remaining ones.

    Hope this helps.

    Happy coding πŸ’»

    0
    • HTML
    • CSS

    Website using Html and Css

    1
    P
    Chamunorwa Mutezva3,805 | Posted about 4 hours agocommented on Yacin Bensidahmed's "Clipboard landing page" solution
    • make your site responsive from mobile to the largest size. Do not concentrate on the given design sizes only. Let them be a guide.
    • check on mdn about responsive images . The method below is not best practice
     <div class="image-header">
            <img src="bg-header-mobile.png" alt="" class="image-mobl">
            <img src="bg-header-desktop.png" alt="" class="image-desc">
            <img src="logo.svg" alt="" class="logo">
          </div>
    • it is recommended to have only one h1 element tag in a page, having more than one does not cause errors but is considered bad practice. Your headings should ascend in order without skipping headings.
    • i see you have headings(h1, h4) that are children of a p element. I am basing on the fact that i have not seen it before that this is wrong syntax. I stand to be corrected if i am wrong.

    suggestion This is a level 2 challenge, i suggest to do a level one challenge first and get the basic right before moving to challenges in the level 2 category

    0
    • HTML
    • CSS
    • JS

    Job listing board using React and React Context

    1
    Mojtaba1,790 | Posted about 4 hours agocommented on Jordan Lewis's "Job listings with filtering" solution

    Hi!, look nice and functions well, I am no expert in React but according to my limited knowledge the way you import assets if fine and a sublte improvement would be to a named import( assign the asset to variable on import). For example you can do something like this:

    import logo from "./src/assets/images/logo"

    Keep coding :)

    0
    • HTML
    • CSS
    • JS
    • API

    List countries app using React hooks, HTML, CSS , JS , API

    2
    Mojtaba1,790 | Posted about 5 hours agocommented on Maha's "REST Countries API with color theme switcher" solution

    Hi!, look nice, the only things that comes to mind is that to improve the readability the font-sizes on card compoenent should be a bit bigger, at moment it' kind of heard to read it on mobile view.

    Keep coding :)

    0
    • HTML
    • CSS
    • JS
    • API

    List countries app using React hooks, HTML, CSS , JS , API

    2
    P
    Chamunorwa Mutezva3,805 | Posted about 5 hours agocommented on Maha's "REST Countries API with color theme switcher" solution

    That's awesome work Maha.

    • all the functions are working as expected and the site is generally responsive
    • take care of empty spaces at the end when searching for a country, mobile devices has a tendency of automatically adding an empty space when you auto choose the selections that comes up whilst searching. Usually that will cause a no search.
    • on the countries details page , there is some white space that needs to be taken care of.

    Happy coding

    0
    • HTML
    • CSS

    Profile Card with HTML CSS

    2
    Mojtaba1,790 | Posted about 5 hours agocommented on Angel Lopez's "Profile card component" solution

    1- Upon resizing there is some overlapping issues. I suggest you put and max-width on your card instead of resetting the width.

    2- Regarding your markup, writing semantic markup is all about choosing the right html element for the right task, when you use an htlm element for a task ask yourself if it describes the content you put inside best. For instance the aside tag does not describe the card in any way.

    Keep coding :=)

    1
    • HTML
    • CSS
    • JS

    HTML, CSS, JS

    1
    P
    Chamunorwa Mutezva3,805 | Posted about 5 hours agocommented on Thiruisa's "Sunnyside agency landing page" solution
    • provide alt values that can assist people who rely on assistive technology. Values like logo are not that helpful.
    • the menu list items - use an unordered list , that does help to make the nav accessible
    • the hamburger is a custom button, its current state is not accessible as it is a div , assistive technology users might not be able to follow along. Check on wai-aria on suitable attributes to add on
    • at around 375px , the contents of testimonial are cut off with the image
    • the images for mobile are not being utilised, when i use dev tools only the desktop images are being loaded on small devices
    0
    • HTML
    • CSS
    • JS

    FAQ Accordion Card Using Grid, Flexbox and Js

    1
    Ahmed Faisal230 | Posted about 6 hours agocommented on Kevin Gomez's "FAQ accordion card" solution

    Hi,

    • for responsive design use % base width not fixed width like width: 300px.
    • Better use like this width: 50%
    • Make proper media query with view port for different device like tablet and mobile.

    Happy coding :)

    1
    • HTML
    • CSS
    • JS

    flex

    1
    Ahmed Faisal230 | Posted about 6 hours agocommented on Sebastian's "Ping single column coming soon page" solution

    Hi, Nice work. Just give you some points that may help you to avoid issues in further.

    • After press button, page is shaking.
    • Added a alert with some design for wrong email pattern.
    • Site is not responsive use media query

    Happy coding :)

    0
    • HTML
    • CSS

    Mobile first using HTML and CSS

    1
    Ahmed Faisal230 | Posted about 6 hours agocommented on AceDub's "Stats preview card component" solution

    Hi,

    Using 2 div with padding your card is not aligned properly. Take a parent div with max-width and center it horizontally and vertically.

    .card-center { max-width: 1110px; display: grid; grid-template-columns: 1fr 540px; }

    You may also check my solution too. Take a look of this Example of my work

    0
    • HTML
    • CSS
    • JS

    Social Media Dashboard using SCSS, CSS Grid and JS

    1
    Adriana Eka Prayudha130 | Posted about 7 hours agocommented on dngtnv's "Social media dashboard with theme switcher" solution

    Hello dngtnv, congratulations it's a great work! πŸ‘πŸ™Œ

    The layouts and the elements are match the design, and the dark mode toggle works as well!

    But i found one specific issue and one addition based on my opinion, especially in mobile (<= 425px) viewport :

    1. The top padding on social-media container are blocking the dark mode toggle, so the toggle can't be clicked. I believe the solution for this you can add margin-top to this container on mobile breakpoint, maybe 40px is enough and you good to go!

    2. Since the user id element contains image and text, i think you can use span element to wrap the elements, because span acts like a div but for inline element, and for the text you can wrap it in p tag. Because p tag mostly used for text only. 😁

    Reference : https://developer.mozilla.org/en-US/docs/Web/HTML/Element/span

    That's it from me, keep coding! πŸ‘πŸ™Œ

    0
    • HTML
    • CSS
    • JS

    HTML & SCSS and JS for mobile menu

    3
    P
    Chamunorwa Mutezva3,805 | Posted about 7 hours agocommented on Андрій Π ΠΎΠ³ΠΎΠ²'s "Loopstudios landing page" solution
    • the desktop design looks great but yes you still have to work on the responsive side of the site.
    • personally i prefer to use class instead of id's as they are reusable
    • the nav items i would suggest to have them in an unordered list to help with accessibilty

      Happy coding

    0
    • HTML
    • CSS

    Built using grid

    2
    P
    Chamunorwa Mutezva3,805 | Posted about 7 hours agocommented on Dan's "Huddle landing page with a single introductory section" solution
    • your images are not showing because the url you provided is not correct. There is no image folder. Change the path to the following
    .img {
      grid-area: img;
      width: 400px;
      height: 250px;
      background: url(./illustration-mockups.svg); //check this part
      background-size: cover;
      padding: 60px;
    }

    and the html should be changed to <img src="./logo.svg" alt="">

    Good lucky

    0
    • HTML
    • CSS
    • JS

    html, css, css, javascript, viscose

    3
    sim40 | Posted about 8 hours agocommented on Mukul Jain's "Sunnyside agency landing page" solution

    hello Mukul Jani, nice work on your project, I have a question how did you figure out the size of the images on the desktop, mine works perfect for mobile but the size of the images for desktop is just not coming right for some reason. thank you

    0
    • HTML
    • CSS

    3-card-column with Bootstrap 5 and css

    1
    P
    Chamunorwa Mutezva3,805 | Posted about 8 hours agocommented on Kurt A Metzelfeld's "3-column preview card component" solution
    • well, for screen width below 425px the display is not that responsive. Some elements are overlapping from their containers.
    • my opinion is , use bootstrap when you have got the css basic right. You need to fully understand what bootstrap is doing in your project so that you can override those styles that are not working according to your expectations.

    Good lucky

    0
    • HTML
    • CSS
    • JS

    Bookmark Landing Page using JS Vanilla, SASS and BEM

    1
    P
    Chamunorwa Mutezva3,805 | Posted about 8 hours agocommented on Yaiza's "Bookmark landing page" solution

    Well done Yaiza

    • you did well , the site is responsive.
    • since the hamburger is supposed to be a button, you need to add wai-aria so that users of assistive technology can be able to use it without confusion.
    <div class="hamburger" id="hamburger">
                  <span class="hamburger__line"></span>
                  <span class="hamburger__line"></span>
                  <span class="hamburger__line"></span>
            </div>
    • the alt values , i think there are not descriptive enough to again assist people who use assistive tech.

    Awesome work

    0
    • HTML
    • CSS
    • JS

    Tip Calculator using Sass and Vanilla JavaScript (Updates Realtime)

    2
    P
    Chamunorwa Mutezva3,805 | Posted about 8 hours agocommented on Lance Martija's "Tip calculator app" solution

    Greetings Lance

    • id's must be unique, you cannot use an id more than once. A class is suitable for re-usability.
    • as for headings, an h1 element is supposed to be the first heading element on your site. Using only one h1 element is considered best practise. Headings should ascend in order where an h2 should follow an h1 (h1, h2 ,h3 etc).
    • the button should have a type, in this case i think reset will do.
    • change the div with a class of main into an html5 main element - that will also help to clear one of the errors mentioned in the report
    • form input elements are required to have labels for accessibility reasons

    Good lucky

    1
    • HTML
    • CSS

    My first challenge - Stat preview card using HTML & SASS

    2
    P
    Chamunorwa Mutezva3,805 | Posted about 9 hours agocommented on darryncodes's "Stats preview card component" solution

    You did well with this challenge , well done.

    • try playing around with background-blend-mode on this class to try to match the picture colour
    card__image {
    	width: 50%;
    	/* background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(170,92,219,0.35)), to(rgba(170,92,219,0.35))),url(../img/image-header-desktop.jpg); */
    	background-image: linear-gradient(rgba(170,92,219,0.35), rgba(170,92,219,0.35)),url(../img/image-header-desktop.jpg);
    	background-size: cover;
    	background-position: center;
    	background-blend-mode: overlay; //try adding this or any of the other values
    }
    0
    • HTML
    • CSS
    • JS

    HTML & SCSS and JS for mobile menu

    3
    Gregs590 | Posted about 9 hours agocommented on Андрій Π ΠΎΠ³ΠΎΠ²'s "Loopstudios landing page" solution

    Hello Andrii-Rohov πŸ‘‹, my name is Grzegorz.

    Your solution looks super awesome on desktop, and it's alomost pixel-perfect with the design.

    One thing to check it's the responsiveness on screen width < 768px, because right now your layout does not fit on the screen.

    I'm sure it is just a small overlook.

    Overall, I am impressed with your work and animations that you add.

    Keep up the good work! πŸ’ͺ

    See you on the coding trail πŸ˜‰

    Cheers!

    0
    • HTML
    • CSS

    stats preview card-component main challenge solution using Html & css

    5
    Gregs590 | Posted about 9 hours agocommented on vishal wankhade's "Stats preview card component" solution

    Hello Vishal-wankhade πŸ‘‹, my name is Grzegorz.

    I think you set incorrect url for background-image, for now it doesn't show up.

    I would also rethink usage empty article for displaying image as a background.

    article should be used for displaying stand-alone content, right now there is no content at all. Perhaps img element would be more suitable here.

    I hope this will be helpfull to You.

    Keep up the good work! πŸ’ͺ

    See you on the coding trail πŸ˜‰

    Cheers!

    0
Slack logo

Join our Slack community

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