I complete this challenge to improve my foundation of HTML and CSS.
In this challenge, I focus on achieving:
- Semantic & Accessible HTML
- CSS that follow BEM methodology
Vite
HTML/CSS
For this simple challenge, I just use simple HTML/CSS and follow the best practices.
๐ What I Learned
- Has a quick refresher on BEM methodology.
- Learn a new css rule
-webkit-line-clamp
that truncate the text at specific number of lines. - Learn how to keep the height of the card by targetting the style of image and text separately.
๐ฆ Running the Project To run the project in your local environment, follow these steps:
- Clone the repository to your local machine.
- Run npm install or pnpm install or yarn in the project directory to install the required dependencies.
- Run npm run start or pnpm run start or yarn start to get the project started.
- Open http://localhost:5173 (or the address shown in your console) in your web browser to view the app.
๐ฟ Video