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

Bonus: tabla de etiquetas HTML

55/55

Lectura

Acabas de terminar el Curso Definitivo de HTML y CSS, pero antes de que continúes tu aventura en el Curso Práctico de HTML y CSS, nos gustaría darte un regalo.

Hemos recopilado las 44 etiquetas de HTML más esenciales y las colocamos en una tabla que podrás descargar para usarla como wallpaper, o como recurso de estudio para tus próximos cursos, o como recurso de trabajo para tus proyectos.

👉 Descargar la tabla de etiquetas HTML en PNG.

👉 Descargar la tabla de etiquetas HTML en PDF.

Sheet-html.png

Esperamos que la disfrutes, la uses mucho y te sea muy útil en tu camino como desarrollador o desarrolladora web.

Si quieres ver más contenidos así, recuerda seguirnos en Instagram, donde podrás encontrar recursos de estudio y Platzigrafías muy útiles para tu día a día como estudiante de Platzi. Haz clic aquí abajo para poder ir a nuestro perfil 👇

instagram platzi.png

Aportes 112

Preguntas 4

Ordenar por:

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

Muchísimas gracias por su gran apoyo en nuestro aprendizaje y crecimiento continuo!

Saludos

Hola una cosa que en este curso no se trato mucho es las características y diferencias que tienen los elementos inline y los elementos block. Le dejo mi resumen sobre ese tema.

https://drive.google.com/drive/folders/1kDZ9qPz4m4Z6DiaUNdDulHS6RP6jpsVX?usp=sharing

Muchas Gracias por el Curso!

✨ Ilustración adecuada para tener a mano las etiquetas que se aprendió.

Excelente curso realmente es algo pesado tiene demasiado contenido pero vale la pena en su totalidad hay que aprender a salir de la zona de confort y empezar a crecer🔥

c: me apareció hace unos días en mi feed de inicio en platzi y lo descargue. Suelo memorizar las etiquetas pero nunca esta de mas tener tu respaldo por si la memoria falla.

Muy Útil herramienta

Antes me sentía que no servia para programar, pero este tutor se me hace muy fácil aprender

Increible curso muchas gracias

Muy buen curso. Felicitaciones al instructor.

Excelente aporte muchas GRACIAS!!!

Que buen curso realmente! Comparo con el primer curso de mejorandola y el avance es infinito y eso que el curso de Freddier estaba excelente! 👏👏👏

Muchas gracias, lo voy a imprimir 😃

muchas gracias 😃

Es un aprendizaje muy apasionante y lo mejor de todo es que todavía falta mucho por aprender y mejores cosas nos esperan en platzi. Un instructor como Diego que explica bien y usa ejemplos muy prácticos es de gran ayuda.

Muy agradecida con todo lo aprendido, y por este gran aporte

Excelente para tener de referencia cuando se necesite. Gracias.

Aprendí, pero sé que me falta mucho más!!! Gracias por guiarme PLATZI ❤️

Gracias por la oportunidad de aprender tantas cosas y reforzar nuestro camino, fue un placer compartir mis retos con esta hermosa comunidad y fue un placer aprenderlos gracias a la enseñanza que nos brindas ❤️

Excelente Curso!!! Extenso pero vale la pena y muy bien el instructor!!!

Muchas gracias !!!

Graciassss, mil graciassss por el curso, por el aprendizaje, por llevarme en este camino del reaprendizaje y por este bonus tan esencial.

Gracias por el documento, muy útil.

Muchas gracias por todo, en verdad que me llevo mucho conocimiento de este curso

Muchas gracias por este maravilloso curso, ahora a aplicar lo ya aprendido!

un poco abrumado, puesto que es demasiada información un un tema nuevo para mi, pero muy entusiasmado para seguir y nunca para de aprender

Muchas gracias por estos dos días gratis , me di el espacio de ver los 72+30 videos , Fue una actualización de productos y funcionalidad de CSS HTML Y Prework

Muchas gracias , excelente ayuda mill gracias

Muchas gracias!!! muy útil la verdad, un excelente curso por cierto

Genial, es un curso muy extenso pero vale la pena llegar al final. Gracias

Muchas gracias , me ha gustado mucho , muyyy bien explicado 😃 estoy muy contenta adquirir nuevos conocimientos y haber llegado a Plazi.
#PlatziDay

Grandioso, esta será una buena forma de repasar las estique y sus funciones… ustedes son geniales Temp Platzi: piensan en todo para facilitarnos el aprendizaje

Agradecido, por sus enseñanzas y motivación.

Muchas Gracias por este regalo!
Realmente muy útil para no olvidarlas. Aunque lo más importante es la practica. Hagan muchos ejercicios para reforzar todo aquello que hemos aprendido en este curso 🚀

Esto es educación online efectiva, Que buen curso, estoy bastante emocionado por lo que he aprendido.

Excelente recursos… muchas gracias.

Esta súper la herramienta.

de verdad que vale la pena pagar platzi, muy buen curso sigan asi

Gracias son lo máximo.

Muchas gracias, simplemente un curso maravilloso !!!

Me encantó este curso

Información resumida de esta clase
#EstudiantesDePlatzi

  • Podemos descargar esta imagen en donde encontramos las 44 etiquetas más esenciales de HTML. Gracias

muchas gracias gran curso

Esta tabla está increíble!, muchisimas gracias por ella y todas las herramientas dadas el el transcurso del curso

