Curso Definitivo de HTML y CSS

Clases del Curso Definitivo de HTML y CSS

Instruido por:
Diego De Granda
Diego De Granda
Básico
7 horas de contenido
Ver la ruta de aprendizaje
Curso Definitivo de HTML y CSS

Curso Definitivo de HTML y CSS

Progreso del curso:0/55contenidos(0%)

Contenido del Curso
Tutoriales de estudiantes
Preguntas de estudiantes

Progreso del curso:0/55contenidos(0%)

Web Developer Fundamentals

Material Thumbnail

¿Qué vas a aprender en este curso?

02:46 min

Material Thumbnail

¿Qué es el Frontend?

05:02 min

Material Thumbnail

¿Qué es Backend?

03:55 min

Material Thumbnail

¿Qué es FullStack?

03:04 min

Material Thumbnail

Páginas Estáticas vs. Dinámicas

08:18 min

HTML

Material Thumbnail

HTML: anatomía de una página web

05:15 min

Material Thumbnail

Index y su estructura básica: head

17:08 min

Material Thumbnail

Index y su estructura básica: body

08:40 min

Material Thumbnail

Reto: crea tu lista de compras del supermercado

01:08 min

Material Thumbnail

Anatomía de una etiqueta de HTML

02:15 min

Etiquetas multimedia

Material Thumbnail

Tipos de imágenes

09:27 min

Material Thumbnail

Optimización de imágenes

04:06 min

Formularios

Material Thumbnail

Etiqueta form e input

11:54 min

Material Thumbnail

Autocomplete y require

10:49 min

Material Thumbnail

Input type submit vs. Button tag

04:50 min

CSS

Material Thumbnail

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

10:50 min

Material Thumbnail

Pseudo clases y pseudo elementos

17:31 min

Material Thumbnail

Anatomía de una regla de CSS

02:16 min

Material Thumbnail

Especificidad en selectores

08:17 min

Material Thumbnail

Demo de especificidad y orden en selectores

15:28 min

Material Thumbnail

Más sobre selectores

08:12 min

Material Thumbnail

Combinadores: Adjacent Siblings (combinators)

05:06 min

Material Thumbnail

Combinadores: General Sibling

02:52 min

Material Thumbnail

Combinadores: Hijo y Descendiente

06:18 min

Material Thumbnail

Desafío: Layout 1

01:48 min

Responsive Design

Material Thumbnail

Responsive design: media queries

06:31 min

Material Thumbnail

Estrategias de responsive: mostly fluid

07:20 min

Material Thumbnail

Implementando mostly fluid

12:10 min

Material Thumbnail

Layout shifter CSS

08:51 min

Material Thumbnail

Buenas prácticas y ejemplos de responsive

11:52 min

Material Thumbnail

Imágenes responsive

12:00 min

Próximos pasos

Material Thumbnail

Próximos pasos como Web Developer

03:25 min

Bonus: tabla de etiquetas HTML

00:39 min

nuevosmás votadossin responder
Génesis Sánchez Brito
Génesis Sánchez Brito
Estudiante

hola, alguien sabe porque cuando subo un video en formato mp4, al reproducirlo solo se escucha el audio mas no sale el video

1
Elmo López Jirón
Elmo López Jirón
Estudiante

no se si me salte esa clase, pero, como modifico el tamaño de una imagen? y para colocarlo al centro siempre seria con el right, left, up y bottom?

1
Mildred Adabelle Zaragoza Velasco
Mildred Adabelle Zaragoza Velasco
Estudiante

Hola, ¿alguien me podría ayudar con esto? No sé porqué aparece así.
¡Gracias!
Captura de pantalla (6).png

<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Mostly fluid</title><linkrel="stylesheet"href="../css/mostly-fluid.css"></head><body><main><divclass='c1'></div><divclass='c2'></div><divclass='c3'></div><divclass='c4'></div><divclass='c5'></div></main></body></html>
*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    background-color: azure;
}

html{
    font-size: 62.5%;
}

.container{
    display: flex;
    flex-wrap: wrap; /*para que el contenido pueda reposicionarse cuando vaya creciendo/disminuyendo el viweport*/

}

.c1, .c2, .c3, .c4, .c5{
    width: 100%;
    min-width: 150px;
    height: 150px;
}

.c1{
    background-color: #fde2e4;
}
.c2{
    background-color: #fad2e1;
}
.c3{
    background-color: #dfe7fd;
}
.c4{
    background-color: #cddafd;
}
.c5{
    background-color: #bee1e6;
}

@media (min-width: 600px){
    .c2, .c3, .c4{
        width: 50%;
    }
}

@media (min-width: 800px){
    .container{
        width: 800px;
        margin-left: auto;
        margin-right: auto;
    }
    .c1{
        width: 60%;
    }
    .c2{
        width: 40%;
    }
    .c3, .c4{
        width: 33%;
    }
    .c5{
        width: 34%;
    }
}

1
JUAN SEBASTIAN RODRIGUEZ JIMENEZ
JUAN SEBASTIAN RODRIGUEZ JIMENEZ
Estudiante

excelente lo del input list, lo desconocía por completo.

1
Juan José Rodríguez Portillo
Juan José Rodríguez Portillo
Estudiante

solo una consulta al momento de poner el
flex-grow:1;
exactamente cual es la funcion del 1, me quedo con esa gran duda.

1
Andres Rey
Andres Rey
Estudiante

Entonces en que casos se puede usar de forma correcta el important

1
marcoga00
marcoga00
Estudiante

Una pregunta offtopic

En el minuto 7:42 Diego aplica un shortcut en vscode para indentar y separar por línea los atributos de la etiqueta img
¿Saben cuál es?

3
Walter Antonio Sandoval Aguilar
Walter Antonio Sandoval Aguilar
Estudiante

¿Para que sirve y como funciona la etiqueta ?

1
Walter Antonio Sandoval Aguilar
Walter Antonio Sandoval Aguilar
Estudiante

💡 Los formularios son una parte importante para los productos webs, ya que es la forma en que comenzamos a interactuar con los usuarios les pedimos cierta información o ellos pueden solicitarmos información.

1
Alonso Ramírez Páez
Alonso Ramírez Páez
Estudiante

BorrarEspacios.png
¿Alguien sabe como borrar los molestosos espacios en blanco que hay entre elementos con inline-block?

1