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

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

Etiquetas multimedia

11

Tipos de im谩genes

12

Optimizaci贸n de im谩genes

13

Etiqueta img

14

Etiqueta figure

15

Etiqueta video

Formularios

16

Etiqueta form e input

17

Calendar

18

Autocomplete y require

19

Select

20

Input type submit vs. Button tag

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

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

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: General Sibling

31/55
Recursos

Aportes 192

Preguntas 15

Ordenar por:

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

o inicia sesi贸n.

Usando el c贸digo ASCII es posible obtener el s铆mbolo (~) o utilizando la combinaci贸n de teclas alt + 126

Si agregas un nuevo div y dentro de este div agregas otro p谩rrafo, este nuevo p谩rrafo ya no es un hermano general de las etiquetas anteriores:

general sibling combinator (~) separa dos selectores y coincide con el segundo elemento solo si sigue al primer elemento (aunque no necesariamente inmediatamente), y ambos son hijos del mismo elemento padre .

https://developer.mozilla.org/en-US/docs/Web/CSS/General_sibling_combinator

Es importante configurar correctamente el idioma del teclado para no tener inconvenientes

https://www.maestrodelacomputacion.net/como-reconocer-el-tipo-de-teclado/

Como dato curioso, al s铆mbolo (~) se le conoce tambi茅n como
virgulilla.

Una parte importante que no menciona el profesor es que se le aplica el estilo a los hermanos que se definan m谩s abajo en el HTML. Es decir, si tuvi茅ramos en este orden el HTML:

h2
p
h3
h2
p

Y en vez de usar h2 ~ p, usamos h3 ~ p para cambiar el color de los p谩rrafos. Los que cambiar铆an ser铆an los hermanos de h3 que sean posteriores a esa etiqueta:

h2
p
h3
h2
p [S贸lo 茅ste cambiar铆a de color]

Me queda mas claro cuando los comparo:

Hermano adyacente
Es todo aquel componente que se encuentra al lado o etiqueta inmediatamente siguiente de la etiqueta que quiero estilar.

  <h1>Soy un h1 </h1>
  <p> Soy un parrafo</p>

Hermano general
Son todas aquellas etiquetas que se encuentran adentro de una etiqueta padre
en este caso el div

	<div>
            <h1>Soy un h1 </h1>
            <p> Soy un parrafo</p>
            <h2>Soy un h2</h2>
            <h3>Soy un h3</h3>
        </div>

Quien esta decidiendo todo es el primer h2, Si eliminan los dem谩s h2 y dejan el primero. Esto es lo que pasa 鈥

Siempre y cuando los dos elementos (en este caso h2 y p) sean hermanos dentro de la estructura de nuestro archivo se aplicara el estilo determinado por el combinador. Es decir, si p pasa a ser hijo de un elemento que creemos despues de realizar el ejercicio hecho por Diego o de un elemento que ya hayamos implementado entonces pasa a ser HIJO de ese elemento, por lo cual ya no seria hermano de un elemento h2.

    <h2>Soy un H2</h2>
    <p>Soy un p hermano de h2</p>
    <h2>Soy un h2</h2>
    <h3>Soy un H3</h3>
    <div>
        <p>Soy un p hijo de div, por lo tanto no soy hermano de h2</p>
    </div>

鈥渁lt gr鈥 + 鈥+鈥

Recomiendo compararlos en un mismo index, para que ver las diferencias de una mejor forma

Hola, seg煤n lo que explica el profesor, la pirmera l铆nea 鈥淪oy un p鈥 tendr铆a que figurar en color rojo. Ya que es hermano de la etiqueta 'h2鈥
Haciendo los juegos de https://flukeout.github.io/
en el level 13 me di cuenta que NO es as铆, entonces volv铆 a esta clase de 鈥淗ermano General鈥 para ver nuevamente la explicaci贸n y entend铆 que le falt贸 decir "que sea hermano Y TENGA ARRIBA un 鈥榟2鈥

