Introducción al curso

1

Presentación y bienvenida al curso de Frontend Developer

2

HTML y CSS: definición y usos

3

¿Qué son y para qué nos sirven HTML y CSS?

4

DOM, CSSOM, Render Tree y el proceso de renderizado de la Web

5

5 tips para aprender CSS

Conceptos iniciales de HTML

6

Anatomía de un Elemento HTML: Atributos, Anidamiento y Elementos vacíos

7

Anatomía de un Documento HTML: DOCTYPE, html, head y body

8

Funciones de las etiquetas HTML más importantes

9

La importancia del código semántico

10

Tipos de errores en HTML, debugging y servicio de validación de etiquetas

11

Reto 1: Organiza el siguiente bloque de código de forma semántica

Conceptos iniciales de CSS

12

Anatomía de una declaración CSS: Selectores, Propiedades y Valores

13

Tipos de selectores, pseudo-clases y pseudo-elementos

14

Modelo de caja

15

Valores relativos y absolutos

16

Displays en CSS

17

Funciones de las propiedades CSS más usadas

18

Posicionamiento en CSS

Arquitectura CSS

19

¿Qué son y para qué nos sirven las arquitecturas CSS?

20

OOCSS, BEM, SMACSS, ITCSS y Atomic Design

21

Reto 2: Identifica el error de arquitectura del siguiente bloque de código

Construcción de componentes

22

¿Qué es un componente? Analicemos nuestros diseños

23

Estructura con HTML y BEM de un menú desplegable

24

Estilizando nuestro menú desplegable con CSS

25

Creación de un buscador

26

Creación de un carousel de imágenes con CSS: Estructura principal

27

Creación de un carousel de imágenes con CSS: Detalle de cada item

Maquetación y diseño responsivo

28

Flexbox

29

Nuestro nuevo sistema de layout: CSS Grid

30

Maquetación de la pantalla de login: Estructura HTML

31

Maquetación de la pantalla de login: Estilización con CSS

32

Estilización de inputs y footer en la pantalla de login

33

Media queries

34

Maquetación de la pantalla principal

35

Reto 3: Maquetación de la pantalla de Not Found

Preprocesadores

36

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

37

Instalación de SASS y configuración inicial

38

Hablemos de variables, herencia, anidamiento, operadores y más

Accesibilidad

39

La accesibilidad y nuestra responsabilidad como desarrolladores

40

Mejorando la accesibilidad de nuestra página de inicio

Conclusión

41

Conclusión del curso y paso siguiente

Bonus

42

Visualización de un botón usando storybook para HTML

43

Flexbox

No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

¿Qué son y para qué nos sirven las arquitecturas CSS?

19/43
Recursos

Aportes 180

Preguntas 13

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Regístrate o inicia sesión para participar.

Un resumen de la clase.

Los objetivos son:

  • Predecible > Escribir reglas claras.
  • Reutilizable > No escribir codigo redundante.
  • Mantenible > Que sea facil de leer y adaptarnos a los estandares.
  • Escalable > Que pueda crecer facilmente pero sin afectar el rendimiento.

Buenas practicas

  • Establecer reglas para que el equipo se entienda.
  • Explicar la estructura base o dar los fundamentos del proyecto a un nuevo integrante.
  • Evitar hojas de estilo muy extensas
  • Tener una buena documentación explicando ciertos aspectos del codigo.

Yo terminé la carrera de Arquitectura Frontend y esto no lo manejaba bien. Aplaudo lo que están haciendo con la Escuela de Javascript, la información que dan es mucho más directa, comprimida y útil, enfocada a hacer proyectos reales!

Aporto mi apuntes de esta clase:

Al trabajar con CSS es fácil que nuestro archivo de estilos se extienda muchísimo y sea algo difícil de mantener, escalar o incluso de involucrar a gente nueva en el equipo para trabajar con eso.

Lo objetivos que queremos alcanzar son:

  • Predecibilidad (funcionalidad clara, de fácil lectura).
  • Reutilizabilidad (que no haya que sobreescribir cosas ya hechas).
  • Mantenibilidad (buenas prácticas que permitan corregir solo pequeñas porciones).
  • Escalabilidad (que se pueda hacer crecer de forma sencilla).

