Holaaa :)
Bienvenides a este post, siéntanse cómodes en su lectura, les recomiendo una bebida mientras leen, ¡Buena lectura!
¿Frontend Mission?
Seguro te estás preguntando qué es la fronted mission (o tal vez no), pues te diré que fue la primera etapa en este Bootcamp “Launch X” por parte de Innovacción Virtal, aquí desarrollamos sobre todo habilidades referentes al coding con HTML y CSS, además de ver un poco de JS, VUEX y el despliegue en AZURE, aquí te contaré un poco de lo que me llevé o lo que rescato de las 6 semanas de esta misión.
Pero antes que nada, te contaré sobre la primera semana dentro de este Bootcamp.
OnBoarding
En esta primera semana del programa o Bootcamp, con la Mission Commander Fer, vimos conceptos básicos sobre programación, demás de adentrarnos un poco a la programación con Python, estuvimos realizando unos ejercios sobre naves, todo con nuestra temática de explorers.
Les contaré que a pesar de todo, fue una semana difícil para mi ya que nunca había entrado a la programación, esto porque me daba miedo, antes recuerdo ver videos sobre programación y se me hacía un mundo casi que inalcanzable, tan complicado que prefería no entrar más ni ver más allá. Esta visión la quise enfrentar entrando al Bootcamp, anteriormente ya había tenido una grata experiencia con el equipo de Innovacción Virtual, por lo que conociendo este gran equipo, decidí comenzar este viaje dentro de la progamación frontend y backend.
Entonces en esta semana vimos algunos conceptos, recuerdo que lo más difícil de realizar durante esta semana para mi fue la parte de las condicionales: If, Elif y Else. Recuerdo que me costó mucho trabajo completar esos ejercicios, pero muchas veces cometí el error de no reiniciar el kernel de VSCode, por lo que a veces ni siquiera era error como tal del código, sino que el kernel no dejaba ejecutar mi código, esto lo comprobaba al ver que anteriores códigos que si funcionaban correctamente de repente ya marcaban error.
Este fue un gran proceso para familiarizarme con mi editor de código y, como mencionó la mission commander Fer, para “picarle al play y ver cómo funcionaba”, sin duda me llevé una gran y grata experiencia durante este proceso a pesar de ser mi primera experiencia programando y fallar muchísimas veces.
FRONTED MISSION
Semana 1: Despegue
En esta semana tuvimos una gran intro para conocer qué era la programación fronted, en mis palabras puedo decir que:
Fronted es el esqueleto de nuestra página web, ya que en este se monta contenido, estilos, interacción y va de mano con el diseño UI.
También observamos algunas buenas prácticas en la programación, estas para poder tener una buena organización y sobre todo se hizo énfasis en la documentación, ya que no sabremos quién interpretará en un futuro nuestro código, incluso podemos ser nosotros mismos, corriendo el riesgo de que no se entienda nada. Así que documentar nos ahorrará proximas sorpresas en cuanto a interpretación de código, además de ser más profesionales.
También hablamos sobre la limpieza de código y técnicas, las cuales son indispensables para no perdernos en un mar de código, así además de ser prático y eficiente a la hora de trabajar, también es útil para tiempo posterior, para encontrar fallos, resolver errores, actualizaciones, escalar, etc.
Posteriomente pero no menos importante, hablamos sobre el setup, esto incluye requerimientos básicos de hardware y de software para los programas, algunos consejos para poder estar más cómodes mientras escribimos código, para tener un rendimiento óptimo, etc.
Siguiendo el temario, empezamos a ver la estructura web, tanto jerarquías, qué es el homepage, porqué es importante la navegación o el menú, diferentes modelos para poder escoger cual usaríamos dependiendo de nuestro proyecto, la estructura web es cómo están conectadas las diferentes páginas de nuestro sitio, cómo es que estas interactúan, etc., define cómo es que organizaremos la información, cómo es que se leerá, cómo se navegará y también nos ayuda a obtener mejor calificació en SEO.
Click aquí para ir al repositorio de la práctica realizada en esta semana
Semana 2: Primer vuelo
En esta semana tuvimos una intro a HTML ya, este lenguaje nos da la posibilidad de darle la estrutura deseada a nuestra información, o sea, nuestras páginas web, es el esqueleto del que hablaba anteriormente. El temario fue el siguiente:
- 💠 Qué es HTML y estructura de archivo
- 💠 Etiquetas básicas
- 💠 Elementos compuestos
- 💠 Acomodo y Navegación
- 💠 Propiedades de etiquetas
Este contenido la verdad fue muy deslumbrante para mi, ya que esta fue mi primera vez haciendo una página web, sinceramente al principio pensé que sería super difícil, pero no, la verdad es que fue muy suave la curva de aprendizaje, además de que me ayudó mucho el on boarding para poder entender muy bien todo.
Claro que tuve muchos errores, muchas cosas que repetir, me tomé mi tiempo para hacerlo todo, pero pude realizarlo, que es lo que me llevo.
Click aquí para ir al repositorio de la práctica realizada en esta semana
Semana 3: Volando con estilo
Esta fue mi semana favorita, porque empezamos a ver los estilos para agregarlos a HTML. CSS es una hoja de estilos en cascada, esto quiere decir que (así como una cascada) los estilos que escribamos van a tomarse en cuenta en orden, por lo que podemos sobreescribir algún estilo sin tener que borrar el anterior, ya que solo tomará el último escrito.
Me gustó mucho la práctica realizada, sin embargo aún existieron muchas fallas ya que no sabía cómo realizar cierto acomodo, a pesar de ver muchos tutoriales, así que aún me queda muchísimo por aprender.
La práctica realizada en esta semana, fue clonar un sitio de vacunación, tanto en HTML como en CSS, no era clonación como tal, así que podíamos (si queríamos) proponer nuestro propio estilo.
Click aquí para ir al repositorio de la práctica realizada en esta semana
Semana 4: Controlando el vuelo en JS
En esta semana vimos una intro a programación con JavaScript, funciones y excepciones. Así, estuvimos viendo el temario con JS en el navegador.
Esta semana me recordó mucho a el on boarding, ya que se me hizo muy familiar la programación en JS con la de Python, entonces no fue tan confuso entrar a un lenguaje nuevo, solo que había diferentes términos, como por ejemplo que en lugar de print() era console.log().
La práctica de esta semana fue realizar un pokedex, por lo que los requerimientos fueron:
- 💠 La maquetación del sitio con HTML
- 💠 Diseño con CSS para que realmente pareciera un pokedex
- 💠 Tener imput de entrada, ya que lo que se buscaba era que la persona pudiera introducir el nombre del pokemon para lanzar datos
- 💠 Tomar el input e ir a consultar el API en pokeapi
- 💠 Mostrar en la pantalla los siguientes datos del pokemon ingresado:
- 🔹 Nombre
- 🔹 Imágen
- 🔹 Tipo de pokemón
- 🔹 Estadísticas
- 🔹 Movimientos
Además de obtener un bonus por lo siguiente:
- 💠 Si la página es responsive
- 💠 Despliegue (sitio real)
- 💠 Uso de otras ritas como buscar por número de pokemon o mostrar un rango de pokemon.
A partir de esta semana, estuve muy ocupada y estresada con la U, por lo que no pude terminar las prácticas, sin embargo si atendí las mentorías, por lo que siguen en pie y las subiré próximamente.
Semana 5: Comparando naves
En esta semana tuvimos un intro a Frameworks, también de VueJs con Vuex. VueJS es un framework que permite que las plataformas y aplicaciones que deseamos se puedan crear, teniendo muchas herramientas para poder desarrollarla y desplegarla.
La práctica de esta semana fue una recapitulación de la práctica de la pastelería, tendríamos que estar haciendo las entradas de los formularios y guardándolos en el estado para poder mostrarlo del lado del pastelero, o sea, que si alguien ordenaba un pastel a través del formulario, entonces el pastelero podría verlo instatáneamente.
Por lo que los componenetes necesarios para el lado del cliente serían:
- 💠 Información de la pastelería
- 💠 Opciones para los diferentes sabores de pastel con precios respectivos
- 💠 Opciones de los dieferentes adornos con su precio respectivo
- 💠 Opcoones para combinar sabores
- 💠 Opciones para combinar adornos
- 💠 Por último el formulario con datos de contacto del cliente Y del lado del pastelero serían:
- 💠 Información de cantidad de sabores disponibles
- 💠 Información de la cantidad de adornos disponibles
- 💠 Pedidos que se han reralizado con los datos del formulario Y en general:
- 💠 Uso de rutas para poder acceder a la página de cliente y de pastelero (router de Vue)
- 💠 Información de sabores, adornos, cantidades y precio debe de estar en el estado con Vuex o Vite y se debe modificar ahí para mostrarse en los componentes.
Como siempre, el bonus sería si;
- 💠 La página es responsive
- 💠 Despliegue
Como mencioné anteriormente, no pude realizar esta práctica, por lo que próximamente estaré terminándola y subiéndola a mi GitHub. También actualizaré este blog para subirla.
Semana 6: Despliegue espacial
En esta semana vimos Angular, un framework opersource que fue desarrollado por Google. Este framework nos ayuda a trabajar de forma eficiente y organizada, esto gracias a que nos crea las carpetas necesarias para un proyecto, permitir que varios desarrolladores trabajen en el mismo proyecto, escalar, etc.
También retomé mucho de mi anterior curso en Innovacción Virtual: Arquitectura de la información, obtuve mi insignia en Azure Fundamentals por parte de Microsoft, ya que esta semana vimos un poco del despliegue en Azure, conectándo nuestro sitio de GitHub con Azure, para poder tener modificaciones en línea y poder visualizarlas en seguida en nuestro sitio web.
Últimos comentarios
Sin duda estas 7 semanas (contando la semana del OnBoarding) fueron muy enriquecedoras y a pesar de entrar en episodios de ansiedad, estar en compañía y tener el apoyo y motivación siempre del MC Rodrigo y de los explorers fue sin duda lo que me mejoró muchas ocasiones mi estado de salud mental.
Me quedo con un gran conocimiento, ver todo lo que he avanzado es algo que nunca pensé que podría lograr hacer, por lo que, esperando que retome mis energías, quiero dar todo nuevamente en esta etapa de Backend.
Sin más, nos vemos en un próximo post.
Saludos, Annie.✨
