Get best of the week

Si enseñé Frontend hoy. Consejos para principiantes

Mi camino en el desarrollo web comenzó hace 5 años. Durante este tiempo pude probar muchas tecnologías, y en los últimos 3 años he estado desarrollando en la dirección de frontend.

En este artículo, me gustaría establecer claramente qué tecnologías necesita aprender un principiante, así como compartir métodos para su desarrollo. La guía está dirigida a las personas que están dando sus primeros pasos en el desarrollo web, y en ella trataré de explicar en detalle la esencia de cada tecnología. También al final te diré a dónde ir después.

Entonces quieres convertirte en un desarrollador Frontend. ¿Qué se necesita para esto?

Aprendizaje de HTML, CSS, Javascript

HTML y CSS


Estas dos tecnologías son necesarias para el diseño del sitio. El diseño es una disposición de texto, imágenes, botones y otros elementos de la interfaz en una página.

Usando HTML, podemos agregar y describir estos elementos. Inicialmente, serán crudos, con una apariencia estándar. Para cambiar el estilo, se usa CSS. Le permite especificar el color, el tamaño, la ubicación y docenas de otros parámetros para la apariencia del elemento.

Sitio web sin CSS y con él

Cómo dominar


En primer lugar, debe leer el artículo de revisión o el video sobre estas tecnologías. Entonces entiendes su esencia.

Entonces, el diseño es más conveniente para aprender y mejorar en la práctica. Pruebe los diseños de diseño para páginas o elementos individuales. También puede intentar ver el proceso de diseño de página en Youtube y repetir después del autor.

Al principio será difícil, y a menudo tendrás que ir a Google para resolver otro problema. Pero con el tiempo, aprenderá a encontrar rápidamente en su cabeza la estructura HTML correcta y las propiedades CSS necesarias para el diseño del elemento.

¿Dónde obtener ideas y diseños para el diseño?


Utilicé Dribbble y CollectUI , pero también se puede buscar en Behance y One Page Love .

También puede tomar diseños reales de UI Store Design . Recomiendo hacer diseños de Figma, como es utilizado por muchos diseñadores, y en el futuro probablemente trabajará con él. También es gratis y funciona en el navegador.

imagen

Javascript


Este lenguaje comienza a programar en la web. Le permite administrar elementos en la página, describir y controlar la interacción con la interfaz.

Si estábamos creando una página con HTML y CSS, entonces JavaScript es responsable de la parte dinámica de la página: animaciones, visualización de datos, procesamiento de acciones y mucho más.

¿Por qué lo necesito?


Un simple ejemplo. Supongamos que hay una página en la que, con el clic de un botón, necesita mostrar una ventana modal. HTML y CSS nos permitirán hacer el diseño de la página en sí y la ventana modal. Sin embargo, estas tecnologías no pueden capturar y procesar el clic de un botón.
Aquí es donde necesitamos JavaScript. Utilizándolo, describimos el comportamiento en la página. En el código queremos decir: si el usuario hizo clic en el botón, entonces debe mostrar la ventana modal.

Aquí hay un ejemplo de tal implementación usando jQuery :



Con JavaScript, puede realizar casi cualquier operación en la página. Sin embargo, sus capacidades no se limitan a la ventana del navegador. Al usar la plataforma Node.js , este lenguaje se puede usar para el desarrollo del servidor, la creación de proyectos y mucho más. En el futuro, necesitará esto para trabajar con grandes proyectos, construyendo desde Webpack . Sin embargo, te aconsejo que primero aprendas a usar el idioma dentro del navegador.

Cómo dominar


Su mejor opción es comenzar a aprender en learn.javascript.ru . Este es un gran recurso, que es una base de conocimiento para principiantes y desarrolladores avanzados.

Aquí es importante comprender los conceptos básicos de JavaScript en sí, así como las características de su funcionamiento en el navegador. Si algunos temas le parecen demasiado complicados (por ejemplo, prototipos ), puede omitirlos y volver más tarde.

No te dejes llevar por la teoría de JavaScript solo. Te recomiendo que pruebes tu mano al mismo tiempo que estudias y escribes guiones simples. También puede intentar analizar otras partes del código en Codepen .

imagen

Aprenda gradualmente nuevos complementos y bibliotecas. Uno de los más populares y fáciles de entender es jQuery.. Es mucho más fácil interactuar con el contenido de la página, y se puede dominar rápidamente a un nivel básico.

En general, a menudo recurrirá al uso de bibliotecas de terceros en sus proyectos. Para comprender mejor cómo se hace esto, recomiendo intentar formatear las fechas usando Luxon o hacer un carrusel a través de Owl Carousel .

¿Que sigue?


Con habilidades básicas en HTML, CSS y JavaScript, puede crear una hermosa página de destino, diseñar las páginas de una tienda en línea o blog. Esto es lo que le aconsejo que haga para consolidar su conocimiento en el desarrollo web.

En general, casi cualquier interfaz se puede escribir en estas tecnologías. La única pregunta es qué características específicas tendrá la aplicación que está desarrollando. Cuanto más grande y complejo sea, más bibliotecas, complementos y tecnologías diferentes necesitará para hacer frente a la tarea.

imagen

Le recomiendo que se familiarice con Frontend Roadmap . Estas son las tecnologías de desarrollo de interfaz que necesitará en el futuro.

En el futuro, probablemente le interesarán los marcos reactivos como React o Vue.. Para construir aplicaciones en ellos, aprenderá Webpack , y para acelerar el proceso de diseño, aprenderá los preprocesadores PUG y SASS . O tal vez desee profundizar en los gráficos y aprender a trabajar con D3 o WebGL .

Como ya entendió, el frontend en desarrollo web es muy versátil y rico en varias tecnologías para tareas completamente diferentes. Aprenda, pruebe, experimente y disfrute creando interfaces hermosas y convenientes para cualquier propósito. Por esto nos encanta la interfaz.


PD: acompañé cada tecnología en este artículo con un enlace a la documentación o ejemplos de uso. Puede familiarizarse con ellos para obtener una comprensión más amplia del desarrollo web.

More articles:


All Articles