Aprende CSS: Crea el logo de Microsoft
Tags: html, css, spanish
Published: 2023-01-13 19:14:34

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](https://code.visualstudio.com/download). La instalación es muy sencilla y no requiere conocimientos avanzados.
![visual studio screenshot download website](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cqrz5ut4eiiuqwvfykfl.png)

## Proyecto inicial
Puedes crear tu propia carpeta, o [descargar el proyecto inicial](https://github.com/xantosromerodev/proyecto-inicial-logo-microsoft) desde GitHub y tener los mismos archivos que nosotros.

El proyecto inicial contiene:

1. carpeta `css` con el archivo `style.css` para las propiedades CSS
2. carpeta `images `con el ícono `favicon.ico` de Microsoft
3. archivo `index.html` para los elementos HTML
4. archivo `README.md` que describe el proyecto
![Welcome Visual Studio Code Screenshot](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3ow3s7pxv555cqpq6o9a.png)

## 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 👇:

```html
<!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` 👇:

```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 `body` recibe los estilos vinculados al documento HTML
- El selector de tipo clase `.logo` recibe los estilos vinculados al documento HTML
- El selector de tipo clase `.red` recibe 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](https://developer.mozilla.org/es/docs/Web/CSS/CSS_Grid_Layout) - **Developer Mozilla**
- [A Complete Guide To CSS Grid](https://css-tricks.com/snippets/css/complete-guide-grid/) - **CSS Tricks**
- [CSS Grid](https://www.youtube.com/watch?v=QBOUSrMqlSQ) - **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é](https://www.buymeacoffee.com/xantosromero) nos inspira a seguir compartiendo contenido todos los días.

[Ver Proyecto](https://microsoft-w-logo.netlify.app/)