└── README.md /README.md: -------------------------------------------------------------------------------- 1 | # Roadmap - Web Development 2 | 3 | ## Referencias 4 | - [En este link encontrarás el significado de los emojis](https://github.com/mayrascript/emojis-references) 5 | - [Recursos para mejorar el Inglés](https://github.com/mayrascript/english-resources/blob/main/README.md) 6 | 7 | ## Recursos 8 | - [MDN Web Official Documentation (:es:/:uk:)](https://developer.mozilla.org) 9 | - [Developer Roadmaps](https://roadmap.sh/) 10 | 11 | ## Herramientas 12 | - [*CODEPEN*: An online code editor and learning environment (:uk:)](https://codepen.io/) 13 | 14 | ## ¿Por donde empezar? 15 | Si nunca has escrito una sola línea de código o esto de la programación es totalmente nuevo para tí. Te recomiendo empezar con programación básica, así mismo existe algo llamado Pseudocódigo, el cual te ayudará a trabajar la parte lógica (algo fundamental en la programación) y lo mejor es que será en tu propio lenguaje, es decir, el español. 16 | 17 | ## 1er PASO - Programación Básica y PseudoCódigo 18 | - [Curso de introducción a los Algoritmos (:es: - :free:)](https://codigofacilito.com/cursos/algoritmos) 19 | - [¡A Programar! Una introducción a la programación (:es: - :free:)](https://es.coursera.org/learn/a-programar) 20 | 21 | ### Herramientas 22 | - [PseInt - Herramienta para practicar pseudo - código](http://pseint.sourceforge.net/) 23 | 24 | ### Complementario 25 | 26 | 27 | ## 2do PASO - Git y Github 28 | - [Git y Github | Curso Práctico de Git y Github Desde Cero (:es:)](https://www.youtube.com/watch?v=HiXLkL42tMU) 29 | 30 | ### Complementario 31 | - [Curso de Git Gratis (:es:)](https://codigofacilito.com/cursos/git) 32 | - [Git for Beginners (:uk:) ](https://dev.to/purveshshende2/git-for-beginners-3il6) 33 | - [Interactive tool for git (:uk:)](https://github.com/jlord/git-it-electron) 34 | 35 | ### Buenas Prácticas 36 | - [Git Flow: A successful Git branching model (:uk:)](https://nvie.com/posts/a-successful-git-branching-model/) 37 | 38 | ## 3er PASO - HTML y CSS 39 | - [Curso de HTML y CSS (:es: - :free:)](https://open-bootcamp.com/cursos/html-y-css) 40 | 41 | ### Complementario 42 | 43 | #### HTML 44 | - [Tags (:uk:)](https://allthetags.com/) 45 | - [Semantic elements in HTML (:uk:)](https://www.w3schools.com/html/html5_semantic_elements.asp) 46 | 47 | #### CSS 48 | - [A Complete guide to Flexbox (:uk:)](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) 49 | - [Interactive flexbox game (:uk:)](https://flexboxfroggy.com/#es) 50 | - [A fun game to learn and practice CSS selectors (:uk:)](https://flukeout.github.io/) 51 | 52 | ### Buenas Prácticas 53 | #### CSS 54 | - [BEM for class naming (:uk:)](http://getbem.com/introduction/) 55 | 56 | ## 4to PASO - Javascript: 57 | - [JavaScript Fundamentals (:uk:)](https://thinkster.io/topics/javascript-fundamentals) 58 | - [Curso de Javascript (:es:)](https://edutin.com/curso-de-javascript-4284) 59 | - [33 Conceptos que todo desarrollador de JavaScript debería saber (:es:)](https://github.com/adonismendozaperez/33-js-conceptos) 60 | - [How to code in Javascript (:uk:)](https://www.digitalocean.com/community/tutorial_series/how-to-code-in-javascript) 61 | 62 | ### Javascript - Arrays 63 | #### Javascript - Arrays - Functions 64 | - Ordering: 65 | - [sort (:uk:/:es: - :file_folder:)](https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Objetos_globales/Array/sort) 66 | - Search: 67 | - [filter (:uk:/:es: - :file_folder:)](https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Objetos_globales/Array/filter) 68 | - [find (:uk:/:es: - :file_folder:)](https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Objetos_globales/Array/find) 69 | - [findIndex (:uk:/:es: - :file_folder:)](https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Objetos_globales/Array/findIndex) 70 | - [includes (:uk:/:es: - :file_folder:)](https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Objetos_globales/Array/includes) 71 | - [indexOf (:uk:/:es:) - :file_folder:](https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Objetos_globales/Array/indexOf) 72 | 73 | ### Javascript - Promises 74 | - [JavaScript Promise Tutorial – How to Resolve or Reject Promises in JS (:uk:)](https://www.freecodecamp.org/news/javascript-promise-tutorial-how-to-resolve-or-reject-promises-in-js/) 75 | 76 | ### Javascript - Buenas Prácticas 77 | - [Guía de estilo, convenciones y buenas prácticas de desarrollo con Javascript (:es:)](https://medium.com/@davidenq/gu%C3%ADa-de-estilo-convenciones-y-buenas-pr%C3%A1cticas-de-desarrollo-con-javascript-d2e9ef80d63b) 78 | - [Prettier + EsLint (:es:)](https://medium.com/capua-dev/integrando-prettier-con-eslint-961d1d8b716c) 79 | 80 | ### Javascript - Testing 81 | - [How to Start unit testing in Javascript (:uk:)](https://www.freecodecamp.org/news/how-to-start-unit-testing-javascript) 82 | - [Jest docs (:uk:)](https://jestjs.io/docs/en/getting-started) 83 | - [Testing Asynchronous Code with Jest (:uk:)](https://jestjs.io/docs/en/asynchronous) 84 | 85 | ### Javascript - Programación Orientada a Objectos con Javascript 86 | 87 | - [POO con Javascript - Parte 1 (:es:)](https://www.youtube.com/watch?v=QWAAiskbzZo) 88 | - [POO con Javascript - Parte 2 (:es:)](https://www.youtube.com/watch?v=WwbnGBxkvuc) 89 | - [POO con Javascript - Parte 3 (:es:)](https://www.youtube.com/watch?v=61w-5rHL-64) 90 | - [POO con Javascript - Parte 4 (:es:)](https://www.youtube.com/watch?v=mIsdqd6Q5u8) 91 | 92 | ### Javascript - Interviews 93 | - [100 Algorithms Challenge (:uk:)](https://thinkster.io/tutorials/100-algorithms-challenge) 94 | - [100 Front End Interview Questions Challenge (:uk:)](https://thinkster.io/tutorials/100-front-end-interview-questions-challenge) 95 | 96 | ### Javascript - Challenges 97 | - [10 days of Javascript (:uk:)](https://www.hackerrank.com/domains/tutorials/10-days-of-javascript) 98 | - [Dev Challenges (:uk:)](https://devchallenges.io/) 99 | 100 | ### Complementario 101 | - [What is a pure function? (:uk:)](https://medium.com/javascript-scene/master-the-javascript-interview-what-is-a-pure-function-d1c076bec976) 102 | 103 | ## DOM 104 | - [¿Qué es el DOM? (:es:)](https://www.youtube.com/watch?v=jgU3Wn0Txec) 105 | - [Introducción (:es:)](https://developer.mozilla.org/es/docs/Referencia_DOM_de_Gecko/Introducci%C3%B3n) 106 | - [Introducción - ¿Cómo se accede al DOM? (:es:)](https://developer.mozilla.org/es/docs/Referencia_DOM_de_Gecko/Introducci%C3%B3n#.C2.BFC.C3.B3mo_se_accede_al_DOM.3F) 107 | - [Introducción - Tipos de Datos Importantes (:es:)](https://developer.mozilla.org/es/docs/Referencia_DOM_de_Gecko/Introducci%C3%B3n#Tipos_de_datos_importantes) 108 | - [Guide to Web Components (:uk:)](https://developers.google.com/web/fundamentals/web-components) 109 | 110 | ## Accessibility 111 | - [Custom accesible checkboxes (:uk:)](https://www.a11ywithlindsey.com/blog/create-custom-keyboard-accesible-checkboxes) 112 | - [A Complete Guide To Accessible Front-End Components (:uk:)](https://www.smashingmagazine.com/2021/03/complete-guide-accessible-front-end-components/) 113 | 114 | 115 | ## Typescript (luego de haber aprendido javascript) 116 | 117 | - [Introducción a Typescript (:es:)](https://youtu.be/FufR-Vailzk) 118 | - [Typescript Performance (:uk: - :file_folder:)](https://github.com/microsoft/TypeScript/wiki/Performance) 119 | 120 | ## Angular 121 | - [Recursos de Angular (:es:/:uk:)](https://github.com/mayrascript/angular-resources) 122 | 123 | ## React 124 | - [Fundamentals of React - Introduction (:uk:)](https://thinkster.io/tutorials/fundamentals-of-react-introduction) 125 | - [Introduction To React Hooks (:uk:)](https://thinkster.io/tutorials/introduction-to-react-hooks) 126 | - [Recursos (:es:/:uk: - :file_folder:)](https://es.reactjs.org/community/courses.html) 127 | - [Curso Gratis de React (:es:)](https://codigofacilito.com/cursos/curso-gratis-de-react) 128 | - [Curso Gratis de React 2020 (:es:)](https://midu.dev/curso-gratis-react-2020/) 129 | - [Epic React (:uk:) - :dolar:](https://epicreact.dev/) 130 | 131 | ## Vue 132 | - [Introduction to Vue.js: Course Introduction (:uk:)](https://thinkster.io/tutorials/introduction-to-vuejs) 133 | 134 | ## Backend 135 | 136 | ### Firebase 137 | - [Firestore with React (:uk:)](https://medium.com/get-it-working/get-googles-firestore-working-with-react-c78f198d2364) 138 | 139 | ### GraphQL 140 | - [Apollo GraphQL Course (:uk: - :free: - :file_folder:)](https://odyssey.apollographql.com/) 141 | - [Apollo GraphQL - Fullstack Tutorial (:uk: - :free:)](https://github.com/apollographql/fullstack-tutorial) 142 | 143 | ## Algorithms and Code Interviews 144 | 145 | ### Platforms to Practice 146 | - [Exercism (:uk:)](https://exercism.io/) 147 | - [LeetCode (:uk:)](https://leetcode.com/) 148 | - [HackerRank (:uk:)](https://www.hackerrank.com/) 149 | 150 | ## Others 151 | 152 | ### Tools and Docs 153 | - [Semver (:uk:)](https://semver.org/) 154 | - [Semantic Release (:uk:)](https://semantic-release.gitbook.io/semantic-release/) 155 | 156 | 157 | ### Bootcamps in Colombia 158 | - [Make it real (:free: until you get a job - Mix)](https://makeitreal.camp/top) 159 | - [Laboratoria (:free: until you get a job - :rainbow: :woman:)](https://www.laboratoria.la/) 160 | 161 | ### Worldwide 162 | - [Soul Developer Bootcamp (:free:)](https://souldeveloper.github.io/) 163 | 164 | ### Scholarships 165 | - [Platzi (Mothers Head of Household)](https://platzi.com/blog/beca-madres/) 166 | - [Platzi (Venezuelans)](https://platzi.com/blog/cursos-platzi-venezuela-gratis/) 167 | 168 | ### Jobs 169 | 170 | #### Jobs - Remote 171 | - [terminal.io (:uk:)](https://terminal.io/) 172 | - [triplebyte (:uk:)](https://triplebyte.com/) 173 | 174 | ### Para los más pequeños de la casa 175 | - [Synthhesis (:uk:)](https://www.synthesis.is/) 176 | 177 | --------------------------------------------------------------------------------