100 DAYS CSS CHALLENGE: Day #1
Tags: css, html, challenge, beginners
Published: 2024-03-04 01:25:37

**¡Hola mundo!** Me gustaría compartir la manera en la que resuelvo los 100 retos de [100 DAYS CSS CHALLENGE](https://100dayscss.com/about/).

El objetivo de realizar los 100 retos es el mejorar mi comprensión de CSS. Explicando lo que se hace se logra comprender de una manera más profunda lo que se está haciendo. 

## Day #1

![100 DAYS CSS CHALLENGE
Day #1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1ttl4jn95o6ecjltuo6j.png)

### Código base del reto
**HTML**
```html
<div class="frame">
  <div class="center">
		<p>Happy coding :)</p>
  </div>
</div>
```
**CSS**
```css
// delete the following line if no text is used
// edit the line if you wanna use other fonts
@import url(https://fonts.googleapis.com/css?family=Open+Sans:700,300);

// use only the available space inside the 400x400 frame
.frame {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 400px;
  height: 400px;
  margin-top: -200px;
  margin-left: -200px;
  border-radius: 2px;
	box-shadow: 4px 8px 16px 0 rgba(0,0,0,0.1);
	overflow: hidden;
  background: #fff;
  color: #333;
	font-family: 'Open Sans', Helvetica, sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

```

> Pasare a describir el proceso que yo realizo para este tipo de retos

### 1. Identificar los elementos del reto

Para este caso, tomando el código base proporcionado por el reto, estos fueron los contenedores que identifique.

![Contenedores identificados](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/htz2yzk4sf1ucfretsux.png)

### 3. Maquetación de los elementos identificados 

```html
 <div class="frame">
   <div class="center">
    <!-- 1.- Contenedor de las letras 100 -->
     <div class="days">
       <!-- 5.- Linea del uno principal-->
       <div class="one one__line1"></div>
       <!-- 4.- Linea diagonal del uno-->
       <div class="one one__line2"></div>
       <!-- 6.- Zero de en medio-->
       <div class="zero zero1"></div>
       <!-- 7.- Zero de el final -->
       <div class="zero zero2"></div>
     </div>
    <!-- 2.- Texto days-->
    <p class="text-big">Days</p>
    <!-- 3.- Texto pequeño-->
    <p class="text-small">css Challenge</p>
  </div>
</div>
```

En este punto luce de la siguiente manera:

![Maqueta HTML](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v77couvjtazban2w9g19.png)


### 3. Degradado de fondo

El fondo del contenedor cuenta con un degradado de dos colores, el cual va del extremo inferior izquierdo al extremo superior derecho.

Se modificó la declaración de los estilos del contenedor con la clase **.frame** a la cual se le agregó la siguiente propiedad:

[mdn web docs: linear gradient](https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/linear-gradient)

```css
.frame {
  background: linear-gradient(45deg, #6525b3, #b191e5);
}
```

> **45deg** puede ser cambiado por **to top right**

Con esto logramos tener el fondo con gradiente. Yo escogí colores diferentes para este reto.

![Reto con fondo degradado](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vrikerhe9u8ebygw8qxu.png)

### 4. Tipografía

Tengo que admitir que para este punto si me vi en la necesidad de inspeccionar elemento para saber la el font-family necesario para el reto.

Se agregó al contenedor con la clase **.frame** las propiedades **font-family** y **color**.

Lo hago de esta forma para que todos los hijos del contenedor con la clase .frame hereden las propiedades agregadas.

```css
.frame {
  color: #f0ecec;  
  font-family: "Courier New", "Courier", sans serif;
}
```

![Font family agregado](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eoggmj2f7enai1cpm8m7.png)

Para el texto agregué la propiedad **text-transform** a la etiqueta **p** de manera general.

De igual manera, aplique un reset del margen a 0 y un font-weight de 700

[mdn web docs: text-transform](https://developer.mozilla.org/en-US/docs/Web/CSS/text-transform)
```css
p {
	text-transform: uppercase;
	font-weight: 700;
	margin: 0;
}
p.text-big {
  font-size: 80px;
  line-height: 56px;
  margin-top: 12px;
  margin-top: 5px;
}
p.text-small {
  margin-top: 2px;
  font-size: 24px;
}
```
![Resultado de la aplicación de estilos para el texto](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ry6dce2dp7ban0r18mdr.png)

### 5. Número 100
Ya para este punto el reto va tomando forma.

Empecé delimitando el área, el cual va a abarcar el **200px* de ancho y una altura de la mitad de ese valor para obtener la forma rectangular, tomando de base el texto **DAYS** 

```css
 .days {
  border: solid 1px red;
  width: 200px;
  height: 100px;
 }
```

![Espacio designado para el 100](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zctbo95dhgejxt0o971v.png)

Pasando a con el número 1**

Para este inicie definiendo en la clase one los estilos que las dos partes del número uno compartirían.

```css
.one {
  box-shadow: 0 0 13px 0 rgba(0, 0, 0, 0.2);
  background-color: #f0ecec;
  width: 24px;
}
```
En este punto visualmente no se puede apreciar el número 1 dado que revisando el reto nos podemos dar cuenta que se necesitara sobreponer elementos. 

Para realizar esto de una manera más cómoda se necesita darle la propiedad **positon** con el valor **relative** al contenedor padre de los números, en este caso **days**. A si como asignarle la propiedad **position** con el valor **absolute** a los contenedores de los números.

[mdn web docs: position](https://developer.mozilla.org/en-US/docs/Web/CSS/position)

```css
.days {
  position: relative;
  border: solid 1px red;
  width: 200px;
  height: 100px;
}
.one {
  position: absolute;
  background-color: #f0ecec;
  width: 24px;
}
```
Ahora ya se puede trabajar las dos partes del número uno.
Para el número 1 nos damos cuenta las siguientes características:
1. Está posicionado en la parte izquierda.
2. Abarca toda la altura del contenedor.
3. Cuenta con bordes redondeados.
4. Se encuentra al frente de los demás contenedores.

```css
.one.one__line1 {
  /* 1 */ left: 0;
  /* 2 */ height: 100%;
  /* 3 */ border-radius: 3px;
  /* 4 */ z-index: 11;

}
```
![Primera línea del número 1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c5s9mg31yzdpxygzl6wv.png)

Para la segunda línea del **número 1** Nos percatamos de las siguientes características:

> Los valores que asigne fue a prueba y error buscado el que mejor se adapte o paresca

1. Inclinación de 50 grados.
2. Altura menor de la mitad de la primera línea.
3. Ancho menor a en comparación con la primera línea.
4. Sale un poco del contenedor principal del lado izquierdo.
5. Se ubica en la parte superior del contenedor principal.
6. Se encuentra detrás de la línea principal.
 

```css
.one.one__line2 {
  /* 1 */ transform: rotate(50deg);
  /* 2 */ height: 40px;
  /* 3 */ width: 18px;
  /* 4 */ left: -16px;
  /* 5 */ top: 0;
  /* 6 */ z-index: 0;
}
```

![Resultado de la segunda línea del número uno](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sg0rck779v9egdbtlbq1.png)

**Ceros** Para realizarlos de igual manera cree 3 clases. Una clase para asignar estilos que compartían. Dejando las otras dos clases para controlar posicionamiento.

Este es más fácil de lo que parece, lo dividiré en dos partes para que se pueda observar el cómo se realiza. Características:
1. Los círculos posen el mismo alto que ancho
2. El alto es igual que la línea principal del número uno.
3. Pose un borde algo robusto.

```css
.zero {
  position: absolute;
  box-sizing: border-box;
  /* 1 */ width: 100px;
  /* 2 */ height: 100%;
  /* 3 */border: 24px #f0ecec solid;
}
```
Con esto todavía no contamos con la forma del cero. De esta forma obtenemos un cuadrado el cual luce de la siguiente forma:

![Círculo casi completo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2lgn69ogmdndy2fopd1r.png)

Para darle la forma circular basta con aplicar un **border-radius** del **50%**. De igual manera agregamos la propiedad **position: absolute** para modificar su posición.

```css
.zero {
  position: absolute;
  box-sizing: border-box;
  width: 100px;
  height: 100%;
  border-radius: 50%;
  border: 24px #f0ecec solid;
}
```


![Cero redondeado](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3ho6utikv5p40e408z6b.png)

Procedemos a modificar su posición utilizando las clases auxiliares que se agregaron. 

```css
.zero1 {
  left: 20px;
  z-index: 10;
}
.zero2 {
  right: 0;
}
```

### Resultado final 
{% codepen https://codepen.io/dylanson25/pen/mdgyoeX %}

> Muchas grasias por leer, pongan en los comentarios si quieren un post explicando la animacion que agregue.