Artículo original escrito por: Quincy Larson
Artículo original: Learn Responsive Web Design by Building 20 Projects – a Major freeCodeCamp Curriculum Update
Traducido y adaptado por: Rafael D. Hernandez
Acabamos de publicar una revisión significativa de nuestra Certificación de Diseño Web Responsivo (la primera de las 10 certificaciones de freeCodeCamp actualmente en vivo). También actualizamos nuestro editor de código.
En lugar de lecciones de codificación, aprenderás conceptos y sintaxis a través de una serie de 15 proyectos de práctica + 5 proyectos de certificación.
Aquí está la certificación completa, que estimamos que la mayoría de los principiantes en desarrollo web tardarán alrededor de 300 horas en completarse:
- Aprende HTML creando una aplicación de fotos de gatos
- Aprende CSS básico creando un menú de cafetería
- Aprende sobre los colores CSS creando un conjunto de marcadores
- Aprende formularios HTML creando un formulario de registro
- Proyecto de certificación: Crea un formulario de encuesta
- Aprende el modelo de caja CSS construyendo una pintura rothko
- Aprende CSS Flexbox creando una galería de fotos
- Aprende tipografía construyendo una etiqueta de nutrición
- Aprende accesibilidad creando un cuestionario
- Proyecto de certificación: Construye una página de tributo
- Aprende más sobre los pseudo selectores CSS creando un balance
- Aprende CSS Intermedio construyendo una pintura de Picasso
- Aprende diseño web responsivo construyendo un piano
- Proyecto de certificación: Crea una página de documentación técnica
- Aprende las Variables CSS Construyendo el horizonte de una ciudad
- Aprende CSS Grid construyendo una revista
- Proyecto de certificación: Crea una página de destino de producto
- Aprende transformaciones CSS construyendo un pingüino
- Aprende animaciones CSS Construyendo una rueda de la fortuna
- Proyecto de certificación: Crea una página web de portafolio personal
Ten en cuenta que para obtener la Certificación de Diseño Web Responsivo, solo necesitas crear los 5 proyectos de certificación en negrita y que pasen sus conjuntos de pruebas. El resto de este curso es opcional.
Hemos esparcido estos proyectos de certificación por todas partes. Son de composición abierta. Comienza con un editor de código en blanco y construye el proyecto línea por línea para que en última instancia, aprobar todo el conjunto de pruebas. Ten en cuenta que actualmente todavía usamos CodePen para estos proyectos, pero a principios de enero de 2022 los trasladaremos a nuestro propio editor de código.
También ten en cuenta que los 5 proyectos de certificación son los mismos que en la versión anterior de esta certificación. Todo es totalmente compatible con versiones anteriores, y no necesitas volver a hacer ninguno de estos proyectos si ya los has hecho.
También ten en cuenta que cualquier certificación anterior que hayas obtenido seguirá siendo válida en el futuro. No necesitas preocuparte por enlaces rotos en tu currículum o perfil de LinkedIn.
Cómo funcionan los nuevos proyectos de práctica: Nuestro nuevo editor de código
Inicialmente, tuve la idea de este diseño en 2017. Ese es el tiempo que hemos estado construyendo e iterando sobre esto. Pero estoy emocionado cómo salió esto.
Cada paso de un proyecto de práctica tiene sus propias pruebas. Y también tenemos pistas específicas del contexto. Estos te ayudarán a orientarte sutilmente en la dirección correcta sin revelar por completo la respuesta.
Una vez que consigas que los pasos pasen las pruebas, sin problemas seguirás al siguiente paso y te desplazaremos a la parte de tu base de código donde necesitas agregar tu siguiente línea de código.
Nuestro objetivo es que puedas entrar en un estado dinámico y permanecer allí. Queremos que recorras docenas de estos pasos, o proyectos completos, en una sola sesión de codificación.
Hemos construido un editor de varios archivos, y tú serás capaz de codificar proyectos de front-end bastante complicados dentro de él.
Pronto lanzaremos nuestra caja de arena completa (sandbox), y podrás usarla para construir tus diversos proyectos de certificación. Ya no es necesario utilizar CodePen o JSBin, todo se ejecutará en el mismo freeCodeCamp.org.
Hemos incorporado toneladas de comentarios y lecciones de experiencia de usuario que hemos aprendido a lo largo de los años.
Además del nuevo editor de código, las principales mejoras que hemos añadido son:
Más práctica
El plan de estudios ahora tiene muchos más proyectos, que te guiarán a través de la escritura de miles de líneas de código.
Esto te mantendrá en un bucle de retroalimentación compacto, con pruebas fallidas, mensajes de error y sugerencias, durante todo el proceso.
Al principio de cada proyecto, también te damos una vista previa de lo que construirás.
Más repetición para ayudar con la retención
Nuestro objetivo original era dar a la gente una exposición amplia y rápida a conceptos de programación clave. Pero muchos de los comentarios que recibimos fueron que nos movíamos demasiado rápido.
La mayoría de las personas parecen preferir tomar las cosas más despacio y practicar mucho más con cada una de estas tecnologías.
Este nuevo plan de estudios actualizado te dará mucha más práctica para ayudarte a retener mejor los conceptos clave y la sintaxis de programación.
Menos Lectura. Más Codificación.
Tomó una cantidad increíble de trabajo, pero pudimos reestructurar el plan de estudios para enseñarte "justo a tiempo" con solo unas pocas frases de explicación a la vez. Aquí está el "bucle central de juego" general del plan de estudios:
Lee algunas frases -> averigua cómo debe ser tu siguiente línea de código y escríbela -> Ejecuta las pruebas y haz que pasen -> repite este proceso miles de veces
Así es como se ve un paso típico:
"Mini jefes" (minibosses) esparcidos por todos los niveles
Hay otra mejora importante que hicimos. Antes, harías los 5 grandes proyectos de certificación al final, después de haber completado todas las lecciones.
Ahora abordarás estos proyectos de certificación periódicamente a medida que aprendas nuevas tecnologías. Así que después de 3 o 4 proyectos de práctica, que tienen más pruebas guiadas, te enfrentarás a un editor de código en blanco y 10 o más pruebas de "historia de usuario". Tendrás que averiguar cómo conseguir que cada una de esas pruebas pase usando las habilidades que acabas de aprender.
Somos optimistas de que esto suavizará la dificultad asociada con la obtención de estas certificaciones. Y ayudará a reforzar aún más tus habilidades y tu retención, al acortar el tiempo entre el momento en que las aprendas y el momento en que tienes que recordarlas y aplicarlas.
Puedes probar la nueva Certificación de Diseño Web Responsivo ahora
Todavía está en beta. Si te quedas atascado, te animo a pedir ayuda en el foro de freeCodeCamp. Quién sabe, podrías descubrir un error que necesitemos corregir. Esto estará en desarrollo activo.
Terminaremos de construir la certificación actualizada de Algoritmos de JavaScript y Estructuras de Datos en 2022. Y publicaremos la certificación actualizada de las Librerías de Desarrollo de interfaz después de eso.
Si está listo o lista, puedes ir directamente en la nueva Certificación de Diseño Web Responsivo.
**Actualmente, solo está disponible en inglés, pero se está preparando para empezar su traducción al español y a otros idiomas**