Dar los toques finales a una página web personal implica dominar el arte de las cajitas en CSS. En esta parte del proyecto se estilizan los íconos de redes sociales usando Flexbox, padding, margin, border-radius y colores de fondo individuales mediante selectores de ID, logrando un resultado profesional solo con HTML5 y CSS3.
¿Cómo preparar el layout del main con padding y viewport?
Antes de trabajar con los íconos, es necesario darle espacio al contenido principal. Se aplica un padding de 100 píxeles al elemento main para despegar visualmente todo el contenido, tal como aparece en la plantilla de referencia [0:36].
Sin embargo, al activar la vista de dispositivos móviles en Chrome (el ícono con forma de tableta en las herramientas de desarrollo), el texto puede verse demasiado pequeño o mal ajustado. Esto ocurre porque falta una etiqueta fundamental en el HTML: la meta etiqueta de viewport [1:23].
Para corregirlo, se agrega dentro del <head>:
html
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Esta línea indica al navegador que el ancho del viewport debe coincidir con el ancho real del dispositivo y que la escala inicial sea 1.0, es decir, sin zoom. Con esto, el contenido se ajusta correctamente tanto en escritorio como en móvil [1:55].
¿Cómo centrar íconos sociales usando display flex y justify-content?
Los íconos de redes sociales están dentro de un <ul> con la clase social-icons. Para colocarlos uno al lado del otro y centrarlos, se utiliza display flex combinado con justify-content center [3:05].
css
.social-icons {
display: flex;
justify-content: center;
margin-top: 40px;
list-style: none;
}
- display flex: posiciona los elementos hijos en fila, uno al lado del otro.
- justify-content center: centra horizontalmente los elementos dentro del contenedor.
- margin-top: separa los íconos del texto superior con 40 píxeles de distancia [3:46].
- list-style none: elimina los puntitos predeterminados de las listas
<ul> [7:30].
Cada ícono individual tiene la clase social-icon (sin la s). A estos se les aplica también display flex, justify-content center y align-items center para centrar el contenido tanto horizontal como verticalmente dentro de cada cajita [4:15].
¿Qué papel juegan padding, margin y border-radius en cada ícono?
A cada .social-icon se le asigna:
- Padding de 15 píxeles: agranda la cajita alrededor del ícono [4:50].
- Border-radius de 5 píxeles: redondea las esquinas para un aspecto más suave [5:30].
- Width y height al 100%: el enlace
<a> ocupa todo el espacio disponible del <li> que lo contiene [6:05].
El margin-left de 8 píxeles se coloca en los elementos <li> y no en los <a>, porque si se pone en el enlace, el margen se desborda fuera de la caja y genera un comportamiento visual incorrecto [6:40].
css
.social-icons li {
margin-left: 8px;
}
.social-icon {
display: flex;
justify-content: center;
align-items: center;
padding: 15px;
border-radius: 5px;
width: 100%;
height: 100%;
}
¿Cómo asignar colores de fondo individuales a cada red social?
Cada ícono tiene un ID único en el HTML. Usando selectores de ID dentro de CSS, se aplica un background específico con códigos de color hexadecimal [8:25].
css
main .social-icons #linkedin {
background: #0077B0;
}
main .social-icons #github {
background: #23272B;
}
main .social-icons #twitter {
background: #1DA1F2;
}
main .social-icons #youtube {
background: #F70000;
}
main .social-icons #platzi {
background: #121F3D;
}
¿De dónde se obtienen estos códigos hexadecimales?
El color picker integrado en editores como Visual Studio Code permite arrastrar un selector sobre la paleta de colores para obtener el código hexadecimal deseado. Cada red social tiene un color representativo: azul para LinkedIn, gris oscuro para GitHub, azul claro para Twitter, rojo para YouTube y azul oscuro para Platzi [9:15].
Con todos estos estilos aplicados, la carta de presentación web queda completamente terminada utilizando únicamente HTML5 y CSS3. La clave estuvo en entender el modelo de caja: cada <li> contiene un <a>, y al ajustar dimensiones, márgenes y colores, los íconos lucen profesionales y alineados.
¿Tienes dudas sobre cómo Flexbox organiza los elementos o cómo funcionan los selectores de ID? Comparte tu experiencia en los comentarios.
