Platzi
Platzi

¡Invierte en ti y celebremos! Adquiere un plan Expert o Expert+ a precio especial.

Antes: $349
$259
Currency
Antes: $349
Ahorras: $90
COMIENZA AHORA
Termina en: 15D : 8H : 40M : 47S

Debes tener cuenta en Platzi

Para ver esta clase abierta debes iniciar sesión

5 tips para aprender CSS5/43

Lectura

Infografia-Frontend-Javascript.jpg

Recomiendo leer la parte de CSS de los apuntes de Majo, vienen de maravilla.
https://losapuntesdemajo.now.sh/
Captura.PNG

yo lo llamaria perseverancia.png
reglacss_xl.png

Como recomendación y de todo corazón les digo que si quieren hacer cosas impresionantes aprendan inglés. No es por menospreciar el contenido que hay en español y estoy muy consciente que hay contenido extremadamente bueno, pero si ya tienes conocimientos sobre un lenguaje sea el lenguaje que sea, yo te recomiendo que aprendas inglés y verás el mundo inmenso que desconocías . A veces muchas personas nos quedamos estancadas por solo aprender los que nos enseñan y ese es el grave error que cometemos la mayoría de las personas. Aprendiendo inglés, viendo contenido en inglés y leyendo documentación, habrás dado el paso más allá que muchos no dan.

Aprende, practica y enseña.
Saludos

Un lugar para practicar: codewars

“El que aprende y aprende y no practica lo que sabe, es como el que ara y ara y no siembra”
(Platon)