Si tienen activados varios idiomas en el teclado (en la configuraci贸n de Windows), pueden cambiar f谩cilmente de teclado pulsando alt + shift. Y a partir de ah铆, en el teclado ingl茅s, la ~ se consigue con shift + ` (est谩 debajo de esc).
Personalmente uso el teclado ingl茅s para codear y el espa帽ol para el copywriting.

Mis apuntes de la clase 馃槂


En esta clase vimos General Sibling Que es el combinador de Hermano General.
Este tipo de combinador nos ayuda a seleccionar a los hermanos generales, es decir a los que comparten un mismo padre. Se representa mediante el siguiente simbolo ** ~ ** y se implementa asi.

Codigo HTML

<section>
      <h3>Etiqueta H3</h3>
      <p>Etiqueta de Parrafo</p>
      <h3>Etiqueta H3</h3>
      <p>Etiqueta de Parrafo</p>
      <h3>Etiqueta H3</h3>
      <p>Etiqueta de Parrafo</p>
      <h3>Etiqueta H3</h3>
      <p>Etiqueta de Parrafo</p>
    </section>

Codigo CSS

/* Combinador: General Sibling (Hermano General) ~ */
/* Este combinador aplicara los estilos a los hermanos generales, sin importar la posicion, solo que sean hijos del mismo padre */

section > h3 ~ p {
  color: #1a1a2e;
  background-color: #d6e0f0;
  border-radius: 2px;
  font-size: 40px;
}

Resultado

Clase 31 - Combinadores: General Sibling


驴Qu茅 s铆mbolo debemos de usar para utilizar el combinador hermano general o general sibling?

  • El s铆mbolo de la virgulilla (~).

驴C贸mo funciona el combinador hermano general o general sibling?

  • Este combinador nos permite agregar estilos a todos los elementos que tengan como hermano el elemento que escribamos en el selector.
  • Sintaxis:
h2 ~ p
{
   color: blue;
}
  • Como vemos en este ejemplo lo que estamos haciendo es darle estilos a todos los elementos <p> que tengan como hermano un elemento <h2>, sin importar si est谩n alejados entre ellos.

Notas de la clase

Hermano general (General sibling)

div ~ p {
}

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

~
Entonces lo que sucede es que todas las etiquetas p que contenga div se le aplicar谩 los cambios.

Aclaraci贸n:

HERMANOS GENERALES:

El combinador ~ separa dos selectores y selecciona el segundo elemento s贸lo si est谩 precedido por el primero y ambos comparten un padre com煤n.

Anotaciones:

con General Sibling h2 ~ p
vamos a modificar a todas las etiquetas de p谩rrafo que tengan como hermano general a h2.
.
Es decir, se les aplica el mismo estilo siempre y cuando existan en la misma linea que una o varias etiquetas h2.

Combinadores: General Sibling

  • Aplica estilos a los hermanos en general que tengan como hermano general 鈥渪鈥 tag.
  • No necesita ir seguido de la etiqueta h2 obligatoriamente
/*hermano general/general sibling*/
h2 ~ p {
	
}
<div>
	<h2>Soy un h2</h2>
	<p>soy un p</p>
	<h2>Soy un h2</h2>
	<h3>Soy un h2</h3>
	<p>soy un p</p>
</div>

Si quieren profundizar m谩s, les comparto este link sobre los Combinadores

Para el General Sibling, en el ejemplo: aplica el estilo a todo hermano de etiqueta p que este en el mismo nivel de una etiqueta H2 y ademas que esta etiqueta H2 este previo a la etiqueta p. En la captura se puede observar que las dos primeras etiquetas p no aplica el estilo y esto es por que no existe un H2 Previo.

Resumen:

  • Hermano adyacente: h2+p:
    Agregale este estilo a las etiquetas 鈥減鈥 que tengan un 鈥渉2鈥 justamente arriba de si mismas

  • Hermano general: h2~p:
    Agregale este estilo a las etiquetas 鈥減鈥 que esten abajo de un 鈥渉2鈥 (no importando si esta justamente arriba o si esta separado por otras etiquetas, la cosa es que tenga un "h2 arriba en html)

El h2 debe ir por encima de los p, porque si pones primero el p y luego el h2 ya no son hermanos generales 馃槂

HTML

<div>
    <h2>Soy un h2</h2>
    <p>Soy un p</p>
    <h2>Soy otro h2</h2>
    <h3>Soy un h3</h3>
    <p>Soy otro p</p>
  </div>

  <div>------------------</div>

  <div>
    <p>no soy hermano de los otros p</p>
  </div>

  <div>------------------</div>
  
  <div>
    <h2>soy un h2</h2>
    <p>no soy hermano de los otros p pero tengo un hermano h2</p>
  </div>

  <div>------------------</div>

  <div>
    <p>no soy hermano de los otros p pero tengo un hermano h2</p>
    <h2>soy un h2</h2>
  </div>

CSS

h2 ~ p {
color: red;
}

Resultado

RESUME:
![](

GENERAL SIBLING COMBINATOR

RESUMEN CLASE 31:
COMBINADORES:
GENERAL SIBLING

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>
        <p>soy un p</p>
    </div>
</body>
</html>

CSS

h2 ~ p {
    color: red;
}

para teclado mac la forma de obtener el s铆mbolo es con tecla option + 帽

Adajacent Sibling: Etiqueta que est茅 al mismo viel y que est茅 a su lado.
General Sibling: todas las etiquetas que est茅n al mismo nivel y que el contenedor sea el mismo.

Recuerden que para que sea un hermano general debe cumplirse lo siguiente:

  • El hermano general precede a la etiqueta que se ver谩 afectada por el CSS.
  • Ambas etiquetas comparten el mismo padre.

https://developer.mozilla.org/es/docs/Web/CSS/General_sibling_combinator

La virgulilla (~) en el teclado espa帽ol latino puede obtenerse presionando la tecla Alt Gr + 4, seguido de espacio.

En un teclado 60% con distribuci贸n en ingl茅s, la virgulilla se hace con shift + fn + esc.
Saludos 馃槂

32.-Combinadores: General Sibling

Hermano general: como hermano general vamos a modificar todas las etiquetas de p谩rrafo que tengan como hermano general un h2.

Va a aplicar el estilo siempre y cuando existan en la misma l铆nea como hermanos esa etiqueta que estamos modificando.

Con el combinador de s铆mbolo equivalente o tilde 鈥渵鈥 estamos diciendo que las etiquetas de p谩rrafo que est茅n en el mismo contenedor que las etiquetas de h2, sean de color rojo.
Como hemos visto todas estas etiquetas est谩n en la misma contenedora div, as铆que independientemente de la posici贸n de los h2, si son cercanas o lejanas, mientras sean del mismo contenedor, siempre ser谩n de color rojo.

que hago si con ningun codigo me sale la
" virguilla" ??

Ese s铆mbolo me sale presionando la tecla chip y la tecla que en mi caso mi teclado la tiene debajo de la tecla de Esc, y el idioma del computador English State International Keyboard, presiono Ship y la tecla y luego barra espaciadora (~).

Hi, this is my aport 馃槂
HTML Code

CSS Code

Result

El Combinador Hermano General utiliza el s铆mbolo de tilde ~ y se aplica el estilo de la etiqueta hermana seleccionada de forma general a las dem谩s etiquetas
h2 ~ p {
color: red;
}
En este ejemplo todas las etiquetas p谩rrafo adoptar谩n el estilo de las etiquetas hermanas h2

No entiendo la utilidad de esto si lo puedo hacer simplemente con la equeta p?

General Sibling Combinator ~
.
Ejm: H2 ~ P {鈥
Aplica los estilos a todos los hermanos especificados ( P ) de otra etiqueta ( H2 ).
.
Es importante mantener una buena identaci贸n para evitar posibles confusiones.

Combinador Hermano general, en css vamos a utilizar un s铆mbolo que se llama signo equivalente o tilde (~).

h2 ~ p {
  color: red;
}

Lo que estamos haciendo es un ok como hermano general vamos a modificar todas las etiquetas de p谩rrafo que tengan como hermano general un h2. De forma general existen p谩rrafos juntos con etiquetas h2 eso es lo que hace sibling en general va a aplicarle el estilo siempre y cuando existan a la misma l铆nea como hermanos esa etiqueta que tu estas modificando con la tilde o el signo equivalencia.

Selecciona todos los <a> que siguen despu茅s de <div>

Los <a> que est茅n antes del <div> no ser谩n tenidos en cuenta.

Excelente todo esto de los combinadores, es algo de lo que no ten铆a conocimiento. Estoy disfrutando al m谩ximo este curso.

En windows en la distribucion de teclado ingles us puedes obtener este simbolo ~ con la combinacion

shift + `

