Lección 1: Introducción

Maquetación Web

Asumo que ya conoces todo el sistema de marcado, de no ser así te recomiendo visitar el curso de HTML, y sabes aplicar estilos (en caso contrario repasa el curso de CSS sin evitar la lección de SASS). Sin ambas bases no podrás seguir este curso. Si ya los conoces, ¡adelante!

La maquetación web es la parte del desarrollo web que se encarga de darle forma a la página web. Es decir, de definir la estructura de la página, y de posicionar los elementos en la misma. Para ello se utilizan diferentes técnicas modernas que deberemos aprender.

En este curso aprenderás a maquetar una página web con diseño adaptativa (Responsive design) utilizando HTML y CSS. Aprenderás a posicionar los elementos en la página y que se adapte a cualquier dispositivo. Además te enseñaré a organizar el código de forma que sea fácil de mantener o trabajar en equipo.

¿Estás preparado? ¡Empezamos!

Restablecer zoom

Por defecto, un navegador aplicará un zoom en versiones de móvil/celular (a partir de ahora lo llamaré smartphone) para ajustar el tamaño de los textos; lo cual estropeará un diseño. La solución es indicar con el meta viewport que el navegador no ajuste el escalado, empiece con el escalado por defecto.

Para ello añadiremos el siguiente meta en el <head> de nuestra página.

<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">

Imágenes

Es recomendable que todas nuestras imágenes dispongan una anchura de 100% para que sean adaptables al diseño. Pero, ¿como indicaremos el tamaño de la imagen? Por medio de la anchura de su contenedor. Además también estableceremos object-fit: cover y object-position: center para evitar que se deformen cuando especifiquemos medidas que rompan su relación de aspecto (su anchura y altura no sean proporcionales).

Añadiremos siempre la siguiente regla CSS.

img {
  display: block;
  width: 100%;
  object-fit: cover;
  object-position: center;
}

display: block para que se comporte como un elemento en bloque, y así poder definir su anchura y altura.
width: 100% para que ocupe el 100% de su contenedor.
object-fit: cover para que recorte la imagen para que no aparezca deformada.
object-position: center para que la imagen se centre en el recorte.

En el siguiente ejemplo se ha fijado la altura a 20rem para mostrar como se adaptaría a diferentes contenedores.

Resetear lista para navegación

Para utilizar una lista como menú de navegación, eliminar los estilos por defecto.

A partir de una estructura clásica de HTML para crear menús de navegación:

<nav class="nav">
  <ul class="nav__list">
    <li class="nav__item">
      <a href="#" class="link">Elemento 1</a>
    </li>
    <li class="nav__item">
      <a href="#" class="link">Elemento 2</a>
    </li>
    <li class="nav__item">
      <a href="#" class="link">Elemento 3</a>
    </li>
  </ul>
</nav>

Aplicaremos los siguientes estilos sobre .nav__list, nuestra lista desordenada.

.nav__list {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
}

Pasaremos de una lista clásica en vertical:

Elemento 1
Elemento 2
Elemento 3

A lista horizontal con Flex:

El resto del diseño ya depende de ti.

Resetear enlaces

Para eliminar los estilos por defecto de los enlaces, aplicaremos los siguientes estilos sobre .link:

.link {
  display: inline-block;
  color: inherit;
  text-decoration: none;
}

display: inline-block para que se comporte como un elemento en línea, pero que se pueda definir su anchura y altura o margenes.
color: inherit para que herede el color del texto.
text-decoration: none para eliminar la subrayado.

Ir a una página

Cuando agrupes muchos hipervínculos, deja un espacio entre ellos para que sea más fácil la pulsación en Smartphones. Por ejemplo, si tienes una lista de hipervínculos como un navegador, Google recomienda 48px entre cada uno.

Con todos los estilos elementales preparados, ya podemos empezar a maquetar nuestra página web adaptativa. ¡Empezamos!