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

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

1/28
Recursos

Aportes 134

Preguntas 5

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesi贸n.

Si est谩s leyendo esto 隆T脷 PUEDES!

Excelente, soy el primero, esperaba mucho el curso

<h5>4 tips para llevar nuestros conocimientos de css a otro nivel</h5>
  • Tip 1: No es necesario memorizar todas las propiedades y valores, lo importante es practicar.
  • Tip 2: Conoce los conceptos fundamentales de css: Esto es un tema amplio, lo importante es conocer los conceptos fundamentales de css como: layout, selectores, responsive, flujo normal, modelo de caja, herencia y cascada, Formatting Contexts.
  • Tip 3: Usar DevTools para encontrar errores y hacer pruebas r谩pidas, lo importante es ir al devtools y inspeccionar y buscar el error.
  • Tip 4: Saber qu茅 herramientas te sirven para aprender y que herramientas nos te sirven para aprender, los resumenes nos son una buena forma de aprender, la mejor manera es hacer cursos, leer libros, leer documentaci贸n oficial.

Me gusta el trabajo y empe帽o que se lo puso a TODO, incluso a algo tan 鈥減eque帽o鈥 como el repositorio y los slides. Espero que futuros cursos consideren hacerlo as铆.

Recomiendo que, despu茅s de los cursos de la profesora Estefany, vayan a ver los curso del profesor Diego Degranda (Complementar).

Aqu铆 esta la repo del curso para poder ir llev谩ndolo paso a paso
鈾 隆Empecemos! 鈾
https://github.com/platzi/CSS2020

Estefany es una experta en CSS. Me da gusto que hiciera este curso 馃榿

Vamos a darle con todo a CSS

Termina el v铆deo 1 y de una va al examen!!!

隆Genial!, estuve esperando mucho estos cursos, estaba tan ansioso de ver a teff super emocionada de publicar sobre estos cursos desde que los grab贸 que me pas贸 toda su emoci贸n jaja 馃ズ馃挌.
.
Estoy listo para ambos cursos, CSS Grid es una maravilla, te permite hacer demasiadas cosas muy chulas, posicionar elementos de manera super din谩mica, puedes cambiar la posici贸n de los mismos en versiones responsives, en serio, si Flexbox ya era f谩cil, CSS Grid lo es a煤n m谩s, solo es cuesti贸n de entenderlo y practicarlo 馃挌.
.
PD. Teff hace muy buenos quices 馃憖

As铆 qued茅 cuando volv铆 de la ruta de Backend a Frontend para recordar ciertas cosas:

Vamos con todo!, esperaba este curso!!

Me alegra que ya subieran este curso, ya que me encuentro practicando mucho con los primeros cursos de CSS y HTML y creo que este curso luce bastante prometedor.
As铆 que 隆a seguir aprendiendo!

Deje un poco el desarrollo front end por temas de trabajo, crei que dominaba el css Grid pero pero que no, asi que a estuadier nuevamente 馃敟

Aqui voy a tomar las notas del curso notion por si es de ayuda.

Vamos a darle

Vengo a estudiar css ya que es necesario para poder aplicar a frameworks f谩cilmente como en svelte o conceptos que son clave para usar tailwindcss

  1. No es necesario memorizar todas las propiedades y valores 馃槉
  2. Conoce los conceptos fundamentales 馃: layour, selectores, responsive, flujo normal, modelo de caja, herencia y cascada, formatting contexts
  3. Usar DevTools para encontrar errores y hacer pruebas r谩pidas 馃暦
  4. Sab茅r qu茅 herramientas te sirven para aprender (y cu谩les no)

Repositorio del curso

Empezar a profundizar mas en todo esto, a por este curso 馃槃

Lo estaba esperando, deje de ver Wandavision cuando me di cuenta que estaba disponible 馃槼

Wouuuuu solo por este curso renov茅 mi suscripci贸n de Platzi xd

No pares de aprender!

Esperaba much铆simo este curso!

Por fin !!! es hora de renovar mis conocimientos 馃挌

Que excelente curso para continuar con un buen lunes !!!.. my agradecido profesora estefany.

