¿Cómo convertirse en un mejor desarrollador front-end? He estado escribiendo HTML y CSS básicos durante años, pero realmente quiero / necesito intensificar mi juego. ¿Cuál es la mejor manera de subir de nivel mis habilidades?

A continuación, algunas técnicas para trabajar de manera más eficiente:

1. Usando el editor correcto
   Cambiar de un editor de texto simple a uno creado para crear HTML, CSS y JavaScript ayudará a reducir los errores y agilizará la generación de código.
2. Uso de complementos que ahorran tiempo
   Algunos complementos en el navegador, el editor y la línea de comandos le ahorrarán mucho tiempo. Pruebe Emmet, use LiveReload y Autoprefixer. etc.
3. Usando la pila correcta
   Tómese el tiempo para aprender el marco de autoría front-end correcto. La pila NodeJS es increíblemente adecuada para esto, así que prueba cosas como Yeoman, Gulp, Grunt, Bower, etc.
4. Aprende a escribir más rápido
   Taladro, taladro, taladro. Juega juegos de mecanografía o aprende a escribir con teclado si aún no lo has hecho.
5. Conozca los atajos de teclado
   Cuanto menos tiempo pasen las manos en el teclado, menos eficiente será. Así que comience a memorizar y usar los atajos de teclado en su navegador, editor y sistema operativo.
6. Un plan o especificación bien definido
   Asegúrese de tener todos los materiales que necesita de antemano. ¡Comunicar!
   Refactorizar es costoso, así que si puede, comprenda lo que se requiere de usted ANTES de comenzar a trabajar. Trabaje en su contrato para que le paguen por lo que entrega.
7. ¡Memorizar!
   CSS y HTML tienen un número finito de elementos en juego. Aprenda todas las propiedades, selectores, elementos y atributos. Aprende cómo funcionan. Si puede reducir las búsquedas en Google, será más eficiente.
   También necesitará aprender cómo diferentes navegadores manejan su trabajo.
8. Pruebas
   Reducir los errores temprano puede ahorrarle mucho trabajo posterior. Inicie Internet Explorer y su navegador móvil temprano y pruebe.
9. Reutilizar activos
   ¿Tienes algo que funcionó bien en un proyecto anterior y que se necesita nuevamente? Deja eso en tu nuevo proyecto. Comience a construir una biblioteca de patrones que usa con frecuencia.

Estoy seguro de que hay muchos más consejos para ser más eficiente. Tomará mucho tiempo y esfuerzo, pero valdrá la pena. ¡Buena suerte!

Creo que deberías seguir estos pasos para aprender

1. Aprende HTML5
2. Aprenda CSS (obtenga un buen control)
3. Aprenda los problemas y soluciones del navegador cruzado
4. Aprenda JavaScript primero y luego JQuery
5. Aprenda marcos populares como Bootstrap / 960grid (aún antiguo pero útil)
6. Esté atento a las últimas tendencias en front-end como desplazamiento Parallax / diseños receptivos, etc.

El siguiente paso es acelerar su codificación, así que para eso

1. Use Less o SASS (yo uso MENOS)
2. Use EMMET o cualquier otro estilo de codificación manual corto
3. Use un buen editor como Sublime Text

También suscríbase a buenos blogs como Codrops y algunos otros como CSS-Tricks y suscríbase a Tuts +

Aquí una respuesta desde un punto de vista no técnico:

1. Mire el desarrollo front-end desde la perspectiva del usuario : a nadie en este mundo le importa HTML / CSS / Angular y cualquier tecnología front-end (aparte de los pocos desarrolladores front-end que existen). Lo que le importa a la gente son:

1. impresionantes vistas frontales
2. una gran experiencia de usuario
3. páginas de carga rápida

Aprenda las tecnologías más nuevas : aunque muchos sitios todavía se ejecutan en HTML y CSS básicos, el juego está cambiando lenta pero constantemente. Aprenda sobre Angular 1 y 2, HTML5, CSS3, etc. etc. Intente utilizar estas tecnologías en nuevos proyectos, siempre que sea posible.

Lea sobre UI y UX : demasiados desarrolladores front-end hablan y escriben páginas sobre cómo aplicarán HTML y CSS, pero algunos ni siquiera saben el significado de UI (Diseño de interfaz de usuario) y UX (Diseño de experiencia de usuario). Aunque el punto tres es similar al punto uno en esta respuesta, vale la pena mencionarlo.

Obtenga una idea básica sobre el desarrollo de bases de datos y la programación de back-end : el desarrollo de excelentes aplicaciones es un esfuerzo de equipo. Crear front-end sin tener en mente el back-end y la base de datos, puede generar problemas / desafíos durante el proceso de desarrollo.

Prepárese para ser increíble en lo que hace : en general, no se necesitan tantos desarrolladores front-end. Por cada 5 a 20 personas en un equipo, puede haber un desarrollador front-end. Por lo tanto, podemos deducir de eso que solo hay pocas vacantes para este tipo de puestos. Por otro lado, muchas personas aspiran a ser desarrolladores front-end. Si desea obtener una mejor posición, un mejor salario, mejores oportunidades, deberá ser realmente bueno en lo que está haciendo. De lo contrario, se empujará contra un “techo de cristal” después de unos años más adelante.

Fuente: http://Flickr.com/ 2011-01-26 UX Book Club

Conclusión

Al hacer la pregunta “¿Cómo me convierto en un mejor desarrollador front-end? He estado escribiendo HTML y CSS básicos durante años, pero realmente quiero / necesito intensificar mi juego. ¿Cuál es la mejor manera de subir de nivel mis habilidades? “Ya estás en el camino correcto para convertirte en un mejor desarrollador en esta área.

Mi opinión es:

• Mejora constantemente tus habilidades (el desarrollo front-end es un campo vasto)
• Mire también fuera del lado técnico de las cosas (UX, UI, diseño increíble, perspectiva del cliente, etc.)
• Intente estar en la misma habitación que su personal de back-end y de base de datos de vez en cuando, escuche sus inquietudes y sugerencias

También me gustó la respuesta de: Deryk DeGuzman

Además de las habilidades difíciles, por supuesto, yo diría “Piensa como un usuario”. Después de todo, ser un desarrollador front-end significa estar en la intersección de ingenieros y usuarios. Poder pensar como un usuario significa poder ver lo que los usuarios pueden necesitar y, por lo tanto, analizar lo que puede hacer para optimizar la experiencia para ellos.

¿Esas aplicaciones que usas a diario? Entiéndelos. Aprende de ellos. Vea lo que se ha resuelto antes y qué cosas nuevas puede agregar para mejorar. Pero la raíz de todo eso es poder aplicar la mentalidad de un usuario a lo que desarrollas.

Esperamos una discusión interesante.

Saludos cordiales

Sascha Thattil

CEO y Project Manager en Software-Developer-India.com

Descargo de responsabilidad: de vez en cuando contrato desarrolladores front-end para mi empresa y esta experiencia también se refleja en esta respuesta.

ACTUALIZACIÓN : 2.11.2016 Como las ideas han cambiado un poco, estoy actualizando mi respuesta.

