# Semana 1

Te damos la biendenida a esta semana de trainee, recuerda que si ya conoces o tienes experiencia en alguno de los temas brindados, no dudes en saltarlo, sin embargo, tomate el tiempo para revisar cada punto y estar seguro de que tienes conocimiento sobre el y asi poder concluir exitosamente cada workshop y tener la menor cantidad de dudas al salir de el.

## Temas Y Objetivos

### ***`0. Git/GitHub`***

Este es uno de los temas principales que debes saber antes de iniciar ya que lo usaremos no solo para este training, sino en cada momento de nuestro trabajo diario.

`Que debo saber?`
- Manejo de repositorios local (COMMITS, BRANCH Y REBASE)
- Manejo de repositorios remoto (PULL, PUSH Y PULL REQUEST)

`Material`

- https://www.youtube.com/watch?v=HiXLkL42tMU
- https://confluence.atlassian.com/bitbucketserver/basic-git-commands-776639767.html
- https://blog.testproject.io/2021/03/22/git-commands-every-sdet-should-know/

<br/>
<br/>

### ***`1. Fullstack overview`***

`Esta sera tu guia general`, aqui estan los temas que tocaremos juntos y temas que tu mismo puedes avanzar por tu cuenta.

`Que debo saber?`
- Que es ser un full stack developer?
- Conceptos de desarrollo, protocolos web, tecnologias, testing Y CI/CD

`Material`

