Recuerdo cuando comencé a aprender sobre desarrollo front-end. Encontré tantos artículos y estaba tan abrumado por la cantidad de material que necesitaría aprender que ni siquiera sabía por dónde empezar.
Esta guía lo ayudará a navegar por el aprendizaje del desarrollo front-end. Proporciona recursos de aprendizaje que encontré efectivos en el pasado, junto con explicaciones complementarias.
Para mantener esta guía digerible, la dividí en dos partes. La primera parte trata sobre el desarrollo de interfaces con HTML y CSS. La segunda parte repasa Javascript, frameworks y patrones de diseño. Si está familiarizado con HTML y CSS, puede pasar a la segunda parte, que cubre todo Javascript.
De cero a héroe front-end (parte 2)
Una guía completa para aprender sobre desarrollo front-end medium.com
Conceptos básicos de HTML y CSS
En el desarrollo front-end, todo comienza con HTML y CSS. HTML y CSS controlan lo que ves en una página web. HTML dicta el contenido, mientras que CSS maneja el estilo y el diseño.
Para comenzar, lea los tutoriales de HTML y CSS de Mozilla Developer Network (MDN). El MDN proporciona explicaciones capítulo por capítulo de conceptos importantes de HTML y CSS. Además, cada capítulo tiene solo una página, con demostraciones interactivas vinculadas a CodePen y JSFiddle.
Después de completar esos tutoriales, eche un vistazo al curso Crear un sitio web de CodeAcademy. Este tutorial solo toma unas pocas horas en completarse y es una buena guía para crear sitios web con HTML y CSS. Si desea más, Creación de formularios web es otro tutorial de CodeAcademy que lo guía a través de la creación y el estilo de un formulario web.
Para practicar con CSS, pruebe CSS Diner. Es un divertido juego de desafío CSS. Otro aspecto importante de HTML y CSS son los diseños. LearnLayout es un tutorial interactivo que le muestra cómo crear diseños con HTML y CSS.
Además, aprenda a usar Google Fonts con los conceptos básicos de Google Font API de CSSTricks. La tipografía es un bloque de construcción fundamental de interfaces. Cuando tenga tiempo, le recomiendo que lea este libro en línea gratuito, Professional Web Typography de Donny Truong. Te enseña todo lo que necesitas saber sobre tipografía como desarrollador front-end.
A lo largo de estos recursos, no se preocupe demasiado por memorizar cosas. En su lugar, concéntrese en comprender cómo funcionan juntos HTML y CSS.
Practicando los conceptos básicos de HTML y CSS
Ahora que tiene un conocimiento básico de HTML y CSS, divirtámonos. En esta sección, hay dos experimentos diseñados para que practique la creación de sitios web e interfaces. Utilizo el término "experimentos" porque en los experimentos aprendes tanto de tu fracaso como de tu éxito.
Experimento 1
En nuestro primer experimento, usaremos CodePen. CodePen es un campo de juego de front-end donde puede codificar HTML y CSS sin tener que almacenar archivos localmente. También tiene vistas previas en vivo que se actualizan tan pronto como guarda su código.
Al usar CodePen, matas dos pájaros de un tiro. Por un lado, practicas HTML y CSS. Por otro lado, crea una cartera de progreso básica. También usaremos Dribbble, que es un sitio lleno de inspiración de diseño.
Vaya a Dribbble y encuentre un diseño que sea lo suficientemente simple para codificar en unas pocas horas. Seleccioné algunos diseños para comenzar: 1, 2, 3, 4 y 5. Elegí diseños web para dispositivos móviles porque son menos complejos que sus contrapartes de escritorio. Sin embargo, siéntase libre de elegir también diseños de escritorio.
Una vez que se haya decidido por un diseño, siga adelante e intente codificarlo en CodePen. Si te quedas atascado, recuerda que StackOverflow es tu amigo. Otra práctica útil es ir a sitios web como Medium, AirBnB y Dropbox y usar la herramienta de inspección para ver cómo logran diferentes diseños y estilos. Además, eche un vistazo a algunos de los bolígrafos de CodePen. Elegí algunas buenas referencias:
- Interfaz de la aplicación de menú
- Widget de Twitter
- Tarjeta de noticias del artículo
- Menú plano simple
Si su copia se ve diferente a la original, no se desanime. Sigue practicando con diferentes diseños y notarás mejoras cada vez.
Si no tiene experiencia en diseño, es probable que su ojo para el diseño esté poco desarrollado. Un desarrollador front-end con buen ojo para el diseño podrá identificar buenos diseños y reproducirlos perfectamente. Hace unas semanas escribí un artículo sobre cómo desarrollar su ojo para el diseño.
Experimento 2
Con suerte, el primer experimento le dio algo de confianza al escribir HTML y CSS. Para el experimento 2, veremos algunos sitios y luego codificaremos algunos de sus componentes.
Algunos sitios web usan marcos de CSS u ocultan sus nombres de clases CSS, lo que dificulta la lectura de su código fuente. Es por eso que seleccioné algunos sitios web bien diseñados con un código fuente fácil de leer.
- Dropbox for Business: intenta replicar su sección de héroes
- AirBnB: intente replicar su pie de página
- PayPal: intente replicar su barra de navegación
- Invision: intente replicar su sección de registro en la parte inferior de la página
- Stripe: intente replicar su sección de pagos
Una vez más, el objetivo del experimento 2 no es recrear la página completa. ¡Aunque eso ciertamente no estaría de más! Elija un par de componentes clave como una barra de navegación o una sección de héroe para codificar. Proporcioné sugerencias junto a la lista de sitios, pero no dude en elegir otros componentes.
Puede codificar este experimento en CodePen o almacenarlo localmente. Si opta por almacenarlo localmente, puede descargar este proyecto de ejemplo como modelo estándar o crear los archivos desde cero. Sugiero usar un editor como Atom o Sublime.
Además, tenga en cuenta que para cualquier sitio web, siempre puede ver su HTML y CSS. Simplemente haga clic con el botón derecho en la página o en un componente de la página, haga clic en inspeccionar y aparecerá un panel con el HTML a la izquierda y el CSS a la derecha. Una vez que haya terminado o se quede atascado, use el inspector para ver cómo se comparan su HTML y CSS.
Prácticas recomendadas de HTML y CSS
Hasta ahora, lo que ha estado aprendiendo son los conceptos básicos de HTML y CSS. El siguiente paso es aprender las mejores prácticas. Las mejores prácticas son un conjunto de reglas informales que mejoran la calidad de su código.
Marcado semántico
Una de las mejores prácticas para HTML y CSS es escribir marcado semántico. Una buena semántica web significa usar etiquetas HTML apropiadas y nombres de clases CSS significativos para transmitir un significado estructural.
Por ejemplo, la etiqueta h1 nos dice que el texto que envuelve es un encabezado importante. Otro ejemplo sería la etiqueta de pie de página , que nos dice que el elemento pertenece al final de la página. Para obtener más información, lea Una mirada a la semántica adecuada de HTML5 y Qué hace para un nombre de clase semántica por CSSTricks.
Convenciones de nomenclatura CSS
La siguiente mejor práctica importante para CSS son las convenciones de nomenclatura adecuadas. Las buenas convenciones de nomenclatura, como el marcado semántico, transmiten significado y ayudan a que nuestro código sea predecible, legible y fácil de mantener. Puede leer acerca de las diferentes convenciones de nomenclatura en el artículo OOCSS, ACSS, BEM, SMACSS: ¿qué son? ¿Qué debo usar?
En general, sugiero probar convenciones de nomenclatura simples que tengan un sentido intuitivo para usted. Con el tiempo, descubrirá los que mejor se adapten a sus necesidades. Para ver cómo empresas como Medium utilizan convenciones de nomenclatura como BEM, lea el CSS de Medium es realmente bastante bueno. En ese artículo, también aprenderá que crear un conjunto eficaz de convenciones CSS es un proceso iterativo.
Reinicio de CSS
Los navegadores tienen pequeñas inconsistencias de estilo desde los márgenes hasta la altura de las líneas. Por esta razón, siempre restablezca su CSS. MeyerWeb es un restablecimiento popular. Si desea profundizar, puede leer Crear su propio archivo Reset.css simple.
Compatibilidad con varios navegadores
La compatibilidad con varios navegadores significa que su código es compatible con la mayoría de los navegadores actualizados. Algunas propiedades de CSS, como la transición, necesitan prefijos de proveedor para funcionar correctamente en diferentes navegadores. Puede leer más sobre los prefijos de proveedores en este artículo, Prefijos de proveedores de CSS. La principal conclusión es que debe probar su sitio web en varios navegadores, incluidos Chrome, Firefox y Safari.
Preprocesadores y posprocesadores CSS
Desde la introducción de CSS en la década de 1990, CSS ha recorrido un largo camino. Dado que los sistemas de IU se han vuelto cada vez más complejos, las personas idearon herramientas conocidas como preprocesadores y posprocesadores para administrar la complejidad.
Los preprocesadores CSS son extensiones del lenguaje CSS que agregan detalles como variables, mixins y herencia. Los dos preprocesadores CSS principales son Sass y Less. En 2016, Sass se usa generalmente más ampliamente. Bootstrap, el popular marco CSS receptivo, también está cambiando de Less a Sass. Además, cuando la mayoría de la gente habla de Sass, en realidad está hablando de SCSS.
Los postprocesadores CSS aplican cambios a CSS después de que haya sido escrito a mano o compilado por un preprocesador. Por ejemplo, algunos posprocesadores como PostCSS tienen complementos que agregan prefijos de proveedor de navegador automáticamente.
Cuando descubre por primera vez los preprocesadores y posprocesadores de CSS, es tentador usarlos en todas partes. Sin embargo, comience de manera simple y agregue extensiones como variables y mixins solo cuando sea necesario. El artículo que sugerí anteriormente, el CSS de Medium es realmente bastante bueno, también cubre cuánto es demasiado cuando se trata de preprocesadores.
Sistemas de red y capacidad de respuesta
Los sistemas de cuadrícula son estructuras CSS que le permiten apilar elementos horizontal y verticalmente.
Los marcos de cuadrícula como Bootstrap, Skeleton y Foundation proporcionan hojas de estilo que administran filas y columnas en diseños. Si bien los marcos de cuadrícula son útiles, también es importante comprender cómo funcionan las cuadrículas. Comprender los sistemas de cuadrículas CSS y No pensar demasiado en las cuadrículas son excelentes descripciones generales.
Uno de los propósitos principales de los sistemas de cuadrícula es agregar capacidad de respuesta a su sitio web. La capacidad de respuesta significa que su sitio web cambia de tamaño según el ancho de la ventana. Muchas veces, la capacidad de respuesta se logra mediante consultas de medios CSS, reglas CSS que solo se aplican a ciertos anchos de pantalla.
Puede leer más sobre las consultas de medios en Introducción a las consultas de medios. Además, debido a que hemos entrado en la era de los dispositivos móviles primero, consulte Introducción a las consultas de medios basados en dispositivos móviles.
Prácticas recomendadas de HTML y CSS
Ahora que está armado con las mejores prácticas, probémoslas. El objetivo de estos dos experimentos siguientes es practicar la escritura de código limpio y observar el efecto a largo plazo de las mejores prácticas en la legibilidad y el mantenimiento.
Experimento 3
Para el experimento 3, elija uno de sus experimentos anteriores y refactorice su código utilizando algunas de las mejores prácticas que ha aprendido. Refactorizar significa editar su código para que sea más fácil de leer y menos complejo.
Ser capaz de refactorizar el código de forma eficaz es una habilidad importante de un desarrollador front-end. La creación de un código de calidad es un proceso iterativo. Arquitecturas CSS: Refactorización Su CSS es un buen punto de partida para refactorizar su código.
Aquí hay algunas cosas que debe preguntarse cuando esté refactorizando su código.
- ¿Son ambiguos los nombres de sus clases? 6 meses a partir de ahora, ¿todavía entenderás lo que significa el nombre de tu clase?
- ¿Su HTML y CSS son semánticos? Al mirar su código, ¿puede discernir rápidamente el significado estructural y relacional?
- ¿Está reutilizando el mismo código de color hexadecimal una y otra vez en su código? ¿Tendría más sentido refactorizarlo en una variable Sass?
- ¿Su código funciona tan bien en Safari como en Chrome?
- ¿Podría reemplazar parte de su código de diseño con un sistema de cuadrícula como Skeleton?
- ¿Utiliza la bandera ! Important con frecuencia? ¿Cómo puedes arreglar eso?
Experimento 4
El último experimento puso en práctica lo que ha aprendido sobre las mejores prácticas. Sin embargo, los efectos de las mejores prácticas a menudo no se hacen evidentes hasta que los aplica a un proyecto más grande.
Para el último experimento, cree usted mismo un sitio web de cartera. Como interfaz, el sitio de su cartera es uno de sus activos digitales más importantes. Un portafolio es un sitio que muestra su trabajo. Más importante aún, es un registro continuo que le ayuda a realizar un seguimiento de su progreso y desarrollo. Entonces, incluso si solo tiene 1 o 2 cosas para mostrar, colóquelo.
Para comenzar, siga el artículo de Adham Dannaway, Mi flujo de trabajo (simple) para diseñar y desarrollar un sitio web de cartera
Si su primera iteración de cartera no es perfecta, está bien . Las carteras pasan por muchas iteraciones. Y lo que es importante es que lo construiste con tus propias habilidades.
Estar al día
Si bien HTML y CSS no dejarán de estar de moda en el corto plazo, es importante mantenerse actualizado con el panorama del front-end.
A continuación se muestra una lista de sitios web, blogs y foros que son informativos y agradables de leer.
- CSSTricks
- Revista Smashing
- Noticias de diseñadores
- Nettuts +
- Asistente CSS
Aprender con el ejemplo
Finalmente, la mejor forma de aprender es con el ejemplo. Aquí hay un conjunto de guías de estilo y convenciones de código que le enseñarán cómo ser un front-end más efectivo.
Guías de estilo
Las guías de estilo web son colecciones de patrones y componentes CSS que se pueden reutilizar en un sitio web. La clave a tener en cuenta de estas guías de estilo es cómo los enfoques HTML y CSS basados en componentes le permiten reutilizar el código para mantener su código SECO.
- Mapbox
- Planeta solitario
- Fuerza de ventas
- MailChimp
Convenciones de código
Convenciones de código diseñadas para hacer que su código sea legible y fácil de mantener. Algunos de estos enlaces, como las pautas de CSS, son pautas para escribir mejor HTML y CSS, mientras que otros enlaces, como el kit de herramientas y las pautas de CSS interno de Github, son ejemplos de código de calidad.
- Directrices CSS
- Kit de herramientas y pautas internas de CSS de Github
- Guía de estilo CSS de AirBnB
Envolver
Es de esperar que al final de este artículo, esté familiarizado con HTML y CSS y tenga algunos proyectos en su haber. La mejor manera de aprender el front-end es construyendo proyectos y experimentando. Recuerde, todo desarrollador de front-end tiene que empezar por algún lado. Y es mejor empezar hoy que mañana.
Este artículo es el primero de una serie de dos partes. El segundo artículo cubre la adición de interactividad con Javascript y bibliotecas / marcos de Javascript. Además, si quieres que dé más detalles sobre algo o tienes alguna pregunta, no dudes en dejarme una nota o un Tweet.
De cero a héroe front-end (parte 2)
Una guía completa para aprender sobre desarrollo front-end medium.com
PD: Si te gustó este artículo, significaría mucho si presionas el botón de recomendar o lo compartes con amigos.
Si quieres más, puedes seguirme en Twitter, donde publico divagaciones sin sentido sobre diseño, desarrollo front-end, bots y aprendizaje automático.
