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 “pequeñ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’s 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 “Curso 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’m excited to be here! I’ve 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