En el mundo moderno, cada vez más personas quieren aprender a programar, aunque no saben por dónde empezar, pero al mismo tiempo, la industria de TI es lo que sueñan porque ser un programador web ahora está de moda. Para muchas personas, representa el primer paso hacia este maravilloso mundo, como los desarrolladores web o los desarrolladores front-end junior, el desarrollo front-end básico. Sin embargo, debe comenzar en algún lugar antes de poder encontrar el trabajo de sus sueños. Aquí hay un libro de conocimiento para principiantes para que pueda obtener algunas respuestas: ¿Existe un curso gratuito para desarrolladores front-end? Cómo aprender por su cuenta en línea, dónde encontrar materiales de aprendizaje para dominar HTML, CSS y JavaScript. Si sabes HTML y CSS, ya puedes postularte para el puesto de maquetador web.
¿Cuáles son los fundamentos del desarrollo front-end?
Ingresar al mundo de la programación web puede ser difícil para las personas nuevas. Tantos conceptos suenan extraños y se vuelven problemáticos en la etapa de escritura. ¿Cómo escribir: desarrollador de software o desarrollador front-end? ¿Quizás un desarrollador front-end, o más bien un ingeniero de software front-end? Sin embargo, la más común es la entrada con guión. Desarrollador front-end: la persona responsable de la parte visual de la aplicación (lo que vemos, nosotros = usuarios del sitio).
Por lo general, el desarrollador front-end trabaja con un diseñador gráfico (diseñador web) que proporciona el diseño gráfico. A menudo, los desarrolladores front-end tienen la oportunidad de trabajar con un diseñador de UX que propone y crea un prototipo de interacciones que tendrán lugar en los sitios web. El papel de los desarrolladores front-end es ponerlo todo junto. Se dice popularmente que un desarrollador front-end tiene la tarea de cortar un diseño gráfico, dividir el diseño en partes más pequeñas y codificar (HTML y CSS) en sitios web que los usuarios finalmente usan.
Luego, usando JavaScript, se agregaron las interacciones mencionadas anteriormente. Mientras que HTML y CSS3 nos permiten crear transiciones fluidas y animaciones básicas, JavaScript presenta todas las interacciones avanzadas entre la página y el usuario. Usando JavaScript, agregaremos un menú desplegable, un control deslizante en la página, validación de formularios, transiciones entre subpáginas o animaciones avanzadas y juegos 3D (por ejemplo, usando Babylon-JavaScript). Datos para la lógica en JavaScript desde el back-end de la aplicación, por lo tanto, la cooperación de front-end: desarrollador de back-end.
Los puestos de desarrollador front-end variarán mucho. El trabajo de un desarrollador front-end en una agencia interactiva y creativa, un desarrollador front-end en una empresa de desarrollo de software, se verá diferente, y un trabajo diferente para una persona que trabaja en el desarrollo front-end de una empresa nueva. .
Un desarrollador front-end de cortar proyectos gráficos puede convertirse en un desarrollador de JavaScript, un programador web que se ocupa principalmente de escribir la lógica de la aplicación y las operaciones avanzadas de JavaScript. Además, un desarrollador front-end a menudo (así como un desarrollador back-end) tiene que planificar la arquitectura JavaScript de la aplicación y seleccionar conscientemente marcos y bibliotecas para el proyecto.
¿Es fácil el desarrollo front-end?
- Puedes ver el efecto rápidamente; a diferencia de aprender desarrollo web/desarrollo back-end, la creación de piezas de código, incluso en HTML puro, nos brinda inmediatamente efectos visuales, lo que nos motiva a seguir trabajando.
- Umbral de entrada bajo: se requieren relativamente pocas habilidades de front-end para comenzar una carrera profesional en una pasantía o en un puesto junior desde el principio.
- Muchas ofertas de trabajo para jóvenes, especialmente cuando se acercan las vacaciones y hay muchas pasantías de verano.
- Independencia: podemos encargarnos de crear sitios web para nosotros mismos y luego recibir pedidos como autónomos. Después de todo, en el ámbito básico, deberíamos poder configurar sitios web simples de la A a la Z.
¿Qué necesitamos para el desarrollo front-end?
Aquí está la receta para el éxito. Para crear un sitio web, necesita:
HTML + CSS
Estos son los ingredientes básicos para construir un sitio web. HTML proporciona la estructura de los sitios web: los elementos descritos, y CSS le dice al navegador cómo deben verse estos elementos. Una vez que haya dominado HTML y CSS, puede recrear cualquier diseño (gráfico) y convertirlo en un sitio web.
JavaScript
Un lenguaje de desarrollo front-end de programación web para crear sitios web. Gracias a JavaScript, agregas interactividad a tu sitio web, es decir, desarrollas sitios web que responden a las acciones de los usuarios. Incluso puedes construir juegos. Recomendamos dominar al menos el código JavaScript básico para entender cómo funciona el lenguaje o la lógica del lenguaje de programación web. Luego puedes ir a jQuery.
jQuery
Técnicamente, no es un lenguaje sino una biblioteca de JavaScript. Como un intermediario que te permite escribir JavaScript más fácil y rápido. Ingresas el código jQuery; la biblioteca se preocupa por ti y juega con el traductor para pasar el significado del JavaScript ligeramente complicado al navegador. Aunque hoy en día jQuery es "un poco viejo", recomendamos aprenderlo "a pedido", ya que facilita el aprendizaje de la lógica de programación web y Bootstrap (framework CSS utilizado) y todavía aparece en las ofertas de trabajo.
Marcos
Su tarea es simplificar el proceso de creación de sitios web y aplicaciones proporcionando soluciones listas para usar para los problemas más comunes. Además, proporcionan un patrón de cómo desarrollar su código de manera ordenada. Para empezar, sugerimos elegir un marco de CSS, por ejemplo, Bootstrap (otras opciones son: Foundation, Pure, YAML CSS), y luego agregar uno de los marcos de JavaScript actualmente populares: Angular 4, ReactJS, Vue.js, Ember.js, Meteor.js.
Git
Esto no está directamente relacionado con la codificación web, que entendemos que a menudo se retrasa hasta el final. Erróneamente, cuanto antes empieces a usar Git, el sistema de control de versiones, mejor. Este es el orden que propusimos. Por supuesto, puede hacerlo de manera completamente diferente: omita jQuery y aprenda Bootstrap inmediatamente después de dominar los conceptos básicos de HTML y CSS; sin embargo, le recomendamos que no vaya demasiado lejos en la simplificación y evite la búsqueda de soluciones escritas a mano, y no use prefabricados de un marco o aprenda marcos de JavaScript sin apenas poder obtener una línea en JavaScript puro.
¿Por dónde empiezo con el desarrollo front-end?
Aprenda regularmente e intente aplicar cada nueva habilidad en la práctica, incluso en pequeños fragmentos de código con un solo propósito: mostrar lo que acaba de dominar. Compártelos en la web. Limite sus grupos de motivación en Facebook. Después de solo 3 horas de leer historias motivadoras, a menudo no estás 3 veces más motivado. Normalmente tienes 3 horas menos para tu estudio.
Observe el mercado y lea los requisitos en las ofertas de trabajo. ¡Están cambiando! Estamos escribiendo esta publicación hoy y probablemente necesitemos actualizarla en un año a medida que cambie la tecnología. Una vez que domines los conceptos básicos: HTML CSS JavaScript, algo nuevo seguramente será tendencia: actualiza tu lista de "aprender". Busque talleres gratuitos (para aprender de los mentores y hacer contactos interesantes simultáneamente) y una pasantía en la industria lo antes posible. El trabajo resultará ser el mejor maestro.
¿Qué es un ejemplo de desarrollo front-end?
HTML + CSS
Tres son probablemente los sitios más famosos con cursos interactivos de desarrollo front-end web. Libres, bien organizados, transmiten conocimientos a los principiantes con mucha facilidad. Realizan cursos interactivos en el navegador. No necesitamos instalar nada en casa, solo hacemos el curso, y nuestro progreso se mide de inmediato.
Khan Academy, Codecademy y Homeschool
Khan Academy tiene materiales completamente gratuitos y también tiene la opción de usar otros lenguajes web. Esta es una plataforma educativa, no solo sobre desarrollo web. Puede realizar varias tareas, desde elementos básicos, incluidos HTML y CSS, hasta scripts de JavaScript más avanzados.
Codecademy tiene muchas cosas gratuitas e interesantes caminos de desarrollo front-end preconstruidos que solo están disponibles para usuarios profesionales.
Code School: en nuestra opinión, el curso más organizado. Consisten en videos + una parte interactiva con tareas de desarrollo front-end. El primer nivel de cada curso es gratuito, pero desafortunadamente, debe pagar el resto. Sin embargo, incluso las partes gratuitas (generalmente alrededor de 1 hora) valen la pena.
¿Cómo elegir un curso a tomar?
Ver las tres plataformas web. Los temas se superponen, pero vale la pena revisar algunos temas duplicados. En primer lugar, la repetición consolida el conocimiento y, en segundo lugar, cada plataforma frontal tiene un enfoque de enseñanza ligeramente diferente. La decisión es tuya. Mucha gente quiere pagar un Bootcamp mensual o un curso de desarrollo web, ya que tienen todo gratis al alcance de la mano. Nada inusual.
Lo peor es que tenemos muchos materiales y queremos aprender todo lo que necesitamos rápidamente, sin revisar ni seleccionar, poner todo en bandeja e ir un paso más allá de los materiales básicos. Por lo tanto, entendemos que si no tiene tiempo para todos los cursos de front-end y la toma de decisiones no es su fuerte, consulte Khan Academy: Introducción a HTML CSS: desarrollo web.
JavaScript
¿Qué sería de nuestro curso de desarrollo front-end sin usar JavaScript? Los sitios interactivos de arriba son geniales. Tienen cursos de JavaScript para nosotros: agradables, simples, desafortunadamente no muy completos, pero buenos para calentar. Si ya tiene los conceptos básicos de HTML y CSS como tal, no necesita comenzar con las sugerencias anteriores.
Para comenzar con 9 breves ejercicios de desarrollo en la introducción: por JavaScript, puede desarrollar los mismos temas en Udacity: Introducción de JavaScript, luego (o de inmediato) pasar a un conjunto más amplio de tareas: HTML / JavaScript: Creación de una Web interactiva Paginas.
jQuery
Un paso más en nuestro camino front-end, pero extremadamente opcional. Actualmente, un curso de desarrollo front-end puede prescindir de jQuery. Sobre todo porque hoy en día hay muchas opciones nuevas y emocionantes para los desarrolladores front-end, hemos mirado las ofertas de trabajo y aún vale la pena tenerlas disponibles.
Sí, Khan Academy y Codecademy tienen cursos de jQuery. Sin embargo, en este caso, me gustaría recomendar un curso de desarrollo front-end de jQuery Pluralsight (anteriormente Code School) de una hora de duración y completamente gratuito.
Marcos de aprendizaje
En esta etapa, usted mismo puede elegir los materiales de front-end y evaluar su idoneidad según su conocimiento. Cuando se trata del marco Bootstrap, la construcción de un sitio web se basa en una cuadrícula de 12 columnas, y este conocimiento es fundamental para comprender el resto en la práctica. Bootstrap le permite crear sitios web receptivos (RWD) rápidamente, es decir, adaptados para dispositivos móviles. Si prefiere aprender en forma de tutorial: el curso de arranque está disponible en Code academy, y con Daily Web, creará su primer control deslizante de arranque en 30 minutos.
Marcos JavaScript
Actualmente, un curso de desarrollo front-end decente ciertamente debería presentar los marcos de JavaScript que se usan actualmente y al menos enseñar uno. Puede encontrar cursos interactivos con marcos en Pluralsight (anteriormente Code School), que son gratuitos durante 14 días. Puede encontrar una colección muy rica de materiales gratuitos en scotch.io. Por otro lado, darse de baja donde encontrará cursos gratuitos de desarrollo de front-end para cada marco es un tema para una publicación separada.
Hay muchos de ellos. La elección es difícil, y conocerlos a todos es imposible. Cualquiera que elijas para empezar, simplemente mantenlo. No saltes de flor en flor porque después de una semana de aprender desarrollo web; alguien te dirá que otro es mejor. Aprenda el primero y escriba una aplicación web simple en él. Por lo general, se recomiendan aplicaciones como planificadores, listas de tareas y noticias de clasificación para empezar. Todo lo que necesita es el nombre del marco y el nombre de la aplicación web que desea crear.
Ejemplos de cursos gratuitos:
- AngularJS
- Angular 2+ (actualmente 6, pero 4/5 son solo otra versión de desarrollo front-end)
- ReaccionarJS
- Vue.js
- Ember.js
¿Es el final? ¡No! Este es un excelente comienzo y una base sólida para el desarrollador front-end junior.
¿Qué sigue después de estos cursos?
Comienza trabajando en tus proyectos web. Como escribimos al principio, documente su trabajo desde los primeros pasos de desarrollo front-end y coloque el código en GitHub, incluso si está lejos de ser ideal.
¿Quieres ponerte a prueba?
La mejor manera de consolidar lo que has aprendido es a través de la práctica. Pasar por el curso de front-end es una cosa, pero solo trabajar en sus proyectos web le enseña a codificar, a resolver problemas usted mismo. Cree un formulario (página de destino) a través del cual puede enviar un correo electrónico al autor de la página.
Cree su sitio web de tarjeta de presentación - portafolio - piense en usar JavaScript para llenar la tabla con una secuencia de Fibonacci, su control deslizante o un juego simple desde cero. ¿Crees que ya tienes habilidades de codificación pero no habilidades gráficas, por lo que el desarrollo que haces es "feo"? ¡De nada! Elija un diseño gráfico listo, por ejemplo, de Weekly Dev Challenge, e intente crearlo.
¿Cuánto tiempo lleva aprender los conceptos básicos?
Depende de ti. La disciplina es lo más importante. A la mayoría de las personas les resulta más difícil aprender un lenguaje de programación web, pero se toman el tiempo para tomar cursos que no cuestan nada. Dominar los conceptos básicos para configurar su primer sitio web puede llevar entre 1 y 3 meses, dependiendo de qué tan ambicioso sea en el desarrollo de front-end.
Para dominar JavaScript, agregaría otros 3 meses de aprendizaje duro. Supongo que está trabajando, por lo que dedicará entre 5 y 10 horas a la semana a aprender, es decir, al menos 1 hora al día. No se convertirá en un especialista front-end en seis meses, pero es tiempo suficiente para crear una base para un mayor aprendizaje.
Busque ayuda en línea
Más de una vez mientras aprendes, tendrás problemas: ¿Cómo centrar un elemento? ¿Por qué no funciona este script? HTML y CSS se ven diferentes en Chrome que en Firefox. ¿Cómo convertirse en un profesional en el desarrollo front-end?
Esto es normal, pero los que preguntan no se equivocan.
- Google —pregúntale al tío Google, preferiblemente en inglés.
- Desbordamiento de pila : probablemente será el primero en mostrar respuestas emergentes de Desbordamiento de pila. Es un portal para desarrolladores web donde los usuarios publican preguntas relacionadas con el lenguaje de programación web y otros (generalmente programadores web más experimentados) intentan darte una respuesta sobre el desarrollo front-end. Las primeras mejores soluciones son puntos, y el autor de la pregunta puede marcar un comentario que resolvió su problema. A veces hay varias o una docena de soluciones, por lo que vale la pena leerlas todas y verificarlas en su lugar. Si alguna de las soluciones lo ayudó, vote: dele una flecha hacia arriba.
- Facebook : los grupos de desarrollo front-end en FB para principiantes pueden ayudarlo mucho, especialmente cuando no sabe cómo preguntar sobre su problema. Sube una pantalla y tu código. No espere que alguien lo escriba por usted, pero los comentarios seguramente lo llevarán por el camino correcto. Desafortunadamente, con preguntas trivialmente simples, la gente siempre escribirá algo desagradable: es difícil, sea paciente. Recomendamos el grupo web: el soporte de inicio es mejor para las preguntas relacionadas con los inicios, y los moderadores se aseguran de que no haya odio.
- CanIUse: si su problema está relacionado con CSS que no funciona en uno de sus navegadores, asegúrese de que lo que está utilizando sea compatible con la versión que está comprobando. De esta manera, evitará búsquedas largas y tediosas de problemas de front-end fantasma.
Conclusión
Entonces, en este artículo, ha aprendido más sobre el mundo de TI, y nos encantaría poder ayudarlo con la dirección. El mundo del front-end es enorme, y puede ser fácil para un principiante perderse en él, pero nos enfocamos en ayudar a las personas a tomar el camino correcto. Pero también tenga en cuenta que, además de los lenguajes web tradicionales, existe un lenguaje de programación web sin código . Hasta que las herramientas sin código estuvieron ampliamente disponibles, el desarrollo de aplicaciones web lo realizaban exclusivamente los programadores web.
Afortunadamente, el tiempo se acaba y ahora cualquier estudiante versado en el material puede crear su aplicación web o página de destino. Después de aprender los conceptos básicos, incluso a nivel de conocimiento, HTML y CSS, ya puedes encontrar el trabajo de tus sueños. Muchos científicos han notado que el lenguaje de programación web mejora las habilidades humanas y contribuye al desarrollo de habilidades interpersonales. Al final, esta es su independencia financiera. Conocemos a diferentes tipos del mundo front-end que lanzaron sus nuevas empresas e hicieron cosas necesarias para el bien de nuestro planeta.
Y, por supuesto, este enfoque tiene ventajas:
- Facilidad de uso y gran potencia.
- Gran biblioteca de plantillas.
- Admite la configuración de varios parámetros.
El lenguaje de programación sin código o visual es un enfoque nuevo en el que no tiene que escribir código desde cero. Te animamos a utilizar herramientas con interfaz gráfica, que es el futuro del desarrollo web. Las aplicaciones web front-end tradicionales son geniales, pero creemos que necesita innovar, por lo que nuestro producto puede serle útil. Deseamos sinceramente encontrar el camino correcto para dominar la profesión de programador. Este camino es espinoso, pero si lo dominas, te satisfará toda la vida que pasaste en este tiempo.
