Introducción al curso

1

Presentación y bienvenida al curso de Frontend Developer

2

HTML y CSS: definición y usos

3

¿Qué son y para qué nos sirven HTML y CSS?

4

DOM, CSSOM, Render Tree y el proceso de renderizado de la Web

5

5 tips para aprender CSS

Conceptos iniciales de HTML

6

Anatomía de un Elemento HTML: Atributos, Anidamiento y Elementos vacíos

7

Anatomía de un Documento HTML: DOCTYPE, html, head y body

8

Funciones de las etiquetas HTML más importantes

9

La importancia del código semántico

10

Tipos de errores en HTML, debugging y servicio de validación de etiquetas

11

Reto 1: Organiza el siguiente bloque de código de forma semántica

Conceptos iniciales de CSS

12

Anatomía de una declaración CSS: Selectores, Propiedades y Valores

13

Tipos de selectores, pseudo-clases y pseudo-elementos

14

Modelo de caja

15

Valores relativos y absolutos

16

Displays en CSS

17

Funciones de las propiedades CSS más usadas

18

Posicionamiento en CSS

Arquitectura CSS

19

¿Qué son y para qué nos sirven las arquitecturas CSS?

20

OOCSS, BEM, SMACSS, ITCSS y Atomic Design

21

Reto 2: Identifica el error de arquitectura del siguiente bloque de código

Construcción de componentes

22

¿Qué es un componente? Analicemos nuestros diseños

23

Estructura con HTML y BEM de un menú desplegable

24

Estilizando nuestro menú desplegable con CSS

25

Creación de un buscador

26

Creación de un carousel de imágenes con CSS: Estructura principal

27

Creación de un carousel de imágenes con CSS: Detalle de cada item

Maquetación y diseño responsivo

28

Flexbox

29

Nuestro nuevo sistema de layout: CSS Grid

30

Maquetación de la pantalla de login: Estructura HTML

31

Maquetación de la pantalla de login: Estilización con CSS

32

Estilización de inputs y footer en la pantalla de login

33

Media queries

34

Maquetación de la pantalla principal

35

Reto 3: Maquetación de la pantalla de Not Found

Preprocesadores

36

¿Qué es un preprocesador, cuáles existen y cuáles son sus diferencias?

37

Instalación de SASS y configuración inicial

38

Hablemos de variables, herencia, anidamiento, operadores y más

Accesibilidad

39

La accesibilidad y nuestra responsabilidad como desarrolladores

40

Mejorando la accesibilidad de nuestra página de inicio

Conclusión

41

Conclusión del curso y paso siguiente

Bonus

42

Visualización de un botón usando storybook para HTML

43

Flexbox

5 tips para aprender CSS

5/43

Lectura

Infografia-Frontend-Javascript.jpg

Aportes 462

Preguntas 1

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Regístrate o inicia sesión para participar.

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

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

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

Un lugar para practicar: codewars

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

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):
![](
![](

Hay que practicar hasta enloquecer!! 💪🏻

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

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

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

Si quieren mejorar en flexbox puedan jugar Flexbox Froggy

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

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

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;
}

Espero les sirva y pueden hacer algunos ejercicios.

Los cursos de la carrera de arquitectura front ayudan mucho

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

de verdad que estas presentaciones son de lo mejor, gracias

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!

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.

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.

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

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

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

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

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 😃 ).

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

Este es un juego ideal para aprender selectores en CSS

me encanta como esta explicado!! 😄

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

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

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]?

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

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!! 😄

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

Me hubiera gustado conocer a Platzi en 2016 y recibir asi las explicaciones de algo tan fundamental cuando me toco hacer mi primer proyecto en una pasantia recien salido de la Universidad pero con pocos conocimientos de HTML y CSS sin dudas nunca es tarde para aprender

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

Muy buena infografia,

Lo que mas me a costado aprender es el paso 4

sukee!!!

Super importantes estos tips, excelente imagen.

Excelentes tips!

Te recomiendo ver la Clase de Modelo de caja del Curso Definitivo de HTML y CSS, todo el curso es super recomendado.

Si alguien quiere aprender leyendo un poco de CSS un poco a profundidad pueden ver esto: URL

Hay una frase, que dice hay una deferencia entre estudiar y aprender, puedes haber estudiado mucho, pero sino comprendiste o practicaste lo suficiente en realidad no aprendiste.

Aún me cuesta entender el modelo caja y el posocionamiento, pero ahí vamos

La práctica hace al maestro

Aporto esta documentación sobre algo que nos va a servir para siempre: https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model

Tienen la opción para pasarlo al español si lo desean.

Suerte y arriba a todos!

Esta imagen es super descriptiva esta excelente

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; }

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!

muy buen grafico!

Excelente

Buenos tips.
Gracias

Ok

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á!!