Css Flex box / Css Animation

Community feedback

• 

  Szymon Rojek•4,540

  @SzymonRojekPosted almost 4 years ago

  Hi Karim,

  I have seen your HTML. One of the primary advancements of HTML5 was introducing a standardized set of semantic elements. The term "semantic" refers to the meaning of a word or a thing, so "semantic elements" are elements designed to mark up the structure of a document in a more meaningful way, a way that makes it clear what they're for, what purpose they serve in the document.

  Therefore, it will be amazing to use semantics tags like section, main, article, header etc. When you are writing HTML it is good to think about accessibility, readability, consistency and standards. I would divide the semantic block elements into two categories: primary structure (for example header, main, footer, then divide those regions into sections) and content indicators. There are lot's of tags and it is worth getting to know them gradually.

  Also you do not have to all the time fill in the alt attribute, it specifies an alternate text for an area.

  Your example:

  <img src="images/bg-pattern-top.svg" alt="background" class="topsvg">
  

  In this example "background" means nothing to blind people, just close your eyes and ask yourself what does it mean for you - this word is huge and has a very wide range. I like this article and this. I am sure you will gain better knowledge after reading these articles or other similar.

  Also instead of ID it is better to use classes. It is very easy to use ID inappropriately. ID is unique and is good when you really want to do something important on your page. I can recommend this article. I know that lots of tutorials are using ID's because it is very easy and fast! :) but here good practice is the golden key - good coding is the most important, proper coding and improving our skills step by step. That's why we are here :D

  Thanks!

  3

  ---

  

  Karim•210

  @karimsehPosted almost 4 years ago

  @SzymonRojek thank you so much ! I'll deffinetly check those articles and try to use more semantic tags.

  1
• 

  Web Frog•1,840

  @MasterDev333Posted almost 4 years ago

  Great work @Karim. I love your card animation. I suggest you to use background circles using background-image or pseudo-elements. Hope it helps. Happy coding~ :)

  0

  ---

  

  Karim•210

  @karimsehPosted almost 4 years ago

  @MasterDev333 Thank you for your feedback. :)

  0