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

Qué aprenderás sobre HTML y CSS

1/55
Recursos

Existen tres estándares importantes para generar productos web. Estos son los lenguajes o estándares que entiende todo navegador web:

  • HTML
  • CSS
  • JavaScript

HTML

Estructura de los documentos que se visualizan en los navegadores (Chrome, Edge, Firefox, Safari, Opera, entre otros). Es el lenguaje con el que clasificamos o etiquetamos cada parte del documento, dejándole saber al navegador qué información va a visualizar y qué valor tiene para nosotros. De esa manera, presentamos: Barras de Navegación, Secciones, artículos, listas, títulos de diferentes tamaños, audios, videos, imágenes, entre otros.

CSS

Es el lenguaje con el que le damos estilos a todo el contenido previamente etiquetado con HTML. Es el encargado o usado para darle todo el aspecto visual de manera profesional, usando estándares de diseño de documentos y logrando así la correcta visualización de textos y recursos audiovisuales en formatos digitales o, en nuestro caso, las páginas web.

JavaScript

Es lenguaje que se emplea para crear o brindar a las páginas web la capacidad de interactuar con el usuario y los recursos asociados a una página web, como lo son: bases de datos, servidores de diversa índole, información derivada de la interacción de cada página en sí.

Diferencias entre HTML, CSS y JavaScript

  • HTML es la estructura, como si fuese el esqueleto de un ser humano o los cimientos de un edificio. Por ejemplo: una página web que funciona, pero sin interactividad, colores ni diseño.
  • CSS corresponde a lo estético, como la piel de ser humanos. La pintura y adornos de los edificios o la manera en que es posible que la estructura del html se vea mejor para los usuarios.
  • JavaScript equivale a los músculos, lo que da esa interactividad a las personas para moverse y realizar acciones como correr.

Aporte creado por: SebasSD, Alexis Martinez, AntonioCrypto

Aportes 326

Preguntas 27

Ordenar por:

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

les quiero dejar los aportes que más me gustaron.

espero haber sido de ayuda.

vine a este curso porque necesito hacer una página web que le prometí a un amigo xD será que haré mi primera página web?

**Hola, antes de comenzar el curso me gustaría compartirles la siguiente ayuda: **
Para aprender HTML no existe ningún requerimiento previo, sin embargo mientras lo aprendemos es muy buena idea ir conociendo un poco de otros temas a continuación les dejo enlaces para que les den una leída, y así tengan una mejor noción de lo que es la web y como esta construida, por ejm:

Estos conceptos también los encuentran en el curso de Fundamentos de Ingeniería de Software.
En resumen,
Internet es toda la infraestructura técnica de comunicación que permite que todas las computadoras se conecten.
La Web es un conjunto de documentos HTML enlazados a través de hipertexto.

Estas son mis notas: Este curso es excelentes

Y aquí voy… construyendo mi futuro:

Yo ya tome los cursos básicos de la ruta de arquitectura de FrontEnd, pero me gustan los cursos de Diego, ya que siempre enseña lo más nuevo.

Aquí les dejo un enlace donde están todas las etiquetas de HTML 5.
http://html5doctor.com/

