Web Developer Fundamentals

1

Qué aprenderás sobre HTML y CSS

2

¿Qué es el Frontend?

3

¿Qué es Backend?

4

¿Qué es Full Stack?

5

Páginas Estáticas vs. Dinámicas

Quiz: Web Developer Fundamentals

HTML

6

HTML: anatomía de una página web

7

Index y su estructura básica: head

8

Index y su estructura básica: body

9

Reto: crea tu lista de compras del supermercado

10

Anatomía de una etiqueta de HTML

Quiz: HTML

Etiquetas multimedia

11

Tipos de imágenes

12

Optimización de imágenes

13

Etiqueta img

14

Etiqueta figure

15

Etiqueta video

Quiz: Etiquetas multimedia

Formularios

16

Etiqueta form e input

17

Calendar

18

Autocomplete y require

19

Select

20

Input type submit vs. Button tag

Quiz: Formularios

CSS

21

¿Qué es CSS?

22

¿Cómo utilizamos CSS?: por etiqueta, selector, class y por ID

23

Pseudo clases y pseudo elementos

24

Anatomía de una regla de CSS

25

Modelo de caja

26

Herencia

27

Especificidad en selectores

28

Demo de especificidad y orden en selectores

29

Más sobre selectores

30

Combinadores: Adjacent Siblings (combinators)

31

Combinadores: General Sibling

32

Combinadores: Hijo y Descendiente

33

Medidas

34

Medidas EM

35

Medidas REM

36

Max/Min width

37

Position

38

Display

39

Desafío: Layout 1

40

Display Flex

41

Flexbox layouts

42

Variables

43

Web fonts

Quiz: CSS

Responsive Design

44

Responsive design: media queries

45

Estrategias de responsive: mostly fluid

46

Implementando mostly fluid

47

Layout shifter CSS

48

Column drop

49

Buenas prácticas y ejemplos de responsive

50

Imágenes responsive

Quiz: Responsive Design

Accesibilidad

51

Semántica

52

Textos

53

Labels, alt y title

Próximos pasos

54

Próximos pasos como Web Developer

55

Bonus: tabla de etiquetas HTML

No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Combinadores: Hijo y Descendiente

32/55
Recursos

Aportes 382

Preguntas 47

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

o inicia sesión.

Buen juego para practicar selección de elementos

