Skip to content
OverviewSolutions
93
Comments
968

Chamu

@ChamuMutezvaUitenhage, Eastern Cape, South Africa13,860 points

Practicing Frontend Web development

I’m currently learning...

React, Nextjs and Tailwind

Latest solutions

View more solutions

Latest comments

  • Sean Mafnas•110
    @Makkatlahi
    What are you most proud of, and what would you do differently next time?

    I was proud that I got the solution pretty close to the design. I did this without researching it and used what I knew, thus far.

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

    After I reached the end, I went to find some help and found out some critical errors in my structure and usage of grid/flexbox in their respective places. Next time, I will be a lot more careful with how I will approach a design. I will fine-tune my attention to detail as I missed the mark in some areas that proved detrimental to my overall design later (when applying responsiveness).

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

    I would like help with coming up with a better reset convention regarding css and better semantic structuring/usage regarding HTML.

    Responsive Product Preview Card using CSS: Flexbox, grid, and BEM

    2
    Chamu•13,860
    @ChamuMutezva

    Hi Sean Mafnas.

    After going through your project, here is what I recommend:

    1. Bundling your projects in one repository has its pros and cons. I will focus on the disadvantages and I would strongly advice you to keep one project per repository. Your projects will be difficult to maintain the future and honestly a nightmare to follow along when giving feedback. Earlier this week , I got the following message from Vercel
    Hi chamu

Starting Monday, September 1st, 2025, Node.js 18 will no longer be supported on Vercel. Additionally, the legacy build image associated with Node.js 18 will also be deprecated.

This change impacts all projects – including Python and Ruby builds – that have their Node.js version set to 18. Upgrading to Node.js 22 ensures your builds utilize the latest build image, continue to receive security updates, and avoid potential errors.

