Lleva tus conocimientos de CSS a otro nivel

1

Tips para llevar tu conocimiento de CSS a otro nivel + Quices

¿De dónde venimos y en dónde estamos?

2

¿Cómo fue pensado CSS cuando se creó?

3

Limitaciones de CSS y el problema de los elementos flotantes

4

Herramientas que nos han facilitado el camino

¿Cómo se llegó al concepto de CSS Grid?

5

¿CSS Grid es una idea nueva? La evolución de la especificación

6

¿Qué significa Grid para CSS?

Control de alineamiento

7

Técnicas de alineamiento antes de CSS Grid: margin y line-height

8

Técnicas de alineamiento antes de CSS Grid: table-cell y positions

9

Técnicas de alineamiento de CSS Grid: pros y contras

10

Modos de escritura y ejes de alineamiento + Reto

11

Propiedades físicas y lógicas en CSS + Quiz

12

Técnicas de alineamiento con Flexbox

13

Dibujemos con CSS + Reto

Conceptos generales para comenzar a trabajar con CSS Grid

14

Grid y las relaciones padre e hijos inmediatos + Quíz

15

Lines, tracks, cell, area, gutters, grid axis, grid row, grid column + Reto

16

¡Iniciemos nuestro proyecto! Fase de creatividad e identificación de elementos

Propiedades y valores para el elemento padre

17

Creando nuestro contenedor: ¿display: grid o display: inline-grid?

18

Creando filas, columnas y espaciado + Reto

19

Alineamiento en el elemento contenedor + Quiz

20

Generación automática de tracks + Quíz

21

Funciones: repeat(), minmax() y fit-content()

Propiedades y valores para los elementos hijos

22

¡Manos al código! Fase de construcción de la grid principal de nuestro proyecto

23

Ubicación + Reto

24

Alineamiento en los elementos hijos + Quiz

25

¡Manos al código! Fase de ubicación y alineamiento

26

Continuando con la fase de ubicación y alineamiento

Lo que podemos lograr adicionalmente con CSS Grid

27

Responsive y CSS Grid

28

Continúa con el Curso de Diseño Web con CSS Grid y Flexbox

Herramientas que nos han facilitado el camino

4/28
Recursos

Aportes 29

Preguntas 2

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.

Algunas de las herramientas principales son:
Arquitecturas.
Cuando hacemos css tenemos una metodología de trabajo, que nos facilita el programar.
Pre y post procesadores
Agregar prefijos y propiedades de acuerdo en que navegador estemos trabajando. Aunque siempre hay que verificar sus pros y contras.
Diseño de componentes.
Trabajar con componentes, a partir del elemento mas pequeño.
Frameworks.
Modelos de trabajo que nos facilita crear diseños web.
Performance
Verificar el rendimiento de nuestro código.
Accesibilidad
Lograr que todas las personas puedan acceder a nuestros sitios web.
Los Evergreen browsers son navegadores que se actualizan constantemente a futuras versiones que existen.

🧰 Herramientas que nos han facilitado el camino

<h4>Ideas/conceptos claves</h4>

Post procesadores son herramientas que procesan el CSS y lo transforman en una nueva hoja de CSS que le permiten optimizar y automatizar los estilos para los navegadores actuales

<h4>Apuntes</h4>
  • La comunidad desarrolló herramientas para facilitar el camino como técnicas
  • Arquitecturas
    • Es tener una regla general en CSS
    • Usando sistema de clases como ser BEM
  • Pre y Post procesadores
    • Pre procesadores ⇒ Cambia la sintaxis de CSS permitiendo trabajar más rápido
    • Post procesadores
  • Diseño de componentes
    • Ej. Atomic Design
    • Lo que se busca ya no es trabajar con páginas enteras sino con componentes
  • Frameworks
    • Muchos sitios iguales se deben a frameworks como Bootstrap y Foundation
    • Nos permiten trabajar de una manera sencilla con los estilos
  • Performance
    • Es importante revisar cuanto va ser el costo en el navegador
  • Accesibilidad
    • Actualmente se busca que todo tipo de personas puedan acceder a nuestros sitios web
  • Evergreen Browsers
    • Navegadores compatibles con nuevas características de la web

