¿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?

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.

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 sobre 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, como 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.

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 si no lo has hecho todavía.
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
   La reducción temprana de los errores 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!

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

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.

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.

El desarrollo web front-end es la táctica de crear HTML, JavaScript y CSS para una aplicación web o sitio web o aplicación móvil para que un usuario pueda verlos y comunicarse con ellos directamente. El desafío relacionado con el desarrollo front-end sería que las técnicas y herramientas utilizadas para construir el front-end de un sitio web o aplicación se actualicen continuamente. Por lo tanto, el desarrollador web siempre debe estar al tanto de cómo se está desarrollando el campo.

¿Cómo convertirse en desarrollador front-end?

1. Seguir las tecnologías que debes aprender

• Aprende y perita en HTML y CSS
• Aprender Aprender Javascript
• Aprender CSS Framework – BOOTSTRAP
• Aprenda Angular y ReactJS

2. Practica algún proyecto en tiempo real

3. Hacer algunos proyectos independientes

4. Crear un sitio web propio

5. enumere sus principales sitios de escaparate

En el enlace del blog, Cómo aprender y convertirse en desarrollador front-end y cuáles son las mejores formas de desarrollar sus habilidades de desarrollador front-end.

En 2017, para ser un mejor desarrollador web front-end, debe tener un conocimiento y una práctica básicos (mucha práctica).

El front-end de un sitio web es la parte con la que los usuarios interactúan . Todo lo que ve cuando navega por Internet, desde fuentes y colores hasta menús desplegables y controles deslizantes, es un trabajo de front-end controlado por el navegador de su computadora. [1]

Entonces necesitas saber como base:

• HTML ,
• CSS ,
• Javascript

El siguiente paso es aprender al menos uno de los marcos como:

• Bootstrap ,
• AngularJS ,
• Foundation

y bibliotecas como:

• jQuery ,
• LESS

---

Si desea configurar su juego, debería pensar en Full Stack, no en Front-End.

La idea es que un desarrollador de pila completa pueda trabajar de manera cruzada en la “pila” completa de tecnología, es decir, tanto en el front end como en el back end. Los desarrolladores de pila completa ofrecen el paquete completo.

Por lo tanto, debe agregar a la lista anterior una de estas habilidades de back-end:

• PHP
• Ruby
• Python
• Java
• .Net .

Otra parte es el trabajo de base de datos. Puedes aprender uno de estos:

• MySQL
• PostgreSQL ,
• MS SQL ,
• Oracle

Similar a Front-End, en Back-End también hay algunos marcos populares. Para PHP hay:

• Symfony
• CakePHP ,
• Zend

También será útil usar software de control de versiones como:

• Git o
• SVN .

---

¡Aquí hay una gran guía sobre cómo convertirse en un desarrollador web front-end! [2]

1. Aprende HTML y CSS. Y llegar a ser bueno en eso.
2. Construir cosas. Jugar con elementos de UI (pequeños) es una cosa.
3. Leer leer leer.
4. El desarrollo front-end es más que construir un sitio web.
5. Conoce tus herramientas.
6. El control de versiones te salvará la vida.
7. Se el intermediario.
8. No te apresures.
9. Sumérgete profundamente en los marcos.
10. Participe en proyectos de código abierto.

---

Y el último, pero definitivamente no menos importante, necesitas practicar y aprender mucho . Este es el único camino al éxito.

Espero haber ayudado!

Notas al pie

[1] Desarrolladores web front-end vs back-end vs full stack

[2] ¡Cómo convertirte en un desarrollador front-end!

Como otros han cubierto recursos específicos, daré un paso atrás para la vista de los 10.000.

En lugar de simplemente aprender idiomas y marcos de trabajo, investigue un poco y descubra hacia dónde se dirigen las cosas en el campo que le interesa. Esto puede ser tan general como ‘desarrollo front-end’ o tan específico como ‘desarrollo front-end para una agencia que trabaja con grandes instituciones financieras’. Hacer esto le mostrará qué herramientas necesita dominar y qué herramientas pueden quedar en segundo plano. Hay demasiadas cosas emergentes en nuestro campo para aprender realmente cada marco y herramienta.

Por ejemplo, si bien los marcos de JavaScript frontales como backbone / ember / angular están ganando una tracción muy fuerte, todavía tienen un uso muy limitado en un entorno de agencia. (según mi experiencia, las agencias solo parecen utilizarlas para aplicaciones, no para sitios web que parecen abarcar el 90% del trabajo de sus clientes)

