El bar necesita una web
El dueño del bar Casa Pepe te pide una web. Quiere que la gente vea la carta y el horario desde el móvil.
No tiene mucho dinero y la quiere pronto. Tú tienes todo lo que hace falta.
Hoy juntas lo que has aprendido en este capítulo en una sola página.
Palabras clave
| Palabra | Qué significa |
|---|---|
| Proyecto | Un trabajo con un objetivo, unos pasos y un resultado final. |
| Requisito | Algo que la página tiene que cumplir. |
| Revisar | Mirar el trabajo con calma para encontrar fallos. |
| Versión | El estado de la página en un momento. Se va mejorando poco a poco. |
Las celdas que rellenan los estudiantes quedan en blanco en esta vista previa.
Los pasos del proyecto
| Paso | Qué haces | Lección que te ayuda |
|---|---|---|
| 1 | Dibujas el boceto de las zonas | Dibujar antes de programar |
| 2 | Escribes el HTML con sus zonas | Estructura de una página |
| 3 | Das color y letra | Colores y letras legibles |
| 4 | Colocas con flexbox y grid | Colocar con flexbox y Cuadrículas con grid |
| 5 | Adaptas al móvil | Páginas para móvil y ordenador |
| 6 | Revisas el contraste y el teclado | Páginas para todos |
Las celdas que rellenan los estudiantes quedan en blanco en esta vista previa.
Pruébalo: la base de la web
<header class="top">
<h1>Bar Casa Pepe</h1>
<nav class="menu">
<a href="#food-menu">Carta</a>
<a href="#opening-hours">Horario</a>
</nav>
</header>
<main>
<section id="food-menu">
<h2>Carta</h2>
<div class="dishes">
<div class="dish">Tortilla, 4 euros</div>
<div class="dish">Bocadillo, 3 euros</div>
<div class="dish">Ensalada, 5 euros</div>
</div>
</section>
</main>
<footer>Calle Mayor, 12. Teléfono 900 000 000.</footer>
Lo que falta
Esta base tiene la cabecera, el menú y la carta. Pero la carta está sin estilo.
Falta poner los platos en una cuadrícula y dar a cada plato su caja.
Después falta el pie, el aviso y la versión para móvil.
Pruébalo: los platos en cuadrícula
<header class="top">
<h1>Bar Casa Pepe</h1>
<nav class="menu">
<a href="#food-menu">Carta</a>
<a href="#opening-hours">Horario</a>
</nav>
</header>
<main>
<section id="food-menu">
<h2>Carta</h2>
<div class="dishes">
<div class="dish">Tortilla, 4 euros</div>
<div class="dish">Bocadillo, 3 euros</div>
<div class="dish">Ensalada, 5 euros</div>
</div>
</section>
</main>
<footer>Calle Mayor, 12. Teléfono 900 000 000.</footer>
Poco a poco
Consejo
Haz un paso, mira el resultado y sigue. Si algo se rompe, sabrás que fue lo último que tocaste.
Repaso rápido: el plan
Inténtalo
Repaso rápido: el plan
3 preguntasTus respuestas se corrigen aquí y no se guardan. Una cuenta guarda tus resultados.
Tu lista de comprobación
| Comprueba | Cómo |
|---|---|
| La cabecera está en una fila | Nombre a la izquierda, menú a la derecha |
| Los platos están en tres columnas | Con un hueco entre cajas |
| Las letras se leen bien | Contraste de 4,5 o más y 16 px o más |
| El móvil muestra una columna | Con una media query de 600px |
| Se puede usar con Tab | El foco se ve siempre |
Las celdas que rellenan los estudiantes quedan en blanco en esta vista previa.