Apuntes del Curso de Frontend Developer

<h1>Curso de Frontend Developer</h1> <h3>HTML y CSS</h3>

• HTML: Es un lenguaje de marcado usado para decirle a tu navegador cómo estructurar las páginas web que visitas. No es un lenguaje de programación.
• CSS: Es un lenguaje que nos permite crear páginas web con un diseño agradable para los usuarios. Tampoco es un lenguaje de programación.

//Elementos de HTML: https://htmlreference.io
//Elementos de CSS: https://cssreference.io

<h3>DOM, CSSOM, Render Tree y el proceso de renderizado de la Web</h3>

• DOM: Document Object Model. Es una transformación del código HTML escrito por nosotros a objetos entendibles para el navegador.
• CSSOM: así como el DOM para el HTML, EL CSSOM es una representación de objetos de nuestros estilos en CSS.
• Render Tree: es la unión entre el DOM y el CSSOM para renderizar todo el código de nuestra página web.
• Pasos que sigue el navegador para construir las páginas web:
• Procesa el HTML para construir el DOM.
• Procesa el CSS para construir el CSSOM.
• El DOM se une con el CSSOM para crear el Render Tree.
• Se aplican los estilos CSS en el Render Tree.
• Se ““pintan”” los nodos en la pantalla para que los usuarios vean el contenido de la página web.

//Documentación flexbox https://css-tricks.com/snippets/css/a-guide-to-flexbox/
//Juego flexbox https://flexboxfroggy.com/#es
//Juego Grid https://cssgridgarden.com/#es

<h3>Anatomía de un Elemento HTML: Atributos, Anidamiento y Elementos vacíos</h3>

Nuestros elementos HTML se componen de:

• Etiqueta de apertura: el nombre de nuestra etiqueta encerrado entre símbolos de mayor o menor. Por ejemplo: <h1>.
• Contenido: dentro de nuestras etiquetas podemos añadir texto u otros elementos HTML, lo que conocemos como anidamiento.
• Etiqueta de cierre: son casi iguales que las etiquetas de apertura, pero también necesitan un slash (/) antes del nombre de la etiqueta. Por ejemplo: </h1>.
• Las etiquetas de apertura también pueden tener atributos. Los atributos nos permiten definir características especiales para nuestros elementos: <etiqueta atributo="“valor del atributo”">. Por ejemplo: <h1 class="“saludo”">.
• También existen elementos vacíos. Estos elementos no tienen contenido ni etiqueta de cierre, solo etiqueta de apertura y atributos. Por ejemplo: <img src="“puppy.png”" alt="“mi mascota”">.

<h3>Tipos de errores en HTML, debugging y servicio de validación de etiquetas</h3>

• Errores sintácticos: Son errores de escritura en el código y evitan que el programa funcione. Pueden ser errores de tipado.
• Errores lógicos: En estos la sintaxis es correcta, pero el código no hace lo que debería. El programa funciona, pero de forma incorrecta.

// Validador html: https://validador.w3.org

<h3>Tipos de selectores, pseudo-clases y pseudo-elementos</h3>

• *(asterisco): Es el selector universal. Las propiedades se aplicarán a todos los elementos de nuestro HTML.
• Tipo: Son selectores que se aplican a cierto elemento HTML en específico. Las propiedades se aplicarán a la etiqueta que queremos, por ejemplo p, body, html, div, etc.
• Clase: Si nuestras etiqueta de HTML tienen un atributo de class podemos usar ese valor o identificador para que los cambios en el CSS afecten únicamente a ese elemento.
• ID: Es similar al anterior, si la etiqueta HTML tiene un ID podemos afectar sólo ese elemento.

Las Pseudo-clases y Pseudo-elementos nos permiten ser aún más específicos con qué elemento o partes de nuestros elementos deben recibir los estilos.
Para usarlas debemos definir el selector base (por ejemplo, p) seguido de dos puntos y la pseudo-clase que queremos estilizar (por ejemplo: p:first-child). En el caso de los pseudo-elementos debemos usar el dos puntos 2 veces (p::first-letter).

<h3>Modelo de caja</h3>

• Todos los elementos de HTML tienen un modelo de caja y está compuesto por cuatro elementos: contenido, padding, border, margin

//Paletas de colores: https://colorhunt.co

<h3>Valores relativos y absolutos</h3>

• Los valores absolutos son, por ejemplo, centímetros, milímetros, pixeles y pulgadas. Se llaman de esta forma porque no tienen en cuenta a nadie más, no depende de la medida de otra unidad.
• Los valores relativas, llevan este nombre porque depende de otra unidad de medida o elemento. Por ejemplo, porcentajes, vmx, em, entre otros.

Recuerda que podemos darle estilos a etiquetas HTML muy específicas indicando dónde se van a encontrar. Por ejemplo: si queremos darle estilos únicamente a la imagen que está dentro del header, podemos usar el selector css header img { … }.

