I used mainly HTML and CSS for this project

Community feedback

• 

  T

  Matt Studdert•13,611

  @mattstuddertPosted almost 4 years ago

  Congrats on completing your first project, Nikita! You've done an excellent job, and you should definitely be proud of yourself! 👍

  Here are some pointers after taking a look at your code:

  • You're using div elements for the circles at the moment. I'd recommend either using pseudo-elements (::before, ::after) instead, or use background-image in your CSS. Both of these approaches mean you're not adding unnecessary HTML code.
  • You haven't got any headings, which means there's no content hierarchy. Creating a proper content hierarchy is key to building accessible websites. In this design, I'd say the person's name would be the h1, and the "Followers", "Likes", "Photos" text would be h2 headings. This would create a good hierarchy.
  • You've used a table for the stats, which isn't necessarily a bad thing here. But I would go with a different approach. I'd remove the table and have the h2 headings as I mentioned above instead. The stats could be span elements, as they're not really headings or paragraphs.
  • Avoid using IDs as CSS selectors. They have high specificity and can't be reused on the page, so they're not good for styling. Instead, I'd recommend sticking to class, attribute, pseudo, and type selectors. Using these will help keep your CSS more maintainable.
  • Have you ever tried using min-width media queries instead of max-width? It's quite a common workflow with front-end developers to use them and work mobile-first. It can often lead to less CSS code and has the benefit of loading in fewer mobile users styles, which can be a nice performance gain.

  I hope these tips help. Keep up the great work and let me know if you have any questions! 🙂

  0