Buenas prácticas:

  • Establecer reglas que sean claras para todo el equipo.
  • Explicar la estructura base para personas que se incorporen más adelante.
  • Establecer estándares a la hora de escribir código, ser consistentes.
  • Evitar tener hojas de estilo infinitas (código spaghetti).
  • Documentar nuestro código, puede ahorrarnos muchos dolores de cabeza.

Objetivos de una arquitectura CSS:

  • Predecible
  • Reutilizable
  • Mantenible
  • Escalable

Buenas Practicas:

  • Establecer reglas (en equipo)
  • Explicar estructura base
  • Establecer estándares de codificación
  • Evitar largas hojas de estilos
  • Documentación

Recomiendo leer : State of the art in CSS

Sin duda alguna entenderas por que debes seguir las_ best practices. _

Arquitectura de CSS

  • predecibles.

  • reutilizable

  • mantenible

  • escalable

Buenas practicas.
Establecer reglas
Explicar la estructura base
establecer estándares de codificación
evitar largas hojas de estilo
documentación

aprendiendo durante la cuarentena :3

¿Qué son y para qué nos sirven las arquitecturas CSS?
Las arquitecturas de CSS sirven para que sean predecibles, que las reglas que hemos establecidos se sigan para que puedan ser comprensibles en cualquier momento; también nuestro código debe de ser reutilizable, por ejemplo debemos de encontrar la manera de poder reutilizar el código por ejemplo con las clases; el código que escribamos debe de ser mantenible, muchas líneas de código se vuelve inmantenible; la escalabilidad es un factor que debemos de tener en cuenta para que sea más eficiente nuestro proyecto.
Buenas prácticas:
• Establecer reglas: Es importante que todo el equipo este al tanto de las reglas que se definen al inicio del proyecto para que todos las puedan seguir.
• Explicar la estructura base: A las personas que se incorporen a nuestro proyecto debemos de ponerlas en situación y explicarles nuestro avance.
• Establecer estándares de codificación: Se debe de dejar reglas establecidas desde el principio.
• Evitar largas hojas de estilo: Para poder tener un código mantenible.
• Documentación: Se basa en partes del código complejas de entender para otras personas e incluso nos puede servir a nosotros mismos.

<h1>apuntes</h1>

objetivos

  1. Predecibles: si hacemos una regla esta debe cumplirse cómo se diga
  2. Reutilizables: que el codigo se pueda reutilizar sin necesidad de volver a copiar y pegar
  3. Mantenibles: si tengo 2.000 lineas de codigo, no será mantenible
  4. Escalable: si tenemos un archivi muy grande pero afectará el rendimiento

Buenas practicas

  1. Establecer reglas (con el equipo)
  2. Explicar la estructura base
  3. Establecer estándares de codificiacion
  4. Evitar largas hojas de estilos
  5. Documentacion

ARQUITECTURAS DE CSS

- Evitar tener miles de lineas de codigo de estilos
- OBJETIVOS:
    - PREDECIBLES:  Se establecen reglas
    - REUTILIZABLE: Que se usen en varios lados sin escribir mas lineas
    - MANTENIBLE:   Que alguien más pueda trabajar con el
    - ESCALABLE:    Que sea posible que crezca de buena manera
-BUENAS PRACTICAS:
    - Establecer reglas con el equipo
    - Explicar la estructura base
    - Establecer estándares de codificación
    - Evitar largas hojas de estilo
    - Documentación

La Escuela de JavaScript tiene la gran ventaja de ser muy directa y concisa, enfoca mucho al estudiante y le muestra el mundo a su alrededor de una forma más clara. Excelente trabajo

Tengo una duda
Podría ser una buena arquitectura tener varios archivos css. En especifico un archivo por cada para cada documento HTML?
Ejemplo:

  • Tener un css especifico solo para el index.html
  • Tener un css para otras secciones como perfil.html, pago.html, etc
  • Tener un css para las mediaqueries
    Y así?