Me encanto lo organizado que tienes toooooodo el material @teffcode. Este curso definitivamente va a estar muy bueno. Es mi primer curso contigo como profe. 馃帀馃帀馃帀

A seguir aprendiendo y mejorando las habilidades para maquetar

Es completamente emocionante seguir con cursos de @teffcode, desde la Escuela de JS 2019 隆Vamos a aprender mucho con este curso隆

Estuve esperando por este curso =)

Yo estaba esperando este curso con ansias

a mejorar mi CSS!

隆Genial!, llevaba tiempo esperando este curso, vamos a ver que nuevo podemos aprender!

Ya esperaba estos cursos!! 馃ぉ

Buen d铆a, aqu铆 te comparto mis notas sobre el curso, espero te sea de utilidad:

Me encanta el esmero que le pone Estefany a todo lo que hace 馃ぉ, se nota el amor con el que nos transmite lo que sabe. Vamos con toda a aprender y reforzar conocimientos 馃挌

jajaja me cuesta un poco CSS pero sigo aprendiendo, y estos tips me estan ayudando mucho

sigo descubriendo y aprendiendo con TEFFCODE!

Comenzando!

Muy ansioso de empezar! Me emociona mucho!

Buenas expectativas de este curso, conocimientos de Grid facilitan el desarrollo y agilizan la creaci贸n de p谩ginas web.

Me daba mucho miedo iniciar este curso porque s茅 que es el primer paso a una carrera en la que me enfrentare constantemente al s铆ndrome del impostor (que a mi en lo particular me pega muuuy duro) y no me sent铆a listo. Es muy probable que jam谩s lo est茅 y que si no inicio ahora jam谩s lo har茅, as铆 que toca esforzarme con todo lo que tengo para cumplir este sue帽o.馃挭

Justo el tip 1 fue lo que me frustr贸 mucho, porque pens茅 que ten铆a que grabarme tantas cosas y eso me asfixi贸, es muy cierto

Joder, am茅 el repo con los apuntes

Reci茅n aprender flexbox y ahora toca Grid. Ando emocionado por el curso 馃槃

Espero dominar con este curso CSS Grid.
Al menos posicionar r谩pidamente xd

Hoy lo empiezo, hoy lo termino. Se nota la diferencia entre un curso preparado como este y uno que no lo esta. Excelente 馃憦馃憦

Hola comunidad, luego de que terminen este curso y el siguiente pueden poner aprueba sus habilidades adquiridas haciendo los challenges de este sitio web(los gratuitos obiviamente) Frontendmentor Challenges

Tom茅 este curso pero de 2017 apenas hace unos d铆as, 驴valdr谩 la pena ver este curso actualizado? o 驴voy directo al de CSS grid y flexbox?

Solo quer铆a comentar que, el curso no lo v铆 y me decid铆 a hacer el examen sin tomar el curso para saber el nivel de conocimiento que ten铆a en CSS GRID! la verdad no pens茅 pero lo obtuve de una vez! Esto no quiere decir que no tomar茅 el curso pero la verdad me sorprend铆 del nivel que ten铆a en CSS GRID

Hola Teacher Estefany 馃挏
Por fin sali贸 el curso!!! 馃槃
Mi primera impresi贸n me dice que es un curso super preparado y que nos llevara mucho a salir de la zona de confort de lo cotidiano en cursos y ponernos a practicar.
Me emociona mucho tener la oportunidad de estar aqu铆 tomando un curso m谩s de usted y de pertenecer a esta bonita comunidad.
A seguir disfrutando, muchas gracias de verdad.

Estaba esperando este curso desde que lo anunciaron jaja y estoy muy entusiasmado ya que empiezan arrancado promocionando el Platzi master que es a donde quiero entrar :3 pero bueno, 茅xito a todos y les dejo mi resumen:

4 Tips para mejorar

  • No es necesario memorizar todas las propiedades y valores.
  • Conoce los conceptos fundamentales.
    • Layout.
    • Selectores.
    • Responsive.
    • Flujo normal.
    • Modelo caja.
    • Herencia y cascada.
    • Formatting Contexts.
  • Utilizar Dev Tools para encontrar errores y hacer pruebas r谩pidas.
  • Saber qu茅 herramientas te sirven para aprender.