Los evergreen browsers son buscadores que se actualizan automáticamente, eso permite que muchas personas tengan las versiones actuales y puedan utilizar las propiedas de CSS más recientes si es que hay. Al terminar la clase, vi mi versión de firefox y me di cuenta que se estaba actualizando 😲.

Interesante la clase, muy buen acercamiento a las herramientas que usamos en el día a día.

Sinceramente no me gustan los frameworks de css , los he utilizado y siempre he preferido desarrollar con css. Me gusta saber , descubrir como funciona todo el desarrollo web y aprender a utilizarlo en diferentes proyectos. 😄

Ya he tomado varios cursos donde he practicado CSS y la verdad he querido ir a un framework como bootstrap para quitarme esa espinita de crear sitios con él.
Pero habría unos como “Requisitos” antes de pasar a estudiar eso?
Me gustaría aprender antes animaciones que siempre lo he dejado y no empiezo con el tema.

Las Arquitectura en CSS nos permite tener un código que sea predecible, reutilizable, mantenible y escalable que son las cuatros características de una arquitectura optima si queremos darle una buena experiencia la usuario ademas de que nuestros productos puedan llegar a muchas más personas.

BEM es un gran aporte al código limpio!!

Son muchas las herramientas para poder crear cosas en la web, hay que conocerlas para saber cual usar y en que momento.

Me gusta mucho los cursos de Estefany Aguilar se nota el entusiasmo al momento de explicar cada detalle del tema y los aporte que nos facilita para mi una de las mejores.

Mis Apuntes

  • La comunidad desarrolló herramientas para facilitar el camino como técnicas

    OBJETIVOS:
    Evaluar un panorama actual, ya que las herramientas tienen un impacto en la forma en la que diseñamos y desarrollamos.

  • Arquitecturas

    • Es tener una regla general en CSS
    • Usando sistema de clases como ser BEM
  • Pre y Post procesadores

    • Pre procesadores ⇒ Cambia la sintaxis de CSS permitiendo trabajar más rápido
    • Post procesadores ⇒ Agregar pequeños prefijos o propiedades independiente de el navegador del que se está programando, que son necesarias a la hora de trabajar
  • Diseño de componentes

    • Ej. Atomic Design
    • Lo que se busca ya no es trabajar con páginas enteras sino con componentes
  • Frameworks

    • Muchos sitios iguales se deben a frameworks como Bootstrap y Foundation
    • Nos permiten trabajar de una manera sencilla con los estilos
  • Performance

    • Es importante revisar cuanto pesa nuestro navegador
  • Accesibilidad

    • Actualmente se busca que todo tipo de personas puedan acceder a nuestros sitios web
  • Evergreen Browsers

    • Navegadores compatibles con nuevas características de la web

En un futuro los nuevos desarrolladores frontend nos van a voltear a ver con el mismo asombro con el que ahora vemos a nuestros predecesores por usar esos “trucos”. como por ejemplo los Pre y post procesadores xD

WOW , Tantas cosas que hay por aprender.

Frameworks, pre-procesadores… es solo opinión personal por supuesto, nunca tuve gusto por cosas como SASS o Bootstrap, los he odiado desde que se que es el diseño web, siento que nunca cambiaría al css-vanilla

personalmente hago todo con puro CSS, leí que los Frameworks CSS y pre procesadores cada vez menos los usan...

Herramientas CSS

Estamos hablando de las herramientas que nos han facilitado el camino y no tener que evadir los problemas mediante trucos.

Estas herramientas han generado un impacto de tal forma que cambiaron la forma de diseñar y desarrollar webs.

Arquitecturas

Es la estandarización de como nombramos a nuestras clases en CSS y elegir que método de arquitectura usaremos.

Pre y Post Procesadores

