De cero a desarrollador web
Tags: html, css, javascript, webdev
Published: 2021-09-22 18:42:56

> De cero a desarrollador web en nueve simples pasos. 

Pero antes de comenzar, conozcamos su significado.  

##🤔¿Qué es el desarrollo web?
El desarrollo web es el trabajo que implica la creación de un sitio web o una aplicación web, puede ser bastante simple como una landing page, o una muy compleja como una red social como Facebook o Twitter. De cualquier manera, esta es una de las industrias más interesantes en este momento. 

✋Quiero hacer un descargo de responsabilidad. Hay varios caminos que puedes tomar mientras aprendes desarrollo web. Este es solo uno de tantos, el que yo tomaría si tuviera que empezar de nuevo. 

👌Estos pasos van desde cero, por lo que es adecuado para principiantes. 

###Resumen
1. Elige un editor
2. Aprende HTML
3. Aprende CSS
4. Aprende JavaScript
5. Construye proyectos
6. Aprende Git & GitHub
7. Elige un framework de JavaScript
8. Construye un portafolio
9. Postula

🚀**vamos allá**🚀 

##1. Elige un editor de código
![editores](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4xz637cqz65vsg206jm9.png)
Hay muchos editores de código disponibles como Visual Studio Code, Sublime Text, Atom, etc. Sugiero utilizar Visual Studio Code porque tiene múltiples extensiones y una gran comunidad. 
Puedes obtenerlo aquí. [Descarga VS Code](https://code.visualstudio.com/)

##2. Aprende HTML
![html](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r34dm1jlinobdbeawlof.jpg)
> *HTML (HyperText Markup Language) Lenguaje de Marcado de HiperTexto*.

**HTML** permite estructurar/marcar el contenido de una página web. Piensa algo así como el esqueleto humano. Hay muchos recursos disponibles para aprender. Recomiendo ampliamente FreeCodeCamp y W3Sshools para empezar.
- [Responsive Web Design](https://www.freecodecamp.org/learn/responsive-web-design/)
- [HTML Tutorial](https://www.w3schools.com/html/default.asp)

##3. Aprende CSS
![css](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2tb99kx1wdej3748kmjm.png)
> *CSS (Cascading Style Sheets) Hojas de Estilo en Cascada*. 

**CSS** permite mejorar la apariencia de una página web. Piensa algo así como la piel del cuerpo humano. Recomiendo nuevamente FreeCodeCamp y W3Schools para empezar.
- [Responsive Web Design](https://www.freecodecamp.org/learn/responsive-web-design/)
- [CSS Tutorial](https://www.w3schools.com/css/default.asp)

##4. Aprende JavaScript
![javascript](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5c82sprsfs9jzpqg1gl0.png)
>*JavaScript es el lenguaje de programación de la web y más popular del mundo*. 

**JavaScript** permite programar el comportamiento de las páginas web. Imagina a una persona caminando, brincando. Nuevamente recomiendo FreeCodeCamp y W3Schools para empezar.
- [JavaScript FreeCodeCamp](https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/)
- [JavaScript Tutorial](https://www.w3schools.com/js/js_intro.asp)

##5. Construye proyectos
![projects](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0ojhwazqyfju8gb8kbig.jpg) 
Mejora tus habilidades codificando proyectos reales. Si no tienes ideas, visita Frontend Mentor o Dev Challenges para comenzar, allí puedes elegir un desafío, descargar los archivos de diseño y empezar a codificar. Es perfecto para principiantes en desarrollo web.
- [Frontend Mentor](https://www.frontendmentor.io/challenges)
- [DEV Challenges](https://devchallenges.io/)
- [Codewell](https://www.codewell.cc/challenges)

> Recomiendo documentar el proyecto. Frontend Mentor tiene un plantilla muy completa.
> **Hasta este punto, ya puedes postular a empleos.**

##6. Aprende Git y GitHub
![git-github](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rwv25al6ch2v70flccme.png) 
> *Git es un software de control de versiones diseñado por Linus Torvalds, funciona en el computador local, y esta es la principal diferencia con GitHub*. 

> *GitHub es un repositorio en la nube para alojar proyectos utilizando el sistema de control de versiones Git*.  

**Git** y **GitHub** están relacionados. Git trabaja de forma local y GitHub trabaja en la nube donde se suben los repositorios de proyectos.
Estos recursos son ideales para comenzar.
- [A Guide to Git and Github](https://launchschool.com/books/git)
- [Fundamentos de Git](https://git-scm.com/book/es/v2/Fundamentos-de-Git-Obteniendo-un-repositorio-Git)
- [GitHub Tutorial](https://git-scm.com/book/es/v2/GitHub-Creaci%C3%B3n-y-configuraci%C3%B3n-de-la-cuenta)
- [Git Tutorial](https://www.w3schools.com/git/default.asp)

##7. Elige un framework de JavaScript
![framework](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6bt3wo3rbba9hhdvc0x3.png)
> *Framework es un marco de trabajo que abarca un proyecto completo bajo ciertas reglas*.  
> *Librería es un conjunto de funcionalidades que resuelven  necesidades específicas de un proyecto*. 

**React** es la librería más popular de JavaScript en el momento.
**Vue** es el framework más popular de JavaScript. 

Recomiendo empezar con cualquiera de estos (React, Vue) y después puedes aprender otro. Mira estos tutoriales de Traversy Media y The Net Ninja para comenzar.  
- [React Tutorial](https://www.youtube.com/watch?v=w7ejDZ8SWv8)
- [Vue Tutorial](https://www.youtube.com/watch?v=YrxBCBibVo0&list=PL4cUxeGkcC9hYYGbV60Vq3IXYNfDk8At1)

##8. Construye un portafolio
![dark-mode](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/63x40ahkg5wvu9ewa7ls.png) 
Un portafolio es la vitrina de tus mejores proyectos que has desarrollado a lo largo de tu aprendizaje. Si eres de las personas que busca crear un portafolio único, te sugiero algunas ideas de portafolio que puedes utilizar.
- [Nico Portfolio](https://inovatik.com/nico-portfolio-website-bootstrap-html-template.html)
- [Mark Portfolio](https://inovatik.com/mark-portfolio-website-bootstrap-html-template.html)
- [Starter Portfolio](https://portfolio-starter-template.webflow.io/)
- [Freelance Portfolio](https://craig-roush-portfolio-template.webflow.io/)
- [Strata Portfolio](https://html5up.net/strata)
- [Prologue Portfolio](https://html5up.net/prologue)

##9. Postula
![remote](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e589vqhjpjccsiv27r6v.jpg) 
Hay muchos sitios disponibles para encontrar trabajo remoto. Recomiendo los siguientes sitios.
- [RemoteTechJobs](https://www.remotetechjobs.com/)
- [Remotefront](https://remotefront.io/)
- [Glassdoor](https://www.glassdoor.com/index.htm)
- [Get on Board](https://www.getonbrd.com/)
- [Product Hunt Jobs](https://www.producthunt.com/jobs)
- [Remoteok](https://remoteok.io/)
- [Angelist](https://angel.co/jobs)
- [Smart Talent](https://smartalentit.com/)
- [Kabily Jobs](https://www.kabily.com/es/jobs)
- [Pragma](https://www.pragma.com.co/ofertas-de-empleo)  

##Conclusión
Hay muchos caminos que puedes tomar para convertirte en desarrollador web, puedes comprar un curso o puedes crear tu propia ruta de aprendizaje; de cualquier modo, si tienes claro lo que quieres lograr y la disciplina de aprender, sin duda conseguirás ser un desarrollador web competitivo.

**Gracias por leer este artículo.**
Siempre estoy dispuesto a ayudar, puedes seguirme en Twitter (xantosromero) para saludarme.

####¿Estudias online?
Descarga la [plantilla de estudio frontend](https://xantosromero.gumroad.com/l/plantilla-estudio-frontend) gratis.