pdt es la primera tecla escima del tab

En windows se escribe el simbolo
presionando simultaneamente alt gr +
<!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> este es un H2</h2>
      <p>Parrafo</p>
      <h2>es un H2</h2>
      <h3> es un H3</h3>
      <p>Parrafo</p> 
  </div>
</body>
</html>```

Combinador de hermano general ~ (General Sibling)

El combinador ~ separa dos selectores y selecciona el segundo elemento s贸lo si este est谩 precedido inmediatamente o no por el primero y ambos comparten un padre com煤n.

h2 ~ p {
  color: red;
}

Me di cuenta de que tambi茅n el p谩rrafo anterior se cuenta como hermano.

Combinador hermano general.

La virgulilla (~), para ciertos teclados, sale con la suma de AltGr + el bot贸n (asterisco, suma, cierre corchete), ese que est谩 cerca al bot贸n Enter.

para los que no les sirva ningun codigo para sacar la " ~ "
como a mi , que intente de todo lo que sale en internet y no funcionaba 鈥

la solucion es
AltGr + " + "

pero no el + de los numeros si no el + donde esta el *

  • Hermano general: Aplica el estilo siempre y cuando coincida una p con un h2 en el mismo contenedor*/
h2 ~ p {
color: red;
} 

En mi LAPTOP yo saque el signo presionando la tecla alt gr + la tecla que contenia el simbolo ~ de hehco esta junto con * y +

ALT+ 126= ~~~~

El combinador de hermanos generales en CSS, denotado por el s铆mbolo ~, selecciona todos los elementos hermanos que comparten el mismo padre y que siguen al primer elemento especificado, sin importar su proximidad directa.

Aqu铆 tienes un ejemplo de c贸mo puedes utilizar el combinador de hermanos generales:

css
Copy code
h2 ~ p {
font-style: italic;
}
En este caso, la regla CSS selecciona todos los elementos <p> que son hermanos generales (es decir, comparten el mismo padre) de un elemento <h2>, y les aplica un estilo de texto en cursiva.

Ejemplo en HTML:

html
Copy code
<h2>Encabezado 1</h2>
<p>Este p谩rrafo ser谩 cursiva.</p>
<p>Este p谩rrafo tambi茅n ser谩 cursiva.</p>
Ambos p谩rrafos <p> en este caso ser谩n afectados por la regla CSS, ya que son hermanos generales del <h2>.

Es importante destacar que, a diferencia del combinador de hermanos adyacentes (+), el combinador de hermanos generales (~) selecciona todos los elementos hermanos que cumplen con la condici贸n, no solo el siguiente. Adem谩s, el orden de los elementos en el c贸digo HTML no afecta la selecci贸n; solo importa que compartan el mismo padre y que el primer elemento preceda al segundo especificado en el selector.

Alt gr + 4 y te sale el gui贸n raro

Buenas tardes, note que si le aplicara el estilo a los hermanos generales de h3 solo aplicaria a los hermanos que van despues de la etiqueta h3 y no a los de antes.

Hola,
Aclaraci贸n:
El combinador de hermanos generales (~) separa dos selectores y hace coincidir todas las iteraciones del segundo elemento, que siguen al primer elemento (aunque no necesariamente inmediatamente) y son hijos del mismo elemento padre.

Es fundamental entender el concepto que 鈥渟iguen鈥.

Por ej., no funcionar铆a si el segundo elemento est谩 antes del primer elemento, aunque los dos sean hijos del mismo elemento padre.

Para la virgulilla ALT GR + 4 con teclado espa帽ol

En Mac para sacarlo debes de usar 鈥渙ption鈥 + 鈥+鈥 = ~

~Como escribir el simbolo de la virgulilla en Linux ~

Parece que todo mundo, ha escrito sus tutoriales en base a Windows y MacOS y nadie ha publicado algo para los compa帽eros linuxeros

Escribir el simbolo es simple, pulsamos AltGr y sin soltar, en mi caso con el teclado, ESPA脩OL, pulsamos el simbolo de +, el que esta al lado, de la tecla enter, y listo, lo tenemos escrito

Asegurense de que su teclado, de igual forma, este en espa帽ol, o sea latinoamericano

Recuerden que para sacar la ultima <p> no es copy + paste, seleccionan la ultima <p> y ponen: Shift + alt + 鈫 para que se duplique鈥

Asi lo entendi, espero que ayude:
El general sibling aplica las modificaciones a los elementos hermanos que indiquemos mientras ambos existan como hermanos dentro de un contenedor padre, las modificaciones ser谩n realizadas si y solo si existen los dos dentro del mismo contenedor (el hermano de 鈥渞eferencia鈥 y el que va a ser modificado). Si uno de los dos no existe, nada ser谩 aplicado.

El nombre correcto del car谩cter es virgulilla, para el idioma espa帽ol, tiene un objetivo relacionado a un aspecto de la pronunciaci贸n. En este caso aplicados solo al sibling general:

EJ: h2 ~ p => ; tomara todos los hermanos, sin importar si son cercanos o no.

Los hermanos generales es que est茅n debajo en el mismo contenedor, as铆 hayan otros elementos abajo tambi茅n

.

Cuando vean la virgulilla (~) en CSS recuerden cuando abren su cartuchera en el colegio鈥odos los 煤tiles dentro son hermanos sin excepci贸n 馃槄

Para los usuarios de Linux Ubuntu, de igual manera que windows, con la hotkey combination: Shift + tecla localizada numeral (~) en la parte izquierda del 鈥1鈥

Mientras observaba la clase, lo que obtuve es un error interesante que seguramente les llegue a pasar, cuando estan determinando una clase y quieran aplicar el combinador del hermano general, chequen bien que esa clase este bien escrita y puedan ver el cambio.
Porque si no, puede suceder esto mientras hagan esto:

</div class="generalSibling">
		<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>
		<p>Soy un p</p>
	</div>
~ =  ALT GR + tecla *+~ 
```(diagonal izq al enter).
Teclado latinoamericano

