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: Adjacent Siblings (combinators)

30/55
Recursos

Aportes 155

Preguntas 17

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

El combinador hermano adyacente ( +) separa dos selectores y coincide con el segundo elemento solo si sigue inmediatamente al primer elemento, y ambos son hijos del mismo padre element.

**Recomiendo tener su editor dividido, ya que se hace m谩s f谩cil cuando miras la estructura HTML mientras le das estilos.
**

Woow amigos, esto no tiene nada que ver con la clase, pero ya pude hacer algo as铆 hasta ahora:

h2 + p{
	color: red;
}

Traducci贸n
.
Se帽or navegador, por favor col贸came estos estilos:

color: red;

A TODOS todos elemento p (parrafo) que sean hermanos adjacente de TODOS los elementos h2
.
Atentamente,
.
El Front-end Developer

No puedo dejar de compartirles esta joyita!
![](

Adyacente: Adyacente, del lat铆n adi膬cens, es un adjetivo utilizado para nombrar a lo que se ubica en las cercan铆as de alg煤n objeto o cosa. D铆cese que lo adyacente es lo que est谩 al lado, lo contiguo o aleda帽o.

Por si alguien le sirve mis apuntes 馃槂

Resumen

Me gust贸 el juego recomendado, https://flukeout.github.io/ ayuda a aprender las combinaciones y la forma en que se deben hacer鈥

MIS APUNTES

RESUMEN:

Especificidad: Capacidad que se le otorga a un selector de CSS para aplicar estilos, mientras mayor nivel de especificidad tenga el selector, ser谩 m谩s relevante para el navegador.

Herencia: Caracter铆stica que cumplen algunas propiedades de CSS, para as铆 heredar estilos de etiquetas padres a etiquetas hijos.

NOTA: No todas las propiedades de CSS se heredan.

Clase 30 - Combinadores: Adjacent Siblings (combinators)


驴Qu茅 son los combinadores en CSS?

  • Es una caracter铆stica de CSS que nos permite combinar varios selectores para crear un mayor especificidad.

驴Cu谩les son los combinadores m谩s comunes que hay en CSS?

  • Hermano adyacente o cercano - Adjacent sibling.
  • Hermano general - General sibling.
  • Hijo - child.
  • Descendiente - Descendant.

驴Los combinadores nos ayudan a evitar el sobreuso de las clases y id鈥檚?

  • S铆.

驴Qu茅 s铆mbolo debemos usar para utilizar el hermano cercano o adjacent sibling?

  • El s铆mbolo de m谩s (+).

驴C贸mo funciona el combinador hermano adyacente o adjacent sibling?

  • Este combinador nos permite agregar estilos a un elemento que tenga seguido de 茅l el elemento que le digamos en el selector.
  • Sintaxis.
h2 + p
{
   color: red;
}
  • En este ejemplo lo que estamos haciendo es d谩ndole a los elementos <p> que est茅n seguidos de un elemento <h2> el color rojo en la fuente.

#off-topic esta pregunta viene por fuera del tema pero me di cuenta de algo viendo el VS Code del profesor.
驴C贸mo reducen el espaciado por defecto cuando se da 鈥渢ab鈥 en las l铆neas de c贸digo?

Los combinadores en CSS, que esto nos va a ayudar a tener una especificidad mucho m谩s certera. Tenemos 4 opciones de combinadores entre las m谩s importantes. Al momento de generar estas combinaciones vamos a tener una especificidad mucho mas alta que nos va a ayudar a evitar tener id por ejemplo o alg煤n otro tipo de id etiqueta etiqueta etiqueta. Con esto podemos ser un poco m谩s espec铆ficos sin tener un id, y nos puede ayudar mucho para la parte de la especificidad.
Estos 4 son los hermanos adyacentes o cercanos, los hermanos generales, los hijos y los descendientes.

Adjacent:
Traducci贸n: Adyacente
Fot贸nica: uh-jei-snt

Siblings:
Traducci贸n: Hermano/a
Fot贸nica: si-bluhngz

Combinators

they combine other selectors in a way that gives them a useful relationship to each other and the location of content in the document. These are:

  • Descendant combinator
  • Child combinator
  • Adjacent sibling combinator
  • General sibling combinator

Adjacent sibling

The adjacent sibling selector (+) is placed between two CSS selectors. It matches only those elements matched by the second selector that is the next sibling element of the first selector. For example, to select all <img> elements that are immediately preceded by a <p> element:

p + img

https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Selectors/Combinators

Resumen:
Hermano cercano, es una forma de modifciar etiquetas usando el signo + y solo modificara a los que esten cerca de ella.

馃惐鈥嶐煉 Los combinadores permiten aplicar una selecci贸n por contexto entre varios selectores.

Anotaciones:

Notas de la clase

Combinadores: (combinators)

Nos permiten combinar m煤ltiples selectores y crear una mayor especificidad.

Hermano adyacente o cercano (Adjacent sibling)

div + p {
	...
}

Hermano general (General sibling)

div ~ p {
	...
}

Hijo (Child)

div > p {
	...
}

Descendiente (Descendant)

div p {
	...
}

B谩sicamente el hermano cercano aplica los cambios al elemento que est谩 justo debajo del primer elemento que se manda llamar

Hermano adyacente (Adjacent sibling)

div + p {
}

Donde:
div es la etiqueta padre
p es la etiqueta hijo

+
Entonces lo que sucede es que todas las etiquetas p cercanas a div se le aplicar谩 los cambios.

hay algo que pienso desde hace alg煤n tiempo y no se si sea as铆.
Creo que el c贸digo se lee de derecha a izquierda.

h2 + p {
color: red;
}

se aplican las propiedades de la regla a las etiquetas p que est茅n junto a una etiqueta h2.

ustedes que son m谩s conocedores del tema me pueden orientar?

Que buen curso es como hacer magia con css

Es una maravilla cada vez quedo mas convencido que estoy aprendiendo ojala todos pudieran experimentar y tener un futuro empleo gracias profe Granda aprendan muchachos no pares de aprender conj platzi si hay futuro

Cuando vean un signo m谩s (+) en CSS, piensen en que est谩n comiendo un rico chifa y les traen su segundo con su sopa wantan, dos platos adyacentes 馃槄

ADJACENT SIBLING COMBINATOR

quizas lo use sin siquiera entenderlo, pero en mis practicas de Pseudoclases legue a usarlo asi (ignoren los #, ya entendi que es mala practica, eso fue antes de estas clases - que fue la pasada):

#check:checked + div{
    background-color: darkorange;
}
#check:checked + div::first-letter{
    font-size: xx-large;
}
#radio:checked + label{
    background-color: #78fa99;
}
#check1:checked + label{
    background-color: #e21765;
}
#radio1:checked + div{
    background-color: #3f5eeb;
}
#radio1:checked + div::first-letter{
    font-size: xx-large;
}

