i am proud to complete this learning part to the best of my knowledge
What challenges did you encounter, and how did you overcome them?i found it difficult to position the table well, but i solved it by using the term border collapse : collapse
Hi Olisaemeka,
You did a fantastic job on this one! The structure is clean, the design is visually appealing, and your use of semantic HTML and responsive styling is solid. 👏
@font-face.The soft pink background is showing on mobile, but according to the original design, it should only appear around the card on larger screens. Try limiting the padding or background to a wrapper element and apply it only in larger viewports using media queries.
Add alt text to the main image. Even a short description like "A plate of omelette" improves accessibility.
You could consider using semantic tags like <section>, <article>, or <header> to further structure the content.
The nutrition table could benefit from <th> tags for clearer headings (though this isn’t a must).
This is high-quality work — just keep an eye on accessibility and semantics as you build more. Keep it up! 💪🔥
I’m most proud of how I was able to complete the layout to closely match the design, especially making it fully responsive using only HTML and CSS. I also liked how I managed the spacing, alignment, and used flexbox to position elements cleanly.
What challenges did you encounter, and how did you overcome them?One of the main challenges I faced was centering the content vertically and horizontally on the page. At first, I struggled with margin and padding, but I eventually solved it using display: flex with justify-content and align-items to center everything properly.
What specific areas of your project would you like help with?I’d like feedback on how to improve responsiveness, especially for very small or large screens.
Hi Olisa,
Great work! The layout is clean, well-centered, and your styling is consistent. The hover effect on the buttons is also a nice touch — you're improving steadily! 👏
alt text on the profile image — always include one for accessibility.<a> instead of <button> for external links like GitHub, Twitter, etc. It’s more semantic and expected.<div> — it adds unnecessary markup. You can apply margins directly to the buttons instead.Overall, great progress — just clean up the structure a bit, and you’re on your way to writing professional-quality code. 💪✨
i am proud to complete the challenge without much difficulties and looking forward to more
What challenges did you encounter, and how did you overcome them?i encountered a challenge with positioning an image and a text together , i solved the issue by using "display: flex" and "align-items: center"
What specific areas of your project would you like help with?i dont think i got the fonts right. any help on that?
Hi Olisa,
Great job on this project — it's clean, well-structured, and shows you're getting more confident with HTML and CSS. 🙌
alt text to all images for accessibility.width: 10% for the avatar, try a fixed size like 32px or 2rem for better consistency.Overall, really solid work! With a few tweaks and more attention to detail, you'll keep getting better. Keep it up! 💪
I'm most proud of successfully completing the challenge using only HTML and CSS, and that my design closely matched the given design files for both desktop and mobile views. I also learned how to make the layout responsive using media queries.
What challenges did you encounter, and how did you overcome them?One challenge I faced was making the project responsive for smaller screen sizes like 375px. At first, the layout looked broken on mobile devices. I overcame this by using a media query to adjust the container width and padding for small screens.
I also had some trouble with the alignment and spacing of the text and image inside the card. I fixed this by using text-align: center and adjusting margins and padding based on the design preview.
What specific areas of your project would you like help with?I would appreciate feedback on how I structured my CSS especially on whether I followed best practices for responsiveness.
I’m also curious if there's a better way to handle the responsive design for screen sizes around 375px and up.
Hi Olisa,
You did a great job on this project — well done! 🎉 Your layout is clean, the design looks visually appealing, and your code is structured in a way that shows you understand the basics of HTML and CSS. I'm proud of the effort you put into this.
Here are a few specific things I really liked:
Now, here are a few areas you can improve on:
Accessibility:
The image is missing a descriptive alt attribute. This is important for users who rely on screen readers, and also helps with SEO. For example, instead of:
<img src="..." alt="">
You could write:
<img src="..." alt="QR code linking to Frontend Mentor website">
Responsive Design: Your media query works, but the range is quite wide. As you grow, consider using more specific breakpoints based on actual device sizes (e.g., 768px for tablets, 1024px for small laptops).
Code Maintainability: Try to comment your code more and use clearer class names. This makes it easier to maintain and collaborate on.
Interaction & Feedback (Optional):
You could take the UI a step further by adding small interaction styles like hover effects or subtle animations.
This was a strong submission. You’ve shown a solid understanding of structure and styling. With just a bit more focus on accessibility and best practices, you’ll be building even more professional projects in no time. Keep up the great work, and keep practicing!
If you have any questions about the feedback or want to try improving the project based on it, feel free to ask.
👏👏👏
The code looks solid overall! My main points are about the routing and search input:
Using the country code in capital letters for routes isn’t wrong, but I personally would have preferred using the full country name for better readability.
The search input only works if you type the full country name exactly, then it immediately navigates to that country’s page. It doesn’t support partial or fuzzy searching.
I would suggest showing a list of matching country cards as you type, so users can see similar or partial matches before selecting a country.
These improvements could make the user experience smoother and more intuitive.
Great job! Really loved the nav animations. Your project is responsive as well, keep it up!
Your work looks great! One suggestion to enhance the UI, especially on larger screens, is to implement a max-width on the component. This would help maintain a clean and balanced layout across different screen sizes. Keep up the awesome work! 🚀
You've done a great job on this! The code is well-structured and functions as expected. One suggestion to improve the user experience would be to disable the submit button when no number is selected, instead of using an alert. This would make the interaction smoother and more intuitive for users. Keep up the great work! 🚀
The HTML and CSS part came out quite well. Javascript seems to work fine.
What challenges did you encounter, and how did you overcome them?Difficulty only in managing Javascript.
What specific areas of your project would you like help with?I would like to always improve with Javascript and partly with advanced CSS techniques.
I’m really impressed by how well you handled the functionality with plain JavaScript! Everything runs so smoothly. The styling could use a bit of refinement, though—maybe aligning the text output to the left would improve readability? Also, styling your input fields with some custom CSS could make them look more polished. Overall, awesome job!
any advice on my code
Your code is great, really clean and well-structured! I love that you used ThemeContext to manage the theme, that’s an awesome approach. One improvement would be making the code more modular and reusable by mapping your data/stats instead of repeating similar blocks. Also, you could leverage Tailwind alongside custom.css to handle theming more efficiently, saving you from repeating classes. Overall, fantastic job! 🚀
The functionality of your code is impressive, and the overall layout is fantastic—clean and well-structured. However, the colors are a bit too loud and bright, which could be distracting; consider using a more subtle palette for better user experience. Additionally, the calculation output overflows the layout in some cases. Using JavaScript's toExponential() method can help manage large numbers effectively. With these small adjustments, your project will be even more polished!
First off, great job on your project! The interactive cards are a fantastic touch, and the overall design looks clean and well-structured. I can tell a lot of effort went into making the UI engaging, and it’s really coming together nicely.
However, I noticed a couple of areas for improvement. The repository is currently showing an error 404, so it might be worth checking the link or permissions. Also, while the design works well on smaller screens, the responsive design could be improved for medium and large screens to ensure the layout adapts smoothly.
Keep up the great work! You’re on the right track, and I’m sure with a bit more tweaking, the project will be even more polished. Keep pushing forward!
The code structure is not very good and typing could be better.
What challenges did you encounter, and how did you overcome them?The main challenge was to implement styles for invalid form, since form validation is custom and I could not use invalid: tailwindcss pseudoclass, so I used css class.
Your code is absolutely amazing! I’m really impressed by how seamlessly you’ve used TypeScript, React, and Tailwind CSS. The structure is clean, and everything looks so well-thought-out. As someone still learning some of these technologies, I found your work inspiring and a great example to look up to. Just a quick note, you might want to check the responsive design, as there’s a small fix needed there. Keep up the fantastic work, you’re doing an incredible job!
Great job on the functionality and styling! The design is sleek and the buttons are interactive. However, the fixed footer affects mobile users, as it might overlap content on smaller screens. Consider making it sticky or hidden on scroll for better mobile responsiveness.
Also, I couldn't access the GitHub link as it leads to a 404 error.
Overall, awesome work! Just a few tweaks needed for mobile, and it would be perfect.
I am very proud for using some react features that I haven't used before. React is a very powerful library! I really enjoy using it!
What challenges did you encounter, and how did you overcome them?I am not sure about my component tree. I am not sure if I need to break some components to smaller ones!
What specific areas of your project would you like help with?Component architecture is something that I need to understand better!
I think you nailed the component tree perfectly. It's highly modular and reusable, which is a great approach for scalability and maintainability. Everything is well-structured, making the code easy to understand and extend.
One small suggestion I have is to enhance the buttons by adding interactivity, such as hover and active states. This would make the UI feel more dynamic and polished, providing a better user experience. Great work overall! Keep it up!
I'm finally understanding css grid
What challenges did you encounter, and how did you overcome them?The use of grid
Your code looks good overall! Here's a brief review along with suggestions to improve it, focusing on areas like semantics, accessibility, and styling:
Alt Text: The alt attributes for images could be more descriptive, like "Daniel Clifford portrait".
Media Queries Structure: Ensure that the media queries are well-structured. The CSS for smaller screens should be inside the respective media query.
Font Loading: Instead of using multiple font weights in a single link, consider importing only the required weights to improve load time.
Remove Redundant Styles: Avoid repeating styles that can be grouped or simplified.
Keep up the great work! You're making significant progress, and these small improvements will enhance your skills even further. Remember, coding is a journey and each step you take brings you closer to mastering your craft. Keep pushing forward, and don’t hesitate to experiment and learn! You've got this!
Good job! You seem to have a good understanding of CSS grid, I just learnt a lot from viewing your code.
I created the app by putting my skills in react.js and CSS into practice
What challenges did you encounter, and how did you overcome them?Having divided the app into components and using CSS styles in React.js, which is a bit different from plain HTML and CSS.
What specific areas of your project would you like help with?Any constructive feedback is welcome.
I enjoyed looking through your project and wanted to share some feedback that I hope you’ll find helpful!
Desktop Design Consideration: I noticed that the project currently emphasizes mobile or tablet views but lacks a fully designed desktop layout. Expanding to include a desktop view would create a more comprehensive and responsive experience. This would allow users to enjoy an optimized layout across all device types, enhancing usability and visual appeal.
Component Modularity: I observed that some components feel a bit tightly coupled to specific tasks, and a few parts seem more complex than needed. It could be beneficial to consider refactoring with modularity in mind, aiming to make components reusable across the project. This way, the code becomes easier to maintain and adapt if you add new features or need similar structures elsewhere in the app.
Overall, I can see the effort and thought put into this project, and I think refining these areas could make it even stronger. Great work!
