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

Max/Min width

36/55
Recursos

Aportes 162

Preguntas 64

Ordenar por:

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

o inicia sesi贸n.

El overflow es el equivalente al:
En CSS

Esta clase tiene un typo :ccc height debe llevar 鈥渧h鈥 sugiero que suban esta clase nuevamente porque esta explicaci贸n puede afectar a los estudiantes 鉂わ笍

Min-height: se utiliza para definir la altura m铆nima de un elemento dado. Impide que el valor de la propiedad height llegue a ser m谩s peque帽a que la especificada en la altura m铆nima ( min-height ). Se refiere a la altura del bloque contenedor.

Max-height: se utiliza para definir la altura m谩xima de un elemento dado. Impide que el valor de la altura pueda llegar a ser m谩s grande que la de max-height . Porcentajes: se refiere a la altura del bloque contenedor.

Min-width: se usa para determinar la anchura m铆nima de un elemento. Previene que la propiedad width pueda ser inferior que min-width . Aplicable a: elementos de tipo bloque. Porcentajes: se refieren a la anchura del bloque contenedor.

Max-width: define el ancho m谩ximo que un elemento puede tener, max-width cambia el tama帽o del elemento si el valor de width es mayor que el de max-width.

Hola. Como sabr谩, estamos viendo muchas etiquetas y atributos, por lo que olvidarlas ser谩 f谩cil si no las escribimos en alg煤n lado. Podemos escribir nuestros apuntes de c贸digo en Word, Bloc de Notas, etc.

Aunque quiero compartirles Typora, un programa gratis, minimalista y poderoso para almacenar nuestras notas personales y nuestros fragmentos de c贸digo.

section ocupara el 50% del ancho y alto con respecto a su padre directo que es main
main ocupara el 80% del ancho y alto con respecto al viewport (谩rea visible del usuario de una p谩gina web.)

Este ejemplo queda perfecto para lo que nos mostr贸 Diego sobre Max/Min Width 馃憞馃徏

Les comparto un peque帽o proyecto que me propuse y logr茅:
Objetivo:

Resultado:

Estoy aprovechando al maximo el platzi day!, ayer me qued茅 hasta las 5 am viendo videos jajaja

驴Qu茅 es la viewport?
Es el 谩rea visible del usuario de una p谩gina web.
El viewpost var铆a seg煤n el dispositivo y ser谩 m谩s peque帽a en un tel茅fono m贸vil que en una pantalla de computadora.

Antes de las tabletas y los tel茅fonos m贸viles, las p谩ginas web estaban dise帽adas solo para pantallas de computadora, y era com煤n que las p谩ginas web tuvieran un dise帽o est谩tico y un tama帽o fijo.

Luego, cuando comenzamos a navegar por Internet usando tabletas y tel茅fonos m贸viles, las p谩ginas web de tama帽o fijo eran demasiado grandes para caber en el viewport. Para solucionar este problema, los navegadores de esos dispositivos redujeron la p谩gina web completa para adaptarse a la pantalla.

Una regla importante cuando vayamos a utilizar el min y el max en el width, necesitamos tener un width base y casi siempre este va a ser en porcentaje.
Lorem*8 sirve para agregar texto en p谩rrafo.
Problema de overflow, quiere decir que tenemos mas texto contenido que el mismo espacio del contenedor padre.

TIPS: 1vw o 1vh equivale a 1% por eso al poner el 100vw y 100vh cubre toda la pantalla XD

驴Que es Lorem ipsum?
Lorem ipsum es un texto sin sentido que aplicamos para llenar espacios donde podr铆a ir texto, as铆 como podr铆amos poner 鈥渁lkjdljkakjasljakldjaadlakj鈥 para rellenar un espacio, en el desarrollo y dise帽o es buena practica aplicar el Lorem Ipsum para dar a entender que ah铆 podr谩 haber un texto.
.
En VS escribiremos 鈥渓oremxY鈥 sea Y el n煤mero de palabras que queramos generar.

max = hasta
min = desde
Algo curioso que pasa con imagenes es que si usamos
max-width: 100%, le estamos diciendo que no puede crecer mas de su propio ancho original. Si usamos solo width: 100%, la imagen intentara estirarse para abarcar el ancho de su contenedor, esto pixelea la imagen.

Esto se usa bastante para empezar a adecuar los MediaQuery para responsive.

Ah les dejo un librito por si quieren leer del tema
https://documentcloud.adobe.com/link/track?uri=urn%3Aaaid%3Ascds%3AUS%3A35a26580-e883-4e72-91d0-8a083c3f60f8#pageNum=23

