---
# System prepended metadata

title: Semana 1

---

# 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/>