En este curso veremos

  • Historia.
  • Conceptos.
  • Retos.
  • Quices.
  • Proyecto creativo.

Documentaci贸n del curso:
https://github.com/platzi/CSS2020/blob/main/README.md#curso-de-css-grid-

Estaba esperando este curso desde hace ya una rato, me alegra que ya este aqu铆@

Que genial que al fin esta disponible el curso 馃榾

Navegu茅 por todo internet para entender un poco del tema y la verdad ninguno era claro, Gracias a Platzi y Estefany ahora si vamos a entender el mundo de Grid!

Por fin llego tan esperado curso de la mano de Estefany. Let鈥檚 go鈥!
Curso recomendado en est谩 clase: https://platzi.com/clases/flexbox-css-grid/

Por fin!! Gran profesora!!

Justo esperaba este curso con ansias, hora de llevar CSS al siguiente nivel

Yo solo digo que llevaba varios d铆as esperando este curso y el de 鈥淐urso de Dise帽o Web con CSS Grid y Flexbox鈥 y hoy por fin los veo disponibles 隆隆隆隆隆隆隆隆隆隆隆GRACIAS!!!

Estoy listo para los retos 馃槃

Estaba esperando este curso, que bueno que ya lo sacaron 馃槂

Hoy a las 3 de la ma帽ana vi que ya estaba disponible, y ahorita me levante directo a hacer este curso jaja, me encanta CSS Grid 馃槄馃槄馃挌

Estaba esperando a que saliera este curso!, no lo v铆 en la agenda de platzi, HYPE OVER X9000.

Wujuu!! Porfin nuevo curso de CSS para mejorar mis habilidades, en CSS.

Un muy buen recurso para los que estamos aprendiendo CSS Grid Layout CSS Grid Garden

Es como FlexBox Froggy pero para CSS Grid 馃槉

Emocionado por ver el nuevo curso de Teff

Excelente a empezar el curso para conocer mas Css y hacer magn铆ficos dise帽os 馃槃

隆Al fin! Un curso que llevo esperando hace mucho y adem谩s es con una de las mejores profesoras que tiene Platzi 馃ぉ.

Genial, estaba esperando este curso. Es gratificante ser de los primeros.

Justo estaba con un error de otro curso de la escuela de desarrollo web y escucho de esta maravillosa profesora que no todo se trata de revisar el codigo muchas veces se trata de jugar con la DevTools. voy a la DevTools cambio algunas cosas y encuentro el error!! Gracias enserio鉂わ笍

Muchos de los errores en css es por el tema especificidad y herencia

La mejor herramienta para aprender es practicar, practicar y practicar.
Primero entender cada concepto, y luego jugar con ellos.
.
Con el tiempo se aprende a resolver todo tipo de layouts

  • Un display de productos
  • Un header con navegacion con icono para datos del usuario.
  • Un hero con boton call to action. etc鈥
    .

ohh, la maravillosa Estefany, que buena profesora!!

Soy de Espa帽a no puedo acceder a platzi master, a llorar a la calle de la llorer铆a!!!

Tip 1: No es necesario memorizar todas las propiedades y valores de CSS.

Tip 2: Conoce los conceptos fundamentales.

  • Layout
  • Selectores
  • Responsive
  • Flujo normal
  • Modelo de caja
  • Herencia y cascada
  • Formatting Contexts

Tip 3: Usar DevTools para encontrar errores y hacer pruebas r谩pidas.

Tip 4: Saber qu茅 herramientas te sirven para aprender.

En este curso

  • Historia
  • Conceptos
  • Retos
  • Quices
  • Proyecto creativo

4 Tips para llevar los conocimientosde CSS a otro nivel:

  1. No es necesario memorizar todos los valores y propiedades, es mejor tener una nocion de para que sirven.
  2. Conoce los conceptos fundamentales, es un tema gigantesco pero conocer las bases nos ayuda, estos son:
    • Layout.
    • Selectores.
    • Responsive Design.
    • Flujo Normal.
    • Modelo De Caja.
    • Herencia y Cascada.
    • Formatting Contexts.
  3. Usar DevTools para encontrar errores y hacer pruebas rapidas.
  4. Saber que herramientas te sirven para aprender y cuales no.

