Web Developer Fundamentals

1

Qué aprenderás sobre HTML y CSS

2

¿Qué es el Frontend?

3

¿Qué es Backend?

4

¿Qué es FullStack?

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

Aún no tienes acceso a esta clase

Crea una cuenta y continúa viendo este curso

Próximos pasos como Web Developer

54/55
Recursos

Aportes 353

Preguntas 18

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.

A por más! Never Stop Learning, you know!

Resumen del curso definitivo de HTML y CSS para que estudies antes del examen 😄

Gracias Diego Granda, Tu disposición para transmitir conocmiento me ha sostenido en todo este
proceso de aprendizaje. Sé que es el primer paso en este infinito y fascinante camino de la
programación. Nunca pares de enseñar.

Excelente Curso con un magistral profesor! Les dejo mi primera página web hecha (aún faltan cosas por mejorar 😅)
https://1horadibujando.netlify.app/

Por mas cursos de Diego…

Se me hizo larguísimo el curso pero a la vez lleno de enseñazas y aprendizaje. Llené muchísimos huecos que tenía tanto de HTML como de CSS, además de responsive design. Ahora a repasar todo para presentar el examen.

Excelente curso, muy completo en fundamentos, lo que falta es practicar y leer bastante!!!

Buenas noches! Antes de presentar un examen con tantos nuevos conocimientos en programación me gusta hacerme un cheat sheet para resumir todo lo que he aprendido y tener una visión general de todo lo visto. Se las comparto y espero les sea de ayuda 💚

https://docs.google.com/spreadsheets/d/1KXSGFWeIUWBB3RQtVzFyRePJyG-hxbX3MqylFjd_hQE/edit?usp=sharing

Clon de slack (landing page), solamente con lo aprendido en este curso.Para practicar un poco, intentando utilizar todas las practicas de html y css unicamente.

Fue un curso lleno de mucho conocimiento!
Mucho que aprendí y que ahora tengo la seguridad en mi mismo para empezar a maquetar mis primeros proyectos.
Pero la lección mas importante llego en el modulo de accesibilidad.
Muchas veces no pensamos en todos los usuarios que podrían usar nuestro servicio, aplicación u producto.
Muchas Gracias diego, por todo el aprendizaje desde la primera clase.
Estoy muy feliz con todo el contenido.
Vamos a por mas.
Mucho a éxito a todos compañeros!
#NeverStopLearning 💚

Increíble lo que aprendí en 2 días y medio como parte del #PlatziDay, estuvo genial el curso y gracias al Profesor y a los compañeros por compartir sus conocimientos que también aprendí de ellos, me despido y como siempre:

Nunca pares de aprender!!!

Este curso es muy recomendado incluso si ya sabes HTML y CSS, te ensena unas cosas, unos detalles difíciles de encontrar por allí.

El Director de mi escuela secundaria siempre nos decía… “Nunca te acuestes sin aprender algo nuevo” - Hector Romero

que grandioso este curso, es un buen contendo para los que no tengan conocimiento de html y las personas que tenga conociento es refrescar lo antes visto y cosas nuevas. Así que seguimos aprendiendo con PLATZI

Excelente Curso, fue largo pero entretenido y mas al poder utilizar git para hacerlo y guardar en ramas y commits las diferentes secciones y clases.

Gran curso, gran Maestro!

Gracias Diego por compartirnos todos tus conocimientos, definitivamente este curso fue definitivo !!!

<p>Felicitaciones si lees este mensaje. Este es el comienzo de algo más grande. Pero... ¿Sabes qué? Lo vas a lograr</p>

Muchas gracias por el Curso me fascino y me enseño mucho. 😃😁

Ya somos JUNIOR FRONT-END DEVELOPERS!

Solo no se olviden de practicar, hay mucho que aprender todavía.
.
NUNCA PARES DE APRENDER!

Les dejo este Resumen del curso Definitivo de HTML y CSS donde se presentan los conocimientos aplicados por el instructor Dego de Granda.

Sigan en este camino del desarrolo Web y nunca paren de aprender!

Fue un curso con mucho contenido estoy emocionada de haber llegado hasta el final. Vamos por el siguiente curso de la escuela, Never Stop Learning.

felicitaciones al profesor!!! claro, sabe transmitir, se le nota la experiencia y dominio del tema! me encantó las referencias que compartió como smashing magazine y pexels. Y esperando por el curso de mobile-first, que sin duda será excelente. ✨✨✨

