¿Cómo practico el desarrollo front-end?

Solo puedo responder para el desarrollo web. “Front end” puede referirse a varias áreas diferentes. Si está buscando en la web, entonces necesita mejorar sus habilidades de CSS.

Esa es posiblemente la mayor parte de hacer desarrollo web profesional. Tiene compatibilidad de escritorio, tableta, móvil, entre navegadores, compatibilidad con navegadores antiguos y la pesadilla con la que se enfrenta IE.

Si desea practicar, comience eligiendo una página bien diseñada en un sitio web en algún lugar y repítala. Comience de manera simple y aumente desde allí.

Puede usar el inspector para averiguar los colores y las fuentes, pero haga el resto usted mismo. Y recuerde, tiene que ser una réplica exacta, por lo que cuando haya terminado, debe colocarlos en una pestaña del navegador y girarlos de un lado a otro sin que nada en esa página parezca moverse. Tiene que hacer eso en todos los navegadores que pueda tener en sus manos.

Cuando se sienta cómodo creando páginas de escritorio, comience a reducirlas para dispositivos móviles. Chrome tiene una emulación de dispositivo bastante buena con su inspector, aunque no siempre se comporta igual que las cosas reales. Aún así, es un buen comienzo. Haga que funcione tanto en vertical como en horizontal en todos los dispositivos allí. Pruébelo en su propio teléfono y tableta y asegúrese de tenerlo todo.

Parece que a mucha gente le gusta Bootstrap, pero si realmente quieres practicar y aprender, escríbelo tú mismo. Si desea usar herramientas más tarde, está bien, pero la comprensión que viene con escribirla desde cero es algo que no puede obtener de otra manera (en mi opinión).

Buena suerte.

Tengo algunas sugerencias para ti.

1. Descargue algunas plantillas de búsqueda de google e intente diseñarlo.
2. Descarga algunos PSD e intenta convertirlos en HTML y CSS.
3. Intente implementar complementos de JQuery como controles deslizantes, selector de fecha, selector de color.
4. Intenta implementar el mapa de Google en tu plantilla.
5. Crear menús desplegables.
6. Crea plantillas receptivas con bootstrap.
7. Practica animación, transición, transformación.
8. Intente usar diferentes fuentes con el tamaño adecuado.

Para saber más sigue.

¡Te encantaría CodePen! Es una comunidad de desarrolladores front-end que comparten su código. Puede remezclar sus proyectos y codificarlos en sus propios proyectos para experimentar.

El diseño frontal se trata de la apariencia y la sensación. Dado que muchas visitas a la página se encuentran actualmente en dispositivos móviles, trabaje en marcos receptivos. Un buen ojo para la tipografía y los esquemas de color es siempre una ventaja. Si no somos naturales, la paleta de colores de diseño de materiales de Google nos respalda.

Pruebe el marco de arranque de Twitter, use las herramientas de desarrollador de Google o un servicio de alojamiento en línea como codeanywhere para comparar simultáneamente los cambios de diseño en diferentes tamaños de pantalla como su teléfono móvil.

El conocimiento de edición de imágenes también puede ser muy útil.

Cada vez que miras un sitio web, analízalo estéticamente. Anuncios, esquemas de color a tu alrededor. Todo cuenta una historia. ¡Y lo más importante, diviértete haciéndolo!