Como Front-End Dev / Engineer, creo que deberías comenzar a seguir y leer blogs / códigos de personas más avanzadas que tú (no estoy promocionando en este momento, debes salir y buscarlos :-)). Además, algunas suscripciones a las listas de correo (Durgesh enumeró algunas, pero me gusta la Lista de lectura de desarrollo web (WDRL) y Medium (Node & JavaScript, The JavaScript Collection, Free Code Camp) o Suscribirse a JavaScript • / r / javascript para que vea lo que es ‘ De moda’.

Después de eso, establezca un día semanal donde está leyendo cosas y probando cosas con CodePen, etc. -> Esto lo llevará a una mejor comprensión de las cosas que lee. Estoy tratando de ver 30 minutos. – 60 min. a la semana un par de egghead.io – Aprenda herramientas profesionales de JavaScript con videos tutoriales y capacitación
Videos y detener los tutoriales y recodificar los ejemplos.

Después de eso, la verdad es que la pila de desarrolladores front-end en estos días es muy confusa y hoy en día se discute una “fatiga de JavaScript” en todas partes. Es por eso que todavía recomiendo el siguiente enfoque:

1. Comprenda JavaScript (¡JavaScript es atractivo tiene grandes desafíos para eso! O JavaScript elocuente)
2. ¡Comprenda el DOM, no HTML y CSS, el DOM!
3. HTML, CSS (si desea hacer sitios web con efectos sofisticados, sí, CSS con transiciones, manipulación SVG, etc.)
4. Ahora comience con algunos Frameworks CSS:
4.1 Twitter Boostrap, HTML5 Boilerplate, Fundación

5. Parte difícil: elija un marco para comenzar. Recomendaría Reactjs + Redux + Webpack (lea Un plan de estudio para curar la fatiga de JavaScript) ya que, según mi experiencia, una vez que comprende los patrones, es realmente fácil hacer cosas con él. No comience con Angularjs2 + RxJS + TypeScript ya que el espacio es demasiado alto. Además, una vez que comprenda React-Stack, puede usar NgRX-Store y desarrollar con el mismo patrón Redux en Angularjs2.
6. Optimice su flujo de trabajo con Bower, Grunt, Gulp al principio y luego pruebe Yeoman (si no lo hace, no entenderá lo que está haciendo).
7. ¡HAGA pruebas! No importa cómo comiences (TDD, BDD, etc.). Una vez que ingrese al proceso de prueba, puede cambiar a TDD o BDD o lo que sea. También es necesario saber qué son CI y CD, ya que sus aplicaciones se ejecutan principalmente en dichos entornos -> Jasmine, Karma, Enzym, Jenkins, TravisCI, etc.
7. Recomendaría suscribirse a algunas listas de correo públicas del W3C para comprender el proceso y estar “actualizado”. ¡Algún día entenderás sus discusiones!
8. Aprende, aprende, aprende

Como verá, para ser un buen Front-End Dev necesita mucho trabajo y comprensión. Y no olvide conocer uno o dos idiomas del lado del servidor, ya que también está consumiendo interfaces REST, API y mucha gente espera que los desarrolladores front-end comprendan / conozcan algunas partes de la codificación del lado del servidor (al menos PHP , Java, tal vez Nodejs).

Actualización: Centrarse más en TDD y Pruebas en general general

8 consejos para convertirse en un mejor desarrollador front-end

Se como te sientes. Me sentí de la misma manera. Todo eso cambió cuando comencé a implementar los siguientes puntos en mi rutina.

Ya sea que sea un novato o un profesional , es probable que algunos de estos puntos lo ayuden a llevar su carrera de desarrollo front-end al siguiente nivel .

Aquí hay 8 consejos para ayudarlo a convertirse en un mejor desarrollador front-end .

1. Planifica tus proyectos

El primer error y sorprendentemente muy común incluso con los desarrolladores senior es que la mayoría de nosotros no planeamos .

Es aburrido , no sabemos cómo planificar y sentimos que no es nuestro trabajo .

Es por eso que a menudo omitimos este paso tan importante .

Una buena planificación puede ayudarlo a:

• ahorrarte mucho tiempo
• reducir el estrés cuando se acerca la fecha límite
• cómodamente a tiempo todos los días

Y no tiene que ser complicado .

Simplemente poner una lista de plantillas y elementos que deben convertirse de PSD a HTML o dividir los elementos complejos en partes más pequeñas y escribirlos es suficiente.

Hacer un proyecto simple basado en una lista de tareas le permitirá:

• mantente organizado
• mantén la cabeza despejada y concentrada en la tarea en cuestión
• resaltar cualquier obstáculo al comienzo de la fase del proyecto
• mantenga a su cliente, jefe o gerente de proyecto fácilmente al tanto

Más sobre el último beneficio en el punto # 2.

Herramientas útiles para planificar

• Workflowy: volcar una lista de plantillas en una lista de viñetas de Workflowy
• Writemaps: cree un mapa del sitio web
• Trello: crea un tablero de proyecto y tarjetas para cada una de tus plantillas y elementos
• Lápiz y papel : todo lo anterior de una manera antigua pero efectiva

La planificación es importante, pero no siempre todo sale tan bien planificado .

2. Sea proactivo

No hay nada peor que decirle a su cliente o jefe que las cosas están tomando más tiempo de lo esperado y que el proyecto no se entregará a tiempo .

Destacar de manera proactiva cualquier obstáculo o demora es una forma muy poderosa de mantener felices a todos .

Está bien si las cosas tardan más de lo planeado inicialmente, pero no está bien quedarse con esto .

¿Estás apilado con un error o no puedes resolver algo? No está solo , todos, incluso los desarrolladores más experimentados, tienen los mismos problemas en casi todos los proyectos .

Cuando esto sucede, ¡ llámalo !

Todos apreciarán que estás haciendo tu mejor esfuerzo y manteniéndolos al tanto del progreso.

¿Quieres deleitar a tu cliente y jefe ? Envíeles un breve resumen de lo que hizo hoy y en lo que trabajará mañana, destacando cualquier inquietud.

Solo debería tomar 5 minutos , y si usa herramientas del n. ° 1, aún menos tiempo .

Lo amarán por eso porque les da tiempo para pensar en un plan B, que podría ser simplemente pedirle al cliente más dinero o extender el plazo .

Otras razones por las cuales ser proactivo:

• te hace ver más profesional
• aumenta tu credibilidad
• ayuda a construir una confianza

Establecer un recordatorio diario o semanal lo ayudará a no olvidarse nunca de proporcionar una actualización del progreso del proyecto.

Herramientas útiles para recordatorios

• Google Calendar: crea un evento recurrente simple
• Evernote: cree una nota con una lista de verificación de sus tareas y establezca un recordatorio
• Recordatorios de iOS : no necesita una descripción, ¿verdad?

¿Curioso sobre el siguiente punto? Genial

3. Sé curioso

Creo que uno de los atributos más importantes en esta lista es ser curioso .

Casi todos los días se lanzan nuevas herramientas, complementos, técnicas e idiomas.

Es muy importante que permanezca abierto a todas las cosas nuevas y haga un esfuerzo para explorarlas y comprenderlas.

Lo malo y al mismo tiempo la belleza del desarrollo front-end es que avanza muy rápido .

Esto significa que puede convertirse rápidamente en un experto, pero también sus habilidades pueden quedar obsoletas rápidamente .

Consejo : No necesita saber todo, solo tener una visión general aproximada sobre un tema o técnica está bien. Luego puede sumergirse más profundamente en él cuando aparezca el proyecto correcto.

Fuentes útiles para noticias de desarrollo front-end

• CSS semanal
• HTML5 semanal
• JavaScript semanal
• Diseño receptivo semanal
• Sidebar.io
• Diseño web semanal

Deje que otros filtren el ruido y concéntrese solo en las principales noticias.

4. Invierte en tus habilidades

El desarrollo front-end y todo lo relacionado con él es solo una habilidad y cualquier habilidad, lo creas o no, se puede aprender .

Tendrá que invertir en usted mismo para crecer . No me refiero a gastar dinero en cursos caros, seminarios o libros, estoy más pensando en invertir su tiempo .

No hay atajo para el éxito y las investigaciones muestran que se necesitan alrededor de 10000 horas para dominar una habilidad , es decir, alrededor de 4 años practicando 40 horas a la semana .

Prepárese para aguantar hasta altas horas de la noche explorando otros sitios web, experimentando con nuevos complementos y marcos, leyendo blogs de desarrollo web, escuchando podcasts y masticando miles de tweets.

CONSEJO : programe un tiempo para el autodesarrollo en su semana. Sé que esto podría ser más difícil si su empleador no lo apoya, pero esté preparado para invertir parte de su tiempo libre en su propia carrera.

Blogs útiles y podcasts para desarrolladores front-end

• Trucos CSS
• Codrops
• ShopTalk Podcast
• Boagworld Podcast
• Aplicar filtro Podcast

CONSEJO ADICIONAL : Configurar la reproducción del podcast a una velocidad de 1.5x o 2x lo ayudará a superar más cosas más rápido.

¿Dijo que sí, señor ?

5. No digas SI a todo

Los clientes y los jefes son exigentes , todos lo sabemos.

Pero decir sí a todo eventualmente puede volverse en su contra y terminará trabajando por menos, quedando bajo la bomba y estresado .

Evalúe cuidadosamente cuáles son los requisitos del proyecto y alinee eso con sus habilidades . También asegúrese de preguntar qué navegadores necesita admitir.

No hay nada de malo en resaltar qué partes del proyecto necesitarán una asistencia de alto nivel o deberán quedar fuera del alcance del proyecto .

Al resaltar estos principios en la línea de tiempo del proyecto , todo el proceso, de principio a fin, será mucho más fácil para todos.

Consejo : No tenga miedo de llamar a la funcionalidad o característica que está fuera de su conjunto de habilidades. Ser honesto es la clave, pero también asegúrate de no decir no a todo.

¿Dijiste que no, señor ?

6. No digas NO a todo

Contradictorio con el punto anterior, pero también un atributo importante de un desarrollador front-end altamente efectivo es aprender algo nuevo en cada proyecto .

Cada proyecto es una excelente manera de implementar una característica con la que no está familiarizado o hace algo nuevo por primera vez .

Al decir no a todo y solo hacer las cosas con las que está familiarizado, esencialmente está cerrando las puertas para el desarrollo personal y profesional .

Pronto se ahogará en el mar de los desarrolladores promedio .

Por otro lado, explorar lo desconocido le dará una gran sensación de logro, satisfacción y lo mantendrá hambriento para aprender cosas nuevas una y otra vez.

Consejo : elija una característica, un complemento o una técnica que desee utilizar durante algún tiempo e impleméntelo en su próximo proyecto.

Y si lo necesita, use un mentor para guiarlo en la dirección correcta .

7. Encuentra un mentor

¿Tienes ganas de aprender, pero no sabes por dónde empezar ? ¿Qué debes aprender a continuación ? ¿Cómo implementar esto o aquello?

Para eso son buenos los mentores.

Encuentre a alguien con más experiencia que usted, alguien que esté dispuesto a ayudarlo a crecer .

Su mentor debe ser alguien a quien respete , alguien a quien le gustaría ser . Alguien que pueda enseñarle cómo codificar y qué evitar hacer .

Este podría ser tu jefe , tu colega o alguien en línea a quien seguirás.

Las compañías más grandes pueden tener un programa formal de tutoría , pero si está en un estudio pequeño o solo, busque en Internet .

Seguir a desarrolladores como Chris Coyier, Paul Irish o conseguir un mentor a través de programas inteligentes o similares podría ser una buena idea .

CONSEJO : Si no avanza, retrocede, especialmente en el desarrollo web.

Un buen mentor te ayudará a:

• para obtener asesoramiento sobre el enfoque de su proyecto
• para tener un sentido de dirección
• para ayudarlo a prever posibles obstáculos

Consejo : Recuerde que un mentor no es un tipo que hará todo en su lugar y no está allí para motivarlo . Todavía necesita ser curioso y automotivado para crecer.

¿Aún conmigo? Genial … gracias, pero no te olvides de moverte.

8. Mantente activo

Trabajar en la industria digital significa que pasamos mucho tiempo mirando la pantalla de la computadora.

Sentarse 40-60 horas en la oficina tarde o temprano tendrá su precio.

Es por eso que es de vital importancia que cuide su cuerpo de la misma manera que se ocupa de mantener su marcado bien organizado y comentar todo lo que hace.

Un cuerpo sano y una mente sana significan un mejor código . Entonces, cuando programes tu semana, no olvides incluir algunas actividades no digitales : caminar, correr, hacer ejercicio o cualquier otra cosa que te haga olvidar todos los píxeles que te rodean.

Consejo : Mirar YouTube o TV no es un escape del mundo tecnológico y no te hará sentir renovado . Cualquier cosa que haga bombear tu sangre lo hará.

Me voy a correr ahora .

Conclusión

¿Estás de acuerdo o en desacuerdo con alguno de mis consejos? ¿Cuáles serían sus sugerencias y consejos para otros desarrolladores front-end? ¿Qué te ayudó a llevar tu carrera al siguiente nivel?

http://www.deepimmersionmedia.com

Practica a diario!

Dedica unas horas al día a aprender nuevas formas de resolver un problema. Esto lo ayudará a aprender cuál es la forma más eficiente de escribir su código.

Ejemplo de eficiencia de código en css.

color de fondo: # 000;
background-image: url (images / bg.gif);
repetición de fondo: sin repetición;
posición de fondo: arriba a la derecha;

Versus

fondo: # 000 url (images / bg.gif) sin repetición arriba a la derecha;

Ambas formas de escribir su css logran los mismos resultados, pero la segunda opción ocupa menos espacio y reduce el tamaño del archivo de su página.

Crea sitios web para personas que conoces. Al implementar lo que aprende, mejorará su conjunto de habilidades. Hay una diferencia entre trabajar en el mismo proyecto que ya conoce y trabajar para crear diferentes soluciones para diferentes personas. Amplía tu pensamiento.

Aprende tus herramientas

Independientemente de las herramientas que esté utilizando, asegúrese de dominarlas. Aprende por dentro y por fuera para que puedas mejorar tu flujo de trabajo. Aprenda todos los atajos y habilidades de su editor de texto, computadora, etc. La productividad es clave.

Aprende otros idiomas

El desarrollo de Front End es una combinación de bibliotecas HTML, CSS, JavaScript y JS. Entonces, dado que ya tiene los fundamentos de HTML y CSS, ahora es el momento de aprender JavaScript y cualquiera de sus bibliotecas o marcos más utilizados.

Analizar código

Dirígete al software Github Build mejor, juntos y descarga un código de algunos desarrolladores respetados. Estúdialo y aprende cómo funciona.

Checkout Codrops | Recursos útiles e inspiración para mentes creativas

Uno de mis sitios web favoritos para recomendar es Mozilla Developer Network. Allí puede obtener información y guías realmente buenas.

Estas son solo algunas de las formas en que puede mejorar sus habilidades actuales y aprender algunas nuevas.

Espero que ayude.

Esta es una buena pregunta que debe haber llegado a la mente de muchos. Pero primero déjame aclarar la advertencia: ¡debes entender que no puedes aprenderlo en unos pocos meses!

¡Lo que lleva tiempo, lleva tiempo!

Comience aprendiendo diferentes idiomas y bibliotecas, como las bibliotecas HTML, CSS, JavaScript y JS. Practica usando estos. Además, entienda DOM y cómo funciona.

Mientras tanto, acostúmbrese a leer blogs técnicos que se centran en el diseño y desarrollo front-end . Debe tener muy claro en su mente que el objetivo de cualquier sitio web no es solo proporcionar el resultado final, sino que proporcionar esto debería llevar un tiempo mínimo.

¡Crear un sitio web más rápido no es solo una elección, sino una necesidad absoluta!

Aprenda algunos conceptos básicos sobre Twitter Bootstrap, HTML5 Boilerplate y Foundation. Este será tu primer gran paso.

Ahora lea sobre UI y UX, y aprenda sobre HTML5, CSS3, Angular 1 y 2. Comience a usar esto siempre que sea posible y practíquelo.

Después de tener una buena idea sobre estas tecnologías e idiomas, debe comenzar con un marco. Pruebe React stack, es decir, React.js + Redux + Webpack: esto le ayudará mucho a comprender cómo se usa el marco y por qué es necesario.

Intente optimizar su trabajo y familiarícese con herramientas como Bower y Yeoman.

La práctica es la parte más importante en el aprendizaje del desarrollo front-end. Nada puede reemplazar esta parte. Cuanto más practiques, más pronto te convertirás en un desarrollador front-end. Puede ver videos disponibles en Internet para comprender mejor las interfaces y cómo funcionan las herramientas.

Hay muchas oportunidades en el desarrollo front-end y cuanto más conocimiento tenga sobre esto, más fácil será para usted y más rápido será su sitio web.

¡Mantente enfocado y tranquilo! ¡Todos sus problemas tienen una solución en Internet!

Estas son algunas de las formas en que Philip Walton, que es ingeniero en Google, se convirtió en un mejor desarrollador front-end.

• No solo resuelva problemas, descubra lo que realmente está sucediendo.

Demasiadas personas que escriben tinker CSS y JavaScript hasta que encuentran algo que funciona, y luego simplemente continúan.

“¿Por qué el float: left rompe el elemento que contiene la altura del contenedor?”

“¿Es este overflow: hidden realmente necesario para resolver el problema anterior?”.

Tomarse el tiempo para descubrir por qué su truco funciona puede parecer costoso ahora, pero prometo que le ahorrará tiempo en el futuro. Tener una comprensión más completa de los sistemas en los que está trabajando significará menos trabajo de adivinar y verificar en el futuro.

• Lee las especificaciones

Los ” grandes ” ingenieros de front-end son a menudo las personas que están a la vanguardia del cambio, adoptan nuevas tecnologías antes de ser convencionales e incluso contribuyen al desarrollo de esas tecnologías. Si cultivas tu habilidad para mirar una especificación e imaginas cómo funcionará una tecnología antes de poder jugar con ella en un navegador, serás parte de un grupo selecto que puede hablar e influir en el desarrollo de esa especificación.

• Leer el código de otras personas

Leer el código de otras personas, por diversión, probablemente no sea tu idea de un divertido sábado por la noche, pero es sin duda una de las mejores maneras de convertirte en un mejor desarrollador.

De hecho, creo que uno de los errores más grandes que cometen las empresas al contratar nuevos ingenieros es que solo les piden que escriban código, código nuevo, desde cero. Nunca he estado en una entrevista en la que me pidieron que leyera un código existente, encontrara los problemas con él y luego lo solucionara. Es realmente muy malo porque la mayor parte de su tiempo como ingeniero se dedica a agregar o cambiar una base de código existente. Raramente estás construyendo algo nuevo desde cero.

• Trabaja con personas más inteligentes que tú

Tengo la impresión de que hay muchos más desarrolladores front-end que desean trabajar por cuenta propia (o trabajar de otro modo a tiempo completo) que los desarrolladores back-end con el mismo objetivo. Tal vez sea porque las personas de front-end tienden a ser autodidactas y las personas de back-end tienden a provenir de la academia.

El problema de ser autodidacta y también trabajar para ti mismo es que generalmente no obtienes el beneficio de aprender de personas más inteligentes que tú. No tiene a nadie para intercambiar ideas o revisar su código.

• Reinventar la rueda

Reinventar la rueda es malo para los negocios, pero es genial para aprender. Puede sentirse tentado a tomar ese widget de escritura anticipada o biblioteca de delegación de eventos de npm, pero imagine cuánto más aprendería al tratar de construir esas cosas usted mismo.

Pero en este artículo estoy hablando sobre cómo pasar de bueno a excelente. La mayoría de las personas que considero excelentes en esta industria son los creadores o mantenedores de bibliotecas muy populares que uso todo el tiempo.

• Aprenda a anticipar cambios futuros en el panorama del navegador

Una de las principales diferencias entre el código frontal y el back-end es que el código back-end generalmente se ejecuta en un entorno que está bajo su control. El extremo frontal, por el contrario, está completamente fuera de su control. La plataforma o dispositivo que tienen sus usuarios podría cambiar por completo en cualquier momento, y su código debe ser capaz de manejarlo con gracia.

Entiendo que en el mundo real, la detección de características no funciona el 100% del tiempo, y a veces tiene que depender del comportamiento defectuoso o de los navegadores de la lista blanca cuya función detecta erróneamente falsos positivos (o negativos), pero cada vez que lo hace es absolutamente crítico que anticipe el futuro casi seguro donde estos errores ya no existen.

• Escribe sobre lo que aprendes

Por último, pero no menos importante, debes escribir sobre lo que aprendes. Hay muchas buenas razones para hacerlo, pero quizás la mejor razón es que te obliga a comprender mejor el tema. Si no puede explicar cómo funciona algo, hay una buena posibilidad de que realmente no lo entienda usted mismo. Y a menudo no te das cuenta de que no lo entiendes hasta que intentas escribirlo.

En mi experiencia, escribir, dar charlas y crear demos ha sido una de las mejores maneras de forzarme a sumergirme y comprender completamente algo, por dentro y por fuera. Incluso si nadie lee lo que escribes, el proceso de hacerlo vale más que la pena.

Echa un vistazo a esto algunos puntos que es realmente bueno para convertirse en un mejor desarrollador de interfaz de usuario .

1. Organiza tus deportes

La supervisión principal y sorprendentemente extraordinariamente cotidiana a pesar de los ingenieros superiores es que la gran mayoría de la gente no se instala. Es difícil, no reconocemos una manera de configurar y sentimos que ya no es nuestra carrera. Esa es la razón por la que evitamos regularmente este paso vital.

2. Sea proactivo

No hay nada más horrible que decirle a su consumidor o supervisor que las cosas están tomando más tiempo de lo anticipado y que la empresa no se transmitirá a tiempo. Destacar proactivamente cualquier barricada o aplazamiento es una técnica efectiva para mantener a cualquiera optimista.

Está bien si las cosas tardan más que al principio organizadas, sin embargo, ahora no es muy bueno preservar esto para usted. ¿Estás apilado con un gusano o no puedes experimentar algo? Usted no es el más simple, incluso los ingenieros más capacitados tienen problemas comparables en prácticamente todos los proyectos.

Sobre el factor mientras esto ocurre, ¡sácalo!

cada persona agradecerá que esté probando su primera clase y reteniéndola en la cima con la mejora. Solo tiene que tomar 5 minutos, y dentro de la ocasión en que utiliza dispositivos del n. ° 1, mucho menos tiempo.

Te amarán por eso porque les ofrece la oportunidad de tener en cuenta un acuerdo B, que puede ser acercarse al comprador por más monedas o ampliar la fecha de vencimiento.

3. Participe

Estoy de acuerdo con que se destaca un destacado entre los rasgos esenciales máximos en este resumen. Se están descargando nuevos artilugios, módulos, sistemas y dialectos de manera casi constante. Es vital que permanezca abierto a todas las cosas nuevas y que pueda esforzarse por analizarlas y comprenderlas.

Lo horrible y dentro del tiempo intermedio la magnificencia del desarrollo de abandono frontal es que está presionando por adelantado. Esto significa que podría convertirse inesperadamente en un consultor, además sus aptitudes pueden volverse obsoletas de inmediato.

4. Ponga las fuentes en sus aptitudes.

El desarrollo frontal y todo lo reconocido con Es una habilidad inherente más efectiva y cualquier habilidad, aceptarla como verdadera con ella o no, es aprendible. Debes poner las fuentes en ti mismo teniendo en cuenta el propósito de renunciar a aumentar. No me refiero a quemar monedas en guías costosas, instrucciones o libros, también estoy considerando contribuir lentamente.

No hay una ruta limpia hacia el logro e investiga la demostración de que se necesitan alrededor de 10000 horas para alcanzar una capacidad, eso es alrededor de 4 años ensayando 40 horas por semana.

5. Esforzarse ahora para no ir al país Seguro a la totalidad

En cualquier caso, pronunciar Seguro para todo puede traicionarlo y puede terminar operando por menos, estar debajo de la bomba y preocupado. Verifique exactamente cuáles son los requisitos del proyecto y ajústelos en sus talentos. Del mismo modo, asegúrese de invitar a qué programas necesita reforzar.

Puede que no haya nada incorrecto en destacar qué componentes del desafío requerirían una ayuda de alto nivel o deberían dejarse de lado para el alcance de la tarea.

6. Trate de no nación NO a la totalidad

En conflicto con el factor pasado, además, la propiedad vital de una persona que trabaja en el fondo es posible y está adquiriendo nuevos conocimientos útiles en cada misión. cada empresa es un enfoque notable para actualizar algo que no conoces, de lo contrario exploras un nuevo territorio con curiosidad.

Al pronunciar el no en su totalidad y simplemente haciendo los asuntos que conoce aproximadamente, básicamente está cerrando las entradas para la mejora individual y profesional.

Aquí hay 8 consejos para ayudarlo a convertirse en un mejor desarrollador front-end .
1. Planifica tus proyectos
Una buena planificación puede ayudarlo a:

• ahorrarte mucho tiempo
• reducir el estrés cuando se acerca la fecha límite
• cómodamente a tiempo todos los días

Herramientas útiles para planificar

• Workflowy: volcar una lista de plantillas en una lista de viñetas de Workflowy
• Writemaps: cree un mapa del sitio web
• Trello: crea un tablero de proyecto y tarjetas para cada una de tus plantillas y elementos
• Lápiz y papel : todo lo anterior de una manera antigua pero efectiva

La planificación es importante, pero no siempre todo sale tan bien planificado .

2. Sea proactivo
Razones por las cuales ser proactivo:

• te hace ver más profesional
• aumenta tu credibilidad
• ayuda a construir una confianza

Establecer un recordatorio diario o semanal lo ayudará a no olvidarse nunca de proporcionar una actualización del progreso del proyecto.
Herramientas útiles para recordatorios

• Google Calendar: crea un evento recurrente simple
• Evernote: cree una nota con una lista de verificación de sus tareas y establezca un recordatorio
• Recordatorios de iOS : no necesita una descripción, ¿verdad?

3. Sé curioso
Casi todos los días se lanzan nuevas herramientas, complementos, técnicas e idiomas.
Es muy importante que permanezca abierto a todas las cosas nuevas y haga un esfuerzo para explorarlas y comprenderlas.
Lo malo y al mismo tiempo la belleza del desarrollo front-end es que avanza muy rápido .
Esto significa que puede convertirse rápidamente en un experto, pero también sus habilidades pueden quedar obsoletas rápidamente .
Fuentes útiles para noticias de desarrollo front-end

• CSS semanal
• HTML5 semanal
• JavaScript semanal
• Diseño receptivo semanal
• Los 5 mejores enlaces de diseño, todos los días
• Diseño web semanal
• Automatización Frontend con Grunt

4. Invierte en tus habilidades
Tendrá que invertir en usted mismo para crecer . No me refiero a gastar dinero en cursos caros, seminarios o libros, estoy más pensando en invertir su tiempo .
No hay atajo para el éxito y las investigaciones muestran que se necesitan alrededor de 10000 horas para dominar una habilidad , es decir, alrededor de 4 años practicando 40 horas a la semana .
Prepárese para aguantar hasta altas horas de la noche explorando otros sitios web, experimentando con nuevos complementos y marcos, leyendo blogs de desarrollo web, escuchando podcasts y masticando miles de tweets.
Blogs útiles y podcasts para desarrolladores front-end

• Trucos CSS
• Codrops
• ShopTalk Podcast
• Boagworld Podcast
• Aplicar filtro Podcast

5. No digas SI a todo
Los clientes y los jefes son exigentes , todos lo sabemos.
Pero decir sí a todo eventualmente puede volverse en su contra y terminará trabajando por menos, quedando bajo la bomba y estresado .
Evalúe cuidadosamente cuáles son los requisitos del proyecto y alinee eso con sus habilidades . También asegúrese de preguntar qué navegadores necesita admitir.
No hay nada de malo en resaltar qué partes del proyecto necesitarán una asistencia de alto nivel o deberán quedar fuera del alcance del proyecto .
Al resaltar estos principios en la línea de tiempo del proyecto , todo el proceso, de principio a fin, será mucho más fácil para todos.

6. No digas NO a todo
Contradictorio con el punto anterior, pero también un atributo importante de un desarrollador front-end altamente efectivo es aprender algo nuevo en cada proyecto .
Cada proyecto es una excelente manera de implementar una característica con la que no está familiarizado o hace algo nuevo por primera vez .
Al decir no a todo y solo hacer las cosas con las que está familiarizado, esencialmente está cerrando las puertas para el desarrollo personal y profesional .
Pronto se ahogará en el mar de los desarrolladores promedio .
Por otro lado, explorar lo desconocido le dará una gran sensación de logro, satisfacción y lo mantendrá hambriento para aprender cosas nuevas una y otra vez.

7. Encuentra un mentor
Un buen mentor te ayudará a:

• para obtener asesoramiento sobre el enfoque de su proyecto
• para tener un sentido de dirección
• para ayudarlo a prever posibles obstáculos

8. Mantente activo
Trabajar en la industria digital significa que pasamos mucho tiempo mirando la pantalla de la computadora.
Sentarse 40-60 horas en la oficina tarde o temprano tendrá su precio.
Es por eso que es de vital importancia que cuide su cuerpo de la misma manera que se ocupa de mantener su marcado bien organizado y comentar todo lo que hace.

Hasta cierto punto, puede depender de dónde se encuentre geográficamente, sin embargo, como desarrollador, siempre puede encontrar trabajo a través de www.

Entonces, una forma sería ir a la escuela para eso, pero me imagino que en esta profesión quizás no necesites ir a la escuela, por lo que otra forma sería la siguiente:

1. Busque algunas compañías que puedan buscar desarrolladores front-end y observe los requisitos de habilidades técnicas para estos trabajos. No mire a las pequeñas empresas, ya que quieren que sea Full-stack, sin embargo, al principio necesita concentrarse. La segunda parte de este paso es encontrar compañías hipotéticas para las que desea trabajar. Busque ambientes y trabajos que lo emocionen.

2. Comience a aprender HTML, CSS y JavaScript para empezar: primero crearía algunos sitios simples basados ​​en algunos patrones populares. (Consulte Squarespace u otros sitios similares para encontrar esos patrones). Me uniría a muchos foros y leería lo más posible, en primer lugar, solo sobre las tecnologías que mencioné anteriormente.

3. Cree algunos sitios que pueda mostrar, luego busque algunas pasantías, ya que realmente quiere pulir sus habilidades dentro de un entorno que pueda guiarlo y ayudarlo a aprender las mejores prácticas. Alternativamente, elija algunos proyectos en los que necesitaría trabajar con alguien de la tercera edad que podría ayudarlo cuando golpee una pared.

4. Encontraría algunos “Meetups” de desarrollo (o equivalentes) y me haría amigo de personas mayores que quieran compartir su experiencia. Busque múltiples mentores. Te gustaría encontrar a estas personas y hacer preguntas y aprender.

Conéctese y siga socialmente a todas las empresas que le interesan … Entonces, en su mente, tiene algún objetivo que desea alcanzar. No importa si más tarde puede decidir trabajar por su cuenta.

Este es el comienzo aproximado de un camino, y estoy seguro de que hay mucho que agregar aquí, pero creo que el esqueleto está aquí.

¡Buena suerte!

Ya hay muchos consejos y recursos excelentes aquí, por lo que intentaremos no repetir.

Técnicamente hablando, los siguientes pasos para usted serán:

• Aprenda algo de JavaScript y descubra cómo hacer más en el cliente
• Aprenda un script del lado del servidor y descubra cómo hacer más en su servidor

Dicho esto, a muchas personas les resulta difícil saber por dónde comenzar, y se sienten abrumados rápidamente por la gran cantidad de cosas que hay que aprender.

Entonces, mi consejo para usted es crear un proyecto que sea mucho más ambicioso que los anteriores, y luego averiguar qué habilidades necesita para que esto suceda.

Si el proyecto se parece a un blog, un sitio de admiradores, un foro, etc., entonces tiene una oportunidad de oro para avanzar en muchas áreas de desarrollo simultáneamente al aprender cómo implementar primero un Sistema de gestión de contenido gratuito como WordPress, Joomla o Drupal, y luego aprenda a personalizarlo en la medida que lo necesite. Cada uno de estos viene con una gran comunidad y una gran cantidad de excelentes complementos / extensiones gratuitos.

Aprender el desarrollo front end sobre las ruedas de un CMS mientras persigue sus propios objetivos creativos es una excelente manera de avanzar. Con solo pararse uno y ver todas sus partes móviles, habrá dado un gran paso adelante desde la codificación personalizada HTML y CSS desde cero.

En mi búsqueda continua para ser un mejor desarrollador, he encontrado que:

• Aprender Javascript siempre ha sido un esfuerzo difícil, vaya despacio e intente comprender e implementar todas las características básicas del lenguaje mientras reconoce y evita varias trampas y dificultades.
• Para descubrir los conceptos básicos de Javascript, use Javascript, las partes buenas o Eloquent Javascript. Preste especial atención a los patrones que le permiten modificar el enlace de este y también a los patrones que involucran funciones de orden superior.

• No se distraiga al hablar de ES2015 y demás, muchas de las características de la nueva versión del lenguaje son azúcar sintáctica sobre las ideas existentes. Por ahora también evite los marcos brillantes que afirman mejorar la productividad al proporcionar encantamientos mágicos.

Una vez que haya entendido los conceptos básicos de JS, le recomiendo encarecidamente el Libro de patrones de diseño de Addy Osmani. Creo que en este punto, también está listo para comprender los formatos de módulos populares, las herramientas de compilación (usando Nodejs por supuesto) y las herramientas de agrupación en Javascript. Elija su (s) posición (es) y siga adelante.

Ahora, es hora de que te des cuenta de configurar un editor estable, a estas alturas ya debes haberte dado cuenta de que notepad y notepad ++ ya no lo cortarán. Elija un editor, aprenda por dentro y por fuera, instale complementos y temas que aumenten la productividad. Aquí es donde estoy ahora y he puesto mi mira en las pruebas y ci una vez que esto haya terminado.

He usado bootstrap y semantic-ui como mis frameworks CSS, es posible que desee comprobar uno. Tengo entendido que para ser más productivos con CSS, los desarrolladores prefieren usar un preprocesador, para mí, aprender la sintaxis del preprocesador no es muy difícil, pero aprender a organizar su proyecto y aplicarlo bien es el verdadero desafío.

Echa un vistazo a algunas de las nuevas y sorprendentes API HTML5, como la API de geolocalización, la API de audio web, etc.

Ahora que comprende todos los conceptos básicos de Javascript, CSS es bastante importante que descubra lo que desea hacer. Puede crear aplicaciones móviles increíbles utilizando cordova, puede elegir un marco MV * como Angular o Ember y aprender a usarlo.

Además, encontrará git con bastante frecuencia, intente establecer un flujo de trabajo como git flow para domesticarlo.

Finalmente, nunca te alejes de un desafío y nunca tengas miedo de pedir ayuda. Además, al leer / mirar cosas, asegúrese de verificar los hechos para obtener información relevante (una vez pasé un día entero aprendiendo sobre WebSQL).

Una lista de recursos para comenzar (estoy más enfocado en js):

Compre Javascript: El buen libro de piezas en línea a precios bajos en India

http://eloquentjavascript.net

https://leanpub.com/javascriptal …

https://git-scm.com/book/en/v2

https://www.atlassian.com/git/tu …

https: //javascriptweblog.wordpre …

http://www.nczonline.net/

http://addyosmani.com/resources/ …

https://jakearchibald.com/

https://developers.google.com/we …

Una introducción a la programación funcional creada por Mattias Petter Johansson:

Programación funcional en JavaScript.

Creo que la premisa de tu pregunta es incorrecta. Leer publicaciones de blog y libros solo puede llevarte lejos y no necesariamente una fórmula para convertirte en un mejor desarrollador front-end.
El mejor método para perfeccionar sus habilidades es sumergirse y ensuciarse las manos. Si tiene interés en cierto aspecto del desarrollo front-end, encuentre un proyecto o cree un proyecto y comience a codificar. Una vez que esté en el centro del desarrollo y encuentre un problema, buscar en Google el problema y resolverlo es la mejor manera de aprender.
Es durante este proceso que también puede ver una tendencia de los gurús dentro del campo que probablemente aparecerá durante su búsqueda. Te familiarizarás con Addy Osmani mientras aprendes sobre los frameworks MV *. Conocerás a Paul Irish cuando te encuentres con un problema en HTML5. Chris Coyier será tu mentor en CSS. Puede comenzar a seguir a estas personas y seguir a quienes están siguiendo.
También encuentre reuniones o conferencias locales y disfrute de desarrolladores con ideas afines.
Un último consejo, escribe lo que aprendes a medida que lo aprendes. La mejor manera de entender completamente algo es cuando intentas explicárselo a otra persona.

Las otras respuestas en esta pregunta enumeran una gran cantidad de cosas que puede leer para ponerse al día sobre lo que está más actualizado en HTML / CSS / Javascript. Si no está familiarizado con estas tecnologías, la primera tarea es ponerse al día con los avances que se han realizado en los últimos 2-3 años.

Sin embargo, ser un mejor desarrollador front-end es un proceso continuo de aprendizaje (y, a veces, que contribuye a) marcos, paradigmas y procesos front-end. Descubrí que la mejor manera de hacerlo es pasar el rato o trabajar con otros desarrolladores front-end realmente buenos. Es bastante natural, si lee y codifica de forma aislada, salir con un conjunto específico de tecnologías web, y tendría que hacer la misma pregunta un año después.

Un desarrollador front-end es alguien que es responsable del desarrollo de esos elementos de un sitio web que el cliente ve e interactúa directamente. Es una combinación de habilidades de programación y estética. Adquirir las habilidades para ser un buen desarrollador front-end es bastante sencillo. Se trata de aprender las habilidades de programación correctas y desarrollar una sensibilidad de diseño.

Pero, ¿qué después de eso? ¿Todos los que tienen habilidades de programación y sensibilidad de diseño se convierten en un buen desarrollador frontal? Realmente no.

Es la actitud lo que importa. El desarrollador front-end, Zach Leatherman, ha escrito una hermosa guía de principios que define un buen desarrollador front-end. Hay 16 principios que cada desarrollador front-end debería seguir. Son los siguientes:

Primero pondré las necesidades del usuario, por encima de mis necesidades como desarrollador . Porque, al final del día, usted está creando el producto para el usuario, no para usted mismo.

La mejora progresiva y el JavaScript discreto son mis herramientas . Ambas son estrategias y principios para el diseño web que usa tecnologías web en capas para que el producto pueda usarse bajo cualquier restricción de tecnología y ancho de banda.

La simplicidad es respeto : el enfoque del usuario vuelve a aparecer aquí, ya que un ingeniero front-end debe mirar interfaces y diseños complicados tan malos como faltarle el respeto al usuario.

Enseñaré a mis amigos y familiares que la elección del navegador web es importante : porque el usuario debe usar buenos productos.

Creo en el poder de la web abierta : en el esfuerzo constante de proporcionar contenido accesible para dispositivos independientes frente a la ubicuidad de la App Store.

Reconozco que el rendimiento es crítico , porque “funciona en mi máquina” ya no es suficiente. Un buen desarrollador front-end debe tener en cuenta el hardware limitado, la latencia deficiente y las situaciones de bajo ancho de banda.

Aprenderé en la raíz, no en la abstracción : JAVASCRIPT ANTES DE JQUERY o YUI, Prototype, Mootools, et al.

Creo que el código fuente abierto y las herramientas libres de regalías representan el mejor futuro para la Web : Zach comparte que esto es particularmente cierto para los formatos de archivo y códecs para imágenes, audio o video.

No subestimaré la importancia de la accesibilidad , ya que una gran cantidad de usuarios de computadoras tienen discapacidades visuales. Zach avanza un poco y espera que los desarrolladores front-end sean responsables de proporcionar acceso integral a los usuarios que prefieran usar el teclado o el mouse; en proporcionar un formato limpio de impresión amigable; en proporcionar contenido a dispositivos de diversas capacidades tecnológicas.

Devolveré a la comunidad : especialmente en el contexto actual, le debemos mucho a la comunidad, por lo que nos ha dado.

Continuaré fomentando ambos hemisferios de mi cerebro . Porque, para los desarrolladores front-end, el arte es tan importante como las matemáticas.

Haré todo lo posible para mantener mi conocimiento actualizado : un desarrollador front-end debe darse cuenta de que no puede aprender todo y debe tener en cuenta lo que no sabe.

Acepto mis responsabilidades para ver la fuente : para usar enfoques que sean compatibles con los navegadores web actuales y futuros.

Mi código será portátil : esto significa tener en cuenta el uso excesivo de las peculiaridades de implementación del navegador

Elegiré la herramienta adecuada para el trabajo , porque.

Me esforzaré por crear aplicaciones seguras : esto no está fuera del alcance de un desarrollador front-end. Cosas simples como escapar correctamente de la salida y el código para evitar XSS y CSRF.

Gracias por leer !

Tú empacas tus maletas. Verifica el nivel de aceite y la presión de los neumáticos de su automóvil. Pones los últimos podcasts Rainmaker.FM en tu estéreo y estás listo para emprender el viaje de 2.850 millas desde Washington, DC hasta el Festival de Jazz de Fillmore.

A pesar de un sistema de navegación poco fiable, atascos de tráfico, trabajo en la carretera, varias discusiones con su amigo, un motel sucio y una llanta pinchada, llega a San Francisco seis días después.

Estas agotada Te duele la espalda. Tus nervios están deshilachados.

Pero llegas justo a tiempo para el concierto de apertura.

Las páginas frontales (aterrizaje) del sitio web son como ese viaje por carretera

Pero hay una gran diferencia.

Si bien usted se comprometió a llegar a San Francisco a tiempo, sus visitantes de la web están menos orientados a los objetivos.

Las instrucciones poco claras hacen que se den la vuelta y hagan clic . Y ahí es cuando podrías perderlos para siempre.

¿Qué puede hacer para crear un viaje tranquilo para sus visitantes web?

Ahora…

Si puede resolver eso, se convertirá en un mejor desarrollador front-end.

El front-end tiene más que ver con imágenes que con lógica.

Entonces, todo lo que necesitas hacer es embellecer las cosas .

Y todos los demás hacen eso. Entonces necesitas hacerlos más bonitos.

No soy un desarrollador front-end, y lo que creo que se ve bien podría aburrirlo hasta las lágrimas.

Es por eso que me escondo en el back-end, pateando el servidor.

Pero te recomiendo que tomes un curso de UI / UX para poner tus habilidades de diseño en esteroides.

Udemy es un excelente lugar para comenzar estos cursos. Puede obtener algunos cursos GRATUITOS y premium que realmente pueden agudizar sus habilidades de diseño.

La mejor manera de aprender es practicando …

Alternativamente, puede ver los elegantes diseños de otros desarrolladores frontales disponibles en sitios web populares e intentar realizar ingeniería inversa . Intenta crearlo tú mismo.

¡Con el tiempo dominas cómo abrazar la simplicidad! Así es como te conviertes en un mejor desarrollador front-end. Debido a que la mayoría de las páginas web son demasiado complejas para saber dónde hacer clic a continuación.

¡Éxito!

Dado que usted dice que ha estado haciendo HTML y CSS durante años, entonces asumo que tiene sus conocimientos básicos completos.

Ahora necesitas progresar en eso. Entonces, ¿cómo lo hacemos? (Comenzaré asumiendo que todavía eres un novato en JS). Te presentaré una lista de tareas pendientes de mi parte:

1. Aprende JS , juega en javascript y crea páginas con HTML, CSS y JS.
2. Una vez que haya terminado con los conceptos básicos de JS, a continuación vienen sus bibliotecas . Intenta aprender jquery y date cuenta de cómo mejora tu vida de muchas maneras.
3. Luego vienen los marcos . Intenta aprender algo simple, como Bootstrap, o materializa CSS. Estos proporcionan componentes dulces que lo ayudan a construir una interfaz de usuario mejor y más rica.
4. Ahora, la lista de marcos no ha terminado. Continúe para aprender sobre marcos avanzados como Angular, React, Vue, Ember, etc. Investigue un poco sobre eso, elija un marco e intente crear aplicaciones en él. Incluso pueden tener algunas herramientas que ayudan
5. Los temas más avanzados en el front-end incluirían sus preprocesadores CSS, como Sass o menos.
6. Continuando, profundizaré en el desarrollo completo de la pila. Ahora es el momento de ver toda la pila de aplicaciones y no solo el front-end. Debe comenzar a saber cómo se crean las aplicaciones web, cuáles son las diferentes capas (front-end, servidor y DB).
7. Ahora la codificación del lado del servidor tiene muchas tecnologías, puede usar PHP, Java EE, Django (marco basado en Python), Nodo, etc. Haga una investigación básica, aprenda un idioma y comience a aprender. Cada lenguaje puede venir con un marco propio, para facilitarle la vida, por ejemplo: Laravel es un marco basado en PHP, Express es un marco con Nodo, etc.
8. Ahora mire en el lado del almacenamiento, después de todo, necesitará un almacenamiento para almacenar todos sus datos para aplicaciones web. Puede buscar en bases de datos relacionales como MySQL, o en algunos DB NoSQL como Mongo o Cassandra .
9. Además, es posible que tenga que buscar en la pila de tecnología que pueda sentir deseable para construir su aplicación, y cuando digo pila de tecnología, significa toda la pila de aplicaciones. Puede ser una pila MEAN (Mongo, Express, Angular, Node) o quizás una pila MERN (Mongo, Express, React, Node).
10. Tenga una idea básica sobre el alojamiento web, cómo comprar doamins, etc.
11. Aprenda algunos buenos estándares de codificación, o conceptos de codificación más limpios, per se, a medida que aumenta sus habilidades.
12. Tenga una idea básica sobre los corredores de tareas como Grunt, Gulp, información sobre administradores de paquetes como npm, etc.
13. Aprenda patrones de diseño si es posible. Le ayuda mucho a eliminar todas las molestias en su código.
14. Por supuesto, dentro de todo esto, necesita experiencia en el IDE que está utilizando. Para la mayoría de los casos, editores como Atom, Sublime o Notepad ++ funcionan. Pero es posible que también deba buscar algún IDE, un buen ejemplo sería IntelliJ.

Espero que obtengas algún beneficio de los punteros anteriores, que podrían ayudarte a mejorar tu juego.

Front-end versus Back-end versus Full Stack

Como pie tierno, puede reflexionar sobre qué zona de avance web buscar. En caso de que no esté 100% más allá de cualquier duda sobre cuál tomar después, le sugiero que lea esta entrada del blog sobre el método más competente para terminar notablemente un diseñador de pila completa.

En caso de que ya no tenga ninguna duda sobre el avance del front-end, simplemente adelante y siga leyendo.

Se requieren habilidades de avance front-end

Cuando comience en el front-end, no se asegurará de dónde comenzar. Hay una variedad de opciones de dialecto de programación accesible perspicaz, así como con respecto a aparatos, sistemas e innovaciones también.

Así que asegúrese de estar preparado para el vasto océano.

1. Aprenda HTML y CSS. Además, resultó ser excelente en eso.

Me imagino que no hay posibilidad de evitarlo. Aprende HTML y CSS. ¿Por qué? Ya que los detalles importan.

Hay una amplia gama de diversos cursos en línea accesibles sobre la mejor manera de comenzar con HTML y CSS. Para comenzar con las cosas primero. Únase a cursos en línea como Coursera o Group Treehouse

2. Ensamblar cosas.

Jugar con (pequeños) componentes de la interfaz de usuario es algo seguro. Hacer una página o sitio de presentación genuina es algo diferente de lo que se espera.

Ten en cuenta que te provocas creando primeros componentes sensibles.

3. Leer, leer, leer

Me imagino que no hay posibilidad de evitar esto. Confía en eso o no. Estás estudiando aptitudes que afectan significativamente tu forma de convertirte en un increíble ingeniero front-end. Particularmente al comenzar, se requiere una considerable medida de lectura. ¿Por qué?

Al principio, presumiblemente leerá una considerable cantidad de artículos, ayudantes y manuales sobre la mejor manera de hacer diversas cosas. Además, comenzará a leer el código de otras personas.

4. Hay un mundo completamente diferente para la mejora de front-end que la construcción de un sitio

En el caso de que tomaste después de mis consejos del uno al tres, lo más probable es que hayas hecho un curso oficialmente o hayas leído una tonelada de ejercicios de instrucción y estés listo para armar un sitio.

En cualquier caso, eso no se compara con ser un “diseñador front-end”.

Saber cómo fabricar un sitio es una pequeña parte de la perplejidad frontal.

5. Conoce tus dispositivos

A medida que comienza su viaje con mejoras iniciales, debe elegir su caja de herramientas y las administraciones que tiene para hacer su vida menos exigente.

Conocer las diversas opciones de herramientas es algo crítico.

Los dispositivos extraordinarios le permitirán actualizar y mecanizar su proceso de trabajo de mejora de front-end.

6. El control de variantes te perdonará la vida.

Muy bien, quizás esto suene un poco exagerado.

Sin embargo, créame en eso. El control de representación le ahorrará algunas tardes inquietas.

En lugar de intentar algo y hacer que explote en tu cara o golpear un comando un billón de veces, puedes desechar tu rama y volver a lo que ya estaba funcionando.

7. Sé el mediador

Como ingeniero de front-end, debe saber que se coloca en algún tipo de parte intermedia.

Como punto intermedio, usted está en contacto con individuos de control de calidad, clientes, especialistas en UX y diferentes ingenieros.

Debe contemplar puntos de vista alternativos.

8. Trata de no surgir.

En el camino, se preguntará por qué razón hace esto y es posible que deba detenerse.

Puede ser tentador simplemente rendirse. En cualquier caso, no lo hagas. En caso de que lo estés para entonces, solo tengo una guía para ti: no te rindas.

Ponga a un lado quizás un par de horas cada día para aprender.

Tómese muchos descansos y asegúrese de conocer realmente los rudimentos. Además, nunca surja.

En la escuela Holberton, enseñamos a nuestros estudiantes más de lo que mencioné anteriormente, somos los mejores en rehabilitación de estudiantes.