HTML | CSS | Cutsom Properties | Flex | Grid

Community feedback

• 

  Jack Weru Kioni•240

  @JawekiPosted 10 months ago

  Nice work on that project. You have done it nicely, actually given that its plain HTML CSS. of course as @petritnuredini stated, it would be nice if you add some aria to aid in accessibility tools.

  I will comment that, It might have been easy for your development experience if you used something like react, because the repetitive code like the summary section elements can be react components created by mapping over a JSON object. Then to apply varying color on each element, using some CSS framework like Tailwind CSS, could have helped with conditional utility CSS on each component. Also tailwind allows you to define your own extended color palette besides the one it provides. Also its fun programming inline styles as you develop, because you see them being applied on the fly, rather that designing the html structure, then applying CSS separately, while trying to recall what class and id names you gave various elements.

  Anyways that's My thought, enjoy you web development journey...

  Marked as helpful

  0

  ---

  

  Daniel•130

  @tenczowyPosted 10 months ago

  @Jaweki Thanks for you feedback, I will take a look at "aria" since at the moment I have no idea that it is. Since I started my jorney with web development not that long ago and I know certain frameworks can make the job much easier I will stick to pure html and css in my first few projects here just to make sure I have a good understanding of basics. I belive that will make me a better developer in a long run.

  0

  

  Jack Weru Kioni•240

  @JawekiPosted 10 months ago

  @tenczowy
  Nice choice. a developer is as better has his initially understood knowledge and principals. All the best

  0
• 

  Petrit Nuredini•2,860

  @petritnurediniPosted 10 months ago

  Congratulations on completing your Results Summary Component project! 🌟 It's fantastic to see your dedication to creating an intuitive and visually appealing interface. Here are some best practices and suggestions to take your project to the next level:

  • HTML Structure & Semantics:

    • Great use of semantic HTML elements. For enhanced accessibility, consider using aria-labelledby or aria-describedby on complex elements like your summary component.
    • When using images, ensure the alt attribute is descriptive. For decorative images, it's okay to have an empty alt attribute (alt="").

  • CSS Styling:

    • Excellent use of CSS variables for maintaining a consistent theme. Consider using more relative units like em or rem for responsive sizing.
    • For responsive design, ensure your media queries cover a range of device sizes. It’s better to use max-width instead of just width in media queries for broader coverage.

  • Performance and Optimization:

    • Optimize your image assets to enhance loading times, especially for mobile users.
    • Compress and minify your CSS files in the production version for better performance.

  • General Suggestions:

    • Test your application across different browsers and devices to ensure compatibility and responsiveness.
    • Include a hover effect on clickable elements for better user interaction.

  • Learning Resources:

    • For CSS techniques and responsive design: CSS-Tricks
    • For web accessibility guidelines: Web Content Accessibility Guidelines (WCAG)
    • For front-end development trends and best practices: Frontend Masters

  Your progress is commendable, and your attention to detail shines through in your work. Keep experimenting with new ideas, technologies, and best practices. Your journey as a developer is on a promising path, and I'm excited to see what you'll create next. Keep up the great work! 💡💻

  0