En este curso veremos:

  1. Historia
  2. Conceptos
  3. Retos
  4. Quices
  5. Proyecto Creativo

Genial este curso, Ya he practicado bastante con flexbox, para familiarizarme, ya es hora del siguiente nivel.

馃憢馃徏 !Mi primer comentario! Estoy maravillado por la metodolog铆a que ha usado la profe y por esta clase, ahora si debo enfocarme en aprender mejor CSS y leer toda la documentaci贸n de MDN y las referencias. Me gust贸 el slide de esta clase muy did谩ctico excelente 馃榿.

Vengo desde el futuro a hacerles un Spoiler hermoso: EXCELENTE CURSO, tanto contenido, teor铆a como la pedagog铆a de la profesora. Vas a terminar con la cabeza explotada de la emoci贸n y las ganas de realizar layouts incre铆bles despu茅s de hacer el curso.
Consejos: Presten y revean varias veces los videos donde hay mucha teor铆a, sirven un mont贸n, m谩s si sos nuevo en CSS. Te abren la cabeza a como encarar y plantear los desaf铆os con CSS. No tengan drama en tardar un poco m谩s, sino den pasos seguros. Afiancen los conocimientos.

Les dejo un screenshot del layout que hice yo sin saber nada de CSS Grid hasta luego de terminar el excelente curso de Teff, por si dudan de si es verdad dejo el link al codepen, el dise帽o esta sacado de dribble ac谩 pero con otras im谩genes similares.

Cuando estaba en Platzi Master tuve la oportunidad de que me dieras clases en vivo, la verdad que eres un amor de persona con una gran paciencia y pasi贸n por lo que haces, muchas gracias 鉂わ笍

Con muchas ganas de _EMPEZAR ! _

E X C E L E N T E

Ahora si viene lo chido 馃槒

Estuve esperando este curso mucho tiempo, es primera vez que veo clases con esta profesora y me ha encantado su manera de explicar.

隆Estoy listo para lo que venga! y si algo no s茅 hacerlo, contar茅 con la comunidad de Platzi!

馃殌 Tips para llevar tu conocimiento de CSS a otro nivel

<h4>Apuntes</h4> <h4>4 tips para mejorar tus conocimientos en CSS</h4>
  1. No es necesario saber todos las propiedades y valores
    • Es m谩s importante practicar
  2. Conocer los conceptos fundamentales
    • Pueden llegar a ser bastantes, pero son importantes
      • Layout
      • Selectores
      • Responsive
      • Flujo normal
      • Modelo de caja
      • Herencia y cascada
      • Formatting Contexts
  3. Usar las DevTools para encontrar errores y hacer pruebas r谩pidas
    • La respuesta a diferentes problemas se puede encontrar con mayor facilidad en las herramientas de desarrollo
  4. Saber qu茅 herramientas te sirven para aprender

Genial !!! este curso estar谩 super 馃榿

Here we go! Estaba esperando este curso 馃榿

Gracias por este curso!! Vamos a reforzar el CSS. Eres un modelo a seguir Estefany. 鉂わ笍

El curso de Frontend Developer fue de mis primeros cursos en Platzi, que gusto encontrar nuevamente a esta profe en nuevos cursos ! 馃槃

H estado esperando este curso con muchas ansias!!! Y lo comienzo con tanto entusiasmo y con muchas ganas de aprender.

Esto es demasiado teff 馃挌, que gran trabajo ! 馃憦

Una pregunta, Platzi master ya esta para Venezuela?

genial tenia muchas ganas de llegar hasta aqu铆 !

Este curso pinta espectacular!!馃槑

Vamos con toda por este curso !! 馃敟

Notas de la clase

Excelente introducci贸n, estuve esperando mucho el curso

I鈥檓 excited to be here! I鈥檝e finished Frontend course which was excellent. Here we go Miss Estefany! 鉁煈煆烩嶐煉

incre铆bles consejos para empezar el curso .!

Me encanta saber que no aprender茅 a usar solo Css si no entender茅 lo que hay detr谩s para poder crear soluciones :3

El curso que m谩s esperaba