Diseño de página web con HTML, CSS y JavaScript: una agencia responsive paso a paso

Prepara el proyecto y los recursos

Crea una carpeta con index.html, estilos.css, una carpeta img para las fotos y una js para los scripts. En el <head> enlaza tu hoja de estilos y la hoja de Font Awesome desde su CDN, que es lo que dibuja los iconos de YouTube, Facebook y GitHub del pie. Los scripts van al final del <body>, con jQuery primero porque filtro.js lo necesita.

<link rel="stylesheet" href="estilos.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU"
    crossorigin="anonymous">

<script src="js/jquery.js"></script>
<script src="js/main.js"></script>
<script src="js/filtro.js"></script>

Escribe el menú y la cabecera

El menú vive dentro del <header>: un contenedor con el logo, los cinco enlaces y el icono de menú para móvil. Cada enlace tiene un id propio porque en el último paso JavaScript los usará para hacer scroll a su sección. El icono de hamburguesa es el carácter ☰, así no hace falta otra fuente ni otra imagen.

<nav id="nav" class="nav1">
    <div class="contenedor-nav">
        <div class="logo">
            <img src="img/logo.png" alt="">
        </div>
        <div class="enlaces" id="enlaces">
            <a href="#" id="enlace-inicio" class="btn-header">Inicio</a>
            <a href="#" id="enlace-equipo" class="btn-header">Equipo</a>
            <a href="#" id="enlace-servicio" class="btn-header">Servicios</a>
            <a href="#" id="enlace-trabajo" class="btn-header">Trabajos</a>
            <a href="#" id="enlace-contacto" class="btn-header">Contacto</a>
        </div>
        <div class="icono" id="open">
            <span>&#9776;</span>
        </div>
    </div>
</nav>

Crea las secciones de equipo, servicios y trabajos

Las tres secciones repiten el mismo patrón: un título, un subtítulo con la clase after y una fila de cajas. En la galería, cada trabajo lleva su categoría como clase (programacion, diseño o marketing) y cada botón del filtro la guarda en data-nombre. Esa coincidencia es lo que después usa el filtro.

<div class="botones-work">
    <ul>
        <li class="filter active" data-nombre='todos'>Todos</li>
        <li class="filter" data-nombre='diseño'>Diseño</li>
        <li class="filter" data-nombre='programacion'>Programacion</li>
        <li class="filter" data-nombre='marketing'>Marketing</li>
    </ul>
</div>
<div class="galeria-work">
    <div class="cont-work programacion">
        <div class="img-work">
            <img src="img/programacion1.jpeg" alt="">
        </div>
        <div class="textos-work">
            <h4>Programacion</h4>
        </div>
    </div>
</div>

Define las variables de CSS

Antes de dar estilo a nada, el capítulo 2 guarda colores, tamaños y espacios en variables dentro de :root. Al estar en la raíz, todos los elementos pueden usarlas. La ventaja se ve en el responsive: para reducir los márgenes en móvil solo cambias --margenes, no cada sección.

:root{
  --color1: rgb(219,144,.5);
  --color2: rgba(23, 180, 83, 0.877);
  --color3: rgba(11,194,211, 0.623);
  --fondo: #f2f2f2;
  --titulos: 33px;
  --margenes: 60px;
  --espacios: 10px;
  --espacios-contenido:45px;
}

Dale a la cabecera un degradado con efecto parallax

El fondo de la cabecera son dos capas en un solo background: primero un degradado semitransparente de naranja a verde y azul, y debajo la foto. Con background-attachment: fixed la imagen se queda quieta mientras el contenido sube, y ese es el efecto parallax.

header{
  width: 100%;
  height:600px;
  background: linear-gradient(to bottom,
  rgba(211,135,20, .6),
  rgba(29,241,171, .6),
  rgba(7,109,150, .45)
  ), url(img/fondo.jpg);
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
}

