Skip to content

Commit

Permalink
Merge pull request #4 from angular-bolivia/develop
Browse files Browse the repository at this point in the history 
Add missing steps from the tutorial
  • Loading branch information
@combimauri
combimauri authored Jan 23, 2024
2 parents d119c89 + 20c6bf8 commit ff71fd2
Show file tree
Hide file tree
Showing 11 changed files with 181 additions and 297 deletions.
36 changes: 36 additions & 0 deletions blog/workshop-congratulations.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
---
title: Tutorial - ¿Y ahora qué?
author: Angular Bolivia
publish date: 2020-11-28
description: Felicidades, acabas de dar un gran paso para convertirte en Angular Developer. ¡Estamos orgullosos!
published: true
slug: workshop-congratulations
---

# ¿Y ahora qué?

> Felicidades, acabas de dar un gran paso para convertirte en Angular Developer. ¡Estamos orgullosos!
<div align="center">
<img src="https://media.giphy.com/media/xT8qBepJQzUjXpeWU8/giphy.gif" alt="Estamos orgullosos" style="width: 500px;">
<p>
¡Estamos orgullosos!
</p>
</div>

## ¿Qué puedes hacer ahora?

Toma un descanso y relájate. Acabas de hacer algo realmente grande.

Después de eso, asegúrate de seguir nuestra página **Angular Bolivia** en <a href="https://www.facebook.com/angular.bolivia" target="_blank" rel="noopener noreferrer">Facebook</a> y <a href="https://twitter.com/angularBolivia" target="_blank" rel="noopener noreferrer">Twitter</a> para estar al día. También puedes unirte a nuestro grupo de <a href="https://www.meetup.com/es/Angular-Bolivia/" target="_blank" rel="noopener noreferrer">Meetup</a> para estar al tanto de todos los eventos que realizamos con la comunidad.

## ¿Quieres seguir estudiando?

¡Claro que sí! Una guía bastante completa es la <a href="https://angular.io/start" target="_blank" rel="noopener noreferrer">documentación oficial de Angular</a>. También puedes intentar con alguno de los recursos listados a continuación. ¡Todos son muy recomendados!

- <a href="https://medium.com/@jorgeucano/angular-cli-mini-curso-9f8b00543f1b" target="_blank" rel="noopener noreferrer">Angular CLI — mini curso - Jorge Cano</a>
- <a href="https://www.youtube.com/playlist?list=PLK7sa90aSLe7RW_7qotGlmBxMtm-jajCG" target="_blank" rel="noopener noreferrer">Curso de Angular - CodigoMentor</a>
- <a href="https://codecraft.tv/courses/angular/" target="_blank" rel="noopener noreferrer">Angular - Codecraft</a>
- <a href="https://www.youtube.com/c/nicobytes/" target="_blank" rel="noopener noreferrer">Videos de Angular - Nicobytes</a>

[< Artículo anterior: ¡Comparte tu app!](/blog/workshop-share)
306 changes: 15 additions & 291 deletions blog/workshop-css.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ El lenguaje CSS (las siglas en inglés de hojas de estilos en cascada, o Cascadi

## Paso #1

En la archivos que conforman la aplicación existe un archivo llamado `styles.css` en este archivo es donde vamos a trabajar todos nuestros estilos.
En los archivos que conforman la aplicación existe un archivo llamado `styles.css` en este archivo es donde vamos a trabajar todos nuestros estilos.

<div align="center">
<img src="/assets/img/project-structure.png" alt="Estructura del proyecto" style="width: 400px;">
Expand All @@ -39,298 +39,14 @@ El resultado es:

## Paso #2

Vamos a usar una hoja de estilos que ya esta preparada para que funciona muy bien dentro de la aplicación.
Vamos a usar una hoja de estilos que ya está preparada para que funcione muy bien dentro de la aplicación.

Copia los siguientes estilos:
Tenemos 2 opciones, abre cualquier de las 2, copia todo el contenido y reemplaza lo que tengas en `styles.css` con lo que acabas de copiar:

```css
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&family=Roboto:wght@400;700&display=swap");

body {
display: flex;
justify-content: center;
align-items: center;
margin: 0;

font-size: 16px;
font-family: "Roboto", sans-serif;
color: white;

height: 100vh;
min-width: 100%;

background-color: #1c162e;
background-image: url("./assets/bg.svg");
background-repeat: no-repeat;
background-position: bottom center;
background-size: contain;
}

input {
width: 100%;
height: 40px;

border-radius: 5px;
border: 1px solid #aaaaaa;
outline: none;

font-size: 1em;

margin: 10px 0;
padding: 5px 10px;
box-sizing: border-box;
}

input::placeholder {
color: #aaaaaa;
font-family: "montserrat", sans-serif;
font-size: 16px;
}

@media screen and (max-width: 825px) {
body {
height: 1115px;
width: 100%;

align-items: flex-start;
justify-content: center;

padding: 0 10%;
box-sizing: border-box;
}
}

.contenedor-principal {
height: 75vh;

display: grid;
justify-content: center;
grid-template-columns: 400px 400px;
grid-template-rows: 1fr 2fr;
gap: 1.5em;
}

.presupuesto {
display: flex;
flex-direction: column;
}

.presupuesto label {
font-size: 1.5em;
font-weight: bold;

margin-bottom: 12px;
}

.form {
padding: 1em;

background-color: white;
border-radius: 15px;

color: black;
font-family: "Montserrat", sans-serif;
}

.form button {
width: 120px;
height: 35px;

color: white;
font-weight: 700;
font-size: 1em;

border: none;
border-radius: 5px;
outline: none;

background: linear-gradient(90deg, #ec008c 0%, #fc6767 100%);
box-shadow: inset 0px -3px 0px rgba(0, 0, 0, 0.5);
transition: 200ms;
cursor: pointer;
}

.form button:active {
box-shadow: none;
}

.gasto {
display: flex;
flex-direction: column;

grid-row: 2/3;

animation: gasto-animation 450ms;
will-change: transform;
}

.gasto h3 {
font-size: 1.5em;
}

.gasto label {
font-weight: 700;
}

.contenedor-lista {
grid-row: 1/3;
grid-column: 2/3;

display: flex;
flex-direction: column;
}

.restante {
width: 100%;
height: 150px;
margin-bottom: 1em;

display: flex;
flex-direction: column;
align-items: center;
justify-content: center;

background: linear-gradient(90deg, #b172f7 0%, #236afa 100%);
border-radius: 16px;

animation: restante-animation 450ms 450ms forwards;
transform: translateY(-1000px);
will-change: transform;
}

.restante p {
margin: 0 0 10px;

font-size: 1.5em;
font-weight: bold;
}

.restante p:nth-child(2) {
margin: 0;

font-size: 2em;
}

.caja-lista {
flex: 1;

width: 100%;

overflow-y: auto;
}

.caja-lista ul {
list-style: none;

margin: 0;
padding: 0;
}

.caja-lista ul li {
display: flex;
justify-content: space-between;
min-height: 100px;
max-width: 100%;

background: linear-gradient(314.33deg, #ed4257 -3.69%, #ce1862 109.82%);
border-radius: 15px;
animation: item-in 450ms;
will-change: opacity;

padding: 0.6em 1em;
box-sizing: border-box;

margin-bottom: 1em;
}

.caja-lista ul li:nth-child(2n) {
background: linear-gradient(314.33deg, #18d0bf -3.69%, #1b9fb4 107.58%);
}

.caja-lista ul li:nth-child(3n) {
background: linear-gradient(
314.33deg,
hsl(244, 100%, 68%) -3.69%,
#7043c2 109.82%
);
}

.caja-lista ul li p {
flex: 1;
overflow-x: auto;

display: flex;
align-items: center;
}
- <a href="https://raw.githubusercontent.com/angular-bolivia/ng-she-workshop/develop/src/styles.css" target="_blank" rel="noopener noreferrer">Opción de estilos #1</a>
- <a href="https://raw.githubusercontent.com/angular-bolivia/ng-she-workshop/develop/src/styles-v2.css" target="_blank" rel="noopener noreferrer">Opción de estilos #2</a>

.caja-lista ul li div {
display: flex;
align-items: center;
}

.caja-lista ul li div span {
font-size: 1.5em;
font-weight: 700;
}

.caja-lista ul li div button {
cursor: pointer;

background: none;
border: none;
outline: none;
}

.caja-lista ul li div button img {
width: 35px;
}

@keyframes gasto-animation {
from {
transform: translateX(-1000px);
}
to {
transform: translateX(0%);
}
}

@keyframes restante-animation {
from {
transform: translateY(-1000px);
}
to {
transform: translateY(0%);
}
}

@keyframes item-in {
from {
opacity: 0;
}

to {
opacity: 1;
}
}

@media screen and (max-width: 825px) {
.contenedor-principal {
margin-top: 2em;

grid-template-columns: 100%;
grid-template-rows: auto auto 600px;
}

.presupuesto,
.contenedor-lista,
.caja-lista {
grid-row: auto;
grid-column: auto;
}
}
```

El resultado será:
El resultado será el siguiente si escoges la Opción #1:

<div align="center">
<img src="/assets/img/app-1.png" alt="App final antes de ingresar presupuesto" style="width: 1100px;">
Expand All @@ -344,10 +60,18 @@ Ahora vamos a verlo en pantalla completa haciendo click en el botón **Open in N
<img src="/assets/img/app-2.png" alt="App final después de ingresar presupuesto" style="width: 1100px;">
</div>

El resultado:
El resultado de la Opción #1:

<div align="center">
<img src="/assets/img/app-3.png" alt="App final en pantalla completa" style="width: 1100px;">
</div>

El resultado de la Opción #2:

<div align="center">
<img src="/assets/img/app-4.png" alt="App final en pantalla completa" style="width: 1100px;">
</div>

[> Próximo artículo: Eliminando gastos](/blog/workshop-delete-expenses)

[< Artículo anterior: Agregando presupuesto y saldo](/blog/workshop-budget)
Loading

0 comments on commit ff71fd2

Please sign in to comment.