Son bastante importantes los preprocesadores por que nos permite trabajar mas rápido al momento de crear código y los postprocesadores nos permite agregar pequeños prefijos independientemente el navegador en el que estemos trabajando. Se deben tener en cuenta que prefijos no son necesarios.

Diseño de componentes

Es unas tecnica que utilizamos para el desarrollo de vistas en general.

Frameworks

Los frameworks de CSS ha permitido que la mayoría de las webs tengan un similitud en cuanto apariencia, pero esto es compensado por la velocidad y facilidad de su uso, a tal punto que una persona con pocos conocimientos de CSS logre crear vistas fantásticas.

Se caracteriza por tener unos lineamientos que lo hace poco personalizable. Es importante cuestionarnos si necesitamos o no un framework.

Performance

Es tener es ser consientes del rendimiento de nuestra web.

Accesibilidad

Es adoptar nuestra web para aquellas personas son alguna limitación física.

Evergreen Browsers

Nos habla de la compatibilidad de nuestro código con los navegadores.

Debemos aumentar nuestra compresión del por que suceden las cosas y saber que necesitamos para desarrollar.

,

Buscando sobre pre-procesadores, logré encontrar que estos son para convertir un tipo específico de código de programación a código de CSS, haciendo más fácil el uso de variables para nuestros estilos, y poder reutilizar código de manera más fácil.

Aquí mi fuente

También un enlace al repositorio de PostCSS, el cual es el post-procesador de CSS más usado.

Excelente Curso

I want to learn about frameworks right now

La comunidad con el paso del tiempo, desarrollo herramientas para facilitar el camino. Es importante ver estas ya que tienen un impacto en la forma en la que disenamos y desarrollamos.

  • Arquitecturas:

    Cuando trabajos en CSS tenemos cierta metodologia de hacer las cosas que nos falicita la forma de programar en equipo o incluso solitario.

  • Pre & Post Procesadores:

    Estos son bastantes importantes, sobre todo el “pre” ya que cambiaria nuestra sintaxis un poco en CSS. Pero nos ha permitido trabajar mas rapido. y los Post nos permite agregar pequenos prefijos. Un problema es que nos puede agregar mucho material cuando a veces solo necesitamos 1 o 2.

  • Diseno de Componentes:

    Ya no buscamos trabajar con paginas enteras, en ocaciones solo con pequenos elementos

  • Frameworks:

    Estos nos ayudan a trabajar demaciado facil, pero gracias a esto podemos empezar a ver que muchas de las paginas web son parecidas.

  • Performance:

    Verificar el peso o la rapidez en que los navegadores pueden procesar nuestro codigo.

  • Accesibilidad:

    Lo que queremos hoy en dia, es que todas las personas puedan utilizar nuestro sitio web.

  • Evergreen Browsers:

    Los navegadores con el paso del tiempo, se han empezado a actualizar constantemente, gracias a que los lenguajes de HTMl, CSS y JS, igual lo van haciendo y van agregando nuevas funciones.

Uy no sabia que existe POST procesadores de CSS

Me quedo con la boca abierta de la manera en que explica la profe 😵‍💫
Es muy interesante todo,

PINCIPALES VILLANOS ; Netscape!

Las herramientas que nos han facilitado el camino son

  • Arquitecturas
  • pre y post procesadores: el pre nos permite una sintaxis diferente y más rápido. el post( como autoprefixer) agregar pequeños prefijos independiente de los navegadores
  • Diseño de componentes (Como Atomic Design) abarcar elementos desde el más pequeño hasta el grande
  • frameworks - facilita el trabajo
  • performance - revisar el peso en el navegador y para la gente que revisa nuestros códigos
  • accesibilidad - hacer que todas las personas puedan acceder al sitio web
  • evergreen browsers - Todo el tema de compatibilidad
  • aumentamos nuestra comprensión del por qué suceden ciertas cosas. Necesitamos ser más críticos a la hora de trabajar con algo

tome el curso de CURSO DEFINITIVO DE HTML Y CSS y el curso básico de JAVASCRIPT, ¿debería tomar otro curso previo a tomar este?

Arquitecturas