despues de que alguien seleccione un radio o un checkbutton cambiara el color de fondo y con la letra extra grande, y asi, pero solo funcionaron con algunos.
Ahora bien, practicando mas a fondo, logre estas cuestiones que seguramente les puede servir.

/*practica Hermano Cercano*/
.practica input[type="checkbox"] + label{
    color:blue;
    font-weight: bold;
    font-size: xx-small;
}
.practica img{
    width: 25%;
}
.practica img + figcaption::first-letter{
    font-size: xx-large;
    color: brown;
    border: 3px double green;
}
.practica figure + p{
    background-color: #ff7300;
    width: 50%;
}

Espero y los pueda ayudar queridos amigos.

Cabe resaltar que esto de adjacent sibling funciona solo para hermanos menores, y con menores me refiero a los hermanos que est茅n debajo del elemento. Suena confuso pero funciona as铆. Si tiene primero un <p> luego un <h2> y luego otro <p>, estamos de acuerdo en que ambos <p> son hermanos de <h2> pero aplicando el combinador de adjacent sibling solo afectar谩 al <p> que est谩 debajo del <h2>.

Creo que esto no est谩 bien explicado, si tomamos eso de que 鈥渆st谩 cerca鈥, todos los 鈥榩鈥 est谩n cerca de un 鈥榟2鈥. Lo que pasa que esto parece que aplica a si est谩 debajo de un 鈥榟2鈥. Hay veces que los cursos te l铆an m谩s de lo que te ayudan.

Yo le agregaria a la definicion de hermano adyacente que es el hermano o pariente inmediatamente inferior, ya que no cubre a los que estan por encima.