Tenga cuidado de no solo enfocarse en herramientas / frameworks / idiomas. El nivel de su desarrollo puede saltar drásticamente al profundizar en el proceso real y pensar detrás de la codificación. Elementos específicos como Arquitectura escalable y modular para CSS u OOP (Introducción a JavaScript orientado a objetos), etc.

editar: Además, el navegador web, la interfaz y los estándares de Paul Irish siguen.

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 se alejen . 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!

¿Quieres llevar tu carrera de software al siguiente nivel? Descargue mi libro sobre Cómo convertirse en un desarrollador de software de $ 50 / hora en 7 simples pasos y comience hoy mismo su carrera en software.

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!

Consulte nuestras habilidades y conocimientos de la industria. Debe mantenerse actualizado porque la industria está evolucionando. Pero, ¿cómo te vuelves MEJOR?

Apartarse y atender al usuario.

Sube de nivel tus habilidades y mejora tu juego al poder crear algo que sea inherentemente ÚTIL y un buen diseño … lo haces a través del diseño UX 🙂 los dos campos están realmente relacionados desde el diseño web hasta el diseño UX y muchas habilidades se superponen

Sus habilidades mejorarán y creará sitios web más utilizables cuando comience a pensar en la experiencia del usuario. Eche un vistazo a este curso Diseño web para usabilidad Comenzará a aplicar sus habilidades a conceptos mucho más grandes para servir a un mayor propósito de crear un buen diseño 🙂 ¡hay muchas clases que tiene la IDF, todo un excelente material y a bajo costo!

1. Practique (cuantos más problemas enfrente, más se arruina, más aprende y eventualmente se convierte en un maestro).

2. Siempre estar actualizado con tecnología o tendencias . Las tecnologías front-end están creciendo rápidamente, antes era javascript / jquery y ahora tenemos cosas como BackboneJs, etc. Aprenda esas tecnologías y manténgase actualizado.

Para comenzar, ensucia tu mano con el código en lugar de leer libros . Personalmente, siempre preferiría Code antes que solo leer cosas. A menos que esté leyendo documentos de API.

Aquí hay algo que puede comenzar con http://www.codecademy.com/learn

Saludos 🙂

Escribí este artículo como respuesta a otra pregunta sobre Quora, pero creo que también se aplica aquí.

¿Qué hace el 1% superior de los ingenieros de software que el otro 99% no?

No es 100% específico para el front-end, pero lo más probable es que durante su carrera también desee / tenga que lidiar con otras partes además de eso.

CSS-Tricks. Este sitio web en sí está muy bien diseñado. Aunque el nombre del sitio web solo implica CSS, el sitio también contiene consejos y fragmentos de código relacionados con JQuery y Javascript. Codrops – Página 2 también contiene muchas buenas demostraciones y tutoriales para efectos CSS. Recomendaría los tutoriales web en línea de W3Schools para obtener información básica y ayuda sobre la sintaxis.

Voy a abordar esta pregunta de manera diferente.

Los mejores ingenieros que conozco:

• Nunca digas que no se puede hacer, pero te diré cuánto tiempo tomará.
• Informarle que el sistema es diferente de los planes. El sistema puede cambiar de varias maneras, pero eso puede llevar tiempo.
• Por último, después de todo eso, se detendrán y dirán: “espera, ¿qué estás tratando de lograr?” Luego proporcione un atajo épico.

Entonces, como ingeniero frontend cuando sus diseñadores / gerentes de producto le dan algo, su primera tarea es auditar lo que existe actualmente. Esta auditoría lo ayudará a dar estimaciones de tiempo, comprender lo que se debe desaprobar y describir los riesgos.

En un ejemplo simple, si su equipo le da un diseño con un nuevo menú desplegable, en lugar de simplemente construirlo, debe preguntar: “¿Qué pasa con el viejo menú desplegable? ¿Es esta una nueva variación o un accidente? ¿Deberíamos reemplazar todas las instancias del ¿desplegable antiguo? Si esta es solo una nueva variante, ¿cuál es el propósito de la variante? ¿Qué circunstancias le harían elegir esta sobre la otra? ”

Armado con esta información, puede a) dar una estimación para reemplazar el menú desplegable existente ob) implementar adecuadamente su componente para futuros casos de uso y … poder nombrarlo correctamente.

A menudo, al hacer estas preguntas, descubrí que los componentes no necesitan ser construidos en realidad, por varias razones. Esto a su vez reduce el tiempo que lleva construir el producto y evita componentes únicos que solo se usan en una sola ubicación.

Alternativamente, ha realizado la debida diligencia y ahora tiene un componente reutilizable.

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.

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 hacer nación NO en su 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.

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 suceda, ¡ 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