Los tips estan super, hay algunas cosas que me preguntaba. Encontre info muy útil en esta página: https://uniwebsidad.com/libros/css/capitulo-1 (recomedable darle una leída, la encontré y me gusto)
Adjunto imagenes de lo que me preguntaba de la imagen anterior (está todo en la página):
![](modelo_de_caja.png
![](selectores.png

Un juego para dominar CSS FLexBox => https://flexboxfroggy.com/#es

esta-informacion-vale-millones01567050736.jpg

Comparto estos enlaces donde pueden conocer las diferentes propiedades en CSS y el curso de Grid Layout 2017 con su pronta actualización.
.

Hay que practicar hasta enloquecer!! 💪🏻

¿Cuando habrá un curso para crear infografías así de practicas?

Si quieren mejorar en flexbox puedan jugar Flexbox Froggy

CSS no es complejo… hasta que modificas el código y te das cuenta que tu vista no cambio nada xD

Excelente tips. compañeros les comparto 2 guias de flexbox y CSS Grid Layout

Los cursos de la carrera de arquitectura front ayudan mucho

Hola quiero compartir el link a un sitio web de aprendizaje de tecnologías y se puede practicar en ella. https://www.w3schools.com/

me encanta como esta explicado!! 😄

Pueden entrar aqui para aprender un poco mas de css : https://i.emezeta.com/weblog/css3-cheatsheet/css3-cheatsheet-2017-emezeta.pdf

Si es una buena idea que practique es muy útil tener el conocimiento, en lo personal me he topado con muchos desarrolladores que no saben usar CSS, son muy buenos resolviendo otros temas pero CSS es un dolor de cabeza para muchos y es realmente sencillo.

Les dejo la explicación que siempre doy y ha sido muy útil:

Selector de tipo o etiqueta p, h1, div tienen un valor de = 1 punto
Selector de clase .class-title .class-paragraph tienen un valor de = 10 puntos
Selector de id #id-container tiene un valor de = 100 puntos

Entonces en la practica sucede algo como una simple suma y toma la propiedad color del selector mas alto

#id-container { /id = 100 puntos/
color:blue;
}
.class-title{ /
selector class = 10 puntos */
color:green;
font-size: 2rem;
font-weight: bolder;
margin-bottom: 1rem;
}

p.class-paragraph { /selector tipo y/o etiqueta = 1 + selector class = 10 = 11 puntos/
margin-bottom: 1rem;
color: tomato;
}

Captura de Pantalla 2020-09-29 a la(s) 17.21.05.png

Espero les sirva y pueden hacer algunos ejercicios.

Efectivamente, saber cómo se construye un elemento HTML y una regla CSS es lo primero que se debe aprender, también el “box model” o modelo de caja (todo es una caja en HTML 😃 ).

Me faltan dominar los dos ultimos pasos! A por ello

Es una maravilla esta infografía 😃

la practica en fundamental en todo aprendizaje

Es como el aprender ingles, es prectica sotenida en el tiempo

La práctica hace al maestro, pueden usar esta web para practicar CSS sin tener que escribir un código posteriormente.
CSS Dinner

Gracias por el aporte, lo guardo, creo que es importante tener presentes estos TIPS.!!!

Incluso trabajando con css a diario es bueno tener claros los conceptos fundamentales que lo conforman.

Muy buena infografia,

Lo que mas me a costado aprender es el paso 4

sukee!!!

Importante tener en cuenta también la ejecución en cascada y la jerarquía de selectores.

5 Tips para aprender CSS

  1. Aprender a identificar los selectores para aplicar ciertas propiedades a ciertos objetos en específico, hay 4 tipos de selectores:
    • Universal: Se aplica a todos los elementos y se identifica con un *
    • Tipo: Es para cada etiqueta de HTML, todo el contenido de estas etiquetas tendrá los valores de las propiedades definidas. Se identifica poniendo la etiqueta antes de los corchetes
    • Clase: Sirve para aplicar varias propiedades a distintos tags dentro del HTML, se tiene que declarar previamente en la etiqueta que queramos se vea afectada por este selector. Se identifica poniendo un . seguido del nombre del id que queramos declarar propiedades.
    • ID: Es específico para cada etiqueta. Se identifica poniendo un # seguido del nombre del id

  2. Tenemos que conocer la anatomía de CSS. Primero se coloca el selector que deseamos, como previamente ya vimos en el punto anterior, luego abrimos los corchetes y dentro de ellos colocamos la propiedad y dos puntos, seguido de esto ponemos el valor de cada propiedad y un ; como cierre de declaración.

  3. Debemos de comprender el modelo de caja y que propiedades afectan su dimensionamiento

  4. Aprender a usar el posicionamiento absoluto, relativo, flexbox y CSS Grid.

  5. Practicar, practicar todo lo que podamos.

Una vez se me incrustó en la cabeza el modela de caja, CSS dejó de tener complicaciones para mi. Para mí eso y la herencia de estilos son lo mas clave con diferencia. luego ya vendrian otras cosas.

Hace un buen tiempo tomé un curso de HTML y CSS y en ningún momento hablaron del modelo de caja ni de los diferentes selectores.
Cada vez tengo más expectativas con éste curso!

Super importantes estos tips, excelente imagen.

Excelentes tips!

de verdad que estas presentaciones son de lo mejor, gracias

Por experiencia puedo decir que el CSS se aprende puramente practicando. Vean un sitio web bonito y que les guste, y traten de replicar sus estilos. Incluso si el sitio usa muchos frameworks, pueden intentar replicarlo con CSS puro. Seguramente no quede igual, pero así aprenden muchísimo, especialmente sobre posicionamiento, que es algo que inicialmente parece difícil de aprender

Este es un juego ideal para aprender selectores en CSS

Voy empezando a realizar este grandioso mundo y pues me ha gustado o que he aprendido

Me encanto esta infografía, te deja en un mejor contexto sobre lo que vas aprender y cosas super claves para desarrollar mejor CSS y obviamente esto acompañado de unas buenas horas de practica!! 😄

Esta imagen es super descriptiva esta excelente

La verdad si es más fácil de lo que suena, enserio que es sencillo, manejar el Flexbox y el Grid.

Excelente infografía. 👍

Css grid es lo mejor, muy recomendado para aprenderlo e implementarlo.

Gracias 🙌🏽

Excelente información.

Muy buen aporte! super práctico!

Excellente!

CSS Rules == Selector => { Declaración => Propiedad.valor; }

Me inspiro mucho un video de Freddy Vega para empezar el curso de Desarrollador de Web. De momento estoy viendo los videos intentando retener la mayor info posible. Espero estar haciéndolo bien. Me gustaría tener alguna mentor o mentora del equipo de Platzi. Como hago para pedir [email protected]?

Guardado.

Aprende Haciendo es la clave de todo.

Excelente información, muchas gracias, es un muy buen repaso. 😃

Fundamental, practicar a la n potencia.

muy agradable el contenido y la forma, del documento!

No entiendo muy bien el selector tipo id ¿ para que casos aplicaria ?

muy buen grafico!

Excelente

https://codepen.io/, Para quienes queremos practicar en el navegador.

Buenos tips.
Gracias

Ok

  • selectores
  • anatomia de la declaración
  • Modelo de Caja
  • Posicionamiento

Esta de lujo la infografía, ¡Continuemos! 😄

Dios si hubiera tenido esta info para el quiz de desarrollo web que tuve el semestre pasado jaja

Lo único que me falta por dominar de esta Fotografiara es: Flex box y Css Grid,

Como el dicho, una imagen vale más que mil palabras 😁

Mucha información, resumida y ordenada para aprender y disfrutar al mismo tiempo

Siempre quise aprender bien css

Muy buena infografia

que ilustrativo

Excelente el diseño de las infografias, me fascinan

Me hace feliz estar aprendiendo 😃

Buen aporte.

Esta genial, gracias @teffcodeAguilar

Click derecho y Guardar como 😄, Excelente imagen.

Muy buena imagen para orientar el aprendizage

Aun fallo en la 3 y 4

Practicar es la clave.!

Muy interesante, con los tips 3 y 4 he entendido muchas cosas que antes no sabia el por que.

Resumido 2 años aprendiendo css en la preparatoria, muy dura la batalla pero no fue imposible.

no entiendo muy bien ¿cuál es la funcionalidad del modelo de caja?

La práctica hace al maestro. 🚀

No puedo creer que nunca ví al HTML y CSS así, como cajas. Ahora es todo tan obvio, por eso no entendía como posicionar las cosas muy bien. Gracias por esta infografía, genial.

Me encantó la imagen guía. Gracias Platzi 😃

Genial la informcion resumida y explicada asi 😃

Yo he jugado con CSS tiempo atras pero siempre me confundía con los tipos de ID, pero con esta imagen lo entiendo todo mejor

A todos los que nos dedicamos al back-end nos cuesta mas aprender a realizar diseños bonitos que a como tal maquetar.

Genial!

Lo que me confunde mas es el modelo de caja pero deja que lo aprenda y Ufff, violento papá!!

Border tiene ancho, estilo y color
El margin y el padding son completamente transparentes

Nice

Excelente ilustración.

En la parte de posicionamiento, siempre he tenido una duda con respecto a los div, no entiendo bien en que casos en concreto se usan o por que se los usa. Alguien podria resolverme esa duda?

Chévere, el modelo de caja es muy importante, y le ganas cariño con el uso.🐱‍👤✔🧔

Wow me encanta que tus tips son divertidos y creativos para poder explicarnos mejor. :3

Genial! gracias!!