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 鈥淩equisitos鈥 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 鈥渢rucos鈥. 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 鈥減re鈥 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