He intentado aplicar todos los conocimientos en este layout
![](

Recuerda: El viewport del navegador es el 谩rea de la ventana en donde el contenido web est谩 visible.

section{
    width: 80%;/*debemos tener un width base que normalmente sera en porcentaje*/
    min-width: 320px;/*limitamos el tama帽o que se va a encojer*/
    max-width: 500px;/*limitamos el tama帽o que va a crecer*/
    min-height: 500px;
    margin: 0 auto;
    background-color: red;
}
/*un error comun es que le asignamos un tama帽o a nuestro contenedor pero el contenido es demasiado
que se desborda del contenedor una forma de solucionarlo es asignar un tama帽o min que permite
que nuestro contenedor crezca seg煤n el contenido que se tiene. */```

muy tranquilo aprendiendo css pero te ense帽an lorem*8 y aprendes a invocar al diablo

Viewport height (vh): Esta unidad esta basada en el alto de la ventana. El valor de 1vh = 1% del alto del area de visualizaci贸n.
.
Viewport width (vw): Esta unidad esta basada en el ancho de la ventana. El valor de 1vh = 1% del ancho del area de visualizaci贸n.
Max-width: Permite definir la anchura maxima de un elemento.
.
Min-width: Permite definir la anchura minima de un elemento.
.
Max-height: Permite definir la altura maxima de un elemento.
.
Min-height: Permite definir la altura minima de un elemento.

Esta imagen lo resume muy bien. 馃槉

  • Medidas.
    Las medidas vh y vw son medidas relativas de acuerdo al viewport. Vh hace referencia a la cent茅sima parte de la altura del viewport y vw a la cent茅sima parte del ancho del viewport.
    鈥 1vh = 1% de la altura del viewport
    鈥 100vh = altura del viewport
    鈥 1vw = 1% del ancho del viewport
    鈥 100vw = ancho del viewport

  • Max-width

鈥 La propiedad de CSS max-width coloca el m谩ximo ancho a un elemento. Adem谩s, impide que el valor de width sea m谩s largo que el valor especificado en max-width.

  • Min-width
    鈥 A diferencia de max-width que define el tama帽o m谩ximo, min-width define el m铆nimo tama帽o que un elemento puede tener.

  • Max-heigth
    鈥 La propiedad max-height funciona de manera similar a la propiedad max-width, pero afecta a la altura en lugar de anchura.

  • Min-heigth
    鈥 A diferencia de la altura m谩xima, la propiedad altura m铆nima proporciona una altura m铆nima para un elemento

Para los que tienen dudas sobre la diferencia entre % y vw, veanla as铆:

  • % es una medida ABSOLUTA , dependientes de su contenedor padre.

  • VW es una medida RELATIVA al tama帽o de pantalla que se muestre nuestra pagina. Pueden verla como una medida responsiva

Alguien me puede ayudar con esta duda

si 鈥渉eight: 100vh鈥 hace que main ocupe todo el espacio del viewport, por qu茅 cuando se aplica el 鈥渕in-height: 500px;鈥 para evitar el overflow esto hace que quede un espacio en blanco abajo

`main {
width: 100vw;
height: 100vh; /* si esto hace que main ocupe todo el view port */
background-color: purple;
}

section {
width: 80%;
min-width: 320px;
max-width: 500px;
min-height: 500px;
background-color: red;
margin: 0 auto;
}`

Clase 36 - Max/min width


驴C贸mo funcionan las propiedades viewport-width y viewport-height?

  • Estas propiedades nos permiten definir el ancho y el alto de un elemento usando el viewport del dispositivo en el que se renderice el elemento.
  • Ejemplo:
  • HTML
<main>
  <section>
           
  </section>
</main>

CSS:

main
{
    width: 100vw;
    height: 100vh;
    background-color: purple;
}
  • Lo que estamos haciendo en este ejemplo es asignarle al elemento <main> un width de 100vw y un height de 100vh. Esto nos permite hacer que este elemento ocupe todo el campo del viewport en donde se vaya a renderizar el elemento, no importa si es una pantalla de un computador de escritorio, laptop o un celular, este elemento siempre ocupar谩 el 100$ de ambas medidas.

驴C贸mo podr铆amos centrar un elemento con CSS?

  • Lo podemos hacer asignando la siguiente regla CSS al elemento:
margin: 0 auto;
  • Lo qu茅 estamos haciendo con esta regla es dici茅ndole al navegador que queremos que le asigne 0 a las m谩rgenes superiores e inferiores y que a las m谩rgenes de los lados estas se reparten el espacio disponible. Con solo esta regla somos capaces de centrar elementos que nos sean de texto.

驴C贸mo funcionan las propiedades max-width y min-width?

  • Estas propiedades nos permiten decirle al navegador que un elemento no puede tener m谩s y menos ancho del que le definimos con estas propiedades, es decir, le estamos poniendo un l铆mite de crecimiento y decrecimiento a un elemento. Para usar estas propiedades debemos de tener en cuenta que se debe de tener la propiedad width declarada previamente en el elemento.
  • Ejemplo:
section
{
    width: 80%;
    min-width: 320px;
    max-width: 500px;
    background-color: aqua;
}
  • Como vemos en este ejemplo lo que estamos haciendo es que el elemento <section> ocupar谩 el 80% del espacio disponible que este tenga, pero tambi茅n le estamos diciendo que puede crecer solo hasta un tama帽o de 500px de ancho y no se puede hacer m谩s peque帽o a 320px de ancho.

驴Qu茅 pasa si el contenido de una etiqueta de contenido es m谩s grande que una etiqueta contenedora?

  • Se presenta un problema de overflow.

驴C贸mo podemos solucionar el problema de overflow?

  • Usando la propiedad min-height.

驴C贸mo funciona la propiedad min-height?

  • Esta propiedad nos permite definir un valor m铆nimo en el alto de un elemento y si su contenido es mucho m谩s grande qu茅 el elemento contenedor con esta propiedad el elemento puede crecer lo suficiente para contener el contenido.

Para los que tal vez les haya pasado que si ponen 100vw se hace un overflow horizontal, se resuelve con un max-width:100%;
Esto sucede porque vw es relativo al width total de la ventana del navegador.
Aqui se explica algo respecto a esto

鈥淟orem鈥 sirve para generar texto aleatorio ejemplo: <p>Lorem30</p> genera 30 palabras aleatorias

Hay algo que no se aclara y que me toc贸 buscar por fuera, o quiz谩 no me di cuenta y es la diferencia entre vw, vh y los porcentajes, y es que el vw y vh aplican un porcentaje de la vista del navegador mientras que los porcentajes son relativos al elemento padre.

Eso estuvo un poco confuso

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

main {
  width: 100vw;
  height: 100vh;
  background-color: blue;
}
section {
  width: 80%; /*Generalmente en porcejate*/
  min-width: 320px;
  max-width: 500px;
  min-height: 500px;  /*Le indico un menor, pero si requiere m谩s creecer谩 para adaptarse.*/
  margin: 0 auto;
  background-color: brown;
}

les dejo misx notas de la clase:

Me encanto este curso, ya programo en php y ahora tambi茅n manejo el framework laravel, se de bases de datos relacionales, pero siempre sentia que me faltaba un poco mas de profundidad en CSS, lo uso hace a帽os pero nunca a su 100%, este curso me empuja a leerme toda la documentaci贸n. Muy bien desarrollado y explicado por el profesor.

Buenas, vengo del futuro. Si utilizas solo el height no se desbordar谩. Hay algo raro all铆. Si estos cursos est谩n disponibles siempre, deber铆an ir actualizandolos. Qued茅 re loco papi, re loco, por que no sab铆a por donde le entraba el agua al molino.

section {
    width: 80%;
    min-width: 320px;
    max-width: 500px;
    height: 500px;
    margin: 0 auto;
    background-color: red;
}

As铆 como, el texto se adapta al height del section.

Les dejo el CSS del section comentado n.n

section {
  width: 80%; /* width base */
  min-width: 320px; /* l铆mites */
  max-width: 500px; /* l铆mites */
  min-height: 500px; /* para evitar el overflow */
  margin: 0 auto; /* truco para centrar sin flexbox */
  background-color: red;
}

despu茅s de 1 hora de d谩ndole replay por fin entend铆 xD

Buenas tardes.
Excelente clase, ya vamos viendo bases del 鈥渞esponsive desing鈥.

Algo que olvido mencionar el profe. Es que el main estaba desajustado en correspondencia al section. por que con el min-height logro meter el texto al section. pero dejo descuadrado el main (osea el background purpura) si ustedes le asignan el min-height al main tambien se ajustara al tamano de su section.
![](

Alguno ha traducido el texto de 鈥淟orem ipsum鈥 alguna vez? te deja pensando jajaja

esta clase toca verla muchas veces hasta que se lo aprenda uno

Aporte a la clase 馃槈

Min-height:聽Lo usamos para definir la altura m铆nima de un elemento. Impide que el valor de la propiedad height llegue a ser m谩s peque帽a que la especificada en la altura m铆nima(min-height ). Se refiere a la altura del bloque contenedor.

Max-height:聽Lo usamos para definir la altura m谩xima de un elemento dado. Impide que el valor de la altura pueda llegar a ser m谩s grande que la de max-height . Porcentajes: se refiere a la altura del bloque contenedor.

Min-width:聽Lo usamos para determinar la anchura m铆nima de un elemento. Previene que la propiedad width sea inferior que min-width. Se aplica en: elementos de tipo bloque. Porcentajes: se refieren a la anchura del bloque contenedor.

Max-width:聽Este define el ancho m谩ximo que un elemento puede tener, max-width cambia el tama帽o del elemento si el valor de width es mayor que el de max-width.

Existen varias formas de centrar elementos como:

  • justify-content

  • vertical-align

  • justify-self

  • align-items.

  • text-align

  • etc

Notas
min-width sobrescribe los valores de max-width y width.
De la misma forma ocurre con height

No entiendo

Notas de la clase

  • view port, es el tama帽o total de la pantalla del navegador, a diferencia del los porcentajes que ven el tama帽o del elemento.
  • max-width y min-width, definen el tama帽o m铆nimo y m谩ximo del ancho del elemento, antes de adicionar scrolls

A pesar de estar correctamente explicado puede ser algo confuso en especial si son conceptos nuevos para el estudiante. Aqu铆 se manejan tres conceptos, que aunque relacionales, son distintos: vh y vw, Max/Min width y el problema de overflow,

Me puse a ponerle los numeros en rem y me modifico las cosas muy diferente 馃槀馃槄

VW/VH
Son medidas relativas de acuerdo al viewport.
1vw = 1% del ancho del viewport.
100vw = ancho del viewport.
1vh = 1% de la altura del viewport.
100vh = altura del viewport.

RECORDEMOS: El viewport es el 谩rea de la ventana del navegador en la que se puede visualizar el contenido de la pw. No es el mismo tama帽o que tiene la pw ya renderizada.

36.-Max/Min width

Esto lo que hace es que el contenedor de main ocupe el 100% del viewport en el width y en el height sin importar el tama帽o de la pantalla. Esto nos ayuda a poder darle ciertas dimensiones a contenedores padre como main o sections.

驴Qu茅 es lo que hace el margin 0 auto?

De arriba a abajo no le agrega ning煤n margin pero de izquierda a derecha has que se ajuste de manera autom谩tica, por eso lo centra.

Cuando vayamos a utilizar el min y el max en el width necesitamos tener un width base (que casi siempre va a ser en porcentaje).

B谩sicamente es delimitar su crecimiento.

El height funciona de manera similar solo que sin un porcentaje inicial.

Cuando el texto empieza a salir del section se le llama overflow, es decir, tenemos m谩s contenido que el mismo espacio del contenedor padre. Esto se soluciona usando min-height que le dice, la altura m铆nima que vas a tener es de Npx pero si llegas a tener contenido que exceda los Npx crece con el contenido hasta que este deje de crecer.

vh (Viewport Height)
Medici贸n basada en la altura de la pantalla. Por ejemplo si damos una altura a un elemento de height: 100vh;, este elemento tendr谩 la misma altura que la pantalla.

vw (Viewport Width)
Medici贸n basada en lo ancho de la pantalla. Por ejemplo si damos un ancho a un elemento de width: 100vw;, este elemento tendr谩 lo mismo ancho que lo ancho que la pantalla.

% (Porcentaje)
Medici贸n basado en porcentaje. La medici贸n en porcentaje ser谩 definida en relaci贸n a su elemento padre, a menos que 茅ste se acompa帽e de una posici贸n fija (position:fixed;) o absoluta (position:absolute;), que entonces en este caso su comportamiento ahora tambi茅n respetar谩 el tama帽o de la pantalla.

El min-width y max-width : Equivale a decir lo minimo es 320 pero si el contenido se pasa entonces crece pero hasta 500(ancho)
El min-height y max-height: La altura minima es tanto, pero si el contenido se pasa; crece hasta tanto鈥

Voy a hacer uso de mi pregunta boluda. Es algo que no se y siempre olvido de investigar. En el minuto 6.50 agrega un <p> lorem <p> y utiliza un atajo para la identaci贸n. Alguno podr铆a facilitarme esa informaci贸n?? Gracias鈥

me llam贸 la atenci贸n como se utiliza la l铆nea de margin: 0 auto; para centrar el contenido de section. Lo que hace el que el margen superior e inferior son de 0, pero en auto quiere decir que el espacio restante de los m谩rgenes izquierdo y derecho se reparten a la mitad equitativamente. Por eso sirve para centrar sin utilizar tipos de display como flex.

Min/Max Width

min-width y min-height permiten establecer un tama帽o minimo en el contenedor respectivo, ej. <section style=鈥渕in-width=500px;鈥>. Asi como, max-width y max-height.

RECONDADO PARA los que quieren saber la diferencia entre width: 100%; y width: 100vw;
https://www.youtube.com/watch?v=_3FpdC_hLHA

Como me gusta pokemon realice de mi pokemon inicial favorito de kanto, xd

vh/vw y min/max width/height

vh y vw

鈥渧w鈥 y 鈥渧h鈥 son unidades de medida en CSS que se utilizan para dimensionar elementos de manera proporcional al tama帽o de la ventana del navegador. 鈥渧w鈥 representa el 1% del ancho total de la ventana del navegador, mientras que 鈥渧h鈥 representa el 1% de la altura total de la ventana del navegador.

Estas unidades son 煤tiles para crear dise帽os responsivos y escalables, ya que permiten dimensionar elementos de manera proporcional al tama帽o de la ventana del navegador. Sin embargo, es importante tener en cuenta que estas unidades pueden verse afectadas por las barras de desplazamiento del navegador y se deben asegurar de que los elementos dimensionados con 鈥渧w鈥 y 鈥渧h鈥 sean responsivos y se adapten correctamente a distintos tama帽os de pantalla.

main{
    width: 85vw; /* 85% */
    height: 80vh; /* 80% */
}

min/max height/width

Min-height: se utiliza para definir la altura m铆nima de un elemento dado. Impide que el valor de la propiedad height llegue a ser m谩s peque帽a que la especificada en la altura m铆nima ( min-height ). Se refiere a la altura del bloque contenedor.

Max-height: se utiliza para definir la altura m谩xima de un elemento dado. Impide que el valor de la altura pueda llegar a ser m谩s grande que la de max-height . Porcentajes: se refiere a la altura del bloque contenedor.

Min-width: se usa para determinar la anchura m铆nima de un elemento. Previene que la propiedad width pueda ser inferior que min-width . Aplicable a: elementos de tipo bloque. Porcentajes: se refieren a la anchura del bloque contenedor.

Max-width: define el ancho m谩ximo que un elemento puede tener, max-width cambia el tama帽o del elemento si el valor de width es mayor que el de max-width.


section {
    min-width: 300px;
    max-width: 500px;
    min-height: 300px;
    max-height: 500px;
}


Muy claro todo hasta aqui, me esta gustando este curso鈥

Quieres hacer un cuadrado responsive?

Width: 30vw;
Height: 30vw;

Esto har谩 que al ancho sea un 30 %del ancho y que la altura sea un 30 % del ancho!!!. O sea un cuadrado responsive. 馃槂

Comparto los apuntes de la clase 馃槂

Para definir estas propiedades, es necesario primero darle un alto y ancho al elementos a estilizar.

Me costo mas de lo que imaginan, tuve que recurir al aporte de un amigo pero al finan me ayudo a comprender muchisimo varios temas sobre todo que vh y vw no sayudan mucho a la hora del responsive.

![](

Super explicado, muy claro y comprendido鈥 hasta ahora este curso esta buen铆simo.

Les dejo este aporte para complementar a lo dicho en clase

RESUMEN CLASE 36:
MAX/MIN WIDTH

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>Medidas MinMax</title>
    <link rel="stylesheet" href="./style.css">
</head>
<body>
    <main>
        <section>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos libero quasi corporis voluptas quod voluptatibus doloribus. Suscipit magnam expedita nobis deleniti fugit libero, veniam quis maxime! Vel enim debitis ea!
            Esse suscipit deleniti optio itaque nulla omnis laborum architecto similique molestias, culpa odit ducimus veritatis, dolor quo, vitae eveniet dolore accusantium consequatur cumque quasi nisi! Voluptates natus quaerat consequatur libero?
            Saepe architecto consequuntur deserunt quos, quibusdam, consequatur doloremque ad quae mollitia, corrupti optio! Ipsam, recusandae cumque esse delectus facilis quos odio accusantium consequuntur similique sunt, minima, natus sequi alias? Impedit!
            Aliquid veritatis architecto ullam non placeat repudiandae, nulla rem iste quisquam soluta cum quibusdam error, at, illo consequatur delectus blanditiis eveniet? Deserunt veritatis quia itaque repellat possimus eligendi, temporibus sequi.
            Dolores accusamus illum recusandae a ratione, ipsam quidem, sequi, necessitatibus ex eos vitae non qui. Expedita nisi fugit cumque iusto odio, sequi unde quasi numquam necessitatibus soluta deleniti voluptates? Necessitatibus!
            Delectus quasi minima voluptates eum alias quas optio, placeat ad asperiores eaque earum recusandae architecto laborum tempore accusantium vero ipsam. Ad itaque repellendus ipsam hic autem. Fugit eveniet voluptatum laboriosam.
            Aspernatur, quam dicta? Ducimus est autem pariatur eum esse cupiditate, quas neque corrupti et quia blanditiis facilis, maiores, voluptatem minus ex vero deleniti suscipit ipsa rerum? Asperiores dolore voluptatibus excepturi!
            Nobis minus in distinctio praesentium deserunt. Accusamus et, consequuntur, sequi esse quas, eius ad fugiat rerum dolorem hic eos doloremque eaque. Ut cumque quis quos quibusdam ducimus atque rem perferendis.</p>
        </section>
    </main>
</body>
</html>

CSS

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

main {
    width: 100vw;
    height: 100vh;
    background-color: blueviolet;
}

section {
    width: 80%;
    min-width: 320px;
    max-width: 500px;
    min-height: 500px;
    margin: 0 auto;
    background-color: red;
}
  • {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    }

main {
width: 100vw;
height: 100vh;
background-color: purple;
}

section {
width: 80%;
min-width: 320px;
max-width: 500px;
min-height: 500px;
margin: 0 auto;
background-color: red;
}

Informaci贸n resumida de esta clase
#EstudiantesDePlatzi

  • Para centrar el estilo de un contenedor podemos usar margin o auto

  • Cuando vayamos a utilizar el min o max para especificar el width, es importante tener un width base que est茅 en porcentaje

  • Cuando utilizamos el min-width especificamos a que tama帽o como m铆nimo deber铆a llegar el contenido y de all铆 no reducir m谩s

  • cuando utilizamos el max-width especificamos a que tama帽o como m谩ximo deber铆a llegar el contenido y de all铆 no aumentar m谩s

  • Esta es una manera de hacer contenedores flexibles

  • Cuando vamos a manejar el heigth no necesitamos un heigth base, ya que utilizamos el min o max directamente con heigth

  • Cuando tenemos m谩s texto que el espacio de contenedor y este texto se sale de este, podemos decir que tenemos un problema de over-flow

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

main{
    width: 100vw;
    height: 100vh;
    background-color: purple;
}

section{
    width: 80%;
    /* Antes de agregar un min o max width o height, se debe agregar un width o height base, por lo genereal siempre en porcentaje */
    min-width: 320px;
    max-width: 500px;
    min-height: 500px;/* El contenido puede exceder el tama帽o de la caja ocasionando un overflow si es que se especifica un height determinado, sin embargo, si se utiliza min-height se le dice al navegador que, su tama帽o m铆nimo ser谩 de 500px, pero si hay m谩s contenido, entonces que la caja crezca junto con el contenido */
    margin: 0 auto;/* Ayuda a centrar una caja */
    background-color: red;
}

Este es mi desafio

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">
    <link rel="stylesheet" href="style.css">
    <title>Desafio</title>
</head>
<body>
   <div class="container">
       <div class="box" id="one">
           <p>Tokyo Revengers</p>
       </div>
       <div class="box" id="two">
           <figure class="container-img">
               <img src="https://areajugones.sport.es/wp-content/uploads/2020/06/tokyo-revengers-2021-1080x609.jpg" alt="">
           </figure>
           <p>Mientras miraba las noticias, Takemichi Hanagaki se entera de que su novia de secundaria, Hinata Tachibana, ha muerto.
                La 煤nica chica que alguna vez se fij贸 en 茅l fue asesinada por un grupo de criminales conocidos como la Banda Tokyo Manji. Takemichi vive en un viejo departamento con delgadas paredes, y en su trabajo, su jefa seis a帽os menor que 茅l lo trata como basura. Para rematar, es un completo virgen鈥 En la c煤spide de la miseria de su vida, de repente vuelve en el tiempo doce a帽os a sus d铆as de secundaria. Para salvar a Hinata y cambiar el curso del tiempo, 隆el alguna vez in煤til
                trabajador de medio tiempo Takemichi deber谩 buscar volverse el l铆der de la banda criminal m谩s tenebrosa de Tokio!
           </p>
       </div>
   </div>
</body>
</html>

css

*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
html{
    font-size:62.5%;
}
.container{
    display:inline-block;
    width:100vw;
   height:100vh;
   font-size:1.8rem;
   text-align: center;
  
}
.box {
    
    border: 1px solid black;
      border-radius: 4rem;
        margin:0 auto;
   
} 
#two{
width: 40%;
min-height: 400px;
padding:3rem 2rem;
background:rgb(212, 212, 212);
}
#one{
    width: 20%;
    height:5rem;
    padding:1rem 2rem;
    position: relative;
    top:2rem;
    background-color :red;
}
.container-img img{
    width: 30rem;

   
}
  • margin: 0 auto; significa que no se agregar谩 nada arriba y abajo, pero a los lados se centrar谩 autom谩ticamente en relaci贸n con la ventana.

  • min-width: 320px; har谩 que el ancho de la pantalla siempre ocupe el 80% hasta que llegue a 320px. Es decir, al llegar a 320px, s贸lo se ver谩 el section.

  • max-width: 500px; har谩 que el ancho del estilo aplicado ocupe el 100% de la pantalla hasta llegar a 500px. A partir de all铆 se generar谩n unas bandas.

  • Puede ser que nuestro texto ocupe m谩s tama帽o del que le asignamos a su contenedor. Para ello, solo debemos agregar el min a nuestro height. Ej: ```
    min-height: 500px;

Si quieren recordar lo visto en las clases de manera sencilla pueden utilizar la plataforma Notion.site , aca pueden crear sus propias notas y exportarlas cuando la necesiten aparte si quieren que sus notas sean publicas tmabien es posible.

  • Min-height: se utiliza para definir la altura m铆nima de un elemento dado. Impide que el valor de la propiedad height llegue a ser m谩s peque帽a que la especificada en la altura m铆nima ( min-height ). Se refiere a la altura del bloque contenedor.

  • Max-height: se utiliza para definir la altura m谩xima de un elemento dado. Impide que el valor de la altura pueda llegar a ser m谩s grande que la de max-height . Porcentajes: se refiere a la altura del bloque contenedor.

  • Min-width: se usa para determinar la anchura m铆nima de un elemento. Previene que la propiedad width pueda ser inferior que min-width . Aplicable a: elementos de tipo bloque. Porcentajes: se refieren a la anchura del bloque contenedor.

  • Max-width: define el ancho m谩ximo que un elemento puede tener, max-width cambia el tama帽o del elemento si el valor de width es mayor que el de max-width.

**lorem*8 + TAB: ** Te agrega 8 p谩rrafos de lorem ipsum
Tienes q tener instalado previamente EMMET

33. Mis apuntes sobre: 鈥淢ax/Min width鈥

Les comparto el c贸digo de la clase:

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./style.css">
    <title>Document</title>
</head>
<body>
    <main>
        <section>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur magni praesentium exercitationem tempore. Voluptates repellendus odit itaque quia omnis? Cum repellat labore culpa animi libero. Dolorem dolores optio blanditiis accusamus.
            Corrupti vero nam excepturi odio quisquam vel dolorem quae illum ad. Ducimus, quibusdam quos nulla vel libero unde! Quae mollitia iste, expedita in veritatis quam ex a. At, ducimus ullam.
            Eius accusantium quidem unde alias eos molestiae accusamus, incidunt error fugit explicabo cum, quae aspernatur. Recusandae commodi, impedit aperiam, natus a laboriosam reiciendis accusamus cupiditate eum aspernatur tempore neque consequuntur!
            Assumenda saepe accusamus nihil reiciendis nisi, facere optio est fugit minus quaerat aliquid molestias ullam sit. Earum non labore nostrum ullam numquam facere rerum totam at aperiam animi. Debitis, corporis!
            Odit voluptatem quisquam delectus quis eum commodi ducimus! Id quae sed provident architecto repellendus quasi saepe at sequi! Architecto assumenda soluta facere suscipit sint doloremque eaque eos velit voluptatibus qui.
            Tenetur a nobis alias iusto consectetur dicta voluptas magnam quam optio consequatur suscipit libero eligendi autem in exercitationem, quaerat aspernatur laudantium, inventore aliquam expedita tempora quidem quis earum? Praesentium, veniam?
            Incidunt suscipit nemo laudantium hic, officia sit esse? Id nobis saepe dolore officia laborum consectetur beatae commodi nisi reprehenderit, provident, similique, ducimus ab. Sapiente at soluta hic nesciunt? Numquam, ipsam?
            Itaque suscipit non omnis placeat unde alias nostrum ducimus sunt at inventore quis earum, delectus explicabo ipsa minima, provident hic mollitia fuga eligendi, nihil asperiores fugit tempore nulla modi? Fuga!</p>
        </section>
    </main>
</body>
</html>

CSS:

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

main {
    width: 100vw;
    height: 100vh;
    background-color: purple;
}

section {
    width: 50%;
    min-width: 320px;
    max-width: 100%;
    min-height: 500px;
    margin: 0 auto;
    background-color: red;
    color: white;
}

atajo para Toggle Word Wrap alt + z

Todo iba de maravilla hasta esta clase, he quedado perdido 馃槩

Estableciendo estilos al contenedor main en relaci贸n al Viewport de nuestro proyecto.

Resumen del capitulo en Notion
https://acortar.link/JlKAh

quede medio perdido jajaja necesito ver este video al menos 3 veces ajaja

Podemos definir el Viewport, como:
鈥淎rea disponible en pantalla al renderizar un sitio web.鈥

Pueden utilizar el

min-height: 0 auto;

Para que crezca de acuerdo su contenido autom谩ticamente.

Que buena clase!!

Toggle Word Wrap = Alt + z

La propiedad margin en CSS se utiliza para establecer los m谩rgenes alrededor de un elemento. Los m谩rgenes crean espacio adicional fuera del borde de un elemento y ayudan a controlar el espaciado entre elementos en una p谩gina web. La propiedad margin puede tener uno, dos, tres o cuatro valores, que representan los m谩rgenes en la parte superior, derecha, inferior e izquierda, respectivamente.

El problema de overflow ocurre cuando el contenido de un elemento es m谩s grande que el espacio que tiene disponible, ya sea en ancho (overflow-x) o en altura (overflow-y). Aqu铆 hay algunas formas comunes de abordar este problema:

  1. Ocultar el Desbordamiento:
    Si no es esencial mostrar todo el contenido que se desborda, puedes simplemente ocultar el desbordamiento. Puedes hacerlo de la siguiente manera:

css
Copy code
.elemento {
overflow: hidden; /* Puede ser 鈥榲isible鈥, 鈥榟idden鈥, 鈥榮croll鈥 o 鈥榓uto鈥 */
}
visible: El desbordamiento no se oculta.
hidden: El desbordamiento se oculta.
scroll: Agrega barras de desplazamiento, pero solo si es necesario.
auto: Agrega barras de desplazamiento solo si es necesario.
2. Agregar Barras de Desplazamiento:
Si prefieres permitir que los usuarios desplacen el contenido que se desborda, puedes usar overflow: auto o overflow: scroll. Esto agregar谩 barras de desplazamiento si el contenido es m谩s grande que el 谩rea visible.

css
Copy code
.elemento {
overflow: auto; /* O 鈥榮croll鈥 */
}
3. Recortar el Desbordamiento:
Puedes usar la propiedad overflow junto con width y height para recortar el contenido que se desborda. Esto cortar谩 el contenido que excede el tama帽o especificado.

css
Copy code
.elemento {
width: 300px; /* Ajusta seg煤n tus necesidades /
height: 200px; /
Ajusta seg煤n tus necesidades */
overflow: hidden;
}
4. Soluci贸n Flexbox/Grid:
Si est谩s utilizando flexbox o grid, puedes ajustar las propiedades para que los elementos se ajusten correctamente dentro del contenedor, evitando el desbordamiento.

  1. Evitar Desbordamiento Vertical:
    Si el desbordamiento es vertical y est谩s viendo desbordamiento en elementos en l铆nea, puedes intentar usar white-space: nowrap; para evitar el desbordamiento de l铆nea.

css
Copy code
.elemento {
white-space: nowrap;
}
Estas son solo algunas soluciones comunes. La elecci贸n depender谩 del contexto espec铆fico y de tus necesidades de dise帽o.

Las propiedades max-width y min-width en CSS se utilizan para establecer l铆mites m谩ximos y m铆nimos respectivamente para el ancho de un elemento. Estas propiedades son 煤tiles para controlar la presentaci贸n y la capacidad de respuesta del dise帽o de una p谩gina web.

max-width
La propiedad max-width establece la anchura m谩xima que puede tener un elemento. Si el contenido es menor que el valor de max-width, el elemento tomar谩 el ancho del contenido. Sin embargo, si el contenido es m谩s ancho, la anchura se limitar谩 a max-width.

Ejemplo:

css
Copy code
.container {
max-width: 800px;
margin: 0 auto; /* Centra el elemento en la p谩gina */
}
En este ejemplo, el elemento con la clase .container nunca ser谩 m谩s ancho que 800 p铆xeles, incluso si el contenido dentro de 茅l es m谩s amplio.

min-width
La propiedad min-width establece la anchura m铆nima que puede tener un elemento. Si el contenido es m谩s ancho que el valor de min-width, el elemento tomar谩 el ancho del contenido. Sin embargo, si el contenido es m谩s estrecho, la anchura se ajustar谩 a min-width.

Ejemplo:

css
Copy code
.sidebar {
min-width: 200px;
}
En este ejemplo, la barra lateral con la clase .sidebar tendr谩 al menos 200 p铆xeles de ancho, pero puede ser m谩s ancha si su contenido lo requiere.

Ejemplo Combinado:
css
Copy code
.container {
max-width: 800px;
min-width: 400px;
margin: 0 auto;
}
En este caso, el elemento con la clase .container no ser谩 m谩s ancho que 800 p铆xeles y no ser谩 m谩s estrecho que 400 p铆xeles. Esto proporciona un rango de ancho flexible.

Estas propiedades son particularmente 煤tiles para crear dise帽os responsivos y adaptativos, donde deseas asegurarte de que tu contenido se presente de manera adecuada en diferentes tama帽os de pantalla.

8:15 Que clase de conjuro andaba lanzando all铆 el profe :v jaja btw, buena clase! :D
![](https://static.platzi.com/media/user_upload/image-cd6309b5-dbd3-4171-9046-a4bf1966b8e5.jpg)

Creo que la explicaci贸n para esto tema qued贸 muy b谩sico y demasiado resumido para todas las aplicaciones que tienen este tipo de medidas.

.

El profesor mencion贸 que para aplicar max o min width es necesario tener un width base en %. Para height no es necesario y tampoco creo que sea bueno colocar height= 100vh ya que habr谩 un desborde enorme de la vista al construir una p谩gina web鈥olo creo que es necesario para algo que este dentro de la altura de la pantalla鈥lgo as铆 como un login.

con min-x le estamos diciendo establece la siguiente medida absoluta =Xpx, cuando seas <= a ese valor, mientra seas mayor ocuparas la medida relativa % , en conclusion si esta dentro de lrango alica la medida absoluta si esta fuera del rango aplica la medida relativa

鈥淚f you for some reason use both the width property and the max-width property on the same element, and the value of the width property is larger than the max-width property; the max-width property will be used (and the width property will be ignored).鈥

https://www.w3schools.com/css/css_dimension.asp