Advice generator app

Community feedback

• 

  Daniel 🛸•44,310

  @danielmrz-devPosted 10 months ago

  Hello @Alokray007!

  Your solution looks great!

  I have a suggestion for improvement:

  • Use <main> to wrap the main content instead of <div>.

  📌 Tags like <div> and <span> are typical examples of non-semantic HTML elements. They serve only as content holders but give no indication as to what type of content they contain or what role that content plays on the page.

  This tag change does not impact your project visually and makes your HTML code more semantic, improving SEO optimization as well as the accessibility of your project.

  I hope it helps!

  Other than that, great job!

  Marked as helpful

  1

  ---

  

  Alok Suman•2,380

  @Alokray007Posted 10 months ago

  @danielmrz-dev Thank you for your suggestions this means a lot to me. Definitely I'll keep in mind next time to use <main>.

  1

  

  Michel•60

  @michelNicePosted 10 months ago

  Hello there! how are you, @danielmrz-dev?

  I have been trying to build a project, However I can not get the navegation the right way. So What i am trying to do is add an unorder list and h2 with flexbox. my goal is

  while scrolldown the the IMG shrink to the small and then get back it to normal without push another elements aside as I am doing 2.When it goes to mobile the IMG stay the same size it doesn't shrink at all

  I'm 3 day in a row try do doing it own my own, seaching on google, chat gpt , stckover flow you name it...

  exemple what I am trying to do:https://www.nestpanos.com

  my repository:https://github.com/michelNice/Nest-Panos

  Thank you for you time.

  by the way.. good job on the project.

  0
• 

  Petrit Nuredini•2,860

  @petritnurediniPosted 10 months ago

  Congratulations on finishing your Advice Generator App project! It's exciting to see you bring together HTML, CSS, and JavaScript to create this interactive application. Here are some best practices and recommendations to enhance your project further:

  1. HTML Best Practices:

     • Semantic Elements: Good job on using semantic tags like <div>, <picture>, and <span>. Consider using more specific HTML5 semantic elements where appropriate for better document structure and SEO.
     • Alt Attributes: Ensure all images have descriptive alt attributes for accessibility. This helps users who rely on screen readers.

  2. CSS Styling:

     • Responsive Design: Your CSS shows good use of media queries for responsiveness. Continue to test your design on various devices to ensure a consistent user experience.
     • CSS Variables: Excellent use of CSS variables for colors and font sizes. It keeps your styling consistent and easy to manage.

  3. JavaScript:

     • Error Handling: Good start with error handling in your fetch request. Consider enhancing it by displaying a user-friendly message if the API request fails.
     • ES6 Features: Leverage ES6 features such as const and let for variable declarations to make your code more robust and modern.

  4. Performance and Accessibility:

     • Loading External Resources: Optimize the loading of external resources like fonts and images to improve performance.
     • Keyboard Accessibility: Ensure that the application is fully accessible via keyboard, including the ability to trigger the advice generator.

  5. Code Organization:

     • Modular JavaScript: Consider organizing your JavaScript code into modules or functions for better readability and maintainability.

  6. Learning Resources:

     • To learn more about accessibility, WebAIM is an excellent resource.
     • For advanced JavaScript practices, JavaScript.info provides detailed guides and explanations.

  Keep pushing the boundaries of your coding skills. Your journey is full of learning opportunities, and the community is always here to support you. Can't wait to see what you create next! 🌟💻🚀

  1

  ---

  

  Alok Suman•2,380

  @Alokray007Posted 10 months ago

  @petritnuredini Thanks you for this valuable feedback. I will go through the references provided by you to keep my code more optimized.

  0