Este link s煤per recomendado para usar los s铆mbolos en tu teclado. (sin necesidad de ALT +).

Tambi茅n puedes abrir el character map que viene por defecto en Windows.

La tecla AltGr te permite acceder a esta tercera funci贸n.

En Windows 11 es ALT GR + 4 sin soltar presionas el s铆mbolo de virgulilla

h2 ~ p { (modifica todos los p谩rrafos que "vengan" de un h2)

Hermano general o General sibling (usamos la virgulilla o tambi茅n llamado signo equivalente ~

Para usar un hermano general sigue vigente la regla del hermano cercano de que para afectar a la etiquta <p> debe estar por debajo de <h2>, si un <p> esta arriba del primer <h2> no se vera modificado su color aunque este en el mismo nivel

<style>
        p ~ h1 {
            color: red;
        }
    </style>
</head>
<body>
    <p>hola</p>
    <h1>h1</h1>
    <p>p</p>
    <h1>h1</h1>
    <p>p</p>
    <h1>h1</h1>
</body>

El General Sibling o hermano general nos permite de que cualquier etiqueta <p>(en este caso) que este en el mimo nivel (o tabulador) de <etiqueta> se veran afectadas en los estilos asignados, pero cualquiel <p> que no este al mimo nivel de <etiqueta> no se veran afectados

<etiqueta> ~ p 
{
.......
}

General de hermanos

  • Es similar al adyacente, pero esta vez no solo selecciona al de abajo, sino a cualquiera que est茅 al mismo nivel (abajo de el), es decir, a sus hermanos.

1 ero para los que est谩n en Windows solo cambien el idioma del teclado a ingles y aprieten shift + la primer tecla jaja sin ser esc la de abajo鈥 y con respecto a 鈥渉ermano general鈥 seria mejor la explicaci贸n que se aplica general y no por cercan铆a, a no ser que yo desconozca una variable de la regla (que es probable 馃槂

Para sacar ~ en linux se hace con

alt + 帽

En Windows Alt + 126 y sale ~

alt Gr y el signo + asi pude hacerlo yo

Importante: Si hubiese un <p> antes del <h2>, a esa etiqueta no le aplicaria el combinador. Solo se aplican a los que vienen inmediatamente despues 馃槂

Para LInux es
Alt Gr + 帽 = ~

Combinador: Hermano general

Sibling General: Aplica el estilo siempre que exitan a la misma l铆nea como hermanos la etiqueta que se est谩 modificando.

El combinador hermano general ( ~ ) separa dos selectores y hace coincidir todas las iteraciones del segundo elemento, que siguen al primer elemento (aunque no necesariamente inmediatamente) y son hijos del mismo elemento padre .