Deck: Videoconferencia semana 1

Dudas sobre el trabajo final

Temas

Opciones para videoconferencias

Container queries (estaba en el plan)
SASS (aunque aún se usa, las novedades en CSS hacen SASS cada vez menos relevante)
Frameworks: Bootstrap o Tailwind, sin build process para que sea más sencillo
Hacer un sitio con Eleventy (es un SSG o Static Site Generator)

Sugerencias para desarrollo en equipo

Establecer un Design System sencillo

Decidir en conjunto los colores, tipografía, cómo serán los botones y enlaces, aspectos generales de diagramación como márgenes entre elementos.
Tener un documento común (puede ser un CodePen) que sirva de referencia y en particular para que estén trabajando con la misma base de código (tanto para el CSS como para la construcción de elementos comunes en HTML).
Ejemplo

Reciclar y compartir elementos

Trabajar de manera modular: separar páginas en componentes, cada persona puede ocuparse de ciertos componentes, y pueden compartirlos entre todo el grupo

CSS

Decidir en una nomenclatura común para clases y IDs. Esto evitará conflictos al unir el código más tarde. Por ejemplo: decidir usar un prefijo para identificar componente o página:

.menu-principal_enlaces .menu-principal_botones

.home_hero .home_listado

.card_imagen .card_titulo

Los elementos generales manejarlos a nivel común, por ejemplo estilo de enlaces, botones, el titulo de sección generales: <a href="#" class="btn">
Cuando sea necesario para mi componente, hacer variaciones a esos elementos comunes usando la nomenclatura acordada: <a href="#" class="card_btn">

Orden

Tener un documento común (Google Sheet, Dropbox) donde apuntar:

Las clases que van usando (para evitar repetir accidentalmente)
Códigos hexadecimales de colores
Breakpoints
Cualquier otra cosa útil a todos.

Centrar en CSS

Si quiero centrar texto u otros elementos en línea
Si quiero centrar elementos en bloque
- Horizontalmente
- Verticalmente

Demo empezando con HTML y CSS

Vamos a CodePen