Mi practica.
![](

Si quieren una forma m谩s r谩pida de escribir dentro del div, diferentes etiquetas, pueden hacer esto:

div>p{soy un p}+h2{soy un h2}+h3{soy un h3}

Eso generar谩 lo siguiente

poder entender esto es super importante para aplicar estilos en css.

A + B 
  • El conbinador 鈥+鈥 va a seleccionar todas los elementos B que seguen despues del elemento A. Los elementos que siguen uno despues del otro son llamados hermanos siempre y cuando se encuentren al mismo nivel.

Por hermanos adyacentes se entiende aquellos elementos que comparten un mismo padre y que se encuentran uno a continuaci贸n del otro en la estructura del documento. El elemento que se selecciona es el que se especifica en segundo lugar.

h2 + p { color: red; }

con esto, le doy color rojo a todas las etiquetas p que est茅n cerca de una etiqueta h2.
.
鈥渃erca鈥 quiere decir que, a la etiqueta p, le preceda una etiqueta h2. si antes de un p hay un h2, se le aplicara el estilo.

Combinador
El combinador +(hermano adyacente) se usa para referirse a adyacente, es decir h2+p se refiere a todos los p que est茅n justo despu茅s de un h2 en el mismo contenedor.
Hermano general ~ se refiere a un elemento en el mismo contenedor, por ejemplo h2 ~p se refiere a todos los p que tengan un h2 en su mismo contenedor
Hijo > se refiere a un elemento del cual tiene un padre directo, por ejemplo div > p se refiere a todos los p que sean hijos directos de un div
Descendiente 鈥 鈥 se refiere a que un elemento est茅 dentro de otro por ejemplo div > p se refiere a un p que est茅 dentro de un div pero que no sea necesariamente hijo directo

Ac谩 les dejo una lectura sobre los Combinadores en CSS
Selector Descendente (espacio)
Selector de hijo directo (>)
Selector de elemento adyacente (+)
Selector basado en elemento precedente con el mismo padre(~)


驴Qu茅 pasa cuando coloco un p谩rrafo encima de un h2? Pues, miren鈥


Solo aplica los estilos a los hermanos que est茅n al lado pero hacia abajo en forma de cascada.

Comenzamos con el tema de Combinadores en CSS.
Esto nos permite dejar a un lado a los ID que como ya vimos nos pueden generar errores conforme avance el proyecto por el peso que tienen en CSS.

Hoy comenzamos con el combinador: Hermano Adyacente o Cercano que se representa por: +
Ejemplo:

h2 + p {
  color: blueviolet;
  text-decoration: underline;
}

y el resultado que obtendremos sera el siguiente: Solo afecta a los p que estan cercanos (Abajo del elemento) h2

Y estos 4 son los combinadores que estaremos viendo 馃槂

Tambi茅n existe el 鈥渃ombinador鈥 鈥,鈥 una coma que quiere decir que las propiedades las adquirira mas de un selector. Por ejemplo:
.calse1, #id1, etiquetahtml{} y sus valores se usaran para los 3

Selectores de Hermanos Adyacentes
Se hace referencia a este selector como selector adyacente o selector del pr贸ximo hermano. S贸lo seleccionar谩 un elemento especificado que est茅 inmediatamente despu茅s de otro elemento especificado.

Sintaxis:

elemento_anterior + elemento_afectado { estilos }

Ejemplo
*
CSS

li:first-of-type + li {
  color: red;
}

HTML

<ul>
  <li>One</li>
  <li>Two!</li>
  <li>Three</li>
</ul>

驴Cu谩l de los elementos de la lista ser铆a de color rojo?

<code>
```<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Selectores</title> 
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div>
        <h2> Hijo</h2>
        <p> etiqueta de parrafo</p>
        <h2>un H2</h2>
        <h3>este e un H3</h3>
        <p>parrafo</p>
        <h2>es un H2</h2>
        <p>parrafo</p>

    </div>
</body>
</html>

Combinador de hermano adyacente o cercano + (Adjacent Sibling)

Se hace referencia a este selector como selector adyacente o selector del pr贸ximo hermano. S贸lo seleccionar谩 un elemento especificado que est茅 inmediatamente despu茅s de otro elemento especificado.

h2 + p {
  color: red;
}

Los elementos que tienen como padre a un elemento en comun son hermanos.

Adjacent Siblings: Hermano pr贸ximo.

<h2>Hermano</h2>
<p>Hermano pr贸ximo</p>

h2 + p{
color:red;
}

鈥渃olocar color de letra en rojo al elemento p que sea hermano pr贸ximo a un elemento h2鈥

Tambien puedes entenderlo como: aplicale estos estilos a todas las etiquetas p antecedidas por un h2

Se lee: apl铆cales el color rojo a todas las etiquetas p que est茅n cerca de las etiquetas h2.

h2 + p {
    color: red;
}

Recomiendo esta 鈥渃heat sheet鈥 de selectores: https://webdevsimplified.com/specificity-cheat-sheet.html

CSS Diner - Where we feast on CSS Selectors!

https://flukeout.github.io/

Cabe resaltar que en el caso de la etiqueta adyacente
h2 + p {
}
el programa toma en cuenta la etiqueta p adyacente que le sigue al h2, es decir la adyacente de abajo y no la adyacente anterior.

Este no es aporte ni nada pero: No me aguanto a ver el examen final de este curso鈥 馃

.

tabla de los combinadores

HERMANO CERCANO o adyacent sibling: h2 + p { (aplica estilos a los p谩rrafos cercanos a h2)

Estructura b谩sica HTML con padres e hijos

div p { (Descendientes o descendant)

div > p { (Hijos o child)

div ~ p { (Hermanos generales o general sibling)

div + p { (Hermano m谩s cercano)

COMBINADORES hay m谩s, pero aqu铆 los m谩s importantes. Combinan m煤ltiples selectores y crear una mayor especificidad.

Entonces para no usar tantos class y id podemos usar combinadores, y diras que son los combinadores?

pues el primero el Adjacent Siblings

<etiqueta> + p {.......}

y se trata de que cualquier etiqueta <p> que este debajo de <etiqueta> se veran afectadas en los estilos asignados

鈽衡樅

Para los que quieren agregar rapidamente la estructura html pero con la configuraci贸n de las clases iniciales, pueden hacer un snippet en vscode facilmente, presiona la tecla ctrl+shift+p, luego coloca la palabara snippet y le dan en agregar uno nuevo, eligen el archivo de configuraci贸n respecto al lenguaje, en este caso html.json, y all铆 colocan este fragmento:

"PlantillaHTML": {
		"prefix": "HTML: 5",
		"body": [
			"<!DOCTYPE html>",
			"<html lang=\"es\">",
				"\t<head>",
					"\t\t<meta charset=\"UTF-8\">",
					"\t\t<meta name=\"Description\" content=\"Extended Description\">",
					"\t\t<meta name=\"robots\" content=\"index,follow\">",
					"\t\t<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
					"\t\t<title>Document Title</title>",
					"\t\t<link rel=\"stylesheet\" href=\"\">",
				"\t</head>",
				"\t<body>",
				"\t</body>",
			"</html>"
		]
	}

El caracter + es el signo del combinador de hermanos adyacentes o cercanos

Combinador: Hermano adyacente o cercano

Los combinadores CSS nos permiten combinar m煤ltiples selectores y crear mayor especificidad.

al fin entendi para que sirve el + en css

Muy interesante la verdad.

RESUMEN CLASE 30:
COMBINADORES:
ADJACENT SIBLINGS
(COMBINATORS)

HTML

<!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">
    <title>Document</title>
    <link rel="stylesheet" href="./style.css">
</head>
<body>
    <div>
        <h2>Soy un h2</h2>
        <p>Soy un p</p>
        <h2>Soy un h2</h2>
        <h3>Soy un h3</h3>
        <p>Soy un p</p>
        <h2>Soy un h2</h2>
        <p>Soy un p</p>
    </div>
</body>
</html>

CSS

h2 + p {
    color: red;
}

Informaci贸n resumida de esta clase
#EstudiantesDePlatzi

  • Los combinadores nos permiten combinar m煤ltiples selectores y crear una mejor especificidad

  • h2 + p = Esto quiere decir. A todas las etiquetas p que est谩n cerca de h2 apl铆quele los siguientes. A esto se le llama hermano cercano

  • Esta pr谩ctica nos ayuda a ser m谩s espec铆fico y no usar tanto la class

Muy interesante, que maravilloso es entender algo que usaste pero no sabias que era jajaja

Super Esta Clase

Gracias

Combinadores: Adjacent Siblings

Los combinadores nos permiten combinar m煤ltiples selectores y crear una mayor especificidad, sin necesidad de agregar m谩s id.
Se lee, colocar el color rojo a todas las etiquetas p cercanas a h2. Es decir, aquellas etiquetas p que tenga directamente arriba una etiqueta h2.

Gracias Hermano cercano Diego jajajajaja

Terminar este reto del platzi day 2022, esta fuerte, pero creo que si se puede.

Me gust贸 mucho la opci贸n de Hermano adyacente o cercano. Es muy pr谩ctica. Ejemplo:

h2 + p {
    color: red;
}

no tenia ni idea que esto excistia, no le veo un uso la vdd

Si utilizamos la combinacion de hermano adyacente en el mismo ejercicio, en donde querramos actuar solo sobre el tercer h2, por ejemplo; tendremos que encontrar la combinacion de hermanos que coincida con el elemento.
En este caso h3 + p + h2 y se puede entender como :
actua sobre el ultimo elemento tal que la combinacion coincida de arriba hacia abajo. primero h3 luego p y por ultimo h2.
No ocurre lo mismo si solo ponemos p + h2, por que hay dos combinaciones iguales, el segundo h2 y el tercero.

h2 + p{ /Es decir que aplicale el color rojo a todas las etiquetas parrafo 搂 que esten cercas de los h2/
color: red;
}

De hecho no se aplica la regla a los p cercanos a un div, m脿s bien se aplica a los p que sean directamente precedidos por un div.

aplicaci贸n de combinadores

simbolos
hermanos adyacentes (+)
hermanos general (~)
elementos hijo es un s铆mbolo de 芦mayor que禄 (>)

ojo: Si eliminamos el s铆mbolo > que lo identifica como un selector de elementos hijo, lo convertimos en un selector de elementos descendientes y se aplicar谩 el borde rojo a todos los elementos

fuerte: https://developer.mozilla.org/es/docs/Learn/CSS/Building_blocks/Selectors/Combinators

muy bien explicado al inicio tenia dudas pero con el final quedo claro