Una guía práctica para aprender el desarrollo de interfaces para principiantes

Comencé mi viaje de codificación en la primavera de 2018, hace poco menos de un año. Obtuve algunas habilidades de programación desde entonces, pero aún así, entiendo que hay muchas más cosas que aprender en el futuro. De todos modos, decidí reunir estos consejos en un solo lugar para ayudar a los futuros desarrolladores en su camino. Este artículo es la guía que me hubiera gustado encontrar cuando comencé mi viaje.

Antes de empezar

Si decidió estudiar por su cuenta, hay mucha información en Internet y es difícil entenderlo todo. Es importante tener un plan estructurado y evitar perder tiempo saltando de un recurso a otro.

Tenga en cuenta que estos son solo los primeros pasos en el universo front-end. Le ayudará a empezar, pero no pretende ser una guía completa.

Como descargo de responsabilidad, tenga en cuenta que los siguientes recursos no son un anuncio. Los menciono porque me ayudaron en algún momento y los recomiendo personalmente. La mayoría de ellos son gratuitos, de lo contrario, se especificará.

Como punto de partida, recomiendo registrarse en freeCodeCamp.Y basaré el resto en su plan de estudios. Lo considero un gran recurso por varias razones:

  1. Plan de estudios. Este puede ser tu camino principal. Es una descripción general bien estructurada de las cosas que debe aprender y proporciona una buena curva de aprendizaje.
  2. Ejercicios. Son del tamaño de un bocado, por lo que puede mantener el ritmo fácilmente haciendo un par de ellos todos los días y manteniendo su mapa de calor verde.
  3. Proyectos. Después de completar cada capítulo, creará 5 proyectos para obtener su certificación. Es ideal para practicar y consolidar tus conocimientos.
  4. Comunidad. Es más que una plataforma de aprendizaje. Hay un foro, blog y canal de YouTube donde desarrolladores de diferentes niveles comparten sus conocimientos y donde puedes encontrar inspiración.
  5. Es gratis. El dinero puede ser fundamental para muchas personas y aquí, en cualquier caso, no gastará nada más que tiempo.
Consejo profesional: puede crear una cuenta en Twitter , si aún no tiene una, y comprometerse públicamente con la 100DaysOfCode desafío. La razón es simple: hay muchas personas que realizan este desafío. Obtendrá motivación y apoyo, y le ayudará a mantener el ritmo. Lo recomiendo mucho, no seas tímido y disfruta de la comunidad .

¡Ahora estamos listos para empezar! ?

Diseño web adaptable

La primera sección abarca los conceptos básicos de cómo crear sitios estáticos y aplicarles estilos.

Los basicos

HTML y HTML5 básicosyLas secciones básicas de CSS son los fundamentos de la Internet moderna. Principios de diseño visual aplicado, accesibilidad aplicada y diseño web receptivole enseñará los conceptos básicos para escribir buenos sitios web. No se apresure y ande con cuidado, esos son los principales bloques de construcción en su conocimiento.

Puedes complementar tus estudios con una gran guía sobre Interneting Is Hard.

A continuación, aprenderá técnicas de diseño poderosas como CSS Flexbox y CSS Grid . Antes de continuar, complete esta breve guía para obtener una descripción general de las diferentes técnicas de diseño que las personas usaban antes de la era Flexbox-Grid. Es poco probable que alguna vez necesite usarlos, pero siempre es bueno conocer y apreciar las tecnologías que tenemos hoy.

CSS Flexbox

Me enamoré de Flexbox por su sencillez y potencia. Muchas propiedades diferentes pueden confundirte al principio, así que mi sugerencia es que coloques una hoja de trucos cerca de tu computadora para que siempre puedas buscarlas fácilmente. Además, marque esta hoja de trucos interactiva de Flexbox.

Y finalmente, practica jugando al adictivo Flexbox Froggyjuego. ?

Cuadrícula CSS

Grid es más avanzado y flexible, pero en la mayoría de los casos, Flexbox es suficiente. De todos modos, tendrás otra poderosa herramienta en tu arsenal. Especialmente, si es tan fácil de entender cuando cultiva sus cultivos en Grid Garden.?

Práctica

Antes de pasar a los proyectos finales, te recomiendo que hagas esto:

  1. Crea una cuenta en Codepen . Es un patio de recreo genial para el front-end donde puede construir sus proyectos, probar sus fragmentos y practicar.
  2. Instale uneditor de códigoen su máquina y aprenda a trabajar con él.
  3. Aprenda los conceptos básicos de la línea de comandos en este videode Wes Bos o el Taller Shell en Udacity.
  4. Aprenda a usar Git en esta lista de reproducción de NetNinja.
  5. Obtenga práctica guiada. Elija cualquier proyecto de esta lista de reproducción de Traversy Media y codifique. Constrúyalos hasta que se sienta seguro. Sería genial si ya usa un editor de código y control de versiones, y carga su trabajo en un repositorio de estudio especial en Github.

¡Ahora está listo para obtener su primera certificación! ?

¿Ir a construir sus proyectos finales y compartirlos?

Algoritmos y estructuras de datos de Javascript

Ahora sabe cómo crear sitios web estáticos y es hora de aprender JavaScript.

La sección JavaScript de freeCodeCamp es excelente, pero le recomiendo encarecidamente que consulte javascript.infocomo referencia adicional. Este es el mejor recurso que proporciona información completa para todo lo relacionado con JavaScript.

Más recomendaciones

  1. Curso básico de JavaScript de Beau Carnes, si prefiere guías visuales.
  2. Con respecto al nuevo estándar para JavaScript, ¡mis favoritos son los excelentes cursos ES6 para todos! (pagado) por Wes Bos y Modern JavaScript por Beau Carnes.
  3. Curso de expresiones regulares en Scrimba.
  4. El curso de JavaScript orientado a objetos de NetNinja fue muy útil para mí.

Algoritmos

Esta es mi parte favorita de la certificación. Recuerdo lo desafiantes que eran cuando comencé a resolverlos. Podría pensar en posibles soluciones todo el día. Esta es una excelente manera de aprender JavaScript y pensar como programador.

Como pequeña ayuda, le aconsejo que vea JavaScript Cardio Sessions de Traversy Media.

Para más práctica, le recomiendo que se registre en CodeWars y establezca un objetivo inicial para lograr 6kyu . Es muy útil porque cuando completa cualquier desafío, puede buscar las soluciones de otras personas y descubrir nuevos trucos, enfoques e ideas.

Para encontrar otros retadores de 100DaysOfCode, incluido yo, ve a la Configuración de tu cuenta y escribe # 100DaysOfCode en el campo Clan.

Antes de pasar a los proyectos finales, debes estar preparado para el jefe final, la caja registradora. ?

Después de vencerlo, puedo decir que ...

… ¡Ahora sabe cómo trabajar con JavaScript! ?

Pegando cosas juntas

Ahora es el momento de aceptar el desafío Javascript30 de Wes Bos. Esta es la mejor manera de aprender cómo funcionan juntos HTML, CSS y JavaScript, perfeccionar su conocimiento de los fundamentos y comprender el DOM. ¡Construir estos pequeños proyectos fue una gran experiencia y muy divertida para mí!

Bibliotecas front-end

A partir de este punto, ¿se está convirtiendo en un verdadero desarrollador front-end?

Oreja

El framework CSS más popular. Cree un par de sitios web junto con guías en YouTube. Acostumbrarse al famoso diseño de cuadrícula de columnas de Bootstrap.

jQuery

A pesar de que algunas personas dicen que jQuery está muerto, siempre será útil cuando la solución en JavaScript puro sea peculiar y el uso de un marco JS sea demasiado. Esta será otra gran herramienta en tu arsenal. Cree un par de pequeñas aplicaciones con él para practicar.

Hablar con descaro a

No aprecié completamente los marcos CSS hasta que vi su verdadero poder. Quería aprender técnicas avanzadas de CSS y compré un CSS y un Sass avanzados increíblescurso (pagado) por Jonas Schmedtmann. Muy recomendable si desea pulir sus habilidades de CSS y comprender el flujo de trabajo. Todavía estoy feliz de haberlo encontrado.

Reaccionar y Redux

Esta es la parte principal de la sección Bibliotecas front-end. React es una gran opción como su primera biblioteca de JavaScript para aprender.

Francamente, es difícil entender cómo trabajar con él en el formato de freeCodeCamp ya que no se puede construir nada desde cero y algunas cosas funcionan bajo el capó. Así que tome un curso sobre React y Redux, y tómese su tiempo para comprender sus ideas y herramientas.

Mis favoritos personales:

  1. Tutorial completo de React (con Redux)por NetNinja
  2. React para principiantes (pagado) por Wes Bos
  3. React - La guía completa (pagada) por Academind

Espero que esté emocionado de utilizar sus nuevos conocimientos en los proyectos finales.

¿Ahora puedes construir lo que quieras ?

Avanzando más

Ahora es un verdadero desarrollador front-end y tiene las habilidades suficientes para crear excelentes aplicaciones web. Tal vez tenga curiosidad sobre qué hacer a continuación y la respuesta es tan simple como "¡Construya, construya, construya!" . Su tarea actual es crear un portafolio para usted y obtener más práctica.

A continuación, se ofrecen algunos consejos sobre qué hacer a continuación:

  1. Obtenga ideas para un proyecto en elProyectos para llevar a casasección en freeCodeCamp.
  2. Cree cualquier proyecto junto con un curso, luego modifíquelo y mejórelo agregando nuevas funciones.
  3. ¡Aborde D3.js y Node.js para obtener las próximas certificaciones de FreeCodeCamp!
  4. Lea Eloquent JavaScript yNo conoces JSpara convertirse en un ninja de JavaScript.
  5. Mejora tu rango en Codewars.
  6. Pruebe el diseño web avanzado de este diseño web para desarrolladores webcurso.
  7. Mantenga su cuenta de GitHub activa e intente contribuir al código abierto.

Si uno de estos recursos no funciona para usted, está bien. No se frustre, lo que funciona para alguien no necesariamente tiene que funcionar para todas las personas.

Espero que esta guía le ayude con su aprendizaje y, con suerte, le ahorre tiempo.

¡Buena suerte!