Author artículo original: Kingsley Ubah
Articulo original: CSS Flexbox and Grid Tutorial – How to Build a Responsive Landing Page with HTML and CSS.
Traducido y adaptado por Israel Palma
En este tutorial vamos a crear una página de inicio sencilla para una plataforma educativa llamada Skillz.
Aquí aprenderás como usar e implementar CSS Flexbox y CSS Grid para alinear contenido. También cubriremos muchos otros conceptos de CSS y finalmente aprenderemos a hacer la página responsiva para que trabaje en todos los tamaños de pantallas.
Este tutorial se divide en cinco partes:
- Como construir la barra de navegación.
- Como crear la sección showcase (escaparate)
- Como construir la sección de la parte inferior
- Como crear la sección del pié de página
- Cómo hacer la página responsiva
Cada una de estas secciones te enseñará algún concepto CSS nuevo, así como herramientas y habilidades de desarrollo CSS. Comencemos!
Como crear el HTML inicial (Boilerplate)
Si tienes "emmet" instalado en tu IDE (entorno de desarrollo o editor de texto), puedes generar el "boilerplate" HTML (inicial) para tu proyecto al escribir ! y pulsando enter o tab en tu teclado.
Sino puedes copiar este "boilerplate" y pegarlo en tu editor de código:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R+E6ztJQ=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
</body>
</html>Cómo usar los íconos Font Awesome
Cómo puedes ver en una de las capturas de pantalla, usaremos algunos íconos fuente para darle una mejor apariencia a nuestra sección de servicios.
Para esto, usaremos "font awesome" desde una CDN (Content Delivery Network - red de distribución de contenido). Si creaste el "boilerplate" HTML copia la siguiente etiqueta link y pégala dentro de la etiqueta head :
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R+E6ztJQ=="
crossorigin="anonymous" referrerpolicy="no-referrer" />Empecemos!
En primer lugar asegurate que tu archivo de estilos (.css) esté apropiadamente vinculado con tu página HTML.
Como construir la barra de navegación
La barra de navegación incluirá el nombre de nuestro sitio web además de dos enlaces de navegación: Log in (iniciar sesión) y check courses (revisar cursos).
Esté es el "markup" (código HTML) para nuestra barra de navegación:
<div class="navbar">
<div class="container flex">
<h1 class="logo">Skilllz</h1>
<nav>
<ul>
<li class="nav"><a class="outline" href="">Log in</a></li>
<li class="nav"><a href="" class="outline">Check courses</a </li>
</ul>
</nav>
</div>
</div>En el div que envuelve los elementos en esta sección (la barra de navegación), registramos el contenedor y la clase (css) flex.
.container: usaremos esta clase utilitaria en cada sección para asegurarnos que los elementos internos no excedan cierto ancho, el cual especificaremos en CSS.flex: usaremos esta clase utilitaria para mostrar los elementos hijos alineados horizontalmente (lado-a-lado) usando CSS Flexbox.
Dentro del div tenemos un h1con la clase logo y dos enlaces de navegación li>a con la clase outline respectivamente.
En este punto, nuestra página lucirá plana y simple, justo así:
Cómo aplicar estilo CSS a nuestra página
Ahora tenemos que aplicar algunas reglas CSS para estilizar nuestra sección de navegación de la manera que mejor nos parezca. Lo que queremos hacer primero es establecer los estilos básicos para nuestra página web con el código siguiente:
/* Sobrescribe el estilo por defecto y establece el padding y el margen a cero */
* {
box-sizing: border-box;
padding: 0;
margin: 0
}
/* Texto color blanco en todas partes */
body {
font-family: "lato", sans-serif;
color: white;
}
/* Hacer todo el texto de los links negro y sin decoración*/
a {
color: black;
text-decoration: none;
}
h1 {
font-size: 30px;
font-weight: 600;
margin: 10px 0;
line-height: 1.2;
}
h2 {
font-size: 25px;
font-weight: 300;
margin: 10px 0;
line-height: 1.2;
}
p {
font-size: 30px;
}
/* Todas las imágenes deben ser del mismo tamañño que su contenedor*/
img {
width: 100%;
}
/* Remover el estilo a los elementos de una lista */
li {
list-style-type: none;
}
p {
font-size: 20px;
margin: 10px 0;
}
Con estos estilos por defecto aplicados nuestra página se verá así:
A continuación necesitamos definir el estilo para nuestra clase css "container":
/* Centra el elemento y establece un ancho máximo y se asegura que los elementos puedan fluir através*/
.container {
margin: 0 auto;
max-width: 1200px;
overflow: visible;
}Ahora, nuestro contenido no excederá el ancho máximo especificado.
Luego de esto, necesitamos definir el color purpura para el fondo de nuestra sección "navbar":
/* Aplica el color de fondo, altura y "padding"*/
.navbar {
background-color: purple;
height: 70px;
padding: 0 30px;
}
Enseguida seleccionamos sólo el elemento h1 dentro del navbar y definimos los siguientes estilos:
/* Establece el tamaño de la fuente (font size), reduce el peso de loa fuente (font-weight), agrega margen y alto de línea (line height) */
.navbar h1 {
font-size: 30px;
font-weight: 300;
margin: 10px 0;
line-height: 1.2;
}Aplicando este estilo, nuestro encabezado h1 se verá así:
Ahora necesitamos mostrar ambos elementos hijos dentro del contenedor h1 y nav una al lado del otro usando Flexbox.
.navbar .flex {
display: flex;
justify-content: space-between;
align-items: center;
height: 100%;
}Primero, damos el valor flex para "display-mode". Esto alineara los elementos uno al lado del otro por de forma automática (por default).
Entonces justificamos el contenido, agregando espacio considerable entre cada elemento usando el valor de space-between. Alineamos los elementos para que aparezcan al centro del contenedor y darle una altura que cubra el alto completo del elemento que lo contiene.
Así es como nuestra página se debe ver:
Sin embargo, tampoco queremos que ambos enlaces de navegación estén apilados uno sobre otro. En vez de eso, querem0s que aparezcan lado a lado. Adivinas como haríamos eso? Con Flexbox!
.navbar ul {
display: flex;
}
/* Cambia el color de ambos enlaces a blanco, agrega padding entre si y margen también */
.navbar a {
color: white;
padding: 9px;
margin: 0 10px;
}Nuestra página ahora se ve así:
Si haz visto el breve video introductorio, notarás que cuando sea que yo paso el ratón sobre los enlaces el color del texto cambia a una sombra púrpura y un borde sólido se muestra debajo.
Podemos implementar esta transición usando el pseudo-elemento CSS :hover :
.navbar a:hover {
color: #9867C5;
border-bottom: 3px solid #9867C5;
}Ahora mira esto:
Y con eso hemos llegado al fin de la sección navbar (barra de navegación).
Como crear el área de presentación
El area de presentación es donde se va a ubicar el texto del encabezado, el texto de soporte, un formulario para dar de alta a nuevos usuario y también la imagen de encabezado.
Esta sección va a estar dividida en dos: la del lado izquierdo y el derecho. Dicho de otra forma, será mostrado como una retícula de dos unidades.
Aquí está el código HTML (markup) para esta sección:
<section class="showcase">
<div class="container">
<div class="grid">
<div class="grid-item-1">
<div class="showcase-text">
<h1>Aprende cualquier habilidad digital que elijas, hoy!</h1>
<p class="supporting-text"> Más de 30,000 estudiantes están aprendiendo esto.</p>
</div>
<div class="showcase-form">
<form action="">
<input type="email" placeholder="Ingresa tu correo electrónico">
<input type="submit" class="btn" value="Empieza a aprender">
</form>
<p class="little-info">Prueba nuestros cursos gratuitos</p>
</div>
</div>
<div class="grid-item-2">
<div class="image">
<img src="./images/transparent.png" alt="">
</div>
</div>
</div>
</div>
</section>En este punto nuestra app se verá todavía un poco desaliñada:
Como aplicar estilos CSS a nuestro área de presentación
Primero, definimos la altura de la sección de área de presentacion así como también el color de fondo:
.showcase {
height: 300px;
background-color: purple;
}Nuestra aplicación ahora se ve así:
NOTA: cambié el color del h1 a blanco.Enseguida, aplicamos los siguientes estilos:
/* Añade margen bajo el texto */
.showcase p {
margin-bottom: 30px;
}
/* Añade una sombra bajo la imágen */
.showcase img {
box-shadow: 7px 7px 7px rgba(0, 0, 0, 0.2);
}
/* Añade algo de padding al contenido del formulario */
.showcase-form {
padding-left: 7px;
}Esto nos trae al tema principal. Si recuerdas, dije que crearíamos dos secciones (retículas) dentro del contenedor del área de presentación. Con la clase "grid" (retícula) aplicada al contenedor vamos a alinear el contenido utilizando CSS grid display de la siguiente manera:
.grid {
overflow: visible;
display: grid;
grid-template-columns: 60% 40%;
}Esto creará dos columnas dentro del contenedor para el área de presentación. La primera parte tomará hasta 60% del contenedor y la segunda parte tomará el 40% restante.
El overflow: visible asegurará que la imagen fluya hacia afuera del contenedor (en caso de ser de mayor tamaño).
Nuestra app se verá así.
Enseguida necesitaremos definir algo de espacio entre el área de navegación (navigation) y el área de presentación.
.grid-item-1,
.grid-item-2 {
position: relative;
top: 50px;
}Como consecuencia ahora tiene un poco mas de espaciado:
Ahora necesitamos estilizar ambos elementos "input" de nuestro formulario porque aún no tienen una buena apariencia. Seleccionamos el primer <input /> por su tipo (email) y el segundo usando la clase CSS btn.
.showcase input[type='email'] {
padding: 10px 70px 10px 0;
font-size: 14px;
border: none;
border-radius: 6px;
padding-left: 6px;
}
.btn {
border-radius: 6px;
padding: 12px 20px;
background: #9867C5;
border: none;
margin-left: 10px;
color: white;
font-size: 16px;
cursor: pointer;
box-shadow: 0 10px 10px rgba(0, 0, 0, 0.2);
}Estos estilos CSS transformarán ambos "inputs" del formulario en esto:
También debemos cambiar la fuente del texto:
.showcase-form {
margin: auto;
}
/* Change typeface and its size */
.little-info {
font-size: 15px;
font-family: "poppins", sans-serif;
}Así se verá finalmente la sección de área de presentación:
Es todo en esta sección!
Cómo hacer la parte inferior de la página.
La parte inferior de la página contendrá dos secciones, la sección de estadísticas y la sección de testimoniales.
El elemento contenedor para la sección de estadísticas que mostrará los servicios ofrecidos por Skillz estará conformado por tres div, cada uno de los cuales tendrá dentro de sí un ícono Font Awesome, un elemento h3 con clase title, y un párrafo p con clase text.
El elemento contenedor para los testimonios llevará tres testimonios de personas que aprendieron usando Skillz. Tomé las fotos de unsplash.
Cómo crear la sección de estadísticas
Primero, vamos a trabajar en la sección de estadísticas. El texto es uno ficticio de 'lorem50' (50 palabras de "lorem ipsum") para ser utilizado como relleno para este demo.
Aquí puedes ver el "markup" HTML:
<div class="lower-container container">
<section class="stats">
<div class="flex">
<div class="stat">
<i class="fa fa-folder-open fa-2x" aria-hidden="true"></i>
<h3 class="title">Over 300 available courses</h3>
<p class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="stat">
<i class="fa fa-graduation-cap fa-2x" aria-hidden="true"></i>
<h3 class="title">Free certificate offered on all courses</h3>
<p class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="stat">
<i class="fa fa-credit-card-alt fa-2x" aria-hidden="true"></i>
<h3 class="title">Book 1on1 session for as low as $5</h3>
<p class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</section>Esta sección será mostrada como una página en blanco. Esto debido a que hemos definido el color blanco como el color para todo el texto del elemento "body" de nuestro documento. Así que tendremos que estilizarlo al color apropiado.
Cómo aplicar estilos CSS a la sección de estadísticas.
Primero necesitamos aplicar los siguientes estilos:
/* Centra el conetenedor, aplica un ancho máximo*/
.lower-container {
margin: 120px auto;
padding: 0;
max-width: 1400px;
}
/* Apunta a todos los elementos h3 con clase CSS title */
.title {
color: black;
font-size: 20px;
text-align: left;
padding-left: 10px;
padding-top: 10px;
}
/* Apunta a todos los parrafos con la clase CSS text */
.text {
color: black;
font-size: 19px;
width: 100%;
padding: 10px;
margin: 0, 20px;
text-align: justify;
}Ahora esto hará que nuestro texto sea visible:
Notarás que los íconos-fuente de Font Awesome no son visibles. Trabajaremos en eso muy pronto.
Pero antes de eso, necesitaremos hacer algo importante. Sí tenemos la intención de que los 3 div de la sección de estadísticas estén alineados de forma horizontal (lado a lado). Para lograr eso, usaremos una vez más CSS Flexbox:
/* Mostrar horizontalmente, poner un poco de espacio alrededor */
.flex {
display: flex;
justify-content: space-around;
}
/* Agregar algo de padding alrededor del contenedor. Alinear el texto al centro */
.stats {
padding: 45px 50px;
text-align: center;
}
/* Aplicar margen y ancho */
.stat {
margin: 0 30px;
text-align: center;
width: 800px;
}Así es como se verá nuestra app ahora:
Aún sin íconos? Hora de arreglarlo!
.stats .fa {
color: purple;
}y voilà!
Como crear la sección de testimonios
La segunda sección dentro del contenedor div de la parte inferior de la página es la sección de testimonios. Esta sección estará compuesta de tres tarjetas, cada una de las cuales contiene la imagen de la persona (recortada dentro de un círculo), su nombre y su testimonio personal.
Aquí esta el HTML para eso:
<section class="testimonials">
<div class="container">
<div class="testimonial grid-3">
<div class="card">
<div class="circle">
<img src="./images/4.jpg" alt="">
</div>
<h3>Aston</h3>
<p>He aprendido desarrollo web usando esta plataforma y diré que es la mejor plataforma para aprender. Definitivamente vale la pena la inversión!</p>
</div>
<div class="card">
<div class="circle">
<img src="./images/5.jpg" alt="">
</div>
<h3>Beth</h3>
<p>He aprendido redacción usando esta plataforma y diré que es la mejor plataforma para aprender. Definitivamente vale la pena la inversión!</p>
</div>
<div class="card">
<div class="circle">
<img src="./images/6.jpg" alt="">
</div>
<h3>Chris</h3>
<p>He aprendido marketing de afiliados usando esta plataforma y diré que es la mejor plataforma para aprender. Definitivamente vale la pena la inversión!</p>
</div>
</div>
</div>
</section>Cómo aplicarle estilos CSS
Primero establecemos el color del texto a negro para que sea visible:
.testimonial {
color: black;
padding: 40px;
}Cuando lo aplicamos, debe hacer que el texto sea visible y agregar algo de padding a la sección:
Enseguida, damos a la imagen la altura suficiente para ocupar todo el alto de su contenedor padre:
/* Envuelve la imagen dentro de una figura circular y define su altura para que tome todo el alto de su elemento padre */
.testimonial img {
height: 100%;
clip-path: circle();
}
/* Alinea el texto al centro */
.testimonial h3{
text-align: center;
}
Si checas el diseño final en el gif, notarás que las tres tarjetas testimoniales estarán alineadas lado a lado en la misma fila.
Así que necesitaremos crear un div de tres columnas equidistantes usando un arreglo CSS grid.
/* Crear un grid de tres columnas equidistantes. Definir un espaciado de 40px entre ellas */
.grid-3 {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 40px;
}
/* Crear una tarjeta en blanco con sombreado alrededor */
.card {
padding: 10px;
background-color: white;
border-radius: 10px;
box-shadow: -7px -7px 20px rgba(0, 0, 0, 0.2),
7px 7px 20px rgba(0, 0, 0, 0.2)
}Con todos estos estilos aplicados, la sección de testimoniales ahora se debe ver así:
Finalmente, daremos estilo al div circular y lo colocaremos relativo al borde superior de la tarjeta usando CSS:
.circle {
background-color: transparent;
border:3px solid purple;
height:90px;
position: relative;
top: -30px;
left: 120px;
border-radius:50%;
-moz-border-radius:50%;
-webkit-border-radius:50%;
width:90px;
}Y aquí verás como todo esto se verá en el navegador:
Muy bien, ahora estamos listos para movernos a la sección del "footer" (pie de página). Luego aprenderemos como hacer que el sitio sea responsivo.
Cómo elaborar la sección del pié de página
La parte final del proceso de creación de nuestra página es crear la sección del "footer". El pié de página comprenderá el texto de "copyright", tres enlaces de navegación adicionales y un grupo de íconos de medios sociales de Font Awesome.
Este el el HTML para la sección del pié de página de nuestra página de inicio:
<footer>
<div class="container grid-3">
<div class="copyright">
<h1>Skilllz</h1>
<p>Copyright © 2021</p>
</div>
<nav class="links">
<ul>
<li><a href="" class="outline">Home</a></li>
<li><a href="" class="outline">Tutors</a></li>
<li><a href="" class="outline">Categories</a></li>
</ul>
</nav>
<div class="profiles">
<a href=""><em class="fab fa-twitter fa-2x"></em></a>
<a href=""><em class="fab fa-instagram fa-2x"></em></a>
<a href=""><em class="fab fa-facebook fa-2x"></em></a>
<a href=""><em class="fab fa-whatsapp fa-2x"></em></a>
</div>
</div>
</footer>El pié de página se verá nada atractivo sin estilos CSS:
Arreglemos eso.
Como estilizar el pié de página (footer)
Primero necesitamos asignar el color blanco para el fondo de la sección del "footer" (así como también para todos los links), de la siguiente forma:
/* Add padding around the footer as well */
footer {
background-color: purple;
padding: 20px 10px;
}
/* Sets all link texts to white and puts margin to the left and right */
footer a {
color: white;
margin: 0 10px;
}Ahora el pié de página (footer) se verá así:
Si revisas el primer gif, notarás que cuándo le paso el ratón por encima a cualquiera de los enlaces del "footer", su color cambia a una tonalidad más clara de púrpura y el borde se muestra debajo.
Podemos lograr esto usando un selector :hover :
footer a:hover {
color: #9867C5;
border-bottom: 2px solid #9867C5;
}Esto es todo para el "footer"!
Cómo definir "Media Queries" para hacer la página responsiva.
Ahora es momento de hacer más responsiva nuestra "landing page". Cuándo se crea un sitio web es importante tener en mente que los usuarios verán el sitio desde distintos dispositivos. Por lo que es imperativo hacer responsivo el sitio para mejorar la experiencia de usuario en los múltiples formatos y tamaños de pantalla.
En nuestro CSS definiremos los "media queries" para establecer los breakpoints para los distintos anchos de pantalla y los diferentes dispositivos y relacionarlo con un grupo de reglas CSS para cada tamaño de pantalla.
Cómo diseñar para tablets y pantallas más pequeñas
Primero, optimizaremos la distribución de nuestro sitio para usuarios que lo visualicen desde una tablet. En nuestro CSS definiremos la siguiente regla:
/* Tablets y pantallas más pequeñas */
@media(max-width: 768px) {
.grid,
.grid-3 {
grid-template-columns: 1fr;
}Inicialmente hemos definido dos columnas para la clase .grid y 3 columnas para la clase .grid-3. Ahora, queremos asegurarnos que todos los elementos del grid abarquen una sola linea.
Cómo resultado, nuestro formulario e imagen que antes se mostraban lado-a-lado (horizontalmente) ahora se mostrará uno luego del otro (verticalmente), Así:
Enseguida, aplicaremos los siguientes reglas de estilo:
/* Alinear todo el texto al centro. Esto moverá todo el texto, incluyendo el formulario al centro.*/
.showcase {
height: auto;
text-align: center;
}
/* Esto restablece el ancho del contendor de la imagen y agrega margen a la izquierda
*/
.image {
width: 600px;
margin-left: 80px;
}
/* Cambia las secciones de servicio de lado-a-lado para que cada una se posicione en una sóla linea. Centra el texto. */
.stats .flex {
flex-direction: column;
}
.stats {
text-align: center;
}
/* Asegura que cada sección en las estadísticas no exceda el ancho del elemento padre. */
.stat {
width: 100%;
padding-right: 80px;
}
/* Mueve el círculo al centro de la tarjeta */
.circle {
background-color: transparent;
border:3px solid purple;
height:90px;
position: relative;
top: -30px;
left: 270px;
border-radius:50%;
-moz-border-radius:50%;
-webkit-border-radius:50%;
width:90px;
}
Y voila. Nuestro sitio ahora funciona en tablets y pantallas más pequeñas.
Cómo diseñar para dispositivos móviles
Mucha gente podría visitar el sitio desde un dispositivo móvil, que típicamente tienen las pantallas más pequeñas. Debido a esto, crear una distribución para las pantallas móviles es muy importante.
/* Dispositivos móviles */
@media(max-width: 500px) {
.navbar {
height: 100px;
}Primero incrementamos la altura de nuestra área de navegación. Dado que será vista desde una pantalla más pequeña, queremos que el area se muestre al usuario con más énfasis.
Luego, definimos las siguientes reglas de estilo:
/* Cambia la alineación. El logo del título se queda en la parte superior, los enlaces de navegación ahora se muestran debajo*/
.navbar .flex {
flex-direction: column;
}
/* Cuando pasamos encima el ratón, retienen el texto blanco y cambia el borde a negro */
.navbar a:hover {
color: white;
border-bottom: 2px solid black;
}
/* Establecer el color púrpura para el fondo de los enlaces de navegación, redondear las esquinas de los bordes y darle algo de espaciado*/
.navbar ul {
background: #9867C5;
border-radius: 5px;
padding: 10px 0;
}
/* Alinear el texto al centro */
.showcase {
height: auto;
text-align: center;
}
/* Reducir el tamaño de la fuente */
.little-info {
font-size: 13px;
}
/* Reducir el ancho de la imágen */
.image {
width: 350px;
margin-left: 70px;
}
.stat {
margin-bottom: 40px;
}
/* Mover el círculo una vez más */
.circle {
background-color: transparent;
border:3px solid purple;
height:90px;
position: relative;
top: -30px;
left: 150px;
border-radius:50%;
-moz-border-radius:50%;
-webkit-border-radius:50%;
width:90px;
}
}Y voila!
Concluyendo
FlexBox y Grid son herramientas muy poderosas para distribuir el contenido de una página web de la manera que gustes.
Se puede argumentar que el diseño responsivo es uno de los principios más importantes del desarrollo web. Debemos considerar el hecho de que nuestro sitio será visto desde varios tipos de dispositivos con diferentes resoluciones de pantalla. Optimizar la distribución del contenido de nuestro sitio para diferentes pantallas mejorará la experiencia de usuario.
En este tutorial hemos diseñado una página de inicio simple usando FlexBox, Grid y varias otras propiedades CSS. Hemos también hecho que la página luzca bien en tablets y pantallas móviles.
El código completo de este proyecto puede ser descargado de su repositorio en Github.
Espero que hayas aprendido algo útil a partir de este tutorial. Si tienes alguna sugerencia puedes contactarme en Twitter. Tambié puedes visitar mi blog para ver más publicaciones como esta.
Gracias por seguir conmigo hasta aquí y nos vemos pronto.
Desarrollador Web. Escritor Tecnológico. Educador. Freelancer. Africano en la Industria Tecnológica. escribo tutoriales acerca del desarrollo web/software. Mi blog personal es - ubahthebuilder.tech. Se amable. Sonrie siempre!