De verdad que este curso es excelente. Aproveché al máximo de reforzar mis conocimientos en HTML y CSS y de aprender cosas nuevas que pasaba por alto. Muchas Gracias.

Me encanto el curso!! mi parte favorita? desde el cap 1 al 54 :3

Felicidades a [email protected] lo que terminaron este curso!!!.
Nunca pares de aprender.

Exelente curso, sobre todo la explicacion de muchosvacios que me habia dejado

Comparto mi github(abordado en curso, y una que otra práctica): https://github.com/Christiano0407/Definitivo
Gracias Degranda. Aprendí muchísimo en éste curso. Gracias.

Me encantó este curso. Gracias Diego, espero poder seguir con la ruta.

De los mejores maestro que tiene platzi!

He intentado hacer la lista de la compra “movil first”,
la versión móvil y la escritorio al ser una lista bastante simple( no he querido poner muchos detalles) no he tenido mucho problemas. Con la versión tablet mi intención era poner los elementos de la tercera lista en horizontal pero no lo he logrado, al final he puesto una cuata lista para que cuadrara. Seguiremos practicando!!!.

Buenas !!! Aquí les dejo mis apuntes junto con algunos links y herramientas que me son de mucha utilidad para futuras consultas:
Curso HTML y CSS

Próximos cursos a estudiar para profundizar lo aprendido en este curso:

Brutal! De los mejores cursos que he tomado! Gracias por todo el conocimiento compartido!

Muchas gracias por tanto conocimiento, soy un dev de mobile y nunca me había acercado al desarrollo web. 😃 Estuvo muy chido, voy a aplicar los conocimientos adquiridos para hacer mi pagina personal.

Me siento muy feliz por haber terminado este curso, y lo mejor es que solamente es el inicio. No puedo esperar a ver que cosas vendrán en los siguientes cursos. Estoy emocionado!!

¡Genial!
Fue un curso largo, pero valió la pena.
Cada clase te motiva a querer conocer más
A seguir aprendiendo

Al llegar aca y haber reforzado conocimientos y entender flexbox y la forma de dise;o para paginas web, y por fin entender en su totalidad la forma correcta para empezar a hacer cosas reales. Mi universidad se queda muy atras con estudiar aca uwu

Hola !!!.
Excelente profesor !!!
Gracias!!
Tengo una inquietud …en el curso no mencionaste algo sobre CSS-GRID y del preprocesador SASS
(es que con todo lo aprendido al parecer ya no se los necesita ).Por fa danos tu punto de vista.
Gracias y Feliz 2021…!!!

Gracias Diego por este curso, excelente explicación de cada tema y gracias a mis compañeros por sus aportes!

Me ha parecido una joya este curso, muchas gracias Diego. A seguir aprendiendo en la escuela de desarrollo web.

Excelente contenido, explicación, en resumen me quedé fascinada con el curso. Muchas gracias #PlatziDay!

Gracias! por este curso Diego, a pesar de saber HTML y CSS previamente con los conocimientos que compartiste puedo crear mejores experiencias para los usuarios usando las mejores prácticas.

El mejor curso de html y css que he tomado, !Muchas Gracias Diego! por compartir tu conocimiento.
Comparto mi repo visto en el curso.

https://www.htmhell.dev/
En este sitio se recopilan varias malas practicas en HTML y cómo hacerlo correctamente

ya esta disponible el curso de mobile first?? lo necesito

Fue largo, y aveces confuso pero vario la pena, muy buen curso

Gracias al profe

Aunque al principio me pareció algo tedioso el curso, al final ha sido magnifico. Hablar de patrones de diseño y de accesibilidad…eso no se ve en cualquier curso de HTML y CSS.
ME ENCANTÓ!!!

¡Muchas gracias Diego! Creo que este es el curso más largo que he hecho hasta ahora en Platzi, casi dos meses a causa de mi trabajo 😂. Pero valió completamente la pena, seguiré avanzando en el camino del Desarrollo Web

Dejo mis notas del curso por si le sirven a alguien. Fueron construidas con la información de la clase y la brindada por varios platzinautas en los comentarios.
Notas del curso definitivo de HTML y CSS

Muchas gracias por el curso me sirvió un montón para poder continuar con mi carrera mucho más facilmente.