Ordena las tarjetas con Flexbox y object-fit

Las tarjetas del equipo están en una fila Flexbox con flex-wrap, así que bajan de línea cuando no caben. Cada tarjeta mide 400 px de alto: el 80 % para la foto y el 20 % para el texto. object-fit: cover hace que la foto llene su caja sin deformarse, recortando lo que sobra.

.card{
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
}

.content-card{
  width: 31%;
  box-shadow: 0 0 6px 0 rgba(0,0,0,.5);
  overflow: hidden;
  height:400px;
}

.content-card img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

Cambia el menú al hacer scroll

El menú tiene dos estados en CSS: .nav1, transparente y de 80 px, y .nav2, con fondo y de 100 px. En el capítulo 3, JavaScript lee cuánto has bajado (window.pageYOffset) y a partir de 300 px cambia una clase por la otra. La función también se ejecuta al cargar la página, por si alguien la recarga a mitad del scroll.

function menus(){
    let Desplazamiento_Actual = window.pageYOffset;

    if(Desplazamiento_Actual <= 300){
        nav.classList.remove('nav2');
        nav.className = ('nav1');
        nav.style.transition = '1s';
        menu.style.top = '80px';
        abrir.style.color = '#fff';
    }else{
        nav.classList.remove('nav1');
        nav.className = ('nav2');
        nav.style.transition = '1s';
        menu.style.top = '100px';
        abrir.style.color = '#000';
    }
}

Haz el menú hamburguesa para móviles

Por debajo de 700 px los enlaces pasan a ser un panel fijo con width: 0, es decir, escondido. Al tocar el icono, apertura() le da un 70 % del ancho de la pantalla, y al volver a tocarlo lo cierra. Un tercer evento cierra el menú si tocas en cualquier otra parte de la página.

@media screen and (max-width: 700px){
  .enlaces{
    position: fixed;
    top:80px;
    background: #2c3e50;
    left: 0;
    height: 100%;
    transition: 1s;
    width: 0;
    overflow: hidden;
  }
}

function apertura(){
    if(cerrado){
        menu.style.width = '70vw';
        cerrado = false;
    }else{
        menu.style.width = '0%';
        menu.style.overflow = 'hidden';
        cerrado = true;
    }
}

Muestra un preloader mientras carga la página

El <body> empieza con la clase hidden (sin scroll) y una capa negra a pantalla completa con la animación de Loading.io encima. Cuando la página termina de cargar, jQuery desvanece la capa y quita la clase.

.centrado{
  position: fixed;
  width: 100vw;
  height: 100vh;
  background: #000;
  z-index: 100;
  display: flex;
  justify-content: center;
  align-items: center;
}

window.addEventListener('load', function(){
    $('#onload').fadeOut();
    $('body').removeClass('hidden');
    menus();
});

Filtra la galería de trabajos con jQuery

En el capítulo 4, al hacer clic en un botón, este se marca como activo y sus hermanos pierden la clase. Después se lee su data-nombre: con «todos» se muestran todas las cajas, y con una categoría se ocultan las que no la tienen y se muestran las que sí.

$('.filter').click(function () {
    $(this).addClass('active').siblings().removeClass('active');
    let valor = $(this).attr('data-nombre');
    if (valor == 'todos') {
        $('.cont-work').show('1000');
    } else {
        $('.cont-work').not('.' + valor).hide('1000');
        $('.cont-work').filter('.' + valor).show('1000');
    }
});

Lleva cada enlace a su sección con scroll suave

Cada enlace del menú evita su comportamiento normal y anima el scroll hasta la posición de su sección. Se restan 100 px porque es lo que mide el menú fijo: sin eso, el título de la sección quedaría tapado.

let equipo = $('#equipo').offset().top;

$('#enlace-equipo').on('click', function(e){
    e.preventDefault();
    $('html, body').animate({
        scrollTop: equipo -100
    },600);
});