Your account is associated with the following projects using Node.js 18:

    In this particular case , I have 10 projects that needs an upgrade. That is 10 projects that may fail to work if I do not upgrade or some may fail during the process. It is easier to fix one project that has been affected than trying to fix one repository with 10 projects. One project can cause all the other remaining projects to fail.

    • there is need to have a landmark element in your project. In this particular case , we need the main element - it is used to identify the primary content of the page. Change the div with the class of card to be the main element and the div with the class attribution to be the footer
    • the alt value for the image should be improved to reflect the message carried by the image. "Perfume Mobile pic" , the words mobile pic are redundant as we already know it is a picture and screen readers automatically announce such words or similar. Visualise the image from the description. Eg `alt="Gabrielle Essence perfume bottle"
    • Check for some modern CSS reset like the one by Andy Bell. You need much more to the reset styles that you have.
    • the body element should not have width or max-width values set. For the body , those values should not be changed as the body should always be 100%. The only thing that most resets have for the body element is min-height: 100vh , to keep the height at least at 100vh.
    • explicit sizes like the width on the card causes some responsive issues. If the device is less than 34.3rem you are likely to have an overflow issue. You will need to use max-width on containers to allow the container to grow to a certain width but not to exceed it.
  • Sadman-Sakib•10
    @Sadman-Sakib748
    What are you most proud of, and what would you do differently next time?

    I'm proud of how the entire project turned out to be fully responsive across devices, especially the product layout and filtering functionality. It was my first time using Tailwind CSS in combination with React, and I managed to build a clean and interactive UI.

    Next time, I would plan the component structure more carefully from the start to avoid rewriting code when scaling the app. I would also consider adding more accessibility features like keyboard navigation and ARIA labels.

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

    One of the main challenges was managing dynamic UI updates when filtering products. Initially, I struggled with maintaining state across components, but using React hooks like useState and useEffect helped solve this.

    Another challenge was styling with Tailwind CSS utility classes—it was a bit overwhelming at first. However, after referring to the documentation and experimenting with different layout strategies like Flexbox and Grid, I became more comfortable using it efficiently.

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

    I would love feedback on the following areas:

    • Is the component structure efficient, or could it be optimized further?
    • Any suggestions on improving performance or code cleanliness?
    • Best practices for improving responsiveness and accessibility?
    • How could I better handle state management if the project scales (e.g., context or Zustand/Redux)?

    Responsive dashboard using html and tailwind css

    #tailwind-css
    1
    Chamu•13,860
    @ChamuMutezva

    Hi

    The design for this challenge is just a single component which have the qr-code image and text content. You have definately included content which is not necessary (which is part of the illustations). See also the design images and the design sections of your figma files.

  • Michele Cini•10
    @michele-cini
    What are you most proud of, and what would you do differently next time?

    i'm proud of having taken the first step into web development, i wouldn't do anything differently.

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

    i was mostly confused by the intricacies of centering in css and i overcame that by paying more attention to the linked resources.

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

    i would like to understand how i can center an html element vertically. i was able to center the body horizontally but couldn't get it center vertically.

    Qr code page using css and html

    3
    Chamu•13,860
    @ChamuMutezva

    Hi Michele Cini

    Well done for taking this first step, you are on the right track and below are my recommendations.

    • a landmark element is needed , in this case you need the main landmark element as illustrated by Mustafa. The main element identifies the primary content of the page. Use the MDN docs can help you to learn more about landmark elements.
    • a heading element is missing and is an important element , your first p should be changed into an h2 element since this is just a component of a larger project. See also the MDN docs to learn more about heading elements and the proper order that should be followed.
    • use a modern reset styles, one common one is by Andy Bell. Never limit the width of the body, usually the only change you can have on the body is the min-height: 100vh to keep it at full height always even if the content is not much.
    • to center the content , you can use flexbox as mentioned by Mustafa
  • Rapheal24-maker•170
    @Rapheal24-maker
    What are you most proud of, and what would you do differently next time?

    Got nothing to be proud of,i,mprove my css and html

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

    I had difficulties in creating the page it self, i had to practice and research of some idea

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

    What am i lacking in my html and css and what is lacking

    result

    1
    Chamu•13,860
    @ChamuMutezva

    Hi Rapheal24-maker

    At the present moment , you have submitted 5 solutions on this platform and one particular problem that I see is , non of them has been deployed correctly. Since you are deploying on GitHub, take note that the file with index.html is the one that will be shown on the browser. This is why the VIEW LIVE SITE button shows the original page that you downloaded. You were just supposed to edit that file instead of creating another new HTML file (nft-thinking-code.html).

    Landmark elements are missing in your HTML. In this case , the main element as in most cases should be part of your HTML. The main element identifies the primary content of the website. Read more about the main element on MDN Main element

    All images should have an alt attribute , decorative images will have an empty string value for the alt and the rest should be descriptive of the content carried in the image.

    For best practice , you will need to have a separate css file that should be linked in the head of the HTML file and that will be the same with javascript if it is needed in the code The first thing that you should have in your CSS are reset styles, common onces include one written by Andy Bell- CSS Reset. Revise it and among other important declarations take note of those for the body and img elements. Regarding font sizes , here is another article that explains why font sizes should be in px values If you have explicity width on your containers like in this case the .box has width: 250px; , what it means here is that width will stay at 250px always regardless of device or screen size - that is the site is generally not responsive. In most cases what you need too use is max-width which allows the container to grow or shrink depending of screen size . It will only grow to a certain size.

    You need to revise all your current projects before moving on and fix the above issues. Take time to see other completed solutions and also use the discord channel to ask questions and get feedback

  • Khaled Mohamed Ali•80
    @khaled-mohamedali
    What are you most proud of, and what would you do differently next time?

    Perfectly centered QR card using Flexbox, which works flawlessly across all screen sizes

    Clean semantic HTML structure that follows accessibility best practices

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

    Understanding that css has different ways of doing the same thing

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

    N/A

    Qr Code Card

    2
    Chamu•13,860
    @ChamuMutezva

    Hi Khaled Mohamed Ali

    • the image in this particular case needs an alt value which maybe like "a qrcode for Frontend Mentor". It is not just decorative in this case but part of the message
    • a heading element is needed , the p element with the class of title can be your h2 or h3 depending on what you think the rest of the really project would be. (This is just a component)
    • always reset your styles with any of the new reset stylesheets, a good example are by joshwcomeau and andy bell. Some important missing styes are
    /* Set core body defaults */
body {
  min-height: 100vh;
  line-height: 1.5;
}
/* Make images easier to work with */
img,
picture {
  max-width: 100%;
  display: block;
}
    • using width: 300px on your container causes the container to be fixed on that particular size and is not responsive. What you need to do with containers is to use max-width with a value such as rem . What it does is allow your container stretch to a certain width but will not exceed that side which is good for responsive design.
    • font sizes should be in rem , px values are less accessible . The following article is a good read for Font sizes

    Happy coding

    Marked as helpful
  • Nathan Ray•400
    @NathanRayM
    What are you most proud of, and what would you do differently next time?

    I wanted to challenge myself and take on a little of a larger project like this landing page. I'm glad I did. I'm proud I was able to work through the quirks of building the page. I did also add a bit extra to the logo, the buttons, and the footer links 😁

    Overall, this was really fun to build.

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

    There were many challenges throughout the project. Getting close to the design without an actual figma file is a challenge within itself. I was able overcome the majority of challenges by referencing w3 schools, and the MDN.

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

    I'm looking to improve overall but for this would appreciate any feedback on the semantics, and how I can more efficiently write my code including the CSS.

    Clipboard landing page - Using Responsive HTML , CSS, and a little JS

    2
    Chamu•13,860
    @ChamuMutezva

    Well done with your project, here are a few items that you can have a look at:

    • the logo <img class="logo-img" id="logoFly" src="images/logo.svg" alt="" /> is an important element of the page and is usually a link for the homepage. That is the logo will have an anchor element as the parent.
    • alt values for images can be empty for decorative images (alt=" ") or in other cases should be a summary of the image. What is the message being potrayed by the image. Words like image, picture , logo etc should not be part of the alt value.
    • most recommendations these days favours to style mobile first rather than desktop. So your initials styles will be for small devices and then add media queries when appropriate using min-width instead of max-width.
    • the display for small devices looks good up until it hits 400px, from there the site breaks until it reaches about 760px. You will need another media query for this layout to look better on medium devices
    Marked as helpful
View more comments