Literalmente me estoy quemando las pestanas con el curso, pero muy satisfecho con lo que he aprendido y con lo que falta 😄

Solamente tengo algo para decir: gracias Diego , gracias Freddy, gracias Chiristian. GRACIAS PLATZI y a toda su comunidad. Estoy muy ilusionado con este nuevo camino que estoy tomado, un abrazo grande y recuerda, nunca pares de aprender!!!

Excelente curso, me siento muy motivado, de verdad aprendi bastante y me encanto hacerlo. Sigamos aprendiendo

Like si viste el curso completito completito

Excelente curso diego muchisimas gracias definitivamente siempre se aprende algo nuevo y enseñas muy bien. gracias de verdad.

La verdad es que todo el curso de Html y CSS me sorprendió y encantó por lo completo y detallado que es.

Me encantó este curso. I love it. Yo ya hice le curso de mobile first qu elo amé también, y por eso me vine a este, para complementar y de verdad que valió la pena. Thank you so much Diego.

Gracias Diego!! por impartir tus conocimientos con claridad y pasión, he aprendido mucho para complementar mi carrera profesional como Front end Developer!! 💚 👏 🙌

Clon de header de https://developer.android.com/ con lo aprendido en este curso.
Faltan detalles pero la base esta.
![](url)

Hola aqui les comparto lo aplicado en este curso.
Les dejo mi repositorio en GitHub para que vean el codigo: https://github.com/danielvaldivv/desafio-CurDefHTMLyCSS

Desktop

Tablet

Mobile

Se pasó muy rápido el curso, venía con la idea de repasar conocimientos pero termine aprendiendo más cosas nuevas de las que ya sabía. Fue una muy buena idea tomarlo todo:)
No puedo esperar para hacer los otros y poner en práctica para que se me vaya facilitando todo el manejo (más que nada de dimensiones que es con lo que batallo xd)

Gracias Diego!! En un año espero estar en mi primer trabajo como programador Jr :3

Excelente curso, me encanta que siempre destaca qué es buena práctica y qué no. Muchos consejos y excelente forma de explicar.

De las mejores actualizaciones que hubo en Platzi 🏆

Tengo muchos cambios por hacer en mi página web…

Muchas gracias por el curso, estuvo genial.

excelente curso!! muchas gracias!!!

Un gran curso de un gran profesor, gracias y a seguir con el resto de la ruta!

De todos los cursos de HTML CSS que he hecho, este es el que más me ha dejado, gracias por el contenido

Gracias, Diego, por esa manera de enseñar. Espero muchos más cursos tuyos. Nunca pares de aprender.

Me encanta el juguete de Star Wars que tiene el profesor atrás. 😀😁

Me aparece “próximamente” en el curso “mobile first” 🤔🤔 cuando se estrena?

Este curso realmente fue una joyita. ❤️

muchas Gracias Diego, Impecable el curso!!!

muchas gracias es mi primer curso contigo y enserio no me dejas nada a deber XD

Gracias profesor Diego!

Excelente curso!

El mejor curso de HTML/CSS3 que he tomado hasta la fecha!

Este curso fue lo máximo :3

Gracias!! tremendo curso, Muchas gracias Diego De Granda, que buen profesor.

Excelente curso y emocionado para seguir con la Escuela de Desarrollo Web!!!

Muy buen curso, muy completo. Me gusto mucho. Gracias Diego

Este curso es exageradamente bueno!

mis primeros pinitos

¡Woow! Creo que este ha sido el primer curso largo que tomo con mucha paciencia.

Gracias por el curso Diego de Granda

Este curso es tremendo. Mil gracias, Diego.

Gracias!

Nunca pares de aprender ❤️

Felicitaciones Diego, excelente curso y maestro !!!

Ya dos cursos con el master Diego De Granda, eres un crack!

El curso de Mobile First es básico pero presupone que sabemos Javascript.

Información resumida de esta clase
#EstudiantesDePlatzi

  • Felicidades 😃
  • Ya podemos diseñar muy buenos proyectos
  • Vamos a seguir aprendiendo
  • Platzi Master 😃
  • Con Javascript puedo pasar a hacer páginas dinámicas

tremendo viaje en este curso

Muchas Gracias aprendi muchos conceptos y buenas prácticas

Gracias Diego!

Gracias por el curso, aprendi bastante y ahora tengo mas confianza al momento de hacer cosas en css y html