My 1st CSS project

Great stuff for your first project you should be proud, Some things to note,

• Missing a <meta> description tag for SEO purposes,
• You should apply a full modern reset to make things easier as you build, check out this site for a Full modern reset
• Using a naming convention like BEM, Using proper naming will prepare you for the changes in design of the website.
• ‍Using max-width: 100% or min-width: 100% is way more responsive then just width:100%, check out this article also from the same Frontend mentor dev responsive-meaning, she goes into more detail.
• You should avoid using px as it is an absolute unit and not a responsive unit like rem or em, You should look at this article from a Frontend mentor dev, Why font-size must NEVER be in pixels.
• Another great resource for px to rem converter.
• You are missing a alt="" on your <img> element, Having better alt="" descriptions for accessibility is a must check this out Write helpful Alt Text to describe images,
• Setting a height and width attribute to your <img> will increase performance to reduce layout shifts and improve CLS, It reserves the space on the page for the image.

I hope you found some of this information helpful, You should give the articles a good read and I look forward to seeing some more from you, Happy coding! 💻

Hi @mongkolkhanit-d,

Nice project! I really love the animations—they look smooth, and the extra effort shows.

One thing I noticed is that you rely heavily on <div> elements. Remember, <div> should only be used when necessary. For this project, you only really need three <div> elements: one for the card, one for the footer, and one for the badge. The other elements can be more semantic, such as <time>, <h2>, and <p>, which will improve SEO and accessibility. Always try to avoid unnecessary <div>s, and use Flexbox to structure elements. For example, display: flex with flex-direction: column will stack all elements on top of each other nicely.

Keep up the great work!

Best, Teodor

I have a few comments on your code. Firstly, you should create a /src folder to have a more logical architecture. Secondly, create a /styles folder within /src and put your CSS file in it.

Congratulations on your project and keep up the good work! 😊