Una de las mejores formas de aprender CSS (o lo que sea) es creando algo mientras aprendes. En este artículo, vamos a crear el logo de Microsoft usando elementos HTML y propiedades CSS.
Setup
El editor de código que usaremos será Visual Studio Code. La instalación es muy sencilla y no requiere conocimientos avanzados.
Proyecto inicial
Puedes crear tu propia carpeta, o descargar el proyecto inicial desde GitHub y tener los mismos archivos que nosotros.
El proyecto inicial contiene:
- carpeta
csscon el archivostyle.csspara las propiedades CSS - carpeta
imagescon el íconofavicon.icode Microsoft - archivo
index.htmlpara los elementos HTML - archivo
README.mdque describe el proyecto
HTML
HTML es el lenguaje de marcado estándar para crear la estructura de una página web, y la usaremos en nuestro archivo index.html para crear la estructura del logo de Microsoft.
Agrega el código HTML al archivo index.html dentro del elemento <body>, y debería verse de la siguiente forma 👇:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Estilos -->
<link rel="stylesheet" href="css/style.css">
<!-- Favicon -->
<link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon">
<!-- Titulo Página -->
<title>Logo Microsoft</title>
</head>
<body>
<!-- Logo inicio-->
<div class="logo">
<div class="red"></div>
<div class="green"></div>
<div class="blue"></div>
<div class="yellow"></div>
</div>
<!-- Logo fin -->
</body>
</html>
Explicación
El elemento padre <div>, con su atributo class="logo", contiene cuatro elementos hijo que darán forma al logo de Microsoft.
CSS
CSS nos permite mejorar la apariencia del diseño de un documento HTML, y la usaremos para darle una apariencia que se acerque lo más posible al logo de Microsoft.
Agrega las propiedades CSS y CSS Grid al archivo style.css 👇:
/* Restablece los estilos del navegador */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
height: 100vh;
display: grid;
place-items: center;
background-color: #f0ffff;
}
.logo {
width: 300px;
height: 300px;
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(2, 1fr);
grid-gap: 20px;
}
.red { background-color: #f25022; }
.green { background-color: #7fba00; }
.blue { background-color: #01a0e6; }
.yellow { background-color: #ffb900; }
Explicación
- El selector universal
*es la propiedad raíz de CSS - El selector tipo etiqueta
bodyrecibe los estilos vinculados al documento HTML - El selector de tipo clase
.logorecibe los estilos vinculados al documento HTML - El selector de tipo clase
.redrecibe los estilos vinculados al documento HTML
CSS Grid
El módulo de diseño CSS Grid ofrece un sistema de diseño basado en cuadrículas, con filas y columnas, lo que facilita el diseño de páginas web sin tener que usar propiedades CSS como float o position.
Investiga más sobre CSS Grid:
- CSS Grid Layout - Developer Mozilla
- A Complete Guide To CSS Grid - CSS Tricks
- CSS Grid - Fazt
Conclusión
"Lo que realmente importa no es lo que sabes, sino lo que haces con lo que sabes"
Construir algo mientras aprendes es una forma inteligente de consolidar los conocimientos, y en este artículo, juntos hemos construido el logo de Microsoft usando propiedades CSS & CSS Grid, pero no te quedes solo con esto, investiga más sobre lo que puedes hacer con CSS Grid.
Un 💬comentario o un ☕café nos inspira a seguir compartiendo contenido todos los días.
Top comments (2)
Hola, interesante el contenido, Te sugiero que si puedes cambiar una etiqueta a #Spanish para que la comunidad hispanoparlante pueda encontrar fácilmente tu contenido (Sí la etiqueta debería ser Espanol, pero no acepta eñes y esta comunidad es principalmente en inglés :))
Hey Dennis Tobar, muchas gracias por la sugerencia. 🙌