Skip to content
OverviewSolutions
3
Comments
10

Kushil Perera

@kushil9130 points

I’m a mysterious individual who has yet to fill out my bio. One thing’s for certain: I love writing front-end code!

Latest solutions

Latest comments

  • Rimsha Parveen•460
    @Rimsha-ParveenSubmitted 25 days ago
    What are you most proud of, and what would you do differently next time?

    I'm proud that the new home page has a clean and modern design. Next time, I would focus on improving loading speed and adding interactive elements.

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

    Faced layout and responsiveness issues. Fixed them using optimized CSS and media queries for better adaptability.

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

    Nothing Special minner issues....

    News-home-page

    #accessibility
    1
    Kushil Perera•130
    @kushil9Posted 25 days ago

    I wanted to follow up on some aspects of the project that require attention. With all due respect, I noticed that the responsiveness and layout issues have not been fully resolved yet. Additionally, the articles section is still missing. Just in case you need some help with your news homepage project regarding responsiveness and layout, here's my solution that might be useful: news-homepage-html-css-js-bem-accessibility

    Marked as helpful
    0
  • Kushil Perera•130
    @kushil9Posted 3 months ago

    Great work on the layout! One simple enhancement you can make is to ensure the entire design is responsive. Instead of using width: 450px;, you could have added a max-width of your preferred value, like 1100px. This adjustment will make your solution responsive to different screen sizes. Keep it up & Happy coding! 👏

    0
  • Kushil Perera•130
    @kushil9Posted 3 months ago

    Feedback - 1

    <div class="bg-secondary text-white w-screen mt-[-32px] h-[90px] sm:h-[132px] flex items-center justify-center text-[24px] sm:text-[32px] mb-8">HEADPHONES</div>

    I think it would be great to use rem units instead of pixels for the font sizes. This makes the text easier to read and allows it to adjust based on the user's browser settings. Also, instead of using a generic <div>, consider using a semantic heading element. Generic tags like <div> and <span> are mainly to group content together for styling purposes, so it's better to use them only when there aren't any other semantic options.

    Feedback - 2

    <div class="title">XX99 Mark II Headphones</div>

    How about using a lighter color for this text? It’s a bit hard to see against the dark background. Also, try using a semantic heading element here. This not only helps with SEO but also creates a meaningful markup which makes your site more accessible for people who use screen readers.

    Overall, I think your solution to this project is super cool! Keep it up, and super happy new year Zeyu! 👏🙌

    Marked as helpful
    0
  • Kushil Perera•130
    @kushil9Posted 3 months ago

    Your solution is great! It could have been even better if you had added 10 rows instead of 6 to your CSS grid. Happy coding :)

    1
  • Kushil Perera•130
    @kushil9Posted 3 months ago

    I'm still a little newbie in the React world, but I love the way you've used the Context API. The code is clean and readable. Keep it up! 👊👏

    0
  • Zeyu Long•260
    @ZoeLong98Submitted 3 months ago
    What are you most proud of, and what would you do differently next time?

    Tried vite.

    minimalist

    2
    Kushil Perera•130
    @kushil9Posted 3 months ago

    Also, in your App.css, the use of both @media (max-width: 768px) and (min-width: 376px) and @media (max-width: 376px) is redundant. The reason for this is that CSS follows a cascading algorithm (Importance → Origin → Specificity → Position), where styles defined later in the stylesheet will override earlier ones if they apply to the same element and have the same specificity, assuming they don't come from a different origin or have any importance. Since the second media query (@media (max-width: 376px)) comes after the first, any styles defined for .mainContainer in this second query will take precedence over those in the first query when the viewport width is less than or equal to 376 pixels. Therefore, specifying min-width in the first media query is unnecessary because the styles will always be overridden by the last media query when applicable. To enhance clarity and maintainability, simply simplify the media queries by removing the min-width condition from the first one. This way, you can ensure that your CSS remains clean and easy to understand.

    Marked as helpful
    0
View more comments