Background :
I’m currently learning HTML CSS from some learning path and i haven’t reached javascript and any other framework. So this website i build is purely HTML CSS. Since i’m learning alone i do not have any mentor and would love to hear some advice, suggestion, etc from all of you guys.

Issue :
I have build a simple card website and hosted it in my github repository. This 4 projects is a very simple one but just have enough basics to get me going later on. However i noticed that my code might not be standarized. I did some research into VSC extension that could help me be more consistent in my code but i still felt like it is not best. I would like to have some help with:

1. Semantic Tags, How to use this? i’ve only used <main> and <section> in those 4 projects, in which i didn’t know how it works in helping accessibility and giving better SEO ranking
2. CSS Property Naming Convension (?), i didn’t know the terms, but i wanted to know if there is any standarized CSS Property sequence, example below:

Container{
    display : flex;
    color : #fff;
    width : 50%;
    flex-wrap : wrap;
    justify-content : center;
    }

3. How to code better in overall, file names, which code to comment, what tag to use, etc
4. In my latest project which i hosted currently, i tried to opened it in my mobile to make sure it is responsive but somehow there is a gap in the right side, so it is not centerized

Here is my projects repository to help with visualizing what i’ve build

Repository : Repository

Hosting : Hosting

As Mentioned, i am trying to code better, having a better knowledge in how people do things in proffesional way, having a standarized rules to help better in maintaning the code etc. Regardless of all the topics above like responsiveness maybe, i am open to any suggestion or advice regarding my code etc.

For my learning path, i am currently going from HTML -> CSS -> JavaScript -> React.js -> Node.js -> Next.js