Skip to content
OverviewSolutions
8
Comments
8
Daniel Alejandro Cano Cardona
@Dacardonac

All comments

  • edpau•440
    @edpauSubmitted about 2 months ago
    What specific areas of your project would you like help with?

    I tried to use aria-expanded, aria-controls and aria-haspopup to improve accessibility for the share menu, to inform assistive technologies about the current state of the expandable share menu. Please comment on my approach.

    improving accessibility has turned to be more challenging than I expected. For the mobile version, I need to hide the author content from screen readers, while for the desktop version, it doesn't need to be hidden. There are many factors to consider.

    Please advise how I can improve the accessibility.

    Please also share any good articles on accessibility for beginner.

    Responsive article preview component

    1
    Daniel Alejandro Cano Cardona•110
    @DacardonacPosted about 1 month ago

    Hey Edpau! I hope you're doing well 😊. I was reviewing your solution and honestly, everything looks great! Congratulations on the awesome work. I just found a few areas where you could make some improvements to optimize your project even more:

    - Contrast: The background and foreground colors don't have enough contrast. This affects accessibility, as it could make it difficult for some people to read the content, in this link you can read more about this: Color contrast a11y

    - SEO: I noticed there are no Metadata tags <meta>. This can negatively impact SEO since search engines rely on that information to index your page properly. Here is a link where you can read more about this topic Metadata and SEO

    - Images: I recommend using .webp format for your images. This will improve the performance of your project by reducing load times.

    Also, as a general suggestion, you could organize your styles by using Sass/Scss and modularize them by components. This way, you’ll have better control over your styles and avoid having one long CSS file.

    I hope this helps! Keep up the great work, you’re doing awesome! 💪

    1
  • Daniel Alejandro Cano Cardona•110
    @DacardonacPosted 2 months ago

    Hi! I hope you are very well, I was reviewing your solution and everything is super good, congratulations, I found some points to improve and I would like to share them with you.

    • Metadata: It's important to optimize your site's Metadata to improve SEO and help search engines index it better. This includes adjusting the title, description, keywords, and meta tags to define your content and make it easier to discover, in this article you will find more information on this topic: Metadata and SEO.

    • HTML Semantics: Using semantic tags like <header>, <article>, <section>, etc., improves the structure and readability of your code. It also enhances accessibility for users with screen readers, making navigation clearer, in this link you can read more about that: HTML Semantics.

    • Color Contrast: Ensuring proper contrast between text and background is crucial for accessibility, especially for users with vision impairments. Improving this makes your content more readable and accessible to everyone.

    • .webp Image Format: Using images in .webp format is a great way to improve site performance, as this format reduces file size without losing quality. This speeds up page load times, benefiting both user experience and SEO.

    • Grid: In the grid you implemented, a better structure would be using grid: 1 / span 2. This is a best practice because it clearly defines where the element should expand from and to, you can test it and practice with this page: Layoutit.com.

    By implementing these changes, you'll optimize both the performance and a11y of your site, improving the overall user experience, I hope my comment is of great help. Keep up the good work!

    Greetings!

    0
  • Daniel Alejandro Cano Cardona•110
    @DacardonacPosted 2 months ago

    Hi Webdevbynight,

    I hope you're doing well. I reviewed the solution you sent, and overall, it looks great. However, I'd like to offer a few suggestions for improvement:

    • Version control: I recommend making more frequent commits. They act as checkpoints in your project, making it easier to track changes and recover if something goes wrong.

    • Metadata: Don’t forget to include metadata in your HTML. This helps improve your page's SEO and boosts your ranking in search engines, In this link you can read more about that: Metadata and SEO.

    • HTML semantics: Your HTML structure is good, but I suggest focusing more on semantics. This will enhance both the accessibility and readability of your code, you can read more about that in this link: HTML Semantic.

    • Accessibility: Review the color contrast in your project, as some combinations don’t contrast well. Improving this will boost accessibility and have a positive impact on future audits.

    • Performance: To enhance performance, I recommend using .webp images. They're lighter and load faster in browsers, improving user experience.

    0
  • Luka•180
    @zmora2622Submitted 2 months ago
    What specific areas of your project would you like help with?

    I mainly need help with BEM and accessibility and HTML semantics

    Product preview card SASS BEM

    1
    Daniel Alejandro Cano Cardona•110
    @DacardonacPosted 2 months ago

    Hi Luka! I hope you're doing well. I was reviewing your project, and everything looks amazing. I want to congratulate you on the excellent solution. I didn’t find any major errors, just a few minor points that you could address to improve the SEO and Accessibility of your page. I ran an audit using Google’s Lighthouse tool, and it provided some recommendations for enhancing these aspects. Below, I’ve outlined how you can improve these values in your project:

    • The image or icon of the shopping cart in the button is missing the alt attribute, which reduces the Accessibility of your page.

    • I noticed that your HTML is missing Metadata tags, which are very important for describing your project, improving your SEO, and positioning it better in browsers or search engines. Here’s a link where you can read more about this: Metadata and SEO.

    • Review your HTML structure; you could improve its semantics by using more specific tags such as <main>, <header>, <article>,<section>, etc. Below is a link to learn more about HTML semantics: HTML Semantic.

    • To improve the Performance of your page, you can change the format of your images to .webp.

    • As a final piece of advice, I recommend researching and using Conventional Commits, as they are very useful for understanding and maintaining clearer control over Commits. Here’s a link where you can read more about Conventional Commits: Conventional Commits.

    As I mentioned, these are minor points; your project is well done overall. I hope this feedback is helpful and serves as a learning opportunity.

    Keep developing, and I wish you the best of luck!

    0
  • Eugen•100
    @Fender60Submitted 3 months ago
    What challenges did you encounter, and how did you overcome them?

    I did the project without a design file for figma, I did everything by eye, there were problems with indents and dimensions.

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

    Any advice or comments would be appreciated.

    Flexbox, Scss

    2
    Daniel Alejandro Cano Cardona•110
    @DacardonacPosted 2 months ago

    Hello Fender60,

    I hope you're doing well. I reviewed your solution and want to congratulate you on your great work. I also noticed a few areas for improvement, and I'd like to share some feedback with you:

    SEO: Adding Metadata to your HTML can help improve your page's SEO and boost its visibility in search engines. Metadata and SEO

    Performance: I recommend using .webp format for images, as it will enhance your project's Performance.

    HTML Semantics: Your HTML could benefit from better Semantic Structure. Here’s a link to help you improve this aspect: Semantic in HTML.

    Version Control: It's a good idea to make Commits whenever a part of the project is complete. This acts as a Checkpoint, allowing you to avoid losing progress if something goes wrong.

    Sass and Components: I noticed you're using Sass for styling, which is excellent. To keep your Styles organized, consider breaking them into Components to prevent files from getting too large. Here’s a link to read more about it: Sass Guide.

    README: You've used the README-template.md from Frontend Mentor, which gives your project a professional touch in the README File.

    Keep up the good work and good luck!

    0
  • MrLanter•220
    @MrLanterSubmitted 3 months ago
    What are you most proud of, and what would you do differently next time?

    I am proud of myself for using the `` tags and understanding their functions more precisely.

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

    • Is the code well organized ?

    • Is the accessibility used sufficient ?

    • What are the possible improvements ? (I will soon start using SCSS)

    Reponsive simple page using Flexbox

    1
    Daniel Alejandro Cano Cardona•110
    @DacardonacPosted 3 months ago

    Hello MrLanter, I hope you are doing very well. I was reviewing your solution, and I want to congratulate you for the excellent work you sent. Everything is good. I only see one point to improve in your project, and I want to give you some feedback.

    • Check your HTML and its Semantics, you have a header tag inside a div tag that is inside the main tag, which is wrong semantically, here I let you a link where you can read about that: HTML Semantic Elements

    • Another point is that as a recommendation, you can save lines of code by using the modularized styles with Sass.

    That's all, the project in general is super good, congratulations MrLanter!

    0
  • MrLanter•220
    @MrLanterSubmitted 3 months ago
    What challenges did you encounter, and how did you overcome them?

    I couldn't get the yellow rectangle containing 'Learning' to have the correct width. I had to use max-width: max-content, a property I learned from Intellisense.

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

    Is the semantics of my project correct ? Is the code well organized ? What improvements are possible ? I feel like the avatar hover animation is not very smooth, do you have any idea how to fix this ?

    Responsive simple page using Flexbox and HTML Semantic

    1
    Daniel Alejandro Cano Cardona•110
    @DacardonacPosted 3 months ago

    Hello MrLanter, I hope you are doing very well. I was reviewing your solution, and I want to congratulate you on the excellent work you sent. I also want to give you some feedback on certain points where you can improve your project.

    • The design is excellent and very similar but you could improve it using the correct values they give you in the Figma file.

    • Something that I saw missing in your HTML is the Metadata, which helps you improve the SEO and which positions you better in the search engines, in this link, you can read more about that: Metadata and SEO

    • The last point is like a recommendation: Investigate the Modularization of styles with Sass. This will help you maintain better order, make the code more readable, and save lines of code.

    I hope that with my comment you can improve, I wish you good luck and that you are very well.

    Marked as helpful
    0
  • strach22•30
    @strach22Submitted 3 months ago
    What are you most proud of, and what would you do differently next time?

    I am practicing and learning, it took me like 2 hours

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

    Remembering name tags

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

    Any comments can be useful

    QR-Component with scss

    1
    Daniel Alejandro Cano Cardona•110
    @DacardonacPosted 3 months ago

    Hello Strach22, I hope you are doing very well, congratulations on your project and the solution you have delivered. In this comment, I want to give you feedback in the form of constructive criticism in which I will provide you with some recommendations and materials to improve your project in certain aspects.

    • Try to keep your project with only language, in this environment, it is better and is a good practice to keep everything in English, in this case, you have multiple files CSS, and SCSS named in Spanish. ‎
    • Try to use the Metadata in HTML because this data improves your SEO and makes your project more accessible in the browser, in this link you can read about that. Metadata in HTML ‎
    • Another point is to try to use the Methodology BEM, this methodology helps you to improve the code structure and to relate the classes. Here I leave you a link to read about and improve this aspect of your project. Methodology BEM ‎
    • In this project I can see the file css.map, in projects try not to expose the source map of the security application. ‎
    • When you work with Sass try to have all styles modularized and in components so that way you will have more order in your project, in this link you can read about that. Sass documentation
    0