This is the continuation of the engineering career path, taking both into account.
Here the path diverges into two options after this foundation, one in React and another in Angular. Continue with the one that corresponds.
| Title | Description | Level | Resources | ||
| Web base | devtools | 1 | IWA: Devtools.mp4 Devtools - IWA https://developer.chrome.com/docs/devtools/ | ||
| Web base | html sematic & validation forms | 1 | IWA: HTML semantico.mp4 HTML semantico - IWA El gran libro de HTML5, CSS3 y JS (solo capitulo 1): https://gutl.jovenclub.cu/wp-content/uploads/2013/10/El+gran+libro+de+HTML5+CSS3+y+Javascrip.pdf More: https://cs.fyi/guide/writing-semantic-html | ||
| Web base | CSS base | 1 | Box model: https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model Specificity: https://www.smashingmagazine.com/2007/07/css-specificity-things-you-should-know/ CSS Selector practice: https://flukeout.github.io Em vs Rem: https://webdesign.tutsplus.com/comprehensive-guide-when-to-use-em-vs-rem–cms-23984t Ejercicio: 01 - Aplicar CSS - IWA | ||
| Web base | Flexbox | 1 | IWA: Flexbox.mp4 Flexbox - IWA Game: https://flexboxfroggy.com | ||
| Web base | Grid | 1 | IWA: Grid.mp4 Grid - IWA Game: https://cssgridgarden.com | ||
| Web base | Responsive | 1 | IWA: Responsive - IWA Ejercicio: 01 - Aplicar Flexbox/grid - IWA Media querys: https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Media_queries | ||
| Web base | PostCSS | 1 | https://medium.com/@ralph1786/using-css-modules-in-react-app-c2079eadbb87 | ||
| Web base | CSS modules | 1 | IWA: PostCSS.mp4 Postcss - IWA https://www.toptal.com/front-end/postcss-sass-new-play-date | ||
| NodeJS | NodeJs base | 1 | IWA: NodeJS.mp4 NodeJS - IWA | ||
| Ecmascript | npm | 1 | NPM Crash Course - YouTube | ||
| Ecmascript | primitive types | 1 | https://eloquentjavascript.net/01_values.html | ||
| Ecmascript | functions | 1 | https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Functions https://eloquentjavascript.net/03_functions.html (hasta optional arguments) | ||
| Ecmascript | modules | 1 | IWA: Modules.mp4 Modules - IWA https://eloquentjavascript.net/10_modules.html (hacer ejercicios) | ||
| Ecmascript | scopes | 1 | https://github.com/getify/You-Dont-Know-JS/blob/2nd-ed/scope-closures/README.md (sin closures) | ||
| Ecmascript | data structures / JSON | 1 | IWA: Data structure and class.mp4 Data structure - IWA IWA2: Valor vs referencia.mp4 Valor vs referencia - IWA https://eloquentjavascript.net/04_data.html (hasta rest) | ||
| Ecmascript | unary | 1 | https://www.educba.com/unary-operators-in-javascript/ | ||
| Ecmascript | relational | 1 | https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators#relational_operators | ||
| Ecmascript | loops and iterations | 1 | IWA: Iterables.mp4 Iterables - IWA https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration | ||
| Ecmascript | async vs sync | 1 | https://eloquentjavascript.net/11_async.html (hasta callbacks) | ||
| Ecmascript | callbacks | 1 | https://eloquentjavascript.net/11_async.html (desde callbacks, hasta promises) | ||
| Ecmascript | promises | 1 | IWA: Promises.mp4 Promesas - IWA https://eloquentjavascript.net/11_async.html (desde promises, hasta network are hard) | ||
| Ecmascript | async/await | 1 | https://eloquentjavascript.net/11_async.html (desde async function, hasta generators) | ||
| Typescript | interfaces / types | 1 | IWA: Estructura de datos.mp4 Estructura de datos - IWA | ||
| Typescript | enum | 1 | IWA: Enum.mp4 Enums - IWA | ||
| Typescript | uso de any | 1 | https://www.typescriptlang.org/docs/handbook/2/everyday-types.html#any | ||
| Web | DOM manipulations | 1 | IWA: Manipulacion del dom.mp4 Manipulacion del DOM - IWA https://eloquentjavascript.net/14_dom.html (todo, incluyendo ejercicios) | ||
| Web | storages | 1 | IWA: Storages.mp4 Storages - IWA | ||
| Web | fetch | 1 | IWA: Fetch.mp4 Fetch - IWA | ||
| Web | CORS | 1 | IWA: CORS.mp4 CORS - IWA https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS (hacer pruebas) | ||
| Web | configs files | 1 | lidiar con: .eslintrc, vite.config, .env, .styleintrc, tsconfig, .editorconfig (demostrar) | ||
| Ecmascript | debugging | 2 | IWA: Devtools.mp4 Devtools - IWA https://developer.chrome.com/docs/devtools/javascript/ (demostrar) | ||
| Ecmascript | built-in functions | 2 | https://www.tutorialspoint.com/javascript/javascript_builtin_functions.htm (repaso) | ||
| Web base | SEO | 2 | https://developers.google.com/search/docs/crawling-indexing/javascript/javascript-seo-basics (se espera conocimiento superficial) | ||
| Web base | Sass | 2 | Sass under 2 hours: https://jeremymouzin.com/learn-sass/Brain%20Upgrade%20-%20Learn%20Sass%20In%20Under%202%20Hours.pdf | ||
| Ecmascript | expressions and operators | 2 | https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators#equality_operators (sin bitwise ni binarios) | ||
| Web base | tailwind | 2 | Tailwind CSS Full Course for Beginners “ | Complete All-in-One Tutorial “ | 3 Hours |
| Ecmascript | npm scripts | 2 | https://www.geeksforgeeks.org/introduction-to-npm-scripts/ | ||
| Ecmascript | built-in objects | 2 | https://www.scaler.com/topics/javascript/javascript-built-in-objects/ | ||
| Ecmascript | keyed collections | 2 | JavaScript ES6 Features: Creating Key/Value Pairs with Maps - YouTube https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Keyed_collections | ||
| Ecmascript | index collections | 2 | Javascript Arrays Made Simple: Indexing and Finding (Part 2) - YouTube https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Indexed_collections | ||
| Ecmascript | rest and spread operator | 2 | https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/arguments https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax https://eloquentjavascript.net/04_data.html (repasar todos los puntos y profundizar en rest/destructing/spread) (demostrar) | ||
| Ecmascript | coercion | 2 | https://github.com/getify/You-Dont-Know-JS/blob/1st-ed/types%20%26%20grammar/ch4.md (lectura rapida, justificacion a no usar “==”) | ||
| Ecmascript | setTimeout/setInterval | 2 | https://developer.mozilla.org/en-US/docs/Web/API/setTimeout (especial atencion al “this”) | ||
| Ecmascript | events | 2 | https://eloquentjavascript.net/15_event.html (recomendado hacer los ejercicios) | ||
| Ecmascript | error handling | 2 | IWA: Manejo de errores.mp4 Manejo de errores - IWA try, catch, finally, throw - error handling in JavaScript - YouTube https://eloquentjavascript.net/08_error.html (demostrar) | ||
| NodeJS | process.cwd | 2 | https://stackoverflow.com/questions/9874382/whats-the-difference-between-process-cwd-vs-dirname | ||
| NodeJS | fs module | 2 | https://www.w3schools.com/nodejs/nodejs_filesystem.asp (demostrar) fs (File System) Module in Node JS - YouTube | ||
| NodeJS | environment / dotenv | 2 | IWA: Environments.mp4 Environment - IWA (demostrar) | ||
| NodeJS | exiting codes | 2 | https://www.knowledgehut.com/blog/web-development/node-js-process-exit | ||
| NodeJS | inputs | 2 | https://stackoverflow.com/questions/20086849/how-to-read-from-stdin-line-by-line-in-node | ||
| Web | cypress | 2 | IWA: Cypress.mp4 Cypress practica: Cypress - IWA Cypress practica | ||
| Web | atomic design | 2 | IWA: Atomic.mp4 Atomic design - IWA https://bradfrost.com/blog/post/atomic-web-design/ | ||
| Web | web component | 2 | https://developer.mozilla.org/en-US/docs/Web/API/Web_components (repaso) Web Components Crash Course (demostracion (TODO especificar)) | ||
| Web | paths | 2 | IWA: Router.mp4 React Router - IWA (repaso) https://developer.mozilla.org/en-US/docs/Web/API/Navigation_API | ||
| Web | hexagonal architecture (folders) | 2 | https://github.com/juanm4/hexagonal-architecture-frontend | ||
| Ecmascript | this | 3 | https://github.com/getify/You-Dont-Know-JS/blob/1st-ed/this%20%26%20object%20prototypes/ch1.md | ||
| Ecmascript | call vs apply vs bind | 3 | https://github.com/getify/You-Dont-Know-JS/blob/1st-ed/this%20%26%20object%20prototypes/ch2.md | ||
| Ecmascript | IIFE | 3 | https://developer.mozilla.org/en-US/docs/Glossary/IIFE | ||
| Ecmascript | types of errors | 3 | https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Error | ||
| Ecmascript | prototypal inheritance | 3 | https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Object_prototypes https://github.com/getify/You-Dont-Know-JS/blob/1st-ed/this%20%26%20object%20prototypes/ch5.md | ||
| Ecmascript | classes | 3 | IWA: Clases 1.mp4 Clases 2.mp4hClass - IWA, Demo - Clases y herencia.mp4 https://github.com/getify/You-Dont-Know-JS/blob/2nd-ed/objects-classes/ch3.md | ||
| Typescript | abstract | 3 | https://www.typescriptlang.org/docs/handbook/2/classes.html#abstract-classes-and-members (demostrar) | ||
| Typescript | combining types (unions, intersections, alias & keyof) | 3 | https://www.typescriptlang.org/docs/handbook/2/everyday-types.html#union-types https://www.typescripttutorial.net/typescript-tutorial/typescript-intersection-types https://www.typescriptlang.org/docs/handbook/2/everyday-types.html#type-aliases https://www.typescriptlang.org/docs/handbook/2/keyof-types.html#handbook-content | ||
| Web | core web vitals | 3 | https://web.dev/articles/vitals | ||
| Web | stencil | 3 | How to Create Web Components with Stencil - YouTube TODO agregar mas | ||
| NodeJS | process.nextTick | 3 | The process.nextTick Function - YouTube https://nodejs.org/en/guides/event-loop-timers-and-nexttick | ||
| NodeJS | chill process | 3 | https://www.youtube.com/watch?v=bbmFvCbVDqo (demostrar) | ||
| NodeJS | http module | 3 | https://www.digitalocean.com/community/tutorials/how-to-create-a-web-server-in-node-js-with-the-http-module (demostrar) | ||
| NodeJS | logging | 3 | https://stackify.com/node-js-logging/ (hacere el tutorial) | ||
| NodeJS | handling async errors | 3 | https://www.mariokandut.com/handling-errors-in-asynchronous-functions-node-js/ | ||
| APIs | GraphQL | 3 | https://www.howtographql.com https://graphql.org/learn | ||
| APIs | nest.js | 3 | |||
| APIs | APIs | 4 | Generar un server con documentacion y conexion completa entre back y front (TODO especificar mejor) | ||
| Ecmascript | event loop | 4 | https://dev.to/lydiahallie/javascript-visualized-event-loop-3dif What the heck is the event loop anyway? “ | Philip Roberts “ | JSConf EU https://eloquentjavascript.net/11_async.html (desde event loop) |
| Ecmascript | recursion | 4 | https://javascript.info/recursion https://eloquentjavascript.net/03_functions.html#h_jxl1p970Fy (desde recursion, hasta growing functions) | ||
| Ecmascript | call stack & stack trace | 4 | https://www.cloudhadoop.com/nodejs-print-stack-trace-error?expand_article=1 | ||
| Ecmascript | closure | 4 | https://www.codeguage.com/courses/js/functions-closures https://github.com/getify/You-Dont-Know-JS/blob/2nd-ed/scope-closures/README.md (desde closures) | ||
| Typescript | generic base | 4 | https://www.typescriptlang.org/docs/handbook/2/generics.html#hello-world-of-generics | ||
| Ecmascript | memory management | 4 | GC: https://javascript.info/garbage-collection https://developer.mozilla.org/en-US/docs/Web/JavaScript/Memory_Management | ||
| NodeJS | own module | 4 | https://reflectoring.io/nodejs-modules-imports/ https://www.freecodecamp.org/news/how-to-make-a-beautiful-tiny-npm-package-and-publish-it-2881d4307f78/ (demostrar) | ||
| Web base | building tools | 4 | Creacion de una herramienta con NodeJs (python) | ||
| Deploy | publish (nexus) | 4 | How to create and publish NPM Packages? - YouTube | ||
| APIs | conecting with a DB | 4 | Mongo: https://www.mongodb.com/docs/drivers/node/current/quick-start/download-and-install/ | ||
| APIs | jwt | 4 | JWT Authentication Tutorial - Node.js - YouTube | ||
| Web base | accesibility | 4 | Udacity course: https://www.udacity.com/course/web-accessibility–ud891 | ||
| Web | PWA | 4 | https://web.dev/articles/what-are-pwas (todos los topics de la izq) | ||
| Web | shadow dom | 4 | https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_shadow_DOM | ||
| Web | Server Side Rendering | 4 | What is Server-Side Rendering? (Server-side Rendering with JavaScript Frameworks) - YouTube https://www.educative.io/answers/what-is-server-side-rendering | ||
| Ecmascript | iterators and generators | 5 | https://www.codeguage.com/courses/advanced-js/iteration-introduction https://www.codeguage.com/courses/advanced-js/iteration-generators | ||
| Web | microfronts | 5 | https://www.aplyca.com/en/blog/micro-frontends-what-are-they-and-when-to-use-them Construir una app que contenga un micro hecho en angular y otro en react |