¿Cómo debería un desarrollador del lado del servidor comenzar a actualizar sus habilidades de IU web?

Le recomendaría que aprenda conceptos básicos de HTML5 y CSS2 / 3. La mejor manera de aprender esto es creando algo: obtenga un bolígrafo y papel y cree un sitio web para su mascota o algo así, palabra clave “mínimo”. Luego, aprenda los conceptos básicos de JavaScript, en lugar de jQuery. Aquí aprenderá cómo manipular su sitio web básico. En el camino, profundice un poco más en el papel de las variables, funciones y objetos en javascript (por lo menos, ayudará al aprender Angular y otros marcos JS). Piense en jQuery como abreviatura de JavaScript, un ejemplo básico:

Con Javascript: document.getElementById (‘myId’)
Con jQuery: $ (‘# myId’)

Hay una buena razón por la que usaría jQuery, pero como todas las bibliotecas y frameworks de JS están construidas en JS, es lógico aprender JS. No es difícil aprender lo básico.

Diseñando UIs
Muchos artículos recomiendan lo que ya se ha recomendado aquí:

  • recopilar elementos de la interfaz de usuario (por capturas de pantalla). Analiza el infierno del trabajo de otras personas
  • Encuentra un sitio web que te guste e intenta duplicarlo

Creo que es muy importante tener en cuenta que diferentes personas aprenden de manera diferente. Por mi parte, siempre encontré los dos puntos anteriores completamente aburridos.

En su lugar, le recomendaría que tome capturas de pantalla de sitios web completos , de hecho, haga un hábito diario pasar 20-30 minutos (todo el tiempo que desee) en la búsqueda de buenos diseños. Sitios como Pinterest hacen que encontrar y recolectar sea muy fácil. No te molestes en analizar, si te gusta, ¡sabes por qué te gusta!

Luego, después de unos intervalos de 20-30 minutos, las ideas comenzarán a girar frente a sus ojos. Obtenga un bolígrafo y papel y comience a garabatear su nuevo diseño. Por supuesto, después de que la idea esté en tu cabeza, no sigas mirando la captura de pantalla que provocó la idea.

De esta manera, con un poco de suerte, tendrá preguntas como “¿es posible hacer … con css”? Si acaba de copiar sitios web existentes, entonces evitará que piense así, personalmente creo que ese tipo de “lucha” aprendes más rápido

Si trabaja en una idea durante mucho tiempo y el resultado final no es tan bueno como lo imaginó. No te hagas pensar que el resultado es hermoso por el trabajo duro. No te conformes fácilmente, eso no significa ser duro contigo mismo, pero si algo no resultó ser genial, ponlo de lado y busca otra idea.

Marcos de Javascript

Después de que elimine los conceptos básicos anteriores (el diseño de la interfaz de usuario es un viaje continuo). Lea algunos artículos de comparación sobre los diferentes marcos (esto no lleva mucho tiempo), luego elija uno. Si es (por ejemplo) angular, mientras lo aprende intente construir algo. En lugar de pasar de un tutorial al siguiente y construir un mundo hola aquí y una lista de tareas allí, planifique su propio sitio web y luego elija lo que necesita de los tutoriales. Con cuatro tutoriales para principiantes, puede crear cuatro cosas que son inútiles, o puede crear un sitio web para su mascota (no será sorprendente, pero será mejor de lo que los tutoriales quieren que haga)

Creo que una vez que cree su primer sitio web front-end con html css y un poco de js, su interés lo guiará

Siempre digo que el mejor lugar para comenzar es en casa … así que comience por catalogar todas las características de la interfaz de usuario de los sitios web más populares o incluso los más interesantes que utiliza o con los que tropieza. Tener encabezados de categoría como:

  • menús
  • botones
  • arquitectura informacional
  • animaciones / movimiento
  • buscar
  • cuadrícula
  • incorporación (¡un tema candente reciente!)

Luego, tome capturas de pantalla o videos cortos (en el caso de animaciones) que muestren la función. Anota la basura de las tomas, explicando por qué funciona o cómo podría mejorarse. Olvídate de tratar de leerlo en un libro, cuando escriben sobre él, la tendencia ha terminado. Entonces, aprenda de lo que está en la web.

También puede capturar una página web completa y anotar alrededor de esta manera:

Si desea obtener información sobre cuáles son las habilidades actualizadas que los empleadores buscan en un desarrollador frontend, puede usar ReSkill.me, más específicamente la página de desarrolladores Frontend. Las habilidades están ordenadas por importancia, y también puede crear un programa de capacitación personalizado para llegar allí.

Esta es la forma más rápida de aprender, así como mantenerte motivado para seguir avanzando.
Semana 1.
Aprenda HTML básico: encabezado, Divs, hipervínculos, imágenes, span, div dentro de div
Cree una carpeta de imágenes y una carpeta CSS use en su archivo html para hacer referencia a las imágenes y la hoja de estilo.
Agregue una clase a sus Divs y aprenda los conceptos básicos de estilo (borde, sombra, color, tamaño de fuente, fondo, flotante, etc.)
controle las posiciones de los elementos (llevará tiempo hasta que domine): posicionamiento absoluto, posicionamiento relativo, absoluto dentro de un cuadro posicionado relativo (muy útil), flotación, visualización: bloque, bloque en línea, etc.). Juega un poco para ver cómo responden las cosas.

Semana 2 -4 – Tome una captura de pantalla de algún sitio web. Di Mashable Guarda todas las imágenes. e intente crear un sitio estático que se parezca a su Maqueta, una cosa a la vez. Comience con encabezado, luego cuadros individuales, imágenes, etc.

Semana 5: Comience a usar Javascrpit para realizar funciones simples, hacer clic, hacer transición y eventos de desplazamiento.

Semana 6-10: comienza a usar Jquery y da vida a tu maqueta.

Una vez que use Jquery, su CSS estará en mal estado debido a los valores predeterminados de Jquery. Luego debe guardar el estilo localmente y realizar los cambios que desee.

Para la semana 12, espero que tenga un sitio en localhost que se vea como mashable.

A continuación, elija otro sitio web de aspecto muy diferente e intente colocar elementos como el nuevo sitio web. Te quedarás atrapado a medida que los elementos saltan, pero tarde o temprano lo harás bien.

Como puede replicar dos sitios web, descubra cómo hacer que el sitio responda con CSS condicional.

Cuantas más maquetas / capturas de pantalla pueda replicar, más confianza ganará.

Sí, necesitas un plan de juego.

  1. Comience con Html, primero debe conocer las etiquetas html básicas. Lea sobre esto en w3schools
  2. Inicie un curso de Codeacademy de Javascript lado a lado e intente leer algunos buenos libros electrónicos
  3. Una vez que te sientas cómodo con ambos. Inicie un curso de Jquery en Codeacademy o udacity u otro sitio web. (Opcional)
  4. Desafíate a ti mismo para construir un sitio web básico usando html, js
  5. Si lo desea, puede tomar cursos de php o python.

Aprender e implementar debe ser la mentalidad

Learning Frameworks no es una gran cosa. Learning Concepts es una gran cosa.
Si conoce OOPS, la mayoría de los mismos principios se pueden aplicar a todos los idiomas

Sugeriría que primero busque el lenguaje y luego los marcos. Personalmente, nunca me gustaron los chicos que hacen Jquery antes de JavaScript o HTML5 antes de html. porque nunca sabrás los conceptos detrás de esto.

PD: Fui tester durante 2 años y luego me convertí en FullStack Dev.