Objetivos
-	Predecible
-	Reutilizable
-	Mantenible
-	Escalable
Buenas prácticas
-	Establecer reglas
-	Explicar la estructura base
-	Establecer estándares de codificación
-	Evitar largas hojas de estilo
-	Documentación
/*¿Qué son y para qué nos sirven las arquitecturas CSS?*/

		Objetivos
		=> Predecibles.
		=> Reutilizables.
		=> Mantenible.
		=> Escalable.

		Buenas prácticas
		=> Establecer reglas.
		=> Explicar la estructura base.
		=> Establecer estándares de codificación.
		=> Evitar largas hojas de estilo.
		=> Documentación.

	/*¿Qué son y para qué nos sirven las arquitecturas CSS?*/```

Las Metodologías o Arquitecturas CSS nos ayudaran a escribir código CSS más predecible, reutilizable, mantenible y escalable.
|
Predecible
CSS predecible significa que tus reglas se comportan como tú esperarías. Cuando añades o actualizas una regla, no debería afectar a las partes de tu sitio web en las que no hay intención de que afectara. En los sitios pequeños eso raramente ocurre, no es importante, pero en los sitios grandes con decenas o centenares de páginas, el que el CSS sea predecible es una obligación.
|
Reutilizable
Las reglas CSS deberían ser abstractas y estar suficientemente desacopladas a la hora de construir rápidamente nuevos componentes en partes ya establecidas sin tener que recodificar configuraciones sobre problemas que ya has solventado.
|
Estable
Cuando nuevos componentes y capacidades necesitan ser añadidas, actualizadas o reiniciadas en tu sitio, hacer eso no debería requerir modificar demasiado el CSS existente. Añadir un componente X a la página no debería, por su mera presencia, romper el componente Y.
|
Escalable
Cuando el sitio crece y se vuelve más complejo normalmente requiere mayor mantenimiento por parte de los desarrolladores. CSS escalable significa que puede ser fácilmente administrado por una persona o por un equipo de personas. También significa que la arquitectura CSS de tu sitio es fácilmente accesible sin requerir una enorme curva de aprendizaje. Solo porque seas el único desarrollador que toque el CSS hoy no significa que siempre vaya a ser así.

Buenas prácticas:

  • Establecer reglas => con el equipo
  • Explicar la estructura base
  • Establecer estándares de codificación => Importante dejarlo definido y sin romperlas
  • Evitar largas hojas de estilo => Mantenible y escalable
  • Documentación

Gracias a los preprocesadores podemos permitirnos tener un solo archivo CSS, entonces supongamos que ese único archivos tiene unas 50 mil líneas de código (suponiendo) **¿Cómo hace el navegador para leer todo ese código? **🤔 Pregunto porque en estructura de datos se utiliza unos algoritmos llamados merge sort y quick sort para ordenar grandes cantidades de datos de manera rápida.

Es importante la arquitectura del proyecto en el que estamos trabajando pues ayuda a su mantenimiento, escalabilidad y reutilización

Objetivos de una arquitectura CSS:

Predecible
Reutilizable
Mantenible
Escalable
Buenas Practicas:

Establecer reglas (en equipo)
Explicar estructura base
Establecer estándares de codificación
Evitar largas hojas de estilos
Documentación

Una parte que nos falla a los desarrolladoreses la documentación.

Objetivos de las arquitecturas CSS

  • Predecible: escribir las reglas claras y esperar que el código funcione en base a esas reglas
  • Reutilizable: reutilizar el código sin necesidad de escribir más código
  • Mantenible: tener nuestro código legible y fácil de mantener con el tiempo
  • Escalable: se puede hacer crecer nuestro proyecto fácilmente

Buenas prácticas

  • Establecer reglas ya sea con el equipo o solo
  • Explicar la estructura base para que cualquier persona que llegue nueva al proyecto pueda entender fácilmente sobre qué se construye el aplicativo
  • Establecer estándares de codificación y plasmarlos en la documentación del proyecto y cumplirlos
  • Evitar largas hojas de estilo. Esto es importante para tener un código mantenible y escalable
  • Documentación. En la documentación vamos a explicar cosas complejas que no se entienden a simple vista y explicar el porqué de las cosas

Vaya, que buen tema, desconocía estos principios. Aun falta mucho por aprender.

principios de arquitectura CSS

responsive web desing --> codigo mantenible y escalable --> web performance

  • codigo limpio
  • codigo modular
  • reusable
  • listo para

Think: pensar en el diseño de tu pagina o aplicacion web antes de escribir codigo
Build : construit tu diseño en HTML y CSS con una estructura consistente.
** Architect** : utilizacion de patrones de diseño ej (7-1)

Objetivos de las arquitecturas:

  • Predecible
  • Reutilizable
  • Mantenible
  • Escalable

Es buena práctica tener mas de una hoja de estilos en un mismo proyecto?

Es muy cierto la documentación juega un rol importante y aveces obviamos algo tan importante 👍.

Realmente esto es muy importante porque podemos peder el control de nuestro css muy fácilmente volviendo nuestro proyecto en una locura al momento de adicionar estilos nuevos o modificar los antiguos.

correcto, el implementar todos estas buenas practicas dentro de nuestros proyectos nos hace mas ágiles a la hora de estar escribiendo código.

Interesante explicación. Yo he trabajado esto basandome en como lo hacen los framework de css.
por ejemplo para declarar un boton. Todos coinciden con la clase btn y despues se les agrega otras clases para modificarlos

En mi empresa había largas hojas de estilos, a veces era muy engorroso encontrar de donde provenía el estilo (de algun jar o alguna hoja de estilo dentro del mismo proyecto)

Predecible: si establezco una regla, esa regla debe cumplirse tal cual como se dijo
Reutilizable: tengo una clase con color y estilos y voy a utilizarla en otro lado, la idea es reutilizar el código, no copiar y pegar y tratar de no hacer tantas lianas.
Mantenible: un código de 2000 mil líneas no va a ser mantenible, ya que si yo llego a realizar nuevas cosas en este código me tocaría copiar y pegar y no se trabajaría bien.
Escalabilidad: si tenemos un archivo muy grande en un futuro va a ser muy difícil trabajar con el y poder hacer que crezca de forma buena, en este caso puede crecer y crecer, pero se vería afectada varias partes de las aplicaciones como el rendimiento.

Establecer reglas en equipo: es importante llegar a un acuerdo en equipo donde se establezcan las reglas con las que se van a trabajar.
Explicar la estructura de la base: si llega un compañero nuevo para colaborar en el proyecto, se debe compartir con él la documentación del proyecto para que tenga la base del mismo.
Establecer estándares de codificación: es importante establecerlos y definirlos en el equipo y que no se rompan.
Evitar largas hojas de estilo: esto es para que sea un código mantenible y escalable.
Documentación: es una muy buena práctica, se basa en el principio y ciertas cosas que son complejas, no debe ser línea por línea y esta seria para nosotros mismos y futuros programadores.

Las arquitecturas de CSS se crearon pensando en facilitar la compresión del CSS en proyecto en donde puede que existan miles de lineas de código.
Objetivos
Predecible Si establezco una regla y esa regla debe de establerce siempre.
Reutilizable Reutilizar el código sin la necesidad de escribir mas líneas.
Mantenible Tener muchas líneas de código es muy dificil de mantener.
Escalable Que nuestro proyecto crezca sin perjudicar el rendimiento.

Buenas prácticas
Establecer reglas Establecer reglas en el equipo sobre el código CSS.
Explicar la estructura base Explicar la estructura base del código CSS a los nuevos integrantes.
Establecer estándares de codificación: Establecer y definir en un documento aparte.
Evitar largas hojas de estilo
Documentación Escribir partes muy difíciles de comprender.

Yo trato de ser lo más ordenado posible, conocía únicamente la arquitectura BEM (Que no me sentí cómodo con ello), así que manejo mi arquitectura, tengo una hoja de estilos general, que usan estilos comunes en todas las páginas de mi web, y suelo comentar las secciones, por ejemplo: /* Estilos del header / / Estilos de botones*/ etc.

Y cuando quiero aplicar estilos puntuales a una página simplemente creo una nueva hoja de estilos con el mismo nombre que la página a la que se lo voy a aplicar y la cargo ahí ^^

Destaco la documentación en un proyecto y en este caso en el código.
De pronto para cuando uno vuelve a ese pedazo de código un tiempo después.
Pero también para alguien que se integre al equipo de trabajo no batalle en deducir que hace cada cosa.
Ahorrémonos y ahorremos el trabajo a los demás 😄

Excelente!!
Resumen

Los objetivos son:

Predecible / reglas claras.
Reutilizable / No escribir codigo redundante.
Mantenible / facil de leer 
Escalable > Que el archivo crezca en forma buena

Buenas practicas:

Establecer reglas con el el equipo para no chocar.
Explicar la estructura base del proyecto al nuevo integrante
Evitar hojas de estilo muy extensas, para poder mantenerlo y sea escalable
Tener una buena documentación explicando ciertos aspectos del codigo.

Otros Tips:

  1. Organiza la estructura de arriba hacia abajo.

  2. Nombra correctamente los selectores (Clases y Ids).

  3. Separa las palabras mediante guiones o mediante mayúsculas (importante para destacar en los selectores.)

  4. Combina elementos pertenecientes al mismo tipo ejemplo títulos: h1, h2, h3 { font-family: Arial; font-weight: 700; }

  5. Utiliza las propiedades abreviadas ejemplo:
    /* Propiedades margin-left, margin-right y margin-top /
    .nav-menu {margin-left: 5px; margin-right: 5px; margin-top: 5px;}
    /
    Propiedad abreviada margin */
    .nav-menu {margin: 5px 5px 0px 5px;}

  6. No utilices como nombre de un selector una característica visual ejemplo:
    /* Selector con nombre que define la característica visual del color /
    .menu-red { background: red; }
    /
    Utiliza mejor: */
    .nav-menu { background: red; }

  7. Prueba el diseño en los diferentes navegadores, empieza por los más usados en la actualidad: Firefox, Opera, Edge (internet Explorer), Safari y Chrome.

Checkpoint del Día 1 #DesdeCasa

❤️_❤️

Arquitectura de CSS
Los objetivos son que la arquitectura sea:

  • Predecible: Si establezco una regla, esta regla debe cumplirse.
  • Reutilizable: Puedo volver a reusar el código sin escribir más líneas.
  • Mantenible: Asegurarte de que tu código sea útil, no tenga líneas de relleno, para que pueda ser fácilmente leíble y su mantenimiento sea eficiente.
  • Escalable

Buenas prácticas:

  • Establecer reglas
  • Explicar al estructura base
  • Establecer estándares de codificación
  • Evitar largas hojas de estilo
  • Documentación

Para resumir:

Los objetivos deben ser:

  • Predecibles

  • Reutilizable

  • Mantenible

  • Escalable

Y las buenas prácticas son:

  • Establecer reglas

  • Explicar una estructura básica

  • Establecer estándares de código

  • Evitar largas hojas de estilo

  • Documentación, poner pequeños comentarios que expliquen fragmentos de código o líneas complejas

En mi empresa un diseñador se encarga de llevar toda esta parte de html y css, me surge esta duda y nunca le pregunte, ¿Que pasa si hay clases repetidas, se aplica la primer que se encuentre?

Básicamente una arquitectura de css es una serie de patrones/liniamientos/reglas para que nuestro proyecto sea fácil de mantener es decir que si deseamos añadir algo más sea sencillo y rápido

Esto es importante, seguir las buenas prácticas para que no afecte el rendimiento de nuestros proyectos, y sobre todo tener una buena comunicación con el equipo para establecer reglas y definir estándares.

Muy buena clase, siempre pensé que debía haber algún tipo de arquitectura, pero no es muy fácil encontrar la documentación…

que buenos consejos, la verdad esta muy bien explicado el concepto

un buen consejo que escuche para que el codigo CSS sea reutilizable es usar variables CSS, es facil y practico!!

Para esta arquitectura lo ideal es implementar un sistema de diseño para el equipo de desarrollo

Les dejo un link que sirve para reutilizar codigo, como por ejemplos backgrounds, colores
https://developer.mozilla.org/es/docs/Web/CSS/:root

No tengo experiencia en CSS, excelente este curso, aunque seria mejor si fuera mas practico.

Mi resumen
Sirven para dar un buen mantenimiento del proyecto software la arquitectura tiene varios objetivos.
Objetivos:

  • Predecible: Se establecen reglas
  • Reutilizable: Escribir codigo que pueda ser usado en varios lados del proyecto
  • Mantenible: que sea fácil de entender
  • Escalable: crecer de forma controlada

Buenas practicas:

  • Establece reglas con el equipo de trabajo
  • Explicar la estructura base del proyecto a los nuevos integrantes
  • Tener estandares de codificación
  • No tener archivos css extensos
  • Tener bien documentado

Siempre me pregunté como llevan el registro de lo que hacen fuera de Git… ¿Alguna recomendación?

Arquitectura CSS

Las arquitecturas de CSS definen un conjunto de reglas que debemos seguir para
que nuestro codigo CSS, pueda ser utilizado de manera clara, por nosotros asi
como por otras personas, las arquitecturas deben ser:

  • Predecible: Las reglas deben ser claras, es decir se debe hacer el codigo
    lo mas legible posible.
  • Reutilizable: No escribir codigo redundante, evitando copiar y pegar codigo
    de manera que podamos modificar fácilmente grandes bloques de codigo sin
    necesidad de reescribir gran parte del mismo.
  • Mantenible: Que sea fácil de leer y adaptarnos a los estándares, esto es
    que sea fácil de de revisar en caso de que sea necesario realizar cambios.
  • Escalable: Que pueda crecer fácilmente pero sin afectar el rendimiento.

Para poder implementar correctamente nuestras arquitecturas debemos, establecer
reglas para que el equipo se entienda, es decir que todos sigan las mismas reglas
a lo largo del proyecto.

Explicar la estructura base del proyecto a los nuevo integrantes, de manera que
puedan adaptarse al flujo de trabajo existente.

Evitar hojas de estilo muy extensas, ya que esto dificulta la mantenibilidad y
escalabilidad del proyecto, para evitar esto se debe aplicar la reutilización del
codigo.

Mantener una buena documentación de manera que esta permita transmitirle a las
personas de nuestro proyecto, toda la información que requieran.

Buenas prácticas:

  • Establecer reglas (con el equipo, sobre las reglas que van a trabajar juntos)
  • Explicar la estructura base (Explicar tu avance a alguien nuevo)
  • Establecer estándares de codificación (Debe ser definido y mejor escrito en algún documento aparte)
  • Evitar largas hojas de estilo
  • Documentación (Escribe comentarios si es necesario en tu código)

*Que son y para que nos sirven?

Un codigo puede tener hasta mas de 500 lineas.

para darle un orden a esto se establecen las arquitecturas CSS.

Tiene como objetivos se:

Predecible: Que la regla establecida cumpla exactamente con su mision para la que fue creada y no que haga otra cosa diferente.

Reurilizable: Tratar de reutilizar codigo sin escribir mas lineas o repetir lo que ya tenemos.

Mantenible: Que sea facil de trabajar en el futuro

Escalabilidad: que cumpla con lo anteriror para que se pueda seguir mejorando el codigo.

*Buenas practicas

Establecer reglas con el equipo
Explicar estructura base al equipo
Establecer estandares de codificacion
Evitar largas hojas de estilo
Documentacion -->Breve explicacion en comentarios del codigo complejo.

ARQUITECTURAS CSS:
Fueron creadas para facilitar la lectura de nuestras líneas de código.

OBJETIVOS:
• Predecible: Cumplir con la regla establecida, tal cual como se dijo.
• Reutilizable: Reutilizar nuestro código no copiando ni pegando.
• Mantenible: Que sea fácil de entender
• Escalable: Hacer que nuestro archivo crezca de forma rendible.
BUENAS PRACTICAS:
-Establecer reglas
-Explicar la estructura base
-Establecer estándares de codificación
-Evitar largas hojas de estilo
-Documentación

De cuantas lineas se recomienda tener las hojas de estilos?

Arquitectura va de la mano con las buenas practicas, nice

las arquitecturas CSS son mas importante de lo que uno puede pensar.

un nuevo curso aprender css

Para aplicar correctamente la arquitectura de CSS, podemos establecer reglas con nuestro equipo (La predictibilidad), explicar la estructura base , con tal de explicar los fundamentos para entender el proyecto cuándo ya esta muy avanzado. Establecer estándares de codificación, osea, ser juicioso con lo que decimos. Evitar largas hojas de estilo y crear documentación, para explicar de manera más sencilla nuestro código.

Para poder conllevar mucho del código CSS que creemos, usaremos: Arquitecturas predecibles, es decir que sea consecuente con los motivos con los que se creó. Reutilizable, se refiere a que no nos repitamos a nosotros mismo, osea, que podamos utilizar bloques de código, que podamos utilizar varias veces, sin tener que copiarlo. Mantenible, se enfoca en que sea ligero y organizado, no largo y complicado y por último, escalable, es decir que pueda ser agrandado, pero de una forma organizada.

Cuándo tenemos proyectos muy grandes, nos podemos enfrentar a mucho código, pero esto conlleva el tener que llevar un orden para este y para su posterior mantenimiento y crecimiento.

<!DOCTYPE html>
<html lang=“en”>
<head>
<meta charset=“UTF-8”>
<meta name=“viewport” content=“width=device-width, initial-scale=1.0”>
<title>Header</title>
</head>
<script>

</script>
<style>
body{
margin: 0;
}

header{
    width: 100%;
    height: 80px;
    background-color: #21C08B;
    display: flex;
    justify-content: space-between;
}
header img{
    width: 200px;
    margin: 10px 0;
}
ul, li{
    list-style: none;
}
a{
    text-decoration: none;
    color: #FFF;
}

.nav-list{
    display: flex;
    align-items: center;
    margin: 20px;
}
.nav-item{
    margin: 8px 30px 0 30px;
    font-size: 17px;
    font-weight: 600;
    font-family: 'Lato';
    color: #FFF;
    background: transparent;
    border: 0;
}

section{
    background: linear-gradient(to bottom, #21C08B, #5e1dfc);
    width: 100%;
    height: 500px;
}

footer{
    background-color: #5e1dfc;
    width: 100%;
    height: 40px;
}

</style>
<body>
<header>
<img src=“https://raw.githubusercontent.com/platzi/PlatziVideo/feature/react/src/assets/static/logo-platzi-video-BW2.png”>

</header>
<section>
    
</section>
<footer>

</footer>

</body>

Es bueno fomentar las buenas practicas desde el inicio para tener buenas bases

Creo que sentando estas grandes bases solidas desde un inicio del desarrollo se pueden lograr cosas espectaculares, así con llevar la documentación, indentación del código los demás colegas puedan entrar rápido a un proyecto de desarrollo.

Importante siempre tener buena comunicación con todo el grupo de trabajo y clientes.

Buenas prácticas:

  1. Establecer reglas.
  2. Explicar la estructura base.
  3. Establecer estándares de codificación.
  4. Evitar largas hojas de estilos.
  5. Documentación.

Muy fundamental emplear arquitectura en nuestros proyectos.
Tener estos objetivos.
Y aplicar buenas practicas.

Me encanta que sea un contenido directo al grano y sin tanto relleno, gracias

Buenisimo!

Lets apply that

Good!

He batallado con mis compañeros con los que hacemos maquetaciones paginas por hobby pero ahora entiendo que css si tiene arquitecturas :´)

Muy importante y que muchas veces pasa desapercibido.

Aun no he visto el video, pero hablo desde lo que ya he hecho, BEM me parece una muy buena practica.

estupendo, siempre tener en cuenta las buenas practicas para ser los mejores

Excelentes principios!

Importante la arquitectura CSS

“Es importante establecer reglas y cumplirlas”

Muy buen explicación, me aclara muchas dudas.

Establecer reglas para mi es muy importante cuando trabajas en equipo.

Arquitecturas CSS ❤️

Si, suele suceder.. Jajajaja, es bueno saber que no soy el único.

Excelente!!!😉

Super importante tema!

Excelente clase

Esto es súper importante.

Muy buena infomarción

la documentacion

Recomendaciones muy oportunas

Predecible Reutilizable Mantenible Escalable

Es muy basico pero supremamente util

👍