Excelente curso ,muy bien explicado gracias

Interesante toda la información y hay cosas muy puntuales que sin experiencia las pasas de largo como el tema de dividir los CSS por sus @media a cada pantalla o dispositivo y muchas otras, espero aprender y encontrar mas información en los cursos para mejorar como el tema de flexbox, grid, accesibilidad, mobile first, etc. porque esto fue como una introducción básica pero muy buena.

Gracias por todo, aprendí mucho

A por más cursos goo!! Gracias aprendí muchísimo mucho más que en la Universidad

💖

Gracias Diego, excelente curso. Sos un gran profe!

Muchas gracias por el curso!

muchas gracias excelente

En lo personal no me gusta mucho el frontend pero es necesario saber y conocer todas las areas para mejorar en la de especialidad de uno, es un curso muy jugoso que valdra la pena repasar

Muchisimas Gracias.

Muchas gracias por el curso !!!

Muchas Gracias

mil gracias por los conocimientos profe es un crack!

Muy buen curso para mi que recién comienzo.
Gracias Diego!!!

Excelente curso. Aprendí muchísimo. Es el inicio de mi camino a convertirme en desarrolladora web. Gracias por el contenido.
Saludos.

Súper curso, lo disfruté mucho.

Un gran curso muy completo lo recomiendo!!!

Excelente, muchas gracias. Muy buen curso.

Muchas gracias por el curso! ^^

Muchas gracias por este curso, hoy se mas que ayer pero menos que mañana! ansioso por comenzar el curso practico, quien este por comenzarlo me puede contactar (si lo desea) para formar un grupo de aprendizaje 😀 y así nunca parar de aprender.

Gran curso, gran instructor.

excelente curso, se aprende bastante, con mucha ganas de seguir profundizando.

fascinante, con ganas de seguir profundizando en css, pero no quiero salir de la ruta de aprendizaje por el momento.

Cada avance dentro del curso fue como buscar cobre y encontrar oro.

Muchas Gracias por este curso aprendí demasiado

Gracias por el aporte!! curso largo y muy bueno!!

Esto ha sido un viaje increíble, con muchas más ganas de continuar este camino como desarrollador, muchas gracias, Diego.

Excelente curso y el profesor muy claro explicando todos los conceptos.

Graciassss nunca pense que terminaria un curso de HTML/CSS. Fui un estudiante terrible en bachillerato y me hace sentir muy bonito saber que llegue hasta el final y no me rendi :’)

EXCELENTE CURSO ME ENCANTO, AHORA A TOMAR EL EXAMEN DESENME SUERTE 😄

Muchas gracias por el curso, muy explicativo y jugoso en el ambito del apendizaje

Excelente aporte prof, a seguir aprendiendo a full!

Muchas gracias, excelente curso!!

Hasta ahora el curso más completo que he tomado en Platzi. Excelente el contenido y super didáctico. Siento que avancé bastante. Vamos por más.

genial esta muy buena ya la descargo sirve de soporte

Excelente el curso! Diego un crack, gracias.

Thanks so much!

El Lenguaje de Marcado de Hipertexto (HTML) es el código que se utiliza para estructurar y desplegar una página web y sus contenidos. Por ejemplo, sus contenidos podrían ser párrafos, una lista con viñetas, o imágenes y tablas de datos.

Su nombre son las siglas de HyperText Markup Language, que significa literalmente Lenguaje de marcado de hipertexto.
Por lo tanto, el HTML5 es la última versión del estándar HTML que se utiliza para crear las páginas web que estás visitando, e incorpora algunas novedades interesantes.

¿Qué hace un desarrollador web? Un desarrollador web crea sitios web utilizando varios lenguajes de programación. Sus responsabilidades incluyen el diseño de páginas web y el desarrollo de la funcionalidad del sitio para satisfacer las necesidades de los usuarios.

A nivel teórico y técnico debes dominar HTML, el lenguaje de programación que permite definir la estructura del sitio web. Es el conocimiento básico de todo desarrollador web y, a su vez, la base de cualquier página.

Excelente curso, ahora solo es cuestión de practicar y leer bastante la documentación.

Hi guys, I want share my version of this resourse in english.

Buenos dias Diego, a pesar que apenas decidi meterme al mundo de la tecnologia , te doy las gracias por que es el mejor curso que me han impartido, no parare de aprender, y la edad no es impedimento para lograr nuestros objetivos.

muchas gracias

Cuanto aprendí en este curso! Me llevo tesoros y muchas ganas de seguir aprendiendo!!

¡¡Extraordinario curso!! Extremadamente muy completo, se requiere de mucha práctica pero también de mucha pasión por el desarrollo.

Mil gracias por este curso excelente contenido y muy enriquecedor

Mil gracias…

Muchas gracias por el curso y la profesionalidad del profesor!

Qué belleza de gráfica. Gracias.

Muy buen curso, muchas gracias

Muchas gracias, estoy feliz en cierto modo por lo mucho que he aprendido con Diego. Aún tengo mucho por recorrer, ahora iré al curso práctico. Saludos a Diego, que fueron excelentes las clases. 😄

Wow, debo admitir que es una infografía excelente.

Muchas gracias Platzi!!! Un cierre acorde a este gran Curso!

Aprendí muchísimo en este curso. Grracias!!

Done