¿Qué habilidades debo aprender para convertirme en un buen desarrollador front-end?

Oye,

Estos son los conceptos básicos para cualquier persona que quiera convertirse en un desarrollador front-end.

1. HTML

Todo comienza con el lenguaje de marcado de hipertexto. Algunas personas se preguntan por qué HTML está en la lista de habilidades requeridas para los desarrolladores web. La respuesta es simple. Esta es la base que permite a los desarrolladores web pasar a otros idiomas y comprender cómo funciona la Web. Comenzando con fundamentos como HTML, una persona obtiene el conocimiento necesario para comprender cómo se crean, crean y editan los sitios web. Este es el paso en el camino para convertirse en un desarrollador exitoso.

2. CSS

CSS trata sobre la apariencia visual del sitio. Es realmente importante para los desarrolladores front-end, ya que les permite ver cómo una aplicación interactuará con el diseño. Los desarrolladores de back-end también deben tener los conocimientos básicos de CSS. Sin embargo, los diseñadores y desarrolladores front-end son los que deberían poder codificar en CSS fácilmente. Por lo tanto, este lenguaje ocupa el segundo lugar en nuestra lista de las principales habilidades de programador web.

3. JavaScript

JavaScript es uno de los lenguajes de programación más populares y dinámicos utilizados para crear y desarrollar sitios web. Este lenguaje es capaz de lograr varias cosas, incluido el control del navegador, la edición de contenido en un documento que se ha mostrado, permitiendo que los scripts del lado del cliente se comuniquen con los usuarios y también la comunicación asincrónica. Fue desarrollado por Netscape y toma prestada gran parte de su sintaxis del lenguaje C. JavaScript se usa de manera muy amplia y efectiva en la creación de aplicaciones de escritorio, así como para desarrollar juegos. Una de las mejores cosas de JavaScript para usted como desarrollador o propietario de un sitio web es que este es uno de los pocos lenguajes de programación aceptados y respaldados por todos los principales navegadores sin necesidad de compiladores o complementos. También se puede trabajar en plataformas que no están basadas en la web, por ejemplo, widgets de escritorio y documentos PDF. Este es un lenguaje de paradigmas múltiples, lo que significa que tiene una combinación de características. Además, JavaScript admite estilos de programación funcionales y orientados a objetos. Las características de un lenguaje definen la forma en que funcionará, la forma en que responde, lo fácil que es su código y lo que puede lograr. Las siguientes son algunas de las características principales del lenguaje de programación JavaScript para su referencia:

Estructurado : JavaScript es un lenguaje altamente estructurado con una sintaxis adecuada y planificada que se ha derivado de C. Este lenguaje también tiene un alcance de función, ya que carece de alcance de bloque, a diferencia de C. También diferencia entre declaraciones y expresiones, al igual que el C fundamental plataforma de programación web.

Dinámico : los tipos en JavaScript no están relacionados con variables, sino con valores. Este es un lenguaje de programación dinámico que le permite probar el tipo de un objeto de muchas maneras diferentes. Además, este lenguaje de programación está orientado a objetos, donde todos los objetos son matrices asociativas.

Funcional : todas las funciones en JavaScript son objetos y son de primera clase. Están asociados con sus propias funciones y características. Por ejemplo, una función dentro de una función se denomina función anidada, mientras que este lenguaje también admite funciones anónimas.

4. Elige un lenguaje de programación

Como HTML es un lenguaje de marcado, debe aprender otro que sirva como un lenguaje de programación puro. PHP, ASP, C ++, Perl, Java: estos son los lenguajes más populares. PHP se considera un líder. Así que solo busca en Google los principales lenguajes de programación, elige tu favorito y disfruta aprendiendo.

5. Bootstrap

Bootstrap es un marco web front-end gratuito y de código abierto para diseñar 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 la interfaz, así como extensiones de JavaScript opcionales. A diferencia de muchos marcos web, solo se refiere al desarrollo front-end.

6. MySQL

MySQL es el DBMS más popular para sitios web. Comenzó como una herramienta simplificada que brindaba más velocidad, aunque estaba agregando características hasta ser una solución completa y rápida. Fue comprado por Oracle, aunque hay un tenedor para mantener el proyecto de código abierto llamado MariaDB.

Si no desea aprender Bootstrap, puede aprender otros marcos de acuerdo con sus necesidades y preferencias.

La mejor de las suertes

Gracias