<h3>¿Qué son y para que nos sirven las Arquitecturas CSS?</h3>

• Objetivos: qué la arquitectura sea predecible, qué el código sea reutilizable, mantenible y por ende escalable.
• Buenas Prácticas: establecer reglas con el equipo, explicar la estructura base, establecer estándares de codificación, evitar largas hojas de estilo, documentar.

<h3>Arquitecturas de CSS</h3>

• OOCSS (css orientado a objetos): Separar el diseño del contenido para hacerlo más reutilizable.
• BEM (block element modifier): Separa los bloques, elementos y modificadores
• SMACSS (arquitectura de css escalable y modular): Está arquitectura se base en 5 pasos: primero dividimos el css en componentes base estos son elementos qué van a ser utilizados en toda la aplicación, luego de esto va el layout qué son elementos qué van una sola vez en cómo el header o footer, después está el módulo qué son componentes qué utilizamos en nuestra aplicación más de una vez, seguido de esto está el estado, (por ejemplo hablando de un botón color verde qué al darle click cambia el color a rojo) eso serian las acciones de nuestros componentes, por último están los temas esto indica qué cuando cambian los temas o los colores de nuestra aplicación estos pueden verse reflejados y los podamos separar de ese código.
• ITCSS (triángulo invertido de css): lo qué nos indica esta metodología es dividir todos nuestros archivos de css en ciertas partes para qué no se combinen entre sí, por ejemplo: ajustes, herramientas, generico, elementos, objetos, componentes, utilidades
  Atomic Design: Esté se basó precisamente en química, partiendo de la base de los átomos (qué serían elementos para pequeños por ej. Botones), luego están las moléculas qué serían un conjunto de moléculas y de estos derivan componentes más grandes como organismos, templates, páginas.

<h3>¿Qué es un componente?</h3>

Un componente, tanto en diseño como desarrollo web, es un elemento muy pequeño que tiene la capacidad de ser reutilizado en diferentes partes de una aplicación. Por ejemplo: botones, iconos, cards, entre otras. Puedes apreciarlos en las plataformas que visitas todos los días: Twitter, Facebook, Platzi, YouTube y muchas más.

//Analiza tu maqueta y identifica componentes
//Google fonts

<h3>Media queries</h3>

Los media queries nos ayudan a ajustar nuestros diseño a dispositivos más pequeños como tablets y celulares.
Es recomendable seguir la metodología de Mobile First: comenzar a diseñar para el dispositivo más pequeño e ir creando las media queries para las pantallas más grandes.

<h3>¿Qué es un preprocesador, cuáles existen y cuáles son sus diferencias?</h3>

• CSS es un lenguaje de hojas de estilo que nos permite crear sitios web agradables para el usuario, sin embargo, nuestros archivos de CSS suelen ser bastante extensos, lo que produce una demanda significativa de nuestro tiempo y puede generar un trabajo menos productivo.
  Una de las cosas que puedes hacer para evitar tantas líneas de código es utilizar los preprocesadores de CSS, los cuales extienden las funcionalidades de CSS común, permitiéndonos tener variables, funciones, mixins, reutilización de código, flexibilidad en el desarrollo, etc.

Pero, ¿cómo es que funcionan los preprocesadores?

• Un preprocesador se escribe con una sintaxis especial que nosotros le indicamos y debe compilarse a CSS para ser comprendido por el navegador. En sí lo que estamos haciendo es CSS pero con esteroides.
• La accesibilidad y nuestra responsabilidad como desarrolladores
• Debemos pensar en esas personas con una discapacidad visual que no tienen la posibilidad de ver lo mismo que la mayoría de nosotros. Estas personas no siempre usan el mouse, sino lectores de pantalla.
• Un Lector de Pantalla se encarga de leer toda la aplicación elemento por elemento. Que los lectores de pantalla funcionen es responsabilidad de las y los desarrolladores: debemos tener muy buena semántica, usar las etiquetas y atributos adecuados entre otras.

<h3>Flexbox</h3>

• Flexbox está conformado por un contenedor y sus hijos qué son los flex items
• Se manejan 2 ejes como en un plano cartesiano
• Flex direction nos indica la dirección del eje: por defecto el eje principal es el horizontal y el secundario es el vertical
• Los ejes se manejan de manera horizontal con: row y row-reverse. Y los ejes de manera vertical con column y column-reverse
• Las 2 propiedades más importantes para organizar los elementos son justify-content qué ordena lo elementos en el eje principal
• Align-items qué ordena los elementos en el eje secundario

//Flex-grow para darle crecimiento en base al container
//Herramienta de accesibilidad web https://www.ssa.gov/accessibility/andi/help/install.html
//Crear storybook https://storybook.js.org/docs/guides/guide-html/