De poder crear un acordion totalmente con html y css sin usar javascript
What challenges did you encounter, and how did you overcome them?no
What specific areas of your project would you like help with?Me gustaria saber si puedo mejorar mi semantica de html
Overall, this is a solid implementation with room for improvement in accessibility and responsive design. Keep up the good work, and I look forward to seeing how you iterate on this project! but this what i have to noticed may be you can take a look at it
Semantic HTML: The use of semantic HTML is crucial for accessibility and SEO. It looks like you’re using appropriate elements like <section>, <h2>, and <button> for the accordion items, which is great. However, consider using <dl> (description list) for the FAQ structure, as it can enhance the meaning of the content.
Accessibility: The solution could benefit from some accessibility improvements. For example:
Ensure that all interactive elements (like the accordion buttons) have aria-expanded attributes to indicate their state. Add tabindex to make sure keyboard users can navigate through the accordion sections easily. Consider using visually hidden text for screen readers to provide context (e.g., indicating whether an answer is expanded or collapsed). 3. Responsive Layout: The layout appears to be functional, but testing it on a range of screen sizes is essential. Using CSS media queries can help adapt the styles for smaller screens. Check if the accordion behaves as expected on mobile devices, and ensure that text is readable without excessive zooming or scrolling.
Code Structure: The code is generally well-structured and readable. It’s great to see modular CSS and clear class naming conventions. However, consider breaking down the components further if applicable, especially if you plan to expand functionality. This will promote reusability and make it easier to maintain.
Design Consistency: The implementation aligns well with the provided design, but always compare against the original mockup to ensure all elements match in terms of spacing, colors, and typography. Any discrepancies can impact the overall user experience.
Additional Suggestions: Adding animations for the accordion open/close action can enhance the user experience. Consider implementing a simple state management solution to handle the accordion's open/close state more effectively.
I’m most proud of how I effectively utilized HTML and CSS to create a visually appealing and responsive design. The project demonstrated my ability to implement modern web design principles and achieve a clean, user-friendly interface.
Next time, I would focus on enhancing cross-browser compatibility and optimizing performance. Additionally, I’d explore incorporating more advanced CSS features and JavaScript to add interactive elements, which could further improve the user experience.
What challenges did you encounter, and how did you overcome them?One of the main challenges was achieving consistent styling across different browsers and devices. I tackled this by using CSS resets to standardize default styles and thoroughly testing the design on various platforms to ensure compatibility. Additionally, I faced difficulties with responsive design, particularly with complex layouts. To address this, I utilized media queries and flexible grid systems to adapt the layout effectively. These steps ensured a cohesive and accessible user experience across different environments.
What specific areas of your project would you like help with?I would appreciate feedback on optimizing my CSS for better performance and scalability, particularly in handling complex layouts. Additionally, guidance on improving cross-browser compatibility and suggestions for integrating more advanced interactive features with JavaScript would be valuable. Any advice on refining my design for enhanced user experience and accessibility would also be greatly appreciated.
Thanks a lot @poissonfou
I will not procrastinate amid my project next time cause I forgot many class names and I think I wrote redundant SASS code, it was my first time utilizing SASS so I will make use of SASS mixins and functions more next time !
What challenges did you encounter, and how did you overcome them?SASS mixins and function were a little bit confusing so I could not use them more to reduce my written code !
What specific areas of your project would you like help with?suggestions are more than welcome !
@samir-Deve Hello, your codes look great and You are doing an amazing Job ,though i have few suggestions.
here are a few suggestions:
JavaScript Enhancements: The code could benefit from adding comments to make it more readable for others, especially around event listeners and functions.
CSS Improvements: Consider using CSS variables to manage common colors and font sizes, which would improve scalability and consistency across the project.
Responsiveness: Check the layout on smaller screens. Some elements might benefit from additional media queries to ensure better alignment and spacing.
These changes could enhance both readability and functionality!
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 div for the rating buttons, you could consider using a fieldset with legend and input elements (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-labels or alt attributes 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 using aria-pressed to 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 flexbox or grid with 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.
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.
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.
Any feedback is welcomed :)
-->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<--
-->Suggestions for Improvement<--
alt text to images, using semantic HTML, and ensuring the app is keyboard-navigable would help make the project more robust for different users.rem or 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!
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?
🤔 What would I do differently next time?
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!
Wow Well-done, super clean codes.
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.
@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.
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.
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.
couldn't see your codes of GitHub may be it was my network, but overall solution here looks good but big compare to the design! keep up the good work and you will get there, i wish you all the best.
fantastic work Brother. keep up the hard work and you will almost there.
very impressive, you did a very good job! you must be proud of yourself.
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
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.
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
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-labels to interactive elements like the buttons and ensuring that all images have descriptive alt attributes 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.
h2 and inside I added an a tag. 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.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
Coming back to my first challenge and upgrading it.
What a Journey Indeed :)
Thanks @Frontend-Mentor
will improve this very soon, not looking that good.
Feedback on the Solution:
Semantic HTML:
<header>, <nav>, <main>, <footer>). This enhances the document's structure and helps with SEO and accessibility.<article> and <section> to better organize the content and improve the clarity of the document’s structure.Accessibility:
alt textResponsiveness and Layout:
Code Quality:
Design Consistency:
Additional Recommendations:
Feel free to adjust or expand on these points based on the specific details of the solution. If you have any questions or need further clarification, please let me know!
This feedback is designed to be constructive and actionable, providing both praise and specific areas for improvement.