100 days of code frontend
1.0.0
Nota: ¡Este recurso es viejo! Estaré archivando este repositorio a fines de julio de 2021, ya que siento que muchas de las recomendaciones aquí están desactualizadas para aprender el desarrollo web front-end en 2021.
¡Apoye este repositorio dándole una estrella osa en la parte superior de la página y sígueme para obtener más recursos!
¿Quieres aprender más sobre el desarrollo de frontend? Considerar:
Este es un plan de estudios algo obstinado para aprender el desarrollo front-end durante #100daysofcode. Como cubre una amplia gama de temas de desarrollo front-end, se puede considerar como un curso de estilo de "encuesta" en lugar de una inmersión profunda en cualquier área. Idealmente, su conclusión de completar este plan de estudios será una cierta familiaridad con cada tema y la capacidad de sumergirse fácilmente en cualquier área en el futuro cuando sea necesario.
Este plan de estudios fue influenciado significativamente por la moderna hoja de ruta del desarrollador frontend de Kamran Ahmed. Por favor, échale un vistazo, es excelente.
Nota : ¡Sé que el desarrollo front-end significa muchas cosas diferentes para muchas personas! Si es un desarrollador front-end y cree que esta guía podría mejorarse, avíseme planteando un problema como se describe en la sección contribuyente. ¡Gracias!
¡Gracias a algunos contribuyentes increíbles, este plan de estudios ha sido traducido a los siguientes idiomas!
El principio subyacente de este repositorio es el horario de tiempo. Si ha pasado alguna cantidad de tiempo en el pasado tratando de aprender el desarrollo web o una habilidad similar, es probable que haya experimentado bajar por una madriguera de conejos sobre cualquier tema en particular. Este repositorio tiene como objetivo asignar una cierta cantidad de días a cada tecnología y lo alienta a pasar al siguiente una vez que aumente ese número de días.
Se anticipa que todos están en un nivel diferente de competencia al comenzar este desafío, y está bien. Los desarrolladores front-end principiantes y expertos pueden beneficiarse de la práctica en el horario de tiempo en cada una de estas áreas.
Las actividades día a día recomendadas son las siguientes:
A continuación puede encontrar un poco de información sobre cada tema en el plan de estudios, así como algunas ideas/orientación sobre qué hacer para cada uno. Para inspirarse en proyectos para hacer junto con este plan de estudios, consulte la sección Ideas del proyecto.
Como parte del principio de Timeboxing, está bien si no pasa todos los artículos en las secciones de "áreas e ideas de aprendizaje". En su lugar, debe concentrarse en obtener lo máximo que puede obtener el número de días asignados a cada área y luego seguir adelante.
El lenguaje de marcado de hipertexto (HTML) es el lenguaje de marcado estándar para crear páginas web y aplicaciones web. Con hojas de estilo en cascada (CSS) y JavaScript, forma una tríada de tecnologías Cornerstone para la World Wide Web. Los navegadores web reciben documentos HTML de un servidor web o desde el almacenamiento local y representan los documentos en páginas web multimedia. HTML describe la estructura de una página web semánticamente y originalmente incluyó señales para la aparición del documento. (Fuente: Wikipedia)
HTML es realmente la base del desarrollo web. Incluso en los marcos basados en JavaScript, termina escribiendo HTML de una forma u otra.
Las hojas de estilo en cascada (CSS) es un lenguaje de hoja de estilo utilizado para describir la presentación de un documento escrito en un lenguaje de marcado como HTML. CSS es una tecnología fundamental de la World Wide Web, junto con HTML y JavaScript. CSS está diseñado para habilitar la separación de la presentación y el contenido, incluido el diseño, los colores y las fuentes. Esta separación puede mejorar la accesibilidad del contenido, proporcionar más flexibilidad y control en la especificación de las características de presentación, permitir múltiples páginas web para compartir el formato especificando el CSS relevante en un archivo .css separado y reduce la complejidad y la repetición en el contenido estructural. (Fuente: Wikipedia)
CSS es otro componente esencial del desarrollo web. Si bien se usa principalmente para diseñar y colocar elementos HTML, se ha vuelto cada vez más capaz de tareas más dinámicas (por ejemplo, animaciones) que alguna vez serían manejadas por JavaScript.
<style> etiquetas<link>JavaScript, a menudo abreviado como JS, es un lenguaje de programación interpretado de alto nivel que se ajusta a la especificación de ECMAScript. Es un lenguaje que también se caracteriza como dinámico, débilmente tipado, basado en prototipos y multi-paradigma. Junto con HTML y CSS, JavaScript es una de las tres tecnologías centrales de la World Wide Web. JavaScript permite páginas web interactivas y, por lo tanto, es una parte esencial de las aplicaciones web. La gran mayoría de los sitios web lo usan, y todos los principales navegadores web tienen un motor JavaScript dedicado para ejecutarlo. (Fuente: Wikipedia)
JavaScript se ha vuelto cada vez más importante en el mundo frontal. Si bien una vez se usó principalmente para hacer que las páginas sean dinámicas, ahora es la base de muchos marcos frontales. Estos marcos manejan muchas de las tareas que anteriormente fueron manejadas anteriormente por el back-end (por ejemplo, enrutar y mostrar diferentes vistas).
<script> etiqueta y colocaciónJQuery es una biblioteca JavaScript rápida, pequeña y rica en funciones. Hace que cosas como HTML documenten y manipulación de documentos, manejo de eventos, animación y Ajax mucho más simple con una API fácil de usar que funciona en una multitud de navegadores. Con una combinación de versatilidad y extensibilidad, JQuery ha cambiado la forma en que millones de personas escriben JavaScript. (Fuente: jQuery.com)
Después de haber pasado algún tiempo con JavaScript simple (también llamado "vainilla"), puede encontrar algunas tareas un poco engorrosas, especialmente aquellas relacionadas con el acceso y manipulación de elementos HTML. Durante bastante tiempo, JQuery fue la biblioteca de referencia para hacer que este tipo de tareas sea más fácil y consistente en diferentes navegadores. Hoy en día, jQuery no es necesariamente un aprendizaje "obligatorio" debido a los avances en JavaScript de vainilla, CSS y nuevos marcos de JavaScript (veremos marcos más adelante). Aún así, sería beneficioso tomar un poco de tiempo aprender algunas jQuery y aplicarla a un pequeño proyecto.
El diseño web receptivo (RWD) es un enfoque para el diseño web que hace que las páginas web funcionen bien en una variedad de dispositivos y tamaños de ventana o pantalla. El trabajo reciente también considera la proximidad del espectador como parte del contexto de visualización como una extensión para RWD. El contenido, el diseño y el rendimiento son necesarios en todos los dispositivos para garantizar la usabilidad y la satisfacción. Un sitio diseñado con RWD adapta el diseño al entorno de visualización mediante el uso de fluidos, cuadrículas basadas en proporción, imágenes flexibles y consultas de medios CSS3, una extensión de la regla @Media. (Fuente: Wikipedia)
El diseño web receptivo se trata de hacer que las aplicaciones web se vean y funcionan correctamente en todo tipo de dispositivos. Un ejemplo rápido y sucio sería que un sitio web debe verse y funcionar correctamente tanto en un navegador web de escritorio como en un navegador de teléfonos móviles. ¡Una comprensión del diseño receptivo es crucial para cualquier desarrollador frontal!
La accesibilidad web es la práctica inclusiva de garantizar que no haya barreras que impidan la interacción o el acceso a los sitios web en la red mundial de personas con discapacidades. Cuando los sitios se diseñan, desarrollan y editan correctamente, generalmente todos los usuarios tienen el mismo acceso a la información y la funcionalidad. (Fuente: Wikipedia)
La accesibilidad, a menudo escrita como A11Y, es uno de los temas más importantes en el desarrollo web front-end, sin embargo, parece que a menudo se pone de color corto. Crear aplicaciones web accesibles no solo es éticamente sólida, sino que también tiene mucho sentido comercial teniendo en cuenta la audiencia adicional que podrá ver sus aplicaciones cuando sean accesibles.
Git es un sistema de control de versiones distribuido de código abierto y gratuito diseñado para manejar todo, desde proyectos pequeños hasta muy grandes con velocidad y eficiencia. (Fuente: git-scm.com)
El control de la versión/código es una parte esencial del conjunto de herramientas de cualquier desarrollador web. Hay varios sistemas de control de versiones diferentes, pero Git es, con mucho, el más frecuente en este momento. ¡Puede (y debe hacerlo!) Usarlo para rastrear sus proyectos a medida que aprende!
Node.js es un entorno de tiempo de ejecución de JavaScript de código abierto y de código abierto que ejecuta el código JavaScript fuera de un navegador. JavaScript se usa principalmente para secuencias de comandos del lado del cliente, en el que los scripts escritos en JavaScript están integrados en el HTML de una página web y ejecutan el lado del cliente por un motor JavaScript en el navegador web del usuario. Node.js permite a los desarrolladores usar JavaScript para escribir herramientas de línea de comandos y para secuencias de comandos del lado del servidor, para obtener scripts del lado del servidor para producir contenido dinámico de la página web antes de que la página se envíe al navegador web del usuario. En consecuencia, Node.js representa un paradigma de "JavaScript en todas partes", unificando el desarrollo de aplicaciones web en un solo lenguaje de programación, en lugar de diferentes idiomas para scripts del lado del servidor y del lado del cliente. (Fuente: Wikipedia)
Si bien Node.js se conoce típicamente como una solución de fondo, se usa con bastante frecuencia para apoyar el desarrollo frontal. Hace esto de varias maneras, incluidas cosas como ejecutar herramientas de compilación, pruebas y pelusas (¡todo para cubrir pronto!). Node Package Manager (NPM) es otra gran característica del nodo y se puede usar para administrar las dependencias de su proyecto (es decir, bibliotecas de código en las que su proyecto puede confiar: ¡jQuery es un ejemplo!).
Sass es una extensión de CSS que agrega potencia y elegancia al lenguaje básico. Le permite usar variables, reglas anidadas, mezclas, importaciones en línea y más, todo con una sintaxis totalmente compatible con CSS. Sass ayuda a mantener grandes hojas de estilo bien organizadas y a obtener pequeñas hojas de estilo en funcionamiento rápidamente, particularmente con la ayuda de la biblioteca de estilo Compass. (Fuente: Sass-Lang.com)
Sass le permite escribir CSS de una manera más programática. Si ha realizado algunos CSS, es posible que haya notado que termina repitiendo mucha información, por ejemplo, especificando el mismo código de color. En Sass, puede usar cosas como variables, bucles y anidación para reducir la redundancia y aumentar la legibilidad. Después de escribir su código en SASS, puede compilarlo rápida y fácilmente a CSS regular.
* Algunas alternativas: Foundation, Bulma, materializar
Bootstrap es un marco front-end gratuito y de código abierto para desarrollar sitios web y aplicaciones web. Contiene plantillas de diseño basadas en HTML y CSS para tipografía, formularios, botones, navegación y otros componentes de interfaz, así como extensiones opcionales de JavaScript. (Fuente: Wikipedia)
Hay muchas opciones para diseñar, diseñar y hacer que su aplicación web sea dinámica, pero encontrará que comenzar con un marco le ayuda enormemente a obtener una ventaja. Bootstrap es uno de esos marcos, ¡pero definitivamente está lejos de ser la única opción! Recomiendo familiarizarse con un marco como este, pero es mucho más importante comprender los fundamentos HTML, CSS y JavaScript que quedarse atrapado en cualquier marco.
La metodología de bloque, elemento y modificador (comúnmente conocido como BEM) es una convención de nomenclatura popular para clases en HTML y CSS. Desarrollado por el equipo de Yandex, su objetivo es ayudar a los desarrolladores a comprender mejor la relación entre HTML y CSS en un proyecto determinado. (Fuente: CSS-tricks.com)
Es importante saber que existen sistemas de nombres y organizaciones como BEM y por qué se usan. Investigue un poco aquí, pero a nivel para principiantes no recomendaría dedicar demasiado tiempo al tema.
Gulp es un kit de herramientas para automatizar tareas dolorosas o que requieren mucho tiempo en su flujo de trabajo de desarrollo, para que pueda dejar de jugar y construir algo. (Fuente: gulpjs.com)
En el desarrollo moderno de front-end, a menudo se encontrará para automatizar tareas como agrupar, mover archivos e inyectar referencias en archivos HTML. ¡Gulp es una herramienta que puede ayudarlo a hacer estas cosas!
buildEn esencia, Webpack es un Bundler de módulo estático para aplicaciones modernas de JavaScript. Cuando Webpack procesa su aplicación, construye internamente un gráfico de dependencia que mapea cada módulo que su proyecto necesita y genera uno o más paquetes. (Fuente: webpack.js.org)
Imagine que tiene un gran proyecto de desarrollo web con varios desarrolladores diferentes que trabajan en muchas tareas diferentes. En lugar de trabajar en los mismos archivos, es posible que desee modularizarlos tanto como sea posible. Webpack ayuda a habilitar esto al permitir que su equipo funcione de manera modular y luego, llegue el momento de construir la aplicación, Webpack lo unirá todo juntos: HTML, CSS/SASS, Javasscript, imágenes, etc. Webpack no es el único agrupador de módulos, pero parece ser el corredor delantero en este momento.
Eslint es una utilidad de pelusa de JavaScript de código abierto creada originalmente por Nicholas C. Zakas en junio de 2013. La pelusa de código es un tipo de análisis estático que se usa con frecuencia para encontrar patrones o código problemáticos que no se adhieren a ciertas pautas de estilo. Hay uniones de código para la mayoría de los lenguajes de programación, y los compiladores a veces incorporan la pelusa en el proceso de compilación. (Fuente: Eslint.org)
La pelusa es una herramienta fantástica para la calidad del código, la legibilidad y la consistencia. El uso de un linter lo ayudará a captar la sintaxis y formatear errores antes de que se produzcan. Puede ejecutar las líneas manualmente o incluirlas en su proceso de compilación/implementación.
* Algunas alternativas: Vue, Angular, Ember
React (también conocido como React.js o ReactJS) es una biblioteca JavaScript para construir interfaces de usuario. Facebook y una comunidad de desarrolladores y empresas individuales lo mantienen. React se puede utilizar como base en el desarrollo de aplicaciones de una sola página o móviles. Las aplicaciones React complejas generalmente requieren el uso de bibliotecas adicionales para la gestión del estado, el enrutamiento y la interacción con una API. (Fuente: Wikipedia)
Los marcos de JavaScript front-end están a la vanguardia del desarrollo moderno de front-end. Una conclusión importante aquí es que React, a pesar de ser increíblemente popular, es solo una biblioteca para construir interfaces de usuarios, mientras que marcos como Vue y Angular apuntan a ser más completos. Por ejemplo, si crea una aplicación con React que necesita enrutar a diferentes vistas, deberá traer algo como react-router .
create-react-app es una herramienta conveniente para andamios de nuevos proyectos React.Redux es un contenedor de estado predecible para aplicaciones JavaScript. Le ayuda a escribir aplicaciones que se comportan de manera consistente, se ejecutan en diferentes entornos (cliente, servidor y nativo) y son fáciles de probar. Además de eso, proporciona una gran experiencia de desarrollador, como la edición de código en vivo combinado con un depurador de viaje en el momento. (Fuente: Redux.js.org)
A medida que crea aplicaciones frontales cada vez más grandes, comienza a darse cuenta de que es difícil mantener el estado de la aplicación: cosas como si el usuario se inicia, quién es el usuario y, en general, qué está sucediendo en la aplicación. Redux es una gran biblioteca que le ayuda a mantener una sola fuente de estado en la que su aplicación puede basar su lógica.
Jest es un delicioso marco de prueba de JavaScript con un enfoque en la simplicidad. ¡Funciona con proyectos utilizando: Babel, TypeScript, Node, React, Angular, Vue y más! (Fuente: jestjs.io)
Es muy importante configurar pruebas automatizadas para sus proyectos front-end. La configuración de pruebas automatizadas le permitirá hacer cambios futuros con confianza: si realiza cambios y sus pruebas aún pasan, estará bastante cómodo de no romper ninguna funcionalidad existente. Hay demasiados marcos de prueba para enumerar; Jest es simplemente uno de mis favoritos.
create-react-app , Jest ya está configurado.* Alternativa: flujo
TypeScript es un lenguaje de programación de código abierto desarrollado y mantenido por Microsoft. Es un superconjunto sintáctico estricto de JavaScript, y agrega una tipificación estática opcional al lenguaje. TypeScript está diseñado para el desarrollo de grandes aplicaciones y transcompiles a JavaScript. Como TypeScript es un superconjunto de JavaScript, los programas de JavaScript existentes también son programas TypeScript válidos. TypeScript se puede utilizar para desarrollar aplicaciones JavaScript para la ejecución del lado del cliente y del lado del servidor (Node.js). (Fuente: Wikipedia)
JavaScript se escribe dinámicamente. Sin embargo, es una creencia común que la tipificación estática (es decir, la especificación de tipos de variables, clases, interfaces con anticipación) es más clara y reduce la probabilidad de defectos/errores. Independientemente de cómo se sienta en el tema, es importante al menos tener una idea de una versión de tipo estática de JavaScript como TypeScript. Tenga en cuenta que TypeScript se compila hasta JavaScript para que pueda ser interpretado por los navegadores (es decir, los navegadores no interpretan de forma nativa typeScript).
Next.js es un marco minimalista para aplicaciones React renderizadas por el servidor. (Fuente: Next.js - React Side Rendering Hecho correctamente)
¡Ahora nos estamos avanzando! A estas alturas, ha creado una aplicación React (o Vue o Angular) que trabaja bastante en el navegador. Por varias razones (por ejemplo, SEO, preocupaciones sobre el rendimiento del cliente), es posible que desee que su aplicación front-end se represente en el servidor en lugar del cliente. Ahí es donde entra un marco como Next.js.
Se supone que esta lista le brinda una amplia exposición al ecosistema frontal, ¡pero es simplemente imposible presionar en cada tema, sin mencionar las innumerables herramientas dentro de cada área! Si cree que me perdí algo muy importante, consulte la sección contribuyente para ver cómo puede ayudar a mejorar esta guía.
A medida que avanza a través de #100daysofcode, querrá uno o múltiples proyectos a los que puede aplicar su nuevo conocimiento. En esta sección, intento proporcionar algunas ideas de proyectos que pueda usar. Alternativamente, se le recomienda presentar sus propias ideas de proyecto, ya que esas ideas pueden interesarlo y motivarlo más.
En general, he encontrado que los siguientes recursos son invaluables para el desarrollo de software de aprendizaje:
Si desea mi opinión sobre algo, no dude en conectarse conmigo en Twitter y haré todo lo posible para tratar de ofrecer ayuda. Si cree que hay un problema con el plan de estudios o tiene una recomendación, consulte la sección contribuyente a continuación.
Si aprecia el trabajo realizado aquí, puede contribuir significativamente extendiendo la palabra sobre este repositorio, incluidas cosas como:
¡Este es un trabajo en progreso y aprecio mucho cualquier ayuda para mantener esta base de conocimiento!
Al contribuir a este repositorio, primero discuta el cambio que desea hacer a través del tema antes de hacer un cambio. De lo contrario, será muy difícil entender su propuesta y podría dar lugar a que trabaje mucho en un cambio que no se fusionará.
Tenga en cuenta que todos los involucrados en este proyecto están tratando de aprender o tratando de ayudar, ¡por favor sea bueno!