Hola. Vengo después de bastante tiempo dehaber tocado este tema:
Metodología de estudio.

  1. Formula preguntas sobre el contenido del video antes de darle play. Buscar su relevancia.
  2. Mirar el video, trata de resolver tus preguntas. Pausa cada cierto tiempo y genera un mapa visual mental sobre el desarrollo del video(como si fuera un rompcabeza. Crea imágnes vividas sobre lel contenido. COmo se relacionan y su importancia con tus preguntas. Explicalo a ti mismo. Avanza el video.
  3. Realiza un resumen general- Prioriza generar imágenes mentales, sonidos mentales, asociar los objetos con algo. Para que puedas acceder a el facilmente.
  4. Si te falta comprender un punto, vuelve a ver el video. Si no deseas hacerlo, imagina el porqué tomaste este curso, y sonríe. Haz algo que te guste. Luego, vuelve al video cuando ya estas ready. Sonrie.
  5. Practica. Realiza ejercicios. Si no los hay, inventa. Interactua con el punto. Qué pasa si esto lo hago de esta forma???---- o de esta?? si combina con esta??? Busca como se puede aplicar esto en algun problema q tengas.
    6)Haz anotaciones, limpias y entendibles para ti.
  6. Utiliza la repetición. La memoria es frágil. Debes estar , cada cierto tiempo, recordando sobre los conceptos, elementos, que hacen, importancia…(Investiga sobre repetición espaciada.

Te deseo exitos from the bottom of my heart.

Por un segundo pensé que estaba en el baño jaja. ¡Estaba esperando el curso con mucha emoción!!.

Mi meta de este año es ser una Desarrolladora Front end, y vengo desde 0 con todas las ganas a aprender este maravilloso mundo 😃

Para los que NUNCA han hecho algo de programación (como yo), les recomiendo hacer el curso de PREWORK para tener la máquina a punto y algunos conocimientos previos a este curso.

HTML: Estructura de los documentos que se visualizan en los navegadores (Chrome, Edge, Firefox, Safari, Opera, etc) Es el lenguaje con el que clasificamos o etiquetamos cada parte del deocumento, dejándoles saber al navegador, que información va a visualizar y que valor tiene para nosotros.
De esa manera, presentamos: Barras de Navegación, Secciones, articulos, listas, títulos de diferentes tamaños, audios, videos, imágenes, entre otros.

CSS: Es el lenguaje con el que le damos estilos a todo el contenido previamente etiquetado con HTML. Es el encargado o usado para darle todo el aspecto visual de manera profesional, usando estándares de diseño de documentos y logrando así la correcta visualización de textos y recursos audiovisuales en formatos digitales, en nuestro caso, las páginas web.

JAVASCRIPT: Es lenguaje que se usa para crear o brindar a las páginas web la capacidad de interactuar con el usuario y los recursos asociados a una página web, como lo son: bases de datos, servidores de diversa índole, información derivada de la interacción de cada página en sí.

Estaba esperando por este curso, seguro estará genial 🥰

	○ HTML (HyperText Markup Language): En resumen, se encarga de todo lo que es el texto; el lenguaje de marcado para hacer websites.

CSS (Cascading Style Sheets): Hojas de estilo en cascada, tiene que ver con todo lo estético, diseño, color, fuente, tamaño de letra, etc.

Aporte de clase:
○ HTML (HyperText Markup Language): En resumen, se encarga de todo lo que es el texto; el lenguaje de marcado para hacer websites.
○ CSS (Cascading Style Sheets): Hojas de estilo en cascada, tiene que ver con todo lo estético, diseño, color, fuente, tamaño de letra, etc.
JavaScript (JS): Es el encargado de hacer que los dos conceptos anteriores se ejecuten, su función puede ir desde hacer que funcione un simple botón, hasta llenado de formularios automáticos, es un lenguaje que funciona de manera nativa dentro de los navegadores.

Estoy tan emocionado te tomar este curso con usted 😄
Explica las cosas tan claras y limpias!
Es un curso mas largo de lo que estamos acostumbrados pero se que aprovechare cada segundo y sacare mucho conocimiento cuando obtenga ese diploma.
Vamonos con todo.

He tomado dos cursos con Diego y es el mejor profesor de Platzi, sin duda alguna, ¡me emociona mucho este curso!

Quien este año en el curso de html y css?

estas son mis notas:

Notas de clase:
.

Existen tres estándares importantes para generar productos web:
.

  • HTML
  • CSS
  • JavaScript
    .
    Estos son los lenguajes o estándares que entiende el navegador
    .
  • HTML .- Lenguaje que usamos para darle estructura a la información que vamos a usar
  • CSS .- Lenguaje o estándar que utilizaremos para darle estilo (o apariencia) a la información para generar una buena presentación

El curso esta muy bien y lleno de contenido, les recomiendo fuertemente que hagan notas y aportes de cada clase sin excepción y que se tomen el tiempo de comprender y practicar todos los temas, ya que puede parecer sencillo, pero si es tu primera vez te va costar y puedes llegar a frustrarte, así que les recomiendo mucho chicos que mas que ver muchas clases, entiendan al 100 los temas que les muestran

Hola estoy aquí por el reto de "crea tu primera página web"

2 de los 3 estándares para ser desarrollador web.
HTML
"Es el lenguaje que utilizamos para poderle dar estructura a la información que vamos a compartir con los usuarios y que el usuario va a ver en el proyecto final".

CSS
Es el lenguaje o el estándar que utilizamos para poder dar estilos y darle toda la interacción a esa información para que el usuario pueda tener una buena presentación de la misma y pueda generar la mejor interacción y experiencia con nuestro producto.

Hola, compañeros, vengo del futuro y quiero ayudarlos. 🧙‍♂️

Estrategias para tomar mejor el curso.

  • Descarga el repositorio💻 del curso y luego sobre el código del profesor comenta todo lo que él diga referente a la utilidad de cada: etiqueta, atributo, etc. (Así documentas tu código y puedes replicar todo de manera más fácil)

  • Estudia con preguntas ❓, aprovechemos que podemos tomar los Quiz todas las veces que queremos, ve mira las pregunta, anótalas y luego ve todas las clases y vas respondiendo.
    Aunque a mi no me funciona tanto el método Cornell para tomar notas es muy interesante.

  • No te esfuerces en tomar nota, ✏ suena extraño pero muchos compañeros ya lo hicieron en formatos super geniales, toma eso y escribe sobre sus notas y así tiene unas notas potenciadas.

  • No tomes las clases sin saber nada, 🕵️‍♂️ mira el titulo y busca en internet un video sencillo de como funciona o que es y después miras la clase, así ya tendrías el doble de preguntas.
    Esto no es de memorizar, en internet ya existen personas que han hecho todo lo que tu necesitas, inspírate de esas personas y SOLO aprende la bases, necesitar entenderlo todo, no memorizarlo.

Opinión

Realmente creo que tu al igual que todos los estudiantes que entramos a este curso tiene las mismas ilusiones, ya sean aprender o mejorar tu calidad de vida, así que realmente no te desmotives, ya tomaste tu decisión de hacerlo, ya vas muy adelante.

Comprende que el proceso de aprendizaje es traumático, trata de ser justo contigo y toma el tiempo que necesites al absorber los conocimientos, si algo no te funciona no te deprimas, toma un paseo, descansa del computador por ese día, necesitamos otros espacios de esparcimiento para aprender mejor.

Información resumida de esta clase
#EstudiantesDePlatzi

  • Vamos a ver 2 de los 3 estándares más importantes para generar productos web

  • Estos dos estándares son HTML y CSS

  • HTML lo usamos para darle estructura a la información

  • CSS lo usamos para darle estilo e interacción a la información, el objetivo es darle la mejor experiencia al usuario

  • Es importante que entendamos bien CSS

Regreso un par de meses después a este curso, porque mi progreso en lo absoluto ha sido lineal y en ocasiones hay cosas básicas que debo reafirmar. En aquel entonces no pude terminarlo porque lo sentía “demasiado” pero estoy decidida a ser una frontend así que aquí vamos otra vez 😃

esta pagina puede ser de apoyo para el curso.

✨ Energía, concentración y entusiasmo, para continuar aprendiendo.

¿Qué paso con el curso de desarrollo web online de Leonidas Esteban?

Mucha info para ver acá: https://developer.mozilla.org/es/ En español y con prácticas.

HTML: Para definir el contenido.
CSS: Para definir los estilos.
JAVASCRIP: Para definir la interactividad.

Estamos listos para 7 horas de puro html y css Gracias Diego estábamos esperando este curso 💪🏼

Esperaba con ansias este curso

Acabo de empalmar el curso de Responsive Design con Leonidas hace 2 horas aprox, hace 1 semana que sabía que se venía este curso y al terminar el de responsive, empalmar con este, Diego da buenas clases con fundamentos y contexto ✌

Iniciando el curso. Espero terminarlo esta semana
(。・∀・)ノ゙

Buen augurio con el profe Diego De Granda, ojala pueda responder todas mis dudas.

Me inculca confianza el profesor 😃

ojalá diosito y la práctica hagan que por fin en algo me vaya bien. I hope so

Hola a todos, no tengo conocimiento en programación, estoy realizando este curso como un reto personal, estoy muy animado porque en realidad es algo totalmente nuevo para mí.

Estoy empezando el reto de 3 semenas , estoy emocionada por aprender y comprender sobre este mundo de la programacion

Vengo a este curso para aprobar el reto de “Crea tu primera pagina web”

Estoy emocionado por esto y me siento seguro de estar acá porque ya vi el curso de Frontend developer y ademas ya practiqué durante una semana

Lenguas que entiende un navegador:

  • HTML - Estructura a la información que compartimos con los usarios
  • CCS - Estilos que mejoran la experiencia del producto

cual es la diferencia entre js, html y css

Mis notas 😄

<h5>Los 3 estandares de la web.</h5>
  • HTML, CSS y JavaScript.

Aquí solo hablaremos de HTML y CSS, los cuales son la estructura principal de una web estática antes de pasar a ser dinámica.

  • HTML es el lenguaje que utilizamos para darle estructura a la información que compartimos con los usuarios.
  • CSS es, el lenguaje que utilizamos para estilizar nuestra información y mejorar la experiencia de nuestro usuario

Notes

HTML

The HyperText Markup Language, or HTML is the standard markup language for documents designed to be displayed in a web browser. HTML elements are the building blocks of HTML pages.

https://en.wikipedia.org/wiki/HTML

CSS

Cascading Style Sheets is a style sheet language used for describing the presentation of a document written in a markup language such as HTML.

https://en.wikipedia.org/wiki/CSS

  • CSS could be a headache if we do not learn the fundamentals as we should

Les comparto este repositorio de github, puden revisar toda una estrutura de HTML.
https://github.com/elmergustavo/Examples-HTML

espero con este curso terminar de aprenderlo de una manera solida.

HTML es el lenguaje que utilizamos para darle estructura a la información.
CSS es el lenguaje o standard, que utilizamos para poder dar estilos a esa información. Para que el usuario tenga la mejor experiencia en su interacción con nuestro producto.

![](
Dejo un aporte que puede explicar mejor cómo funciona.

suscríbete a Platzi y obtén un mes adicional con este link de referidos https://platzi.com/c/fullprogram/

Un ejemplo basico:

Recuerden:
HTML no es un lenguaje de programación, es un sistema con el cual podemos estructurar la información que el navegador sepa interpretar.

uff 7 horas de contenido, nos vemos cuando acabe el curso de git y github.

Iniciamos con todo el Road to code 2.0!
HTML (HyperText Markup Language): es el lenguaje utilizado para darle estructura a la información que va a ver el usuario en el proyecto final.
CSS (Cascading Style Sheets): es el lenguaje o estándar usado para darle todo el estilo e interacción a esa información para que el usuario pueda tener una buena presentación y así generar la mejor interacción y experiencia con nuestro producto.

Muy ansiosa de comenzar este curso.

Había comenzado antes el de Git y Github, pero no lo quise terminar porque me costaba practicar sin tener conocimientos de HTML y CSS. En mi experiencia, recomendaría primero comenzar este curso y luego seguir con el de Git y Github, mucha suerte a todos los que iniciamos!

Hace algunos años hacía pequeñas prácticas de desarrollo web, incluso llegué a tomar el primer curso de Diseño y Desarrollo Web de Mejorandola (Hoy Platzi), pero por cuestiones de la vida me enfoqué a otras cosas y lo dejé de lado, el año pasado que me suscribí a Platzi me hice el propósito de tomar esta escuela y vamos retomar, si bien ya tengo bases y me acuerdo de algunas cosas (No de todo exactamente) hay que repasar y aprender nuevas cosas.
Por aquí estaré compañeros, les mando un saludo hasta donde se encuentren.

estoy muy animado por este curso

HTML.- Es el lenguaje para poder darle estructura a la información que compartiremos con los usuarios
CSS.- Es el estándar para darle estilos e interacción a la información, para mejorar la experiencia del usuario.

Cuando comienzas, en mi experiencia lo que mas trabajo le va a costar a todo mundo entender es la gerarquia de los elementos, el por que un maquetador crea un div dentro de otro div y por que no se ve en la pantalla, te recomiendo de verdad que veas un video, practiques unas 2 o tres horas jugando con lo aprendido y despues pases al siguiente

No puedo ver los vídeos desde mi celular me aparece un error
The media playback was aborted fue to curruptiion problem or because the media used features

Esperando lo mejor, del mejor!!

html -> estructura de la pagina
css -> la estetica
Javascript -> el funcionamiento

Viene la demencia Bro! saludos desde Panamá, i’m ready for this shit!

Llevaba días esperándolo yo, es mi próximo paso en la ruta, a tomar apuntes gente!

Excelente, lo estaba esperando

CSS es muy importante y muy amplio, no desanimes!

Creo que HTML y CSS estan un poco subestimados, pero la realidad es que dominar CSS es algo bastante interesante, tanto como lo puede ser un lenguaje de programación, creo que de a poco hay que ir dandole mayor importancia a CSS. Es lo que nos transmite todo!

Este curso me va a gustar, y lo voy a disfrutar. ❤️

Aquí retomando el curso, lo había dejado olvidado y es importante repasar los aspectos básicos de este mundo, vamos con toda!

HTML maqueta, CSS estiliza y JS interactua.

Esta es una estructura base de proyectos web que se puede usar en casi todo, incluyendo algunos frameworks

En este caso, dentro de assets se crean las siguientes carpetas:

quisiera que valla defrente al grano como crear un sitio web para poder promocionar mi emprendimieto

Me llama la atención algo, entiendo que html y css son lenguajes. pero no había relacionado la palabra estándar al referirme a ellos. No lo había pensando así. Y tiene sentido, porque sin ellos no se puede desarrollar jeje

RESUMEN CLASE 1:
QUE APRENDERAS SOBRE
HTML Y CSS

Existen tres estándares importantes para generar productos web.
Estos son los lenguajes o estándares que entiende todo navegador web:

  • HTML

  • CSS

  • JavaScript

I.- HTML
Estructura de los documentos que se visualizan en los navegadores (Chrome, Edge, Firefox, Safari, Opera, entre otros).

Es el lenguaje con el que clasificamos o etiquetamos cada parte del documento, dejándole saber al navegador qué información va a visualizar y qué valor tiene para nosotros.

De esa manera, presentamos:

  • Barras de Navegación

  • Secciones

  • Artículos

  • Listas

  • Títulos de diferentes tamaños

  • Audios

  • Videos

  • Imágenes, entre otros.

II.- CSS
Es el lenguaje con el que le damos estilos a todo el contenido previamente etiquetado con HTML.

Es el encargado o usado para darle todo el aspecto visual de manera profesional, usando estándares de diseño de documentos y logrando así la correcta visualización de textos y recursos audiovisuales en formatos digitales o, en nuestro caso, las páginas web.

III.- JAVASCRIPT

Es lenguaje que se emplea para crear o brindar a las páginas web la capacidad de interactuar con el usuario y los recursos asociados a una página web, como lo son:

  • Bases de datos

  • Servidores de diversa índole

  • Información derivada de la interacción de cada página en sí.

IV.- DIFERENCIAS ENTRE “HTML, CSS y JavaScript”

  • HTML es la estructura, como si fuese el esqueleto de un ser humano o los cimientos de un edificio.

  • Por ejemplo: una página web que funciona, pero sin interactividad, colores ni diseño.

  • CSS corresponde a lo estético, como la piel de ser humanos.

  • La pintura y adornos de los edificios o la manera en que es posible que la estructura del html se vea mejor para los usuarios.

  • JavaScript equivale a los músculos, lo que da esa interactividad a las personas para moverse y realizar acciones como correr.

##¿Qué aprenderás sobre HTML y CSS?

  • Dos de los 3 estándares para desarrollar productos web
  • Aquellos que entiende un navegador web
    • HTML
    • CSS
  • HTML
    • Lenguaje utilizado para estructurar la información que se va a compartir con los usuarios en el proyecto final
  • CSS
    • Lenguaje para agregar estilos e interactividad a la información que el usuario va a visualizar, con el objetivo de que el usuario tenga la mejor experiencia posible con nuestro producto
  • Objetivo fundamental
    • Comprender el funcionamiento de CSS para poder utilizarlo correctamente, tanto de manera individual como en conjunto con HTML

Ok… Intentare que CSS sea mi mejor amigo y unido a HTML se puede hacer mucho.

Gracias!

¡Vamos a darle! 😄

Increible, mi experiencia previa en programación fue en basic II en 1986, ahora me di el tiempo para trabajar en Wordpress y ese curso me derivo a este, espero poder comprender cada uno de los detalles que comparte Diego y hare mi mejor esfuerzo.

Para mayor información y practicas
Recursos para Desarrolladores
https://developer.mozilla.org/es/

MI pequeño aporte
Estándares Importantes para ser desarrollador web Estándares que entiende un navegador

HYML
(HyperText Markup Language)
Lenguaje que se usa para estructurar la información, permite darle forma semántica a la web
CSS
(Cascading Style Sheets)
Lenguaje que se usa para poder dar estilos e interacción a la informacion. Es el que da el aspecto visual
JAVASCRIPT (JS)
Es el encargado de hacer que los dos conceptos anteriores se ejecuten

A ver.
HTML: Da estructura a la información
CSS: Da estilos e interacción a toda la información para que usuario tenga una buena presentación e interacción.
Iniciemos

❤️

Este catedrático me cae muy bien. Genial.

A comenzar de nuevo.