Objectives

• Creeu un document HTML vàlid amb una sintaxi vàlida. Només un body, un head, etc.
• Utilitzar correctament els elementsHTML: h1-h6, button, a, nav, ul, li. fan un bon ús de l'HTML semàntic.
• La sintaxi es pot validar amb un HTML comprovat.
• Replica el disseny de la millor manera possible en la seva mida "d'escriptori". feu un ús correcte dels colors de Tailwind, extreu les classes de components amb @apply (si cal)
• Ús correcte de CSS grid i Flexbox quan sigui necessari (flexbox per a components, quadrícula per a la disposició, en general)

Front End - Projecte 1

Escull un dels següents dissenys de pàgina web per composar-lo fent servir els coneixements d'HTML i CSS que hem après en les darreres dues setmanes:

Títol	Enllaç
Travel Agency Website	https://www.figma.com/community/file/1054354333817536175
Furniture Landing Page	https://www.figma.com/community/file/1061732519182077733
Creative Agency UI Kit	https://www.figma.com/community/file/1062442619500586015
iBuy - ecommerce website	https://www.figma.com/community/file/1061279717553788561
Finance Website Concept	https://www.figma.com/community/file/1060098483912933594
Agency Landing Page	https://www.figma.com/community/file/1060934768189771297
Digital Agency Website	https://www.figma.com/community/file/1058842196634115002
Product Landing Page	https://www.figma.com/community/file/1059550415816505412
Agency Web - Landing page design	https://www.figma.com/community/file/1058767686059595687
Tours & Adventures Landing Page	https://www.figma.com/community/file/1047352358177936736
Gaming Platform	https://www.figma.com/community/file/1058773912152023976
Simple Agency Web	https://www.figma.com/community/file/1058777711359033259
Creative Freelance Portfolio	https://www.figma.com/community/file/1055585500471619711
Travel Website Landing Page	https://www.figma.com/community/file/993910904620677970
Task manager web design	https://www.figma.com/community/file/1017688084974860884

Configuració

A la teva terminal,

1. Executa npm install per instal·lar els paquets (packages).
2. Executa npm start per inicialitzar Tailwind i compilar-ne les classes automàticament.

IMPORTANT! A partir d'aquest moment, la terminal quedarà "bloquejada", degut a que hi ha un programa funcionant. Això vol dir que no podràs utilitzar aquesta finestra de la terminal per a fer, per exemple, git commit. Hauràs d'obrir una altra finestra per a fer-ho!

Recursos

• Tailwind CSS
• Tailwind Labs Youtube Channel
• Utility-First Fundamentals

Notes

Aquest és un projecte creat a CodeOp, al bootcamp de Front End Development a Barcelona.