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:

  1. Aprende HTML creando una aplicación de fotos de gatos
  2. Aprende CSS básico creando un menú de cafetería
  3. Aprende sobre los colores CSS creando un conjunto de marcadores
  4. Aprende formularios HTML creando un formulario de registro
  5. Proyecto de certificación: Crea un formulario de encuesta
  6. Aprende el modelo de caja CSS construyendo una pintura rothko
  7. Aprende CSS Flexbox creando una galería de fotos
  8. Aprende tipografía construyendo una etiqueta de nutrición
  9. Aprende accesibilidad creando un cuestionario
  10. Proyecto de certificación: Construye una página de tributo
  11. Aprende más sobre los pseudo selectores CSS creando un balance
  12. Aprende CSS Intermedio construyendo una pintura de Picasso
  13. Aprende diseño web responsivo construyendo un piano
  14. Proyecto de certificación: Crea una página de documentación técnica
  15. Aprende las Variables CSS Construyendo el horizonte de una ciudad
  16. Aprende CSS Grid construyendo una revista
  17. Proyecto de certificación: Crea una página de destino de producto
  18. Aprende transformaciones CSS construyendo un pingüino
  19. Aprende animaciones CSS Construyendo una rueda de la fortuna
  20. 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

Learn_Typography_by_Building_a_Nutrition_Label__Step_66___freeCodeCamp_org_--
Anota manualmente algunas de las características del nuevo editor de código. Aquí es donde construirás los proyectos de práctica línea por línea, haciendo que las pruebas pasen a lo largo del camino.

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.

Learn_CSS_Transforms_by_Building_a_Penguin__Step_1___freeCodeCamp_org
Una vista previa de uno de los proyectos que construirás: un pingüino CSS.

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.

Responsive_Web_Design__Beta__Certification___freeCodeCamp_org-1
Cada proyecto tiene una tabla de pasos. Los pasos completados se resaltan en azul. Puedes saltar a cualquier paso en cualquier momento, pero te recomendamos que lo hagas en orden.

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:

Learn_CSS_Transforms_by_Building_a_Penguin__Step_16___freeCodeCamp_org
Cada paso te llevará a la parte de tu código donde necesitas agregar una nueva línea de código o cambiar el código existente. Y tendrás muchas pruebas. Dependiendo de qué pruebas fallen, te dará una pista específica del contexto para ayudarte y seguir avanzando.

"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.

Responsive_Web_Design__Beta__Certification___freeCodeCamp_org_---2
Puedes ver cuántos pasos habrá en cada proyecto y cuántos de ellos has completado. Las certificaciones - "mini jefes" (minibosses)- son un solo paso. Estos son esencialmente un editor de código vacío con un conjunto de pruebas. Tienes que codificar todo el proyecto tú mismo para que pasen todas sus pruebas.

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**