Mohamed Kabba• 190
@Mohamedkabba444
Submitted
Papi
@Papi84
All comments
- Papi• 230
@Papi84
Posted
Semantic HTML: The use of semantic HTML is fundamental to both accessibility and SEO. After reviewing the code, I noticed that while the basic structure is in place, there could be improvements in how certain elements are tagged. For instance, instead of using a
divfor the rating buttons, you could consider using afieldsetwithlegendandinputelements (such as radio buttons) to give the rating system better semantics. This would also enhance the accessibility of the component.** Accessibility Improvements:** A few accessibility adjustments would improve the user experience for those using assistive technologies. Adding
aria-labelsoraltattributes to interactive elements can make sure screen readers convey the purpose of those elements. For example, labeling the rating buttons with more descriptive text or usingaria-pressedto indicate the state of the rating selection would improve usability. Ensure that the focus state is visually distinct for keyboard navigation, and make sure the form can be submitted via the keyboard.** Responsive Design:** The layout seems to work well on most screen sizes, but I noticed some room for improvement. On smaller screens, the content can become cramped. Consider using
flexboxorgridwith more media queries to ensure the component remains well-spaced and visually balanced on all screen sizes. It might help to add more spacing and adjust font sizes for smaller devices.** Code Structure and Readability:** The code is generally clean and readable, but there are a few areas where it could be more efficient. You could break down repeated styles in the CSS into reusable classes to avoid redundancy. Additionally, ensuring consistent indentation and adding comments for sections of the code would enhance readability, especially for collaborators or future updates.
** Alignment with Design:** The solution closely follows the design in terms of structure and functionality. However, one area for improvement would be ensuring that the visual details—such as margins, paddings, and font sizes—match the design more precisely. This attention to detail can elevate the final product and make it feel more polished. Overall: Great effort on completing the project! The functionality works as expected, and with a few adjustments to semantic HTML, accessibility, and responsiveness, this project could really stand out. Keep up the good work, and refining these aspects will bring your skills to the next level.
0 - 1deadjoe• 260
@1deadjoe
Submitted
What are you most proud of, and what would you do differently next time?
I am proud to have finally used SASS in my styling. Having learned and mastered the most common CSS made it quite an easy and interesting venture. Is it me or does it look like my code is cleaner?
What challenges did you encounter, and how did you overcome them?
This was quite an easy challenge, so no notable challenges were encountered. Oh, except forgetting how to center a div.
What specific areas of your project would you like help with?
It was a great project in overall. Any areas of help will be highlighted in future projects.
Papi• 230@Papi84
Posted
The NFT Preview Card project effectively uses SASS to manage styles, which contributes to cleaner and more maintainable code. The design is visually appealing and the use of Flexbox for layout ensures responsiveness. To further enhance the project, consider adding more comments to the SASS files for better readability. Additionally, incorporating more advanced SASS features, such as mixins and functions, could improve styling efficiency. Overall, it’s a strong implementation with a solid foundation for further refinement.
Marked as helpful
0 - جهاد أحمد• 270
@Gehad28
Submitted
What specific areas of your project would you like help with?
Any feedback is welcomed :)
Papi• 230@Papi84
Posted
-->Overall Feedback<-- Great work on completing the challenge! 🎉 It’s clear that you’ve put in effort to implement JavaScript fundamentals effectively, and I can see that the project is functional and meets the basic requirements.
-->What’s Working Well<--
- Functionality: Your solution handles the core functionality very well. The JavaScript logic seems solid, and the app performs the necessary operations correctly. The calculation of results (if this is a calculator or a similar interactive challenge) looks accurate and smooth.
- Design: The UI is clean and well-structured. I can tell you’ve paid attention to creating a simple and intuitive user interface, which is always a great user experience.
- Code Structure: Your JavaScript code is well-organized. You’ve broken down the logic in a way that’s easy to follow. I also noticed that your use of functions improves the reusability and readability of the code.
-->Suggestions for Improvement<--
- Error Handling: Consider adding error handling or validation for edge cases. For example, what happens if a user inputs a value that doesn’t make sense (e.g., negative numbers or letters)? Adding simple validation could improve the user experience by preventing unexpected results.
- Accessibility: Improving accessibility can make your project more inclusive. Adding more descriptive
alttext to images, using semantic HTML, and ensuring the app is keyboard-navigable would help make the project more robust for different users. - CSS Improvements: You could also improve responsiveness slightly to ensure that your design scales perfectly across all screen sizes. Adding more media queries or using responsive units like
remor percentages can help.
-->Enhancements<--
-
Additional Features: To take your project to the next level, you could consider adding some interactive features like animations or more detailed visual feedback for user actions. For example, dynamically highlighting input fields, or displaying a real-time preview of the calculations, can add polish to the experience.
-
Code Refactoring: In your JavaScript, you might want to refactor repetitive code into reusable functions. This will make your code more maintainable and cleaner, especially for larger projects.
-->Conclusion<-- Overall, you’ve done an impressive job with this project! The core functionality works well, and your code is easy to follow. A few adjustments in accessibility, responsiveness, and error handling could elevate the user experience even more. Keep up the great work!
0 - PMAGENE Sem Joel• 300
@Jomagene
Submitted
What are you most proud of, and what would you do differently next time?
Hey everyone! Here’s a quick look at what I’m proud of, the challenges I faced, and where I’d love your feedback.
🌟 What am I most proud of?
- Brought the UI to life with dynamic content updates using JavaScript and SCSS, making it responsive.
- Successfully used async/await for efficient data fetching.
- Handled menu item clicks using event propagation, reducing the need for multiple event listeners.
- Leveraged SCSS mixins to manage background styles, resulting in cleaner code.
🤔 What would I do differently next time?
- Refactor JavaScript for better modularity and consistent use of modern features.
- Improve further error handling, especially for asynchronous operations.
What challenges did you encounter, and how did you overcome them?
Oh dear, making those HTML content updates was a bit tricky! But breaking things down into smaller functions and using event delegation in JavaScript really did the trick.
As for the SCSS, wrangling the complexity for responsive design was a challenge, but I tackled it head-on by using mixins and variables to keep everything consistent and smooth!
What specific areas of your project would you like help with?
🧐 Where do I need help?
I could use some tips on leveling up my error handling, especially for those tricky async operations. Also, any advice on making my SCSS even sleeker and more optimized would be super appreciated!
Papi• 230@Papi84
Posted
Wow Well-done, super clean codes.
1 - Papi• 230
@Papi84
Submitted
What are you most proud of, and what would you do differently next time?
I’m most proud of the responsive design I implemented, ensuring the project looks great on both mobile and desktop screens. It was my exciting using CSS Grid, and I’m thrilled with how it turned out.
Next time, I would spend more time on the planning phase to avoid last-minute changes. I also realized the importance of testing more thoroughly on different browsers, as I encountered some compatibility issues late in the project.
What challenges did you encounter, and how did you overcome them?
One of the main challenges I faced was ensuring the design was fully responsive across different devices. It was difficult to balance the layout so that it looked good on both mobile and desktop screens. This challenge helped me better understand responsive design principles and improved my skills in creating layouts that work well on different devices.
What specific areas of your project would you like help with?
I would like help with improving the accessibility of my design. Ensuring that the project is user-friendly for people with disabilities is important to me, but I'm not sure if I’ve implemented the best practices effectively. While I’ve included some basic accessibility features, I’m unsure if I’ve covered all the necessary aspects, such as color contrast and keyboard navigation. I would appreciate any feedback or resources on improving accessibility, particularly in ensuring that the design is fully navigable using only a keyboard and that all visual elements meet contrast standards.
Papi• 230@Papi84
Posted
@ownedbyAnanimous Thank you so much for the corrections and suggestions; they were incredibly helpful. I will definitely use your tips to make my work look even better.
0 - AHAMED NAJAH• 220
@najahaja
Submitted
What are you most proud of, and what would you do differently next time?
I have used HTML ,CSS and JavaScript at the same time. Next time I will use any framework.
What challenges did you encounter, and how did you overcome them?
I faced difficulty in adjusting the image size, but after that, I Googled it and found the solution.
What specific areas of your project would you like help with?
Using event handler.
Papi• 230@Papi84
Posted
The code is well-organized with comments, making it easier to maintain and understand. Just ensure you consistently apply similar structures across the entire stylesheet for better readability. If these points align with your design goals, then everything should work well. Otherwise, you may want to tweak these aspects for better performance or compatibility.
0 @Manuelcoder02
Submitted
Papi• 230@Papi84
Posted
fantastic work Brother. keep up the hard work and you will almost there.
0- Adewoye Emmanuel• 30
@ElderAdewoye23
Submitted
What are you most proud of, and what would you do differently next time?
Proud of the fact that i tried to make it responsive and i loved that it worked even if not that perfect yet, the joy of getting it to work is overwhelming
What challenges did you encounter, and how did you overcome them?
The challenge is that the style guide isnt that equipped with every detail needed but i think the Pro account people cant have this issue
What specific areas of your project would you like help with?
I still want to keep practising and be really used to it but in a way if any one can answer, can i start learning javascript from what you have seen me done here with html and css
Papi• 230@Papi84
Posted
HTML & Semantic Structure: You've done a commendable job with the HTML structure, employing semantic tags like
<header>,<main>, and<footer>effectively. These tags not only improve readability but also enhance accessibility by clearly defining the roles of various content sections. There are additional opportunities to refine this further by incorporating elements like<figure>and<figcaption>for images and<section>for grouping related content.CSS & Styling: Your CSS is well-structured and organized, making it easy to follow and maintain. The use of classes is consistent, which supports reusability throughout your stylesheets. To further improve, consider using CSS variables for common values like colors, fonts, and spacing. This would make your code more maintainable and easier to update in the future.
Responsiveness & Layout: The responsiveness of your design is well-handled, with the layout adapting smoothly across various screen sizes. However, slight adjustments to text size and line height on smaller screens could enhance readability. Testing your design in landscape mode on tablets and larger phones will help ensure consistency across all devices.
Accessibility: Your approach to accessibility is solid, particularly with descriptive alt text for images and well-structured links. To take it a step further, consider adding ARIA attributes to interactive elements and reviewing contrast ratios to ensure text is easily readable for all users, including those with visual impairments.
Design Consistency: Your design remains faithful to the original brief, with careful attention to typography, spacing, and color schemes. Any intentional deviations from the design should be documented or commented on to provide clarity on your design decisions.
Marked as helpful
0 - Taiwo Sumayyah• 90
@Sumta4real
Submitted
What are you most proud of, and what would you do differently next time?
I am proud of my speed and accuracy. it took me about 3hrs to complete this project with little to no challenge whatsoever
What challenges did you encounter, and how did you overcome them?
None
What specific areas of your project would you like help with?
I am not a pro user, so I did not have access to the design file. So I would appreciate any feedback that would help me achieve precision
Papi• 230@Papi84
Posted
Semantic HTML: my use of semantic HTML is strong overall. I noticed appropriate use of
<header>,<nav>, and<footer>tags, which help define the structure clearly. However, there are some areas, like in the main content, where using<section>or<article>instead of<div>would improve both the clarity and accessibility of the content.Accessibility: The solution is quite accessible, but there are a few areas for improvement. For example, adding
aria-labelsto interactive elements like the buttons and ensuring that all images have descriptivealtattributes would enhance accessibility. Also, consider reviewing the color contrast to ensure it meets accessibility standards, particularly for users with visual impairments.Responsiveness: The layout on this project, generally works well across various screen sizes. I noticed that on smaller screens, some elements in the navigation and footer could benefit from better alignment or resizing to maintain a clean, user-friendly interface. Fine-tuning your media queries could help resolve these issues and improve overall responsiveness.
Code Structure & Readability: codes are well-organized and relatively easy to follow. To further enhance readability, consider modularizing your CSS by breaking it into smaller files, possibly using a preprocessor like SASS. This approach can make the code more maintainable in the long run. Also, adopting a more consistent naming convention across your CSS classes would improve clarity.
Design Fidelity: The solution on my site is quite close to the original design. There are minor differences, particularly in the spacing and font sizes, that could be adjusted to better match the design specifications. Paying attention to these finer details can significantly improve the overall look and feel of your project.
1 - PAlonso Vazquez• 160
@alonsovzqz
Submitted
What specific areas of your project would you like help with?
- When adding the blog title I added first the
h2and inside I added anatag. I'm not completely sure if that's correct or if there's another approach for it keeping in mind that I still want it to be accessible.
Papi• 230@Papi84
Posted
Hi Alonso,
amazing job you doing!
using an <h2> element is a good choice as it helps with semantic structure and accessibility. However, placing an <a> tag inside an <h2> is a common and valid approach if you want the title to be a clickable link. This approach can be both accessible and SEO-friendly, as long as it’s implemented correctly.
Here are a few considerations to ensure both accessibility and best practices:
==>Semantic HTML: Ensure that the <h2> element accurately reflects the hierarchy of your content. If the blog title is a major section heading, then <h2> is appropriate. If it’s a subheading under another section, consider using <h3>.
==>Accessible Links: When using an <a> tag inside the <h2>, make sure the link text is descriptive enough to provide context about where it leads. For instance, “Read more about [Topic]” is more descriptive than just “Click here.”
==>Aria Roles: If you need to add extra accessibility features, consider using ARIA roles and properties as necessary, but usually, semantic HTML elements and descriptive link text are sufficient.
==>Focus Management: Ensure that your links are keyboard accessible and visually distinguishable from surrounding text. This includes having a clear focus state for users navigating via keyboard.
If you have any specific concerns or additional questions about the implementation or need further assistance, please let me know!
Best regards, Papi84
Marked as helpful
0 - When adding the blog title I added first the
