#01: Logo de Microsoft
El proyecto del desarrollador web frontend autónomo🤹♂️
Table of contents
Introducción
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 CSScarpeta
imagescon el íconofavicon.icode Microsoftarchivo
index.htmlpara los elementos HTMLarchivo
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 CSSEl selector tipo etiqueta
bodyrecibe los estilos vinculados al documento HTMLEl selector de tipo clase
.logorecibe los estilos vinculados al documento HTMLEl 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 - 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.