Réplica de un diseño en Figma utilizando HTML válido y semántico. Implementación con Tailwind CSS, aprovechando @apply si es necesario. Uso de CSS Grid para el layout y Flexbox para componentes.
Link: http://css-project-eta.vercel.app
- Create a valid HTML document with proper syntax. Only one body, one head, etc.
- Correctly use HTML elements: h1-h6, button, a, nav, ul, li. Make good use of semantic HTML.
- The syntax can be validated with an HTML validator.
- Replicate the design as closely as possible in its "desktop" size. Make proper use of Tailwind colors and extract component classes using @apply (if needed).
- Correct use of CSS grid and Flexbox when necessary (Flexbox for components, grid for layout in general).
Use the following web page design to compose the HTML and CSS:
In your terminal:
- Run
npm install
to install the packages. - Run
npm start
to initialize Tailwind and automatically compile its classes.