**RESUMEN **
el operador > solo le herada a quien sea su hijo directo solo a los que realmente son sus hijos
[](
y el operador descendiente es como aquel abuelito que quiere a todos a los nietos,sobrinos a todos pero que esten dentro de ramo familiar

Por si se atascan en alguna pregunta del juego aquí están, las respuestas son
1: plate
2: bento
3: #fancy
4: plate apple
5 #fancy pickle
6 apple.small
7 orange.small
8 bento orange.small
9 plate, bento
10 *
11 plate *
12 plate +apple
13 bento ~ pickle
14 plate > apple
15 orange:first-child
16 plate apple:only-child, plate pickle:only-child
17 plate apple:last-child, pickle:last-child
18 plate:nth-child(3)
19 bento:nth-last-child(3)
20 apple:first-of-type
21 plate:nth-of-type(even)
22 plate:nth-of-type(2n+3)
23 apple:only-of-type
24 apple:last-of-type, orange:last-of-type
25 bento:empty
26 apple:not(.small)
27 [for]
28 plate[for]
29 [for=“Vitaly”]
30 [for^=“Sa”]
31 [for$=“to”]
32 [for*=“obb”]

The child combinator (>) se coloca entre dos selectores CSS. Solo coincide con los elementos que coinciden con el segundo selector que son hijos directos de los elementos que coinciden con el primero.
.
https://developer.mozilla.org/en-US/docs/Web/CSS/Child_combinator
.
The descendant combinator , típicamente representado por un único carácter de espacio ( ), combina dos selectores de modo que los elementos que coinciden con el segundo selector se seleccionan si tienen un elemento antepasado (padre, padre del padre, padre del padre, etc.) que coincida con el primer selector. Los selectores que utilizan un combinador descendiente se denominan selectores descendientes .
.
https://developer.mozilla.org/en-US/docs/Web/CSS/Descendant_combinator
.

Acá les dejo mis notas-código que me ayudó a entender mucho mejor el concepto de combinadores. Resultados:

Con código index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Combinadores</title>
    <link rel="stylesheet" href="./style.css">
</head>
<body>
    <h2>Los verdes son los "p" hermanos adjacentes del article</h2>
    <header>
        <article>Soy un article</article>
        <p>Soy un p</p>
        <p>Soy un p</p>
        <article>Soy un article</article>
    </header>
    <br>
    <h2>Los rojos son los "p" hermanos generales del h4</h2>
    <p>Soy un p</p>
    <h4>Soy un h4</h4>
    <p>Soy un p</p>
    <p>Soy un p</p>
    <p>Soy un p</p>
    <br>
    <h2>Los azules son los "p" hijos del div</h2>
    <div>
        Soy un div
        <p>Soy un p</p>
        <h5>Soy un h5 
            <p>Soy un p hijo de un h5</p>
        </h5>
        <h6>Soy un h6</h6>
        <p>Soy un p</p>
        <p>Soy un p</p>
    </div>
    <br>
    <h2>Los fucsia son los "p" descendientes del article</h2>
    <article>
        <p>Soy un p</p>
        <h5>Soy un h5
            <p>Soy un p hijo de un h5, pero descendiente a un article</p>
        </h5>
        <p>Soy un p</p>
        <h4>Soy un h4</h4>
    </article>
</body>
</html>

Y código style.css:

* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

article + p {
    color: green;
}
h4 ~ p {
    color: red;
}
div > p {
    color: blue;
}
article p {
    color: fuchsia;
}

El combinador descendiente, se representa por un carácter de espacio ( ), selecciona elementos que son descendientes del elemento definido. Este combinador selecciona todos los descendientes del elemento (desde elementos secundarios hacia abajo).

div p {
  color:red;
}
<div>
  <p>Mi texto es rojo</p>
  <section>
    <p>Mi texto es rojo</p>
  </section>
</div>

<p>Mi texto no es rojo</p>

El combinador hijo ( > ) se utiliza para seleccionar elementos que son hijos o descendientes directos del elemento especificado.

div > p {
  color:red;
}
<div>
  <p>Mi texto es rojo</p>
  <section>
    <p>Mi texto no es rojo</p>
  </section>
</div>

Para los que quieran saber cómo se juega en CSS Diner, en el min 4:41 lo explican. https://www.youtube.com/watch?v=r2rRYsxgUMk

DATO/CONSEJO : si se acostumbran a chusmear en la consola el codigo de las paginas que les gustan, van a aprender bastante.

muy recomendado, permite practicas sobre los selectores en css.

Mis apuntes de la clase 😃


Hola comunidad Platzi, necesito de sus consejos!

Quiero ser toda una pro con CSS pero hasta ahora se me complica, tienen algun consejo o algun video, texto o algo que los haya ayudado a avanzar más con esto y comprenderlo mejor? Intente jugar en el CSS Diner pero no tuve exíto 😦 Cualquier comentario, ayuda constructiva es bien recibida! Gracias 😄

  1. HIJO
    (
  2. DESCENDIENTE
    (

When estas estudiando lo que te gusta y te hablan de video juegos

Bueno lo logre. No voy a decir que fue fácil porque esos pickle ya me estaban desesperando Pero lo logré. Nunca se rindan

He estado apunto de perder la paciencia

Para los que no entendieron el Juego como me paso al principio les dejo un resumen:

  1. En el HTML Viewer: se describe exactamente lo que se ve en la imagen, para este ejemplo; Dentro de la Tabla (<div class =“table”>) existen 2 platos (<plate/><plate/>).

  2. En la parte derecha “Type Selector” nos enseña lo que podemos hacer en CSS, para el ejemplo nos dice que podemos tomar los selectores tipo A los cuales describe como los tags (<div>, <p>, <ul>), para este ejercicio aplicarían los tags de <plate/>, así que para pasar este nivel deben escribir; “plate” sin comillas, pues es la forma en que se escriben en CSS.

  3. Solo tienes que colocar en el Edito de CSS los elementos que se están moviendo en la imagen.

  4. Si te equivocas en lo que estas escribiendo, vibrara el Editor de CSS, pero si la equivocación es parcial ósea vas bien, pero hay un error en algún elemento, vibrara en la imagen la parte en la que estas cometiendo el error.

  5. Si lo haces bien automáticamente avanzas de nivel.

**Hola este es mi aporte. **
HTML Code

CSS Code

Result

Pd. El juego esta increíble. Sin duda tiene que probarlo.

😄

I did it!

Aquí mi humilde aporte

no entiendo el juego 😭…que selector tengo que poner para ingresar

Selectores Combinadores

Los selectores se pueden combinar para obtener una especificidad más certera y que se priorice respecto a otras.


Descendientes

Es un selector que nos permite seleccionar a los hijos de un elemento y se representa mediante el carácter de espacio ( ``)

Los hijos de un etiqueta HTML son los que se encuentran dentro de dicha etiqueta HTML

<section>
	<article>
		<h3> Gran contenido </h3>
		<p> Conociendo los valores recientes </p>
	</article>
</section>

En el ejemplo:

section: Es padre de article, h3 y p

article: Es padre de h3 y p

h3 y p son hermanos o elementos adyacentes

Ejemplo

<section>
	<article>
		<h3> Gran contenido </h3>
		<p> Conociendo los valores recientes </p>
	</article>
</section>
section article {
	/*
		Sentencias CSS 
	*/
}

Hijo directo

Este selector se usa para poder seleccionar a los hijos inmediatos o directos de una etiqueta padre.

El selector de hijo directo se representa mediante el símbolo > (mayor que)

<section>
	<article>
			<p> Hijo no directo </p>
	</article>

	<p> Hijo directo </p>
</section>

Un hijo directo es aquel elemento HTML que se encuentra inmediato al padre.

Explicación:

section es el padre de article y p

article es padre de un p

Hijos Directos de section

article, p (Hijo directo)

Ejemplo

<section>
	<article>
			<p> Hijo no directo </p>
	</article>

	<p> Hijo directo </p>
</section>
section > p {
	/*
		Sentencias CSS 
	*/
}

Selector adyacente o selector del próximo hermano +

Este selector combinador hace uso del símbolo + para su funcionamiento y se encarga de seleccionar al hermano próximo y a la derecha del elemento HTML seleccionado. (tiene que estar al lado o no aplica los estilos)

Solo selecciona el próximo elemento a la derecha (uno)

Ejemplo

<h1> Titulo del post </h1>
<p> Contenido </p>
<span> Libre de verdades </span>
<p>Hellouuu papus</p>
h1 + p {
	color: green;
  font-size: 18px;
}

El fragmento CSS generado nos permite seleccionar a todas las etiquetas p que sean hermanos próximos o estén después de un h1

General de Hermanos ~

Este selector en comparación a selector de hermano adyacentete permite seleccionar a todos los hermanos o elementos adyacentes (Los elementos adyacentes no necesariamente tienen que estar al costado del elemento para que este selector funcione).

Para su funcionamiento hace uso de la virgulilla ~

Selecciona a todos los elementos adyacentes no solo que próximo cercano

Ejemplo

<h1> Titulo del post </h1>
<p> Contenido </p>
<span> Libre de verdades </span>
<p>Hellouuu papus</p>
/* Selecciona ambos p y aplica los
estilos mencionados */
h1 ~ p {
	color: green;
  font-size: 18px;
}

En el juego me vi muy tonto quise empezar a escribir sin leer y sin comprender como funciona, solo debemos poner los selectores que nos piden de las frutas u objetos que se están moviendo en la mesa. Comparto esto por si a alguien tiene un error similar al que tuve y la imagen con el código resuelto en el nivel que iba como ejemplo de lo que menciono

Resumen

Child

Descendant

Juego para practicar.

https://flukeout.github.io/

No se estresen como yo, aqui tengo la solucion pero haganlo o piensen antes de que diga la respuesta

https://www.youtube.com/watch?v=0hkJd9yH_VU

Logre acabar los dos juegos de css

Combinadores: CHILD

  • Selecciona solo lo que sea hijo directo.

div > p{ (aplica estilos a todos los párrafos ‘p’ que sean hijo directo de ‘div’

}

<div>
	<section>
		<p>soy un p</p>
	</section>
	<section>
		<p>soy un p</p>
	</section>
	<div>
		<p>Soy un p</p> **ESTE ES EL HIJO DIRECTO**
	</div>
</div>

Combinadores: DESCENDANT

  • Aplicara estilos a todos los elementos que formen parte del selector padre.
div p{
}
  • Es este ejemplo decimos que todos los elementos p que están dentro de un div se aplicaran estilos.
<div>
		<section>
			**<p>soy un p</p>**
		</section>
		<section>
			**<p>soy un p</p>**
		</section>
		<div>
			**<p>Soy un p</p>**
		</div>
		<article>
			**<p>soy una etiqueta p</p>**
		</article>
	</div>
  • Como se muestra se aplicara a todos los p que se encuentren dentro de div.

Bastante entretenido 😃

Done

Estudiar nunca fue tan divertido.

Buenísimo el desafío

Muy buen ejercicio, aprendí además muchas cosas que no sabia y gusto mucho la verdad
.
.

.
.

y dónde está el juego?

RESPUESTAS CSS DINER

  1. plate
  2. bento
  3. #fancy
  4. plate apple
  5. #fancy pickle
  6. apple.small
  7. orange.small
  8. bento orange.small
  9. plate, bento
  10. plate *
  11. plate +apple
  12. bento ~ pickle
  13. plate > apple
  14. orange:first-child
  15. plate apple:only-child, plate pickle:only-child
  16. plate apple:last-child, pickle:last-child
  17. plate:nth-child(3)
  18. bento:nth-last-child(3)
  19. apple:first-of-type
  20. plate:nth-of-type(even)
  21. palte:nth-of-type(2n+3)
  22. apple:only-of-type
  23. .small:last-of-type
  24. bento:empty
  25. apple:not(.small)
  26. [for]
  27. plate[for]
  28. bento[for=“Vitaly”]
  29. [for^=“Sa”]
  30. [for$=“to”]
  31. bento[for*=“o”]

Se logro 😮‍💨

![]()

En un principio no supe que hacer, una vez que entiendes el primer nivel,los demas son muy faciles.
No tienen que poner el valor, literalmente solamente el nombre de la etiqueta a elegir.

Logrado!

Clase 32 - Combinadores: Hijo y descendiente.

¿Qué símbolo debemos de usar para utilizar el combinador child o hijo directo?

  • El símbolo de mayor que (>).

¿Cómo funciona el combinador child o hijo directo?

  • Este combinador nos permite darle estilos a un elemento que sea hijo directo del elemento que indiquemos en el selector:
  • Sintaxis:
div + p
{
   color: green;
}
  • Como vemos en este ejemplo lo que estamos haciendo es darle estilos a todos los elementos <p> que estén únicamente dentro de un elemento <div> y no en otro elemento.

¿Debemos de usar un símbolo para utilizar el combinador descendiente?

  • No, lo que debemos de hacer es separar los elementos por un espacio.

¿Cómo funciona el combinador descendiente?

  • Este selector nos permite darle estilos a cualquier elemento que esté contenido en el elemento que escribamos en el selector, esto sin importar si dicho elemento está dentro de otro.
  • Sintaxis:
div p
{
   color: aqua;
}
  • Como vemos en el ejemplo lo que estamos haciendo es aplicar estilos a todos los elementos <p> que estén contenidos en un elemento <div>, sin importar que otros elementos contenga al elemento <p>.

Ese juego lo había jugado hace tiempito y si, al inicio era un poco desesperante con varios niveles. xD q recuerdos … pero, si logré llegar terminarlo

😃 ![](

aquí un tutorial de como completar el juego https://www.youtube.com/watch?v=ff5-CQuDoow

Es todo un reto.

Genial! pero mucho por practicar y aprender todavía.

Yo también lo conseguí, fue algo difícil, muchos combinadores o selectores diferentes. Gran juego 😃

No es que sea difícil el juego, sino que hay resto de vainas que ni se enseñan en este curso jajajaja

Ejercicio propuesto en el juego
(Select the small oranges)

/******** COMBINADORES *********/

/*--------------Hermano cercano------------------*/
/* En este caso aplica las reglas a todas las etiquetas p
que estén junto a una etiqueta h2*/
h2 + p{
	color: red;
}


/*------------Hermano general------------------*/
/*En este caso aplica las reglas a todas las etiquetas h6
que estén al mismo nivel de un h4*/
h4 ~ h6{
	font-size: 20px;
	color: blue;
}

/*----------------Hijo-----------------------*/
/*En este caso, se aplican las reglas a la etiqueta p 
que sea hija directa de la etiqueta article*/
article > p{
	background: yellow;
}


/*------------Descendiente----------------*/
/*En este caso, se aplican las reglas a las etiquetas p
que desciendan de una etiqueta section*/
section p{
	background: green;
}

Sufri la 27.

muy recomendado al final un poco complicado pero lo logre

div >p (se lee: la etiqueta párrafo sea hija directa de un div padre).
div p (se lee: todas las etiquetas párrafo que estén dentro de un contenedor de clase div)

Recomiendo esta página aquí

Algunos niveles me buggearon pero ahí vamos. Un abrazo gente.

Que buenos temas que estas explicando, pero el juego no entendí que hay que hacer… 😦!! Pero voy a seguir intentando hasta entenderlo.

Hola a todos, estuve haciendo pruebas combinadores y note que se le da prioridad a unos sobre otros. dispuestos en un orden de importancia son:
1)Combinador Descendiente.
2)Combinador Hijo.
3)Combinador Hermano General.
4)Combinador Hermano Adyacente.
De igual forma les comparto el código con el que hice las pruebas que me dieron este resultado, por si lo quieren examinar.

/* Ejemplo de combinador Hemano Adyacente
h2 + p{
    color:indigo;
}*/
/* Ejemplo de Combinador Hermano General
h2 ~ p{
    color: red;
}*/
/*Ejemplo ce combinador Hijo
div > p{
    color: green;
}*/

/*Ejemplo de combinador Decendiente*/
div p{
    color: indianred;
}

Se me dificulto al principio, pero la pena esforzarse , hice todo lo posible por acabarlo
y ahora ya entiendo super bien este tema, gracias.

What’s up bro 😃


Admito que me costo como una hora


fácil y sencillo

Estuvo Genial el Juego!! 💚

gracias por le juego. Es una excelente manera de ir cogiendo practica.

I did it!!!

El juego estuvo genial.

Me ha costado pero lo logré!!

Combinadores: Hijo y Descendiente

hijo directo:

El estilo se le aplica al hijo directo de un padre, si por ejemplo un p está dentro de un div se aplica, pero si ese p dentro del div también está dentro de un article no se aplica porque no es directo.

div > p {
	color: green;
}

Descendiente:

El estilo se aplica a todos los elementos hijos aunque estén dentro de otro elemento, es el más común de usar.

div p {
	color green;
}

.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../css/combinadores.css">
    <title>Combinadores</title>
</head>
<body>
    <main>
    <div class="adjacent-sibling">
        <h1>Libros</h1>
        <h2>La acción Humana</h2>
        <p>Ludwind Von Mises</p>
        <h2>Liberalismo</h2>
        <h2>La Rebelión de Atlas</h2>
        <p>Ayn Rand</p>
        <h3>La fatal arrogancia</h3>
        <p>Friedrich Hayek</p>
        <span id="combinators">Adjacent-sibling</span>
    </div>

    <div class="general-sibling">
        <h1>Series</h1>
        <h2>La casa de papel</h2>
        <p>Temporada 3</p>
        <h2>Stranger Things</h2>
        <p>Temporada 2</p>
        <h3>You</h3>
        <p>Temporada 2</p>
        <p>Horas vistas 457,4 mill</p>
        <span id="combinators">General-sibling</span>
    </div>
    <div class="child">
        <h1>Premios Nobel</h1>
        <article>
            <p>Premio Nobel de Física</p>
        </article>
        <article>
            <p>Premio Nobel de Química</p>
        </article>
        <article>
            <p>Premio Nobel de Medicina</p>
        </article>
        <article>
            <p>Premio Nobel de la Paz</p>
        </article>
        <article>
            <p>Premio Turing(Computación)</p>
        </article>
        <article>
            <p>Premio Abel(Matemáticas)</p>
        </article>

        <p>Premio Nobel de Literatura</p>
        <p>Leer más...</p>
        <span id="combinators">Child</span>
    </div>
    <div class="descendant">
        <h1>Empresas IT</h1>
        <article>
            <p>Apple Inc.</p>
            <span>$ 2,431 bill</span>
        </article>
        <article>
            <p>Microsoft</p>
            <span>$ 1920 bill</span>
        </article>
        <div>
            <p>Amazon Inc.</p>
            <span>$ 1155 bill</span>
        </div>
        <p>Meta platforms Inc.</p>
        <span>$ 446 mill</span>
        <span id="combinators">Descendant</span>
    </div>
</main>
</body>
</html>
body{
    display:flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
main{
    display: flex;
    justify-content: center;
}

.adjacent-sibling h2 + p{
    color:red;
}
.adjacent-sibling{
    background-color:#FFB100;
    padding: 12px;
    border-radius: 8px;
    margin: 12px;
}

.general-sibling h2 ~ p{
    color: blue;
}
.general-sibling{
    background-color:#FBC252;
    padding: 12px;
    border-radius: 8px;
    margin: 12px;
}
.child > p{
    color:darkgreen;
}
.child{
    background-color:#F0ECCF;
    padding: 12px;
    border-radius: 8px;
    margin: 12px;
}
.descendant p{
    color:darkviolet;
}
.descendant {
    background-color:#A3BB98;
    padding: 12px;
    border-radius: 8px;
    margin: 12px;
}
#combinators{
    display: flex;
    justify-content:right;
    color:rgb(78, 6, 6);
    font-weight: bold;
}

Genial juego


Me pareció una excelente forma de poner en práctica todo lo visto! Anímense a intentarlo 😉

Me tomo un buen rato

A diferencia del descendente que modifica todos los hijos aunque no sean directos

Hijos o child: div > p {(modifica los párrafos que sean hijos directos de un Div) O como sí solo heredara a su primogénito.

Hijos (child) y Descendientes (descendant)

muy buena forma de practicar

Por nada del mundo pasen por alto este juego amigos se aprende muchisimo enseriooo…

me gustó mucho el ejercicio, es muy complejo y bueno

Me tomo una hora; pero lo logre 😃

Mi aporte sería, además del uso que se explica en el video sobre los combinadores, en VS Code tiene instalada una extension llamada Emmet y podemos usar los combinadores para crear código de forma más rapida por ejempo:

ul>il.main-nav__item*3

creará al dar Enter

        <ul>
            <il class="main-nav__item"></il>
            <il class="main-nav__item"></il>
            <il class="main-nav__item"></il>
        </ul>

mas referencias en la página Visual Studio Code: Emmet

Combinador Hijo
/* La etiqueta parrafo que sea hija directa de una etiqueta div, a esa etiqueta p agregale los sig estilos*/
div > p /* Combinador Hijo*/
{
color: red;
}

Combinador Descendiente
/Toda etiqueta p dentro de un div aplicar sig estilo /
div p /
Combinador descendiente
/
{
color: red;
}

El juego no funciona para las personas que tienen el navegador Brave, hay que hacerlo en Chrome o en Edge

el enlace del juego no sirve 😦

El ejercicio esta buenisimo, super recomendado que hagas los ejercicios aunque te tome tiempo, entre mas práctica mejor

super bueno el juego, se refuerza todo lo visto

Muy bueno el juego jajaja, te frustra al principio pero luego se entiende bien

Logré completar los niveles del juego.
Sirve para practicar todo lo visto en selectores hasta el momento

Realmente me puso a pensar!

No entiendo nada de lo q hay q hacer en el juego xd