- [Full stack Open](https://fullstackopen.com/es/#course-contents)
- [Full stack bootcamp Midudev](https://www.youtube.com/watch?v=wTpuKOhGfJE&list=PLV8x_i1fqBw0Kn_fBIZTa3wS_VZAqddX7)

<br/>
<br/>

### ***`2. Fundamentos de Web`***

El objetivo de este modulo es que conozcas, `Como funciona la web moderna?` y cuales son los caminos que puedes tomar dentro de ella

`Que debo saber?`
- Conceptos basicos del desarrollo web
- HTTP GET
- Que es el DOM
- Conceptos de Frontend y Backend

`Material`

- [Full stack Open Fundamentos Web](https://fullstackopen.com/es/part0/fundamentos_de_las_aplicaciones_web)
- [Fundamentos web Midudev](https://www.youtube.com/watch?v=wTpuKOhGfJE)
- [Mdn Documentacion Oficial de la Web](https://developer.mozilla.org/es/)

<br/>
<br/>

### ***`3. HTML y CSS`***

Aprende las tecnologías básicas del desarrollo web, HTML y CSS son las tecnologias que nos permiten tener una gran experiencia de usuario en la web moderna.

`Que debo saber?`
- Etiquetas HTML
- HTML Semantico
- Selectores CSS
- Pseudo Elementos y Pseudo Clases
- Modelo de Caja
- Displays CSS (Grid y Flex)
- Responsive Design

`Material`

- [Curso de HTML y CSS desde 0](https://youtu.be/XqFR2lqBYPs)
- [HTML Semantic Elements](https://www.w3schools.com/html/html5_semantic_elements.asp)
- [W3 School CSS](https://www.w3schools.com/css/default.asp)
- [W3 School CSS Selectors](https://www.w3schools.com/cssref/css_selectors.asp)
- [Mdn Pseudo Clases y Elementos](https://developer.mozilla.org/es/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements)
- [Box Model CSS](https://www.w3schools.com/css/css_boxmodel.asp)
- [Grid garden](https://cssgridgarden.com/#es)
- [Flexbox Froggy](https://flexboxfroggy.com/#es)
- [CSS Dinner](https://flukeout.github.io/)
- [Qué es el RESPONSIVE WEB DESIGN - Bien explicado](https://www.youtube.com/watch?v=2zypRlzIcHc)

<br/>
<br/>

### ***`4. Maquetación y Bootstrap`***

El objetivo de esta seccion es que puedas aprender a convertir un diseño de interfaces, a un proyecto web con la precision que demanda un trabajo profesional.

`Que debo saber?`
- Entender y Leer un diseño UI en Figma
- Estructuración de proyecto web
- Aprender a utilizar la libreria de maquetación llamada bootstrap
- Crear un proyecto personal (Portafolio)
- Este proyecto es opcional, sin embargo, te recomendamos que lo hagas poco a poco y lo conviertas en un portafolio que puedas compartir en tus redes profesionales.

`Material`

- [Curso de Figma para Frontends](https://leonidasesteban.com/aprender/figma-frontends)
- [Cómo estructurar un proyecto web simple - Taller Desarrollo Web #23](https://www.youtube.com/watch?v=yo8Y2hB5A9A)
- [CREA TU PORTAFOLIO DESDE CERO CON HTML Y CSS ( Full Page).](https://www.youtube.com/watch?v=LM_rRRSNq20)
- [Documentacion Bootstrap](https://getbootstrap.com/docs/5.0/getting-started/introduction/)
- [Curso de Bootstrap 5 - Introducción al mejor framework de diseño web](https://www.youtube.com/watch?v=LYubk9RXENk)
- [Curso de Bootstrap v5](https://www.youtube.com/watch?v=rK_WwhUDpoo&list=PLUW3XAK9O3HFfc7KryNaE9jsqhmCpbBQi)

<br/>
<br/>

### ***`5. Pre procesadores y SASS (BEM)`***

Como desarrolladores debemos poder tener a la mano herramientas y buenas practicas que nos ayuden a hacer nuestro trabajo mas facil, estas herramientas pueden ser librerias externas a nuestros proyectos o simples metodologias que al ser aplicadas, seran de gran ayuda en nuestro trabajo, haciendo nuestro codigo mas legible para todo el equipo y facilitando el mantimiento del mismos. Los pre procesadores de CSS nos permitiran tener esa agilidad para dar estilos y tener una mejor sintaxis de css, y la metodologia BEM, nos dara un orden al momento de elegir nuestras clases en los elementos.

`Que debo saber?`
- Entender la importancia de un pre procesadores de CSS
- Conocer los pre procesadores de CSS
- Dominar la sintaxis basica de SCSS
- Entender y aplicar la metogia BEM

`Material`

- [An Introduction to CSS Pre-Processors: SASS, LESS and Stylus](https://medium.com/@itIsMadhavan/an-introduction-to-css-pre-processors-sass-less-and-stylus-1f45178ff5ba)
- [¿CÓMO FUNCIONA SCSS? | APRENDE A AGREGAR SCSS EN TUS PROYECTOS](https://www.youtube.com/watch?v=tQH0qWncX30)
- [🚀 CURSO COMPLETO Metodología BEM (Escribe un código CSS profesional)](https://www.youtube.com/watch?v=YaAkV--25fg)

<br/>
<br/>

### ***`6. Javascript y Event Loop (ES6+)`***

Llegamos al lenguaje mas importante para este training y sobre el cual corre la web. Javascript es un lenguaje que tiene multiples propositos, desde crear aplicaciones web y moviles, hasta servicios en web 3 para blockchain. Este lenguaje sera la base de todo tu proceso durante el training.

`Que debo saber?`
- Declaracion de variables
- Tipos y estructuras de datos
- Scope
- Loops
- Condicionales
- Metodos de arreglos
- Destructuring y Referencias
- Hoisting
- Spread operator
- Entender como funciona javascript interiormente (Event Loop)
- Sintaxis de Ecma Script 6+

`Material`

- [Aprende JavaScript - Curso Completo desde Cero](https://youtu.be/ivdTnPl1ND0)
- [2. TIPOS DE DATOS PRIMITIVOS en JAVASCRIPT | JS en ESPAÑOL](https://www.youtube.com/watch?v=cC65D2q5f8I)
- [3. VALORES vs REFERENCIAS en JAVASCRIPT | JS en ESPAÑOL](https://www.youtube.com/watch?v=AvkyOrWkuQc)
- [33 Conceptos de Javscript que debes saber](https://www.youtube.com/playlist?list=PLfWyZ8S-XzecAttp3QU-gBBXvMqEZTQXB)
- [¿QUÉ ES EL HOISTING en JAVASCRIPT? | JS en ESPAÑOL](https://www.youtube.com/watch?v=uI6o97A4IrI)
- [MÉTODOS DE ARREGLOS MODERNOS EN JAVASCRIPT](https://www.youtube.com/watch?v=bkgXlQp5hbI)
- [¿Cómo funciona el destructuring en Javascript?](https://www.youtube.com/watch?v=WJJT2Ql1aFA)
- [Philip Roberts: ¿Que diablos es el "event loop" (bucle de eventos) de todos modos? | JSConf EU](https://www.youtube.com/watch?v=8aGhZQkoFbQ)
- [Curso de ES6](https://www.youtube.com/playlist?list=PLhSj3UTs2_yX_ct0OfHrmMwKL8wpz-N2j)

<br/>
<br/>

### ***`7. API Rest`***

Application Programing Interface (API), es la manera como vamos a comunicar nuestros programas entre si, para ser mas especificos, nuestro frontend con nuestro backend. Es importante que sepas esto ya que gracias a este tema, es que hoy en día existen las lamadas Web Applications.

`Que debo saber?`
- Ques una API y como funciona
- Que es un CRUD
- Protocolo HTTP y WS

`Material`

- [Qué es y cómo usar una API REST con JavaScript | TUTORIAL](https://www.youtube.com/watch?v=tlTFyXauOa4&t=306s)
- [WebSockets vs. HTTP](https://ably.com/topic/websockets-vs-http)
- [Conoce qué es CRUD y por qué es fundamental para desarrollar sitios y aplicaciones](https://www.crehana.com/blog/desarrollo-web/que-es-crud/)

<br/>
<br/>

### ***`8. Proyecto (NETFLIX JS Vanilla)`***

Este sera el proyecto que veremos a lo largo de este training, haremos una replica de Netflix, con el cual podremos no solo maquetar un sitio web, sino tambien darle funcionalidad, conectarlo a un backend nuestro y a una base de datos.

En esta semana, desarrollaras el proyecto del lado del frontend utilizando unicamente HTML, CSS y Javascript, de manera que finalizando el workshop y la semana, estes en la completa capacidad de desarrollar un sitio web estatico a medida, segun los estilos y parametros de un diseño profesional. Ademas de haberle dado la funcionalidad necesaria para permitir a un usuario final, interactuar con la plataforma.

Finalmente, publicaras el sitio desde tu cuenta de Github.

`Que debo saber?`
- Semana 1 completada

`Material`

- Coordinar Workshop por SLACK con tu Tech Lead

<br/>
<br/>