Responsive loading pages using CSS Grid

Community feedback

• 

  vladyslav-shulhach•170

  @vladyslav-shulhachPosted 2 months ago

  Great job on your project! You’ve made a solid effort with the layout. Here are a few tips that might help you take it to the next level:

  • Nice use of semantic HTML. It’s good to see you using elements like main and article. These tags make your code more meaningful and easier to read.

  • Be careful with identifiers. I noticed that some ids, like user-profile, user-name, and user-status, are used more than once. In HTML, id is supposed to be unique for each element. If you reuse it, it might cause problems, especially when you start working with JavaScript. It’s better to use class for cases like this.

  • Accessibility is important. Adding alt attributes to your images can really improve the experience for people using screen readers. For example, instead of leaving the alt attribute empty, you could write something like alt="Profile picture of Daniel Clifford". It’s a small change, but it makes your site more user-friendly for everyone.

  • Responsive design tips. Your layout looks great on desktops and very small screens (like under 375px), but on larger smartphones and tablets, it could use a bit more balance. Sometimes the grid gets too narrow or overflows. Fixing this will make your site look good on all devices.

  • Try a mobile-first approach. Have you thought about designing for smaller screens first? It can make things easier because you start simple and then add styles for larger screens using media queries. Here’s a quick example to show what I mean:

    /* Default styles for mobile screens */
    main { 
        display: flex;
        flex-direction: column;
        width: 90%;
        margin: 4rem 0; 
    } 
    
    /* For tablets */ 
    @media (min-width: 768px) { 	
        main { 
    	        /* Use two columns for better readability on tablets instead of four */
            grid-template-columns: repeat(2, 1fr); 
        } 
    } 
    
    /* For desktops */ 
    @media (min-width: 1440px) { 
        main { 
            grid-template-columns: repeat(4, 1fr); 
        } 
    }
    
    

  These adjustments will make your project look even more professional. You’re doing great, so keep it up and happy coding!

  0
• 

  P

  orrest•110

  @orrestPosted 2 months ago

  Hello, there. I saw you use a lot of divs in you HTML, but that may not be the most semantic choice as the element container. See HTML elements reference. And I kinda learnt something from your scss usage, ^-^.

  0
• 

  Mufti Bin Habib•80

  @MuftiBinHabibPosted 2 months ago

  N/A

  0