Al igual que Daniel, en Karate Kid, hizo el ejercicio de cera en cera constantemente y sin comprender su propósito, primero debe aprender los conceptos básicos.

  1. Estructura HTML buena, limpia y semántica
    Aprenda cuál es el propósito de todos y cada uno de los elementos html, aplíquelos sabiamente.
  2. CSS limpio y estructurado
    Independientemente de usar un marco como Bootstrap o todos los preprocesadores como LESS y SASS, debe aprender a separar su código CSS y escribir poesía (código bonito) con él. Con esto quiero decir que su código debe estar limpio y estructurado.
  3. Javascript
    Comience con jQuery , después de aprender el jQuery básico, intente hacer más e intente lograr el mismo resultado con Javascript regular .
    Ejemplo:
    $ (“Botón”). On (“clic”, función (el) {
    $ (this) .val (“123”);
    }

    Puede mejorar este código reemplazando $ (this) .val (“123”) width this.value = “123” . Esto mejorará el rendimiento, especialmente si tiene una base de código grande.

Una vez que domine los conceptos básicos, puede comenzar a mejorar sus habilidades.

Con HTML y CSS , debe concentrar su esfuerzo en encontrar formas de escribir código más rápido . Con CSS, como mencioné, tienes frameworks y preprocesadores. Con HTML, la mayoría de las veces depende de lo que estés construyendo.

Ahora con Javascript debe centrarse en aprender Patrones de diseño de Javascript [1]. En este momento, los patrones que considero más utilizados son los patrones Singleton y Module. Los patrones de diseño lo ayudan a estructurar su código y mantenerlo .

Con esto en mente, debe tener en cuenta que la diferencia entre un desarrollador front-end senior y junior es su capacidad para resolver problemas . Esta capacidad no se centra simplemente en su capacidad técnica, sino también en sus habilidades blandas, como la manera en que pueden explicar su problema a los demás y entablar una conversación para encontrar una solución. Entonces desarrolle sus habilidades de comunicación . Hacer presentaciones y responder preguntas es una buena forma de practicar.

Mantente actualizado

Es importante saber qué está pasando en nuestra industria.

  • Me encanta recibir el boletín Use Panda Newsletter [2] todas las semanas.
  • Awwwards [3] es un lugar increíble para inspirarse y ver sitios hermosos. Personalmente, siempre miro el código de los sitios web para ver qué marcos, complementos y cómo estructuran el código. Ser curioso.
  • Utilice Codepen [4] para ver, aprender y practicar.

Existen muchos otros recursos de inspiración y noticias, necesita encontrar los que sean más útiles y que funcionen para usted.

Sobre todo, ¡practica!

Notas al pie

[1] Aprendizaje de patrones de diseño de JavaScript

[2] Panda 5 Beta

[3] Awwwards – Premios del sitio web – Mejores tendencias de diseño web

[4] CodePen

Los desarrolladores front-end son generalmente responsables de codificar el front-end para aplicaciones o sitios web. El conocimiento básico requerido para ello es html, css y JavaScript. Todo gira en torno a esto en el desarrollo front-end.

Ahora no todos pueden permitirse tanto el diseñador web como el desarrollador front-end. Por lo tanto, este perfil generalmente no solo se ocupa de la codificación, sino también del sentido del diseño a veces. Le permitiría codificar mejor y diseñar mejor.

Ahora, como se requieren las habilidades requeridas para convertirse en un desarrollador front-end:

  • En primer lugar, sin duda sería HTML, CSS lo que nos ayuda a dar forma y decoración al sitio web.
  • Luego JavaScript, que nos ayuda a agregar algunas cosas interesantes y funcionalidades.
  • Una vez que haya dominado tres cosas mencionadas anteriormente, desafíese con las bibliotecas avanzadas de JavaScript, es decir, JS angular, nodo JS, etc. (aunque esto no es obligatorio, pero generalmente se encuentran en requisitos opcionales para este perfil)
  • Ahora, una vez que sepa estas cosas, comience a observar cada diseño, cada animación o efecto que vea. Para que pueda entender cómo se hace. Véalo y luego haga el suyo para practicar.
  • También puede aprender a diseñar herramientas como Photoshop o Gimp, Inkscape, etc. para comprender mejor el diseño. (estas herramientas están en habilidades “buenas para tener”. Por lo tanto, no debe preocuparse a nivel principiante)

Entonces las habilidades de aprendizaje no son difíciles. Todo lo que necesitas es practicar. Mucho. 🙂

Hay dos tipos de habilidades que necesitarás dominar para ser un desarrollador exitoso: habilidades duras y habilidades blandas .

Las habilidades duras son técnicas en las que la mayoría de las personas piensan cuando quieren mejorar sus habilidades cotidianas y su comercialización como desarrollador.

Para un desarrollador front-end en 2017, estos son HTML, CSS, JavaScript en el nivel básico. Además de eso, probablemente querrás entender cómo usar herramientas adicionales que pueden hacerte más eficiente. Estos incluyen, pero no se limitan a:

  • Agrupadores de activos y herramientas de automatización (webpack, gulp, grunt)
  • Administradores de paquetes (npm, hilados, bower)
  • Preprocesadores CSS (sass, less, postcss)
  • Preprocesadores HTML (haml)
  • Ver bibliotecas (reaccionar, vue, angular)
  • Bibliotecas de gestión estatal (redux, inmutable, mobx)
  • Transpiladores JavaScript (babel)

Desafortunadamente, las habilidades difíciles a menudo están sobrevaloradas. Si bien es fundamental que un desarrollador comprenda a fondo las tecnologías que utiliza, las fortalezas reales de un desarrollador provienen de sus habilidades blandas . Estos incluyen, entre otros, los siguientes:

  • La capacidad de ver y sugerir caminos técnicos más cortos hacia los objetivos finales de una empresa.
  • Una comprensión de la psicología del usuario y cómo los usuarios reaccionan a sus interfaces.
  • Ser capaz de transmitir la importancia de ofrecer funciones de forma iterativa para que pueda obtener comentarios de los usuarios.
  • Excelente comunicación escrita para que sus partes interesadas entiendan los problemas cuando surjan.
  • Una comprensión del negocio y cómo el software interactúa con él para proporcionar valor a otras personas.

Si puedes dominar las habilidades difíciles, puedes conseguir un trabajo. Si puedes dominar las habilidades duras y blandas, nunca necesitarás buscar una.

Primero debes aprender los conceptos básicos y luego profundizar en el tema.

Déjame explicarte el proceso paso a paso:

  1. Aprende HTML5 y CSS3
  2. Bootstrap y GIT
  3. Aprende JavaScript
  1. Características de sintaxis
  2. Funciones de flecha
  3. Operadores de propagación
  4. Parámetros de descanso
  5. Programación orientada a objetos
  • Prácticas de diseño
  • Degradación elegante y mejoras progresivas
  • JQuery
    1. Manipulando DOM
    2. Funciones de utilidad
    3. Programación del módulo
    4. AJAX y optimización de aplicaciones
  • Angular4
    1. Gramática básica, funciones, objetos e interfaces.
    2. Enrutamiento, plantilla, servicios, rx / js, formularios y descripción arquitectónica
    3. Componentes compartidos, autorización y autenticación.
    4. JWT, enchufes de conexión
    5. Enlace de datos y enrutamiento

    Una vez que haya aprendido todas las habilidades anteriores, es muy importante que también las ponga en práctica. Inicialmente, parecerá confuso y difícil, pero cuanto más comiences a crear sitios web y más aprendas a codificar, más fácil será.

    Recuerde, un programador nunca aprende nada a la perfección: esta es la belleza de los desarrolladores web; cada paso sigue siendo una fase de aprendizaje y es un proceso interminable.

    Si ha seguido los pasos del 1 al 7, probablemente haya aprendido todo como desarrollador front-end, pero ¿es esto lo suficiente como para llamarse desarrollador Front-end?

    Bueno, para convertirse en un desarrollador front-end completo, además de las habilidades que también necesita para trabajar en tareas, proyectos , saber cómo construir un sitio web es solo una pequeña parte de un rompecabezas front-end. Nuevamente, convertirse en un desarrollador front-end no se trata solo de aprender varios frameworks front-end y lenguajes de programación, sino también de las interacciones y las responsabilidades que tiene como desarrollador front-end.

    Dado que la web está evolucionando a un ritmo rápido, los grandes desarrolladores front-end nunca deberían dejar de aprender, sino adaptarse según el mercado y las tendencias de TI.

    Ahora primero necesitas:

    1. Adquiera las habilidades mencionadas anteriormente de los mejores expertos de la industria.
    2. Asegúrese de tener una cartera lista con proyectos para validar sus habilidades
    3. Elija las empresas que está contratando y sea contratado por ellas.

    Este 2018, Paytm, Exotel, Pepperfry, Voonik, Go-Jek y Razorpay están buscando seleccionar talentos de entre más de 10,000 estudiantes que se graduaron de IIT y miles más de otras universidades de ingeniería y Front-end es uno de los dominios que ” estás buscando contratar. Lee ahora..

    Los salarios promedio para desarrolladores de front-end varían de 4 a 5 LPA en el inicio de productos.

    Tan fácil como parece encontrar un trabajo a medida que uno más nuevo se vuelve bastante difícil porque lo que la industria requiere es la experiencia práctica en todas estas tecnologías, por lo tanto, comenzar a adquirir habilidades de las plataformas en línea es lo mejor que se puede hacer hoy en día.

    Hay plataformas como Simplilearn y Edureka que ofrecen cursos y certificados en estas habilidades, pero recuerde que su objetivo es conseguir un trabajo.

    Como eres bastante nuevo en este dominio, te sugiero que uses edWisor . Aquí te enseñan habilidades en tecnologías como Angular, JQuery, JavaScript, HTML5, CSS3 desde lo básico hasta el nivel avanzado mientras trabaja en proyectos en vivo.

    Entonces, si también está buscando trabajo, edWisor también lo ayuda a ser contratado en compañías de productos y nuevas empresas como desarrollador front-end. Puedes intentarlo.

    ¡Todo lo mejor!

    Como ya hay varias respuestas con las habilidades técnicas que necesita, permítame agregar algo diferente:

    • Comprende qué es un compilador. Luego, comprenda la diferencia entre compilación e interpretación, así como el tiempo de ejecución. Ponga eso junto con lo que es una VM y lo que significa para Javascript, HTML y CSS en el contexto del navegador. Comprender cómo y cuándo suceden las cosas lo ayudará a depurar.
    • Acepte que la mayor parte de su trabajo será la depuración.
    • Aprenda a pensar de manera lógica, pero también sea de mente abierta. El código front-end es mucho menos predecible que el back-end ya que tiene muchas variables interferentes.
    • Averigüe en el camino si le gusta más la interfaz de usuario o el código de la aplicación. Si es UI, aprenda conceptos básicos de diseño y tipografía, si este último aprende conceptos básicos de informática.

    Buena suerte.

    El desarrollo completo de la pila básicamente significa que sus habilidades involucran tanto al cliente como al servidor, y a partir de eso podemos comenzar a ramificar.

    En el lado del cliente, es imprescindible que conozca y entienda HTML, CSS y JavaScript de memoria. De lo contrario, será casi imposible aprender otras tecnologías. La comprensión de las ideologías de diseño también es una gran ventaja. Además de esto, comprenda la herramienta de organización Modal-View-Controller. Este es un método convencional utilizado por los desarrolladores para organizar su código de una manera comprensible y universal.

    En el lado del servidor, puede ir con un BaaS (backend como servicio) o puede poner su sangre, sudor y lágrimas en la construcción de un backend personalizado utilizando servicios de base de datos, con el conocimiento de SQL o MongoDB, o si lo desea implemente más conocimiento algorítmico que no se puede hacer fácilmente en el front-end, elija Python y Java para construir una API REST personalizada. Si opta por un BaaS, toda esta molestia desaparecerá, pero recuerde, los datos que cree no serán mantenidos al 100% por usted, y ese servicio puede cerrarse a discreción de la compañía. Si tienes tiempo, te sugiero ir por el primero.

    El desarrollo completo de la pila es simplemente un término general que muestra que uno comprende lo que sucede en todas partes de la aplicación. Las opciones de idioma específicas son extremadamente amplias e infinitas, pero se reduce a lo que realmente está construyendo y cuánto tiempo tiene. Por ejemplo, Ruby on Rails es extremadamente difícil de aprender, pero una vez dominado, puede convertir cualquier idea en una aplicación web en cuestión de horas.

    Saludos, y buena suerte!

    Buena pregunta. En el desarrollo web, tiene el lado del cliente (front-end, HTML / CSS / JavaScript) y el lado del servidor (back-end). Ser un desarrollador web de pila completa significa que conoce las tecnologías de front-end y back-end para hacer las cosas.

    Si desea aprender cualquiera de los dos y puede trabajar por su cuenta, Aprenda a codificar y ayudar a las organizaciones sin fines de lucro le enseñará todo lo que necesita saber para obtener una verdadera carrera en el desarrollo web (frontend y backend) en un total de 800 horas de trabajo duro frontend 400, backend 400, 1280 horas adicionales de trabajo muy avanzado para ayudar a organizaciones sin fines de lucro). También es completamente gratis. Nadie ha completado el curso cada vez mayor, y mucha gente consigue trabajo antes de alcanzar la marca de 800 horas. Te enseñarán todo, desde imprimir “hola mundo” a Git y control de versiones a la pila MEAN.

    Es un largo viaje, solo estoy en la hora 50, pero con persistencia puede tener éxito en convertirse en un desarrollador web de pila completa.

    Necesita conocer los lenguajes de programación frontend. Para comenzar desde algo, puede aprender HTML (5), CSS (3), JavaScript y sus marcos. Para este último, podría recomendar principalmente Angular Js, Node Js, React Js, jQuery, Bootstrap, Vue Js. Incluso considero los lenguajes de fondo Angular Js y Node Js también.

    Hay algunos buenos tutoriales para aprender lenguajes de programación. Podrías aprender de w3schools. También podría recomendar los tutoriales de SoloLearn, que también tienen una aplicación móvil, y facilitar el aprendizaje.

    Buena suerte 🙂

    Técnico: HTML / 5, CSS / 3, JavaScript, JQuery, AJAX, Conocimientos básicos de plataformas de preprocesamiento de CSS del lado del servidor, como LESS y SASS, AngularJS, VanillaJs

    Herramientas de diseño: PhotoShop, Illustrator, comprensión básica de la experiencia del usuario (UX)

    Comprensión competente de los problemas de compatibilidad entre navegadores y formas de solucionarlos.

    Buena comprensión de los principios de SEO.

    Si está familiarizado con los requisitos anteriores, está listo para aplicar trabajos de desarrollador front-end como un rol junior.

    HTML, CSS, LESS / SASS, JAVASCRIPT y cualquiera de los últimos marcos de UI como Angular, React.

    Estos son los conocimientos más importantes y básicos que necesita para ser un desarrollador front-end.

    Si tiene un buen conocimiento sobre las herramientas de compilación y está actualizado con ES6 y TypeScript, entonces eso es genial. Definitivamente tiene una ventaja comparativa con muchos de los desarrolladores.

    El tercer aspecto importante es la estructura de datos y los conceptos oojs. Si conoce estos conceptos, entonces podría ser uno de los mejores desarrolladores front-end de la industria y puede fácilmente romper grandes marcas (también depende de su resolución de problemas y habilidades lógicas).

    Eso es todo lo que siento.

    Creo que la pregunta está de alguna manera desordenada. Desea ser un desarrollador de pila completa en el desarrollo front-end. Hmm, ok. Permíteme explicarte un desarrollador full-stack y un desarrollador front-end.

    Un desarrollador de pila completa es una persona que al menos se siente cómoda trabajando en cada una de las tecnologías involucradas en la construcción de toda la aplicación web. Desde la UI / UX hasta las API y bases de datos de back-end.

    Por otro lado, un desarrollador front-end es una persona que se especializó en la GUI de una aplicación. Por lo general, convierten los diseños de un diseñador en una hermosa interfaz de usuario.

    Creo que quieres ser un desarrollador front-end experimentado. Con esto, no tienes ningún problema. Vaya a Learn to code y ayude a organizaciones sin fines de lucro (Free Code Camp). Aprenderá todo sobre HTML, CSS, JavaScript y todas las tecnologías front-end importantes. Después de eso, si desea ser un desarrollador de pila completa, aún puede continuar allí para ser un desarrollador de pila completa en la pila MEAN.

    HTML, CSS y JavaScript son importantes. No estaría de más estar familiarizado con WordPress también, porque es muy utilizado. Algunas ediciones básicas de gráficos y video también serán una gran ventaja.

    Aquí hay información relacionada sobre diseño vs desarrollo:

    https://alansimpson.me/pages/ig/

    Para un desarrollador front-end exitoso, necesita adquirir HTML, CSS, JavaScript, jQuery
    y JavaScript orientado a objetos adicional, marco de JavaScript

    Jugador de equipo, comunicativo, conoce vailla css y javascript, y comprende los problemas de los navegadores cruzados. Además, necesita comprender el negocio del cliente.

    Echa un vistazo a este enlace

    kamranahmedse / desarrollador-hoja de ruta

    Esta publicación detalla las habilidades necesarias para ser desarrollador web en 2017.

    HTML, CSS, JavaScript, una de las bibliotecas como jQuery, React, Vue, Angular, etc.

    Html, css y buen conocimiento de javascript

    JavaScript Toneladas y toneladas de ella. Agregue algunos marcos también. CSS y HTML. Algunos SQL Python o Rails o PHP, preferiblemente los tres.

    Además de conocer el DOM, HTML, CSS, JS, obtén un framework CSS: bootstrap, diseño de materiales o similares. Y un marco JS: React, Vue o Angular.