Introducción al curso

1

Presentación y bienvenida al curso de Frontend Developer

2

HTML y CSS: definición y usos

3

¿Qué son y para qué nos sirven HTML y CSS?

4

DOM, CSSOM, Render Tree y el proceso de renderizado de la Web

5

5 tips para aprender CSS

Conceptos iniciales de HTML

6

Anatomía de un Elemento HTML: Atributos, Anidamiento y Elementos vacíos

7

Anatomía de un Documento HTML: DOCTYPE, html, head y body

8

Funciones de las etiquetas HTML más importantes

9

La importancia del código semántico

10

Tipos de errores en HTML, debugging y servicio de validación de etiquetas

11

Reto 1: Organiza el siguiente bloque de código de forma semántica

Conceptos iniciales de CSS

12

Anatomía de una declaración CSS: Selectores, Propiedades y Valores

13

Tipos de selectores, pseudo-clases y pseudo-elementos

14

Modelo de caja

15

Valores relativos y absolutos

16

Displays en CSS

17

Funciones de las propiedades CSS más usadas

18

Posicionamiento en CSS

Arquitectura CSS

19

¿Qué son y para qué nos sirven las arquitecturas CSS?

20

OOCSS, BEM, SMACSS, ITCSS y Atomic Design

21

Reto 2: Identifica el error de arquitectura del siguiente bloque de código

Construcción de componentes

22

¿Qué es un componente? Analicemos nuestros diseños

23

Estructura con HTML y BEM de un menú desplegable

24

Estilizando nuestro menú desplegable con CSS

25

Creación de un buscador

26

Creación de un carousel de imágenes con CSS: Estructura principal

27

Creación de un carousel de imágenes con CSS: Detalle de cada item

Maquetación y diseño responsivo

28

Flexbox

29

Nuestro nuevo sistema de layout: CSS Grid

30

Maquetación de la pantalla de login: Estructura HTML

31

Maquetación de la pantalla de login: Estilización con CSS

32

Estilización de inputs y footer en la pantalla de login

33

Media queries

34

Maquetación de la pantalla principal

35

Reto 3: Maquetación de la pantalla de Not Found

Preprocesadores

36

¿Qué es un preprocesador, cuáles existen y cuáles son sus diferencias?

37

Instalación de SASS y configuración inicial

38

Hablemos de variables, herencia, anidamiento, operadores y más

Accesibilidad

39

La accesibilidad y nuestra responsabilidad como desarrolladores

40

Mejorando la accesibilidad de nuestra página de inicio

Conclusión

41

Conclusión del curso y paso siguiente

Bonus

42

Visualización de un botón usando storybook para HTML

43

Flexbox

No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Anatomía de un Documento HTML: DOCTYPE, html, head y body

7/43
Recursos

Aportes 318

Preguntas 22

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Regístrate o inicia sesión para participar.

Ya que no quedo claro en el video les cuento que la etiqueta meta con el atributo viewport sirve para definir la escala visual del sitio.

En pocas palabras si defines también el atributo content después del atributo viewport en la misma etiqueta meta con el valor: "width=device-width, initial-scale=1" le estamos diciendo a nuestro sitio web que ancho máximo de nuestra página web será el ancho del dispositivo desde donde se esté aperturando el sitio web (móvil, tablet, pc).

Les dejo una pequeña imagen de un sitio web donde se compara el uso de la etiqueta meta con el atributo viewport definido.

Fuente: Google Developers

Es poco pero es trabajo honesto jajaja

Es la primera vez que hago algo así

Esta es otra forma de decirle al editor que trabajaras en HTML

En el minuto 4:50 , Estefanía comento que la etiqueta <style> debe de ir debajo de la etiqueta de cierre </head> el cual MDN recomienda y debe de estar dentro de <head><style></style></head> dejo enlace del contenido en MDN.

En Visual Studio Code se puede generar un codigo html base con el signo de admiración.

!

Like si vienes del JS Challenge! 😁

Seria bueno entender por qué ella pone style entre head y body.

style es una etiqueta de head, los estilos funcionan igualmente porque los navegadores tienen un sistema de interpretación a prueba de errores y tratan de solucionar todo lo que sea solucionable, cerrar etiquetas sin cierre, corregir atributos, etc.

que hacerlo de esa forma funcione no significa que sea correcto o que sea una buena practica. la eriqueta style debe ir dentro de la etiqueta head y aunque lo mejor casi en todos los casos sera usar codigo css externo, es bueno saber esto.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Este meta es utilizado para indicarle al navegador que el ancho total de nuestro sitio web será igual al ancho del dispositivo del usuario que esté ingresando a nuestra página (pc, celular, laptop, tablet, etc…)
Comparativa con y sin viewport:

Hay un error en el video. Las etiquetas de style se deben declarar dentro de la etiqueta head

Y con F12 puedes abrir mucho más rápido el inspector de elementos.

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Anatomía de un documento HTML</title>
</head>
<body>
    <h1>Ejemplos de etiquetasm más comunes en HTML:</h1>
    <ul>
        <li>html: engloba toda la página </li>
        <li>body: contenido de la página </li>
        <li>head: información de la página, que no es mostrada</li>
        <li>title: corresponde a la barra de titulo de la ventana</li>
        <li>p: permite generar párrafos</li>
        <li>h1...h6: nos ayuda a generar encabezados</li>
        <li>div: usado para divisiones en el contenido</li>
        <li>a: utilizado para enlaces</li>
        <li>br: salto de línea</li>
        <li>img: permite visualizar imágenes</li>
        <li>ol: utilizado para crear listas ordenadas (establece relación jerárquica)</li>
        <li>ul: nos permite crear listas desordenadas</li>
        <li>table: nos permite generar tablas y organizar información en ellas</li>
    </ul>
</body>
</html>```

Pueden instalar la extensión live server en Visual Studio para que les monte un pequeño servidor, esto para no tener que escribir la ruta al archvo en el navegador, además de que recarga automáticamente al hacer un cambio sobre el archivo.

El servidor se crea haciendo ALT + L sobre el archivo index.html

Les recomiendo un apagina para probar codigo HTML, CSS Y JS

codepen.io

Una extensión muy genial para visual studio code es Live Server, que te permite crear un servidor local con el cual cada vez que hagas un cambio, no tengas que estar refrescando la pagina para verlo

💡 Les recomiendo este blogpost donde conocerán las etiquetas HTML más usadas:
👉 44 etiquetas HTML que debes conocer

Ejercicio para tratar de memorizar mejor algunas etiquetas básicas de HTML!

<<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <h1>Esta es mi primera etqueta html en el Curso de Javascript!</h1>
    <div>
        <p>Estoy muy feliz de continuar mi proceso de aprendizaje en la escuela de Javascript</p>
    </div>
    <div>
        <h3>Listado de Etiquetas Basicas de HTML</h3>
        <h6>Origen: <a href="https://htmlreference.io">HTML Reference</a></h6>
    </div>
    <div>
        <li>Etiqueta "a": ------> Sirve para crear Links.  | <a href="https://htmlreference.io/element/a/">HTML Reference</a></li>
        <li>Etiqueta "br": -----> Sirve para definir un quiebre de linea en un texto. | <a href="https://htmlreference.io/element/br/">HTML Reference</a> </li>
        <li>Etiqueta "button": -> Sirve para definir Boton Clickeable. | <a href="https://htmlreference.io/element/button/">HTML Reference</a> </li>
        <li>Etiqueta "div": ----> Sirve para definir un bloque generico que sirve para agrupar elementos. | <a href="https://htmlreference.io/element/div/">HTML Reference</a> </li>
        <li>Etiqueta "footer": -> Sirve para definir la seccion de pie de la pagina web. | <a href="https://htmlreference.io/element/footer/">HTML Reference</a> </li>
        <li>Etiqueta "from": ---> Sirve para definir un formulario interactivo con controles. | <a href="https://htmlreference.io/element/form/">HTML Reference</a> </li>
        <li>Etiqueta "h1": -----> Sirve para definir el mas alto nivel de titulos de textos. | <a href="https://htmlreference.io/element/h1/">HTML Reference</a> </li>
        <li>Etiqueta "img": ----> Sirve para insertar imagenes en la pagina. | <a href="https://htmlreference.io/element/img/">HTML Reference</a> </li>
        <li>Etiqueta "video": --> Sirve para insertar videos en la pagina. | <a href="https://htmlreference.io/element/video/">HTML Reference</a> </li>
        <li>Etiqueta "input": --> Sirve para insertar capturar datos en un formulario. | <a href="https://htmlreference.io/element/input/">HTML Reference</a> </li>
        <li>Etiqueta "label": --> Sirve para insertar una etiqueta en un formulario. | <a href="https://htmlreference.io/element/label/">HTML Reference</a> </li>
        <li>Etiqueta "nav": ----> Sirve para insertar un menu de navegacion en una seccion. | <a href="https://htmlreference.io/element/nav/">HTML Reference</a> </li>
        <li>Etiqueta "p": ------> Sirve para insertar un parrafo en la pagina web. | <a href="https://htmlreference.io/element/p/">HTML Reference</a> </li>
        <li>Etiqueta "link": ---> Sirve para insertar un link para vincularla con recursos externos. | <a href="https://htmlreference.io/element/link/">HTML Reference</a> </li>
        <li>Etiqueta "li": -----> Sirve para insertar una lista no ordenada de elementos en la pagina web. | <a href="https://htmlreference.io/element/li/">HTML Reference</a> </li>
    </div>
</body>
</html>>

Ejemplo de la anatomía básica de un documento HTML

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

DOCTYPE
Esta instrucción le indica al navegador que es un documento de tipo html, de ahí el atributo html que tiene dentro:
<!DOCTYPE html><!–Indica al navegador que este documento es de html–>

Etiqueta html
<html lang=“es”><!–Etiqueta contiene todo el código html de la página–>
</html>

Dentro de html la etiqueta head
Aqui adentro se colocan los metadatos útiles para el navegador como el tipo de codificación, descripción del sitio, palabras clave, etc.
<head>
<meta charset=“UTF-8”>
<title>Document</title>
</head>

Etiqueta body
Esta etiqueta como su nombre lo indica contiene todo el cuerpo de la pagina (la parte visible de nuestro documento html)
<body><!–Contenido visible del documento html–>

</body>

Etiqueta <div></div>
Este elemento define una división genérica. Se usa cuando no se puede aplicar
ningún otro elemento.

como dato para poder trabajar de forma mas ágil con archivos HTML existe una extensión para vscode llamada live server la cual genera un servidor que recarga la pagina automáticamente al detectar cambios en los archivos luego de instalarlo reinician vscode y con un archivo html abierto abajo a la derecha les aparecerá una nueva función en la barra azul llamada Go Live y al presionarla se abrirá el navegador que tengan por defecto con el contenido del documento html que tenían seleccionado en vscode

DOCTYPE
Doctype no es una etiqueta HTML, es una instrucción que el navegador interpreta para saber en que versión de HTML se utilizó,
w3school

Éste es mi primer html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Devcom Español</title>
</head>
<body>
    <h1>¡Únete a comunidades maravillosas de personas creativas en todo el mundo!</h1>

    <h2>Lo que podrás hacer:</h2>
    <ul>
        <li>Crear contenido</li>
        <li>Llevar tu talento a grandes empresas</li>
        <li>Aprender</li>
        <li>Crear junto con personas increíbles</li>
    </ul>
    <input type="button" value="Únete">
    <footer>¿Necesitas ayuda? Contáctanos!</footer>
</body>
</html>```

aclarar tambien que el doctype tambien hace referencia a la version de html en este caso html5

Respuesta a:
Estructura de nuestro Sitio Web
Les recomiendo esta extencion en VScode que les permitira abrir un server a nivel local para abrir el html y puedan ver las modificaciones de forma rapidal.

Solo basta una vez instalado, dar click derecho sobre el codigo html que se encuentran programando, y hacer click en “Open With Live server” y deberia abrirles el navegador con su pagina. Si no lo hace de forma directa, por unica vez ingresan al siguiente ip = http://127.0.0.1:5500/

Para visualizar el contenido html de una web se puede utilizar ctrl + u, abrira una pestaña nueva con el contenido de la pagina.

La etiqueta HTML también es conocida como Root Element. Lo había escuchado antes pero no había hecho una asociación directa. Gracias!

Cómo aprender las bases de HTML en menos de 10 minutos…

Si recién inician o comenzaron aquí por JS challenge. Les recomiendo el Curso de prework para windows o para macOS. Para tener su entorno de trabajo y su editor de código.

Compañeros, es importante también entender el funcionamiento del DIV, seguramente se verá más adelante pero para tener un mejor contexto de lo que hemos aprendido hasta el momento.

La etiqueta <div> define una división. Esta etiqueta permite agrupar varios elementos de bloque (párrafos, encabezados, listas, tablas, divisiones, etc). En principio, los navegadores no muestran nada especial cuando se crea una división, salvo que se dé formato a la división con la hoja de estilo. Y a cada división se le puede asignar un porcentaje que equivale a una parte del body así como lo muestra esta imagen:

Hola! espero que estén tan ansiosos como yo, tanto he buscado y encontré un plugin para VS code que permite interactuar con la pagina web instantáneamente, sin la necesidad de actualizar el navegador. Se llama Live Server, y se ejecuta con el comando ctrl+shift+p, en el panel de búsqueda escriben live server y seleccionan la opción ‘open with live server’.
Espero que les sirva y sean un poco mas eficientes 😄

<!DOCTYPE hTML> Le indica a los navegadores que el documento cumple con el estándar de html5

Para identificar visualmente el orden en tu archivo HTML se indenta el código (se usan espacios).

Anatomia de HTML:

  • Primero se declara que tipo de documento es usando <!DOCTYPE html>
  • Segundo v la etiqueta <html></html> que define todo tu documento
  • Tercero, dentro de tu etiqueta HTML van dos etiquetas: el <head></head> y el <body></body>
  • Cuarto, dentro del <head> va el titulo (<title></title>), los meta (información sobre lenguaje, compatibilidad, etc.) y también puede ir los <style> y <link>
  • Quinto, dentro del <body> va toda la estructura de nuestra página. Esto es lo que se mostrara en pantalla.
<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
</head>
<body>
   <h1>Esta es una etiqueta HTML h1 </h1>
   <div>
      <p>vander... no olvides usar el inspector</p>
      <p>Y ahora vamos a escribir una lista desordenada</p>
      <ul>
         <li>Elemento a</li>
         <li>Elemento b</li>
         <li>Elemento c</li>
         <li>Elemento d</li>
      </ul>
      <p>Y ahora una muy ordenada</p>
      <ol>
         <li>Elemento 1</li>
         <li>Elemento 2</li>
         <li>Elemento 3</li>
         <li>Elemento 4</li>
         <li>Elemento 5</li>
      </ol>
   </div>
   <div>
      <p>Ahora probaremos etiquetas</p>
      <abbr title="HyperText Markup Language">asdas</abbr>
      <cite>Esto acaso sera una cita?</cite>
      <var>Que esto??!!!</var>
   </div>
</body>
</html>```

Otra opción mas practica para abrir los archivos en google es:

  • Abrir google pulsar ctrl+o y seleccionar la carpeta del html.

Mi ejercicio, voy aprendiendo y cada vez entendiendo más acerca de frontend. ¡Estoy contento!

Es un editor de código online: https://codepen.io/

Es la primera vez veo que para empezar escriben algo diferente al Hola mundo" tradicional… se siente extraño

Les comparto una imagen donde se muestra la estructura básica de un documento HTML.

Si quieren ahorrar más milisegundos simplemente escriban “!” y presionen la tecla tab cuando lo hayan guardado con extensión html, se autocompletará el mismo código que con html:5 y tab.

La identación del código es muy importante, a mi me pasaba que cuando eliminaba una etiqueta que tenía código anidado todo quedaba desidentado(?) y tenía que eliminar el tab uno por uno, hasta que descubrí que agarrando todo el código que quieres identar solo apretas ctrl + ] para hacerlo y si eliminas una etiquetas y tienes que desidentar todo con ctrl + [ mueves todo el código seleccionado hacia la izquierda.

Comparto mis notas realizadas con EVERNOTE
https://www.evernote.com/l/AhC4Vc3G2opCzb0XHCokYgSthDsrVy1r_CU/

Si instalan la extension Live Server en Code, pueden ver los cambios en vivo de sus cambios sin necesidad de recargar la pagina. Aquí la explicación https://platzi.com/clases/2214-prework-macos/35110-uso-de-live-server-en-proyectos-reales-de-html-y-c/

Buena introducción, yo ya conozco medianamente HTML pero igual vi la clase.

Aunque si lo <style> debe ir dentro de <Head>
Y para VSC recomiendo mucho el plugin Emmet para optimizar el manejo de las etiquetas, (Visual Studio Code es mi editor de código favorito) ah y Live Server para ver los cambios que haces en vivo.

Hola compañeros, en el video ella no explica sobre esta etiqueta <meta http-equiv=“X-UA-Compatible” content=“ie=edge”> y realmente esto ya casi no se utiliza. Esto en lo que consiste en tener una compatibilidad en el navegador, se aplica principalmente para navegadores de Microsoft como Internet Explorer.
Cuando Internet Explorer encuentra la etiqueta META compatible con X-UA comienza de nuevo usando el motor de la versión designada. Esto es un golpe de rendimiento porque el navegador debe detenerse y reiniciar el análisis del contenido.

Me encanta VSC para trabjar.

Reforzando un poco lo que comentó la profe , es muy importante la definición de los meta, sobre todo el meta del **viewport ** <meta name=“viewport” content=“width=device-width, user-scalable=no”>

Viewport es la etiqueta que mejor representa la web en movilidad, ya que nos permite indicar cómo se verá un proyecto web en los dispositivos móviles

No te olvides declarar el Doctype de un documento HTML

Necesitas decirle al navegador qué versión de HTML está utilizando tu página. HTML es un lenguaje en evolución, y se actualiza regularmente. La mayoría de los navegadores principales soportan la última especificación, que es HTML5. Sin embargo, páginas web más antiguas puede que hagan uso de versiones anteriores del lenguaje.

Proporcionas al navegador esta información agregando la etiqueta <!DOCTYPE …> en la primera línea, donde la parte … es la versión de HTML. Para HTML5, utilizas <!DOCTYPE html>.

El ! y DOCTYPE en mayúsculas es importante, especialmente para los navegadores más antiguos. El html no es sensible a mayúsculas y minúsculas.

Visual Studio Code es de gran ayuda como editor de código por sus diferentes características y plugins.

<!DOCTYPE html> Le indica al navegador que el código que contiene es compatible con HTML 5. 😃

Un comando más corto para crear la estructura inicial de html, es escribir el signo de exclamación ! y presionar tab, en vez de html:5.

si quieren pueden instalar la extension de liverserver en visual para ver los cambios en tiempo real.

ESTRUCTURA HTML5
|

|
Las partes y su significado.
|
DOCTYPE
<!DOCTYPE html> La etiqueta doctype declara el tipo de documento, por lo que esta está señalando que este es un documento HTML5.
|
HTML
<html></html> Delimita el documento HTML.
|
LANG
<html lang=“es”></html> lang es un atributo de la etiqueta html que Indica el lenguaje de contenido del código.
|
HEAD
<head></head> El elemento head delimita la cabecera del documento, entre sus etiquetas contiene información como scripts, metadatos, estilos, ubicación de documentos de estilos, título de la página, etc.
|
META
<meta name=“description” content=“Descripción de la WEB”> Las meta etiquetas se utilizan para identificar propiedades del documento como por ejemplo el autor, el título y la descripción que mostrarán los buscadores, etc.
|
META CHARSET
<meta charset=“UTF-8”> Establece el tipo de codificación del documento, de esta forma puede interpretar caracteres especiales…
|
META TITLE
<meta name=“title” content=" Título de la WEB"> Contiene el titulo que se mostrará en los buscadores.
|
META DESCRIPTION
<meta name=“description” content=“Descripción de la WEB”> Es el texto que se muestra bajo el título en los motores de búsqueda.
|
BODY
<body></body> La etiqueta body delimita el cuerpo del documento y contiene todo aquello que podremos ver en nuestro navegador. Imágenes, textos, enlaces, video, etc.

Cual es la diferencia entre div y section? en que casos se utiliza cada uno?

¿Alguien sabe como se llama la extensión que usa que muestra para que sirve una etiqueta HTML cuando coloca el mouse sobre dicha etiqueta?

¿Cuál es el comando para abrir un archivo html desde la terminal de Ubuntu 18.04 LTS (zsh) en Windows 10?

Me parece cool que la profe indique los atajos de teclado que utiliza

En la anatomia de HTML primero tenemos la etiqueta HTML que es la principal de nuestra pagina. Hay que saber correctamente quienes son los padres y quienes son los hijos.

Dentro tenemos la etiqueta Head y Body. Donde dentro de Head estara toda la informacion que no se ve dentro de la pagina web pero si en el navegador.

Body es donde estara todo el contenido que tendremos en la pagina web que si se puede ver.

Div es como una caja donde podremos envolver algunos elementos y la etiqueta P es un parrafo y dentro ira el contenido de este. En el inspector podremos ver el modelo de caja de cada elemento.

Definitivamente hubiera tomado primero este curso, antes del de “curso definitivo de html y Css”. Me esta gustando como explica cada parte con bolitas y palitos.

Me llamo poderosamente la atención que cuando estaba colocando la etiqueta <style></style> la colocará afuera de la etiqueta <head> y del <body>

Tamaño del contenido a la ventana gráfica
Los usuarios están acostumbrados a desplazarse por los sitios web verticalmente en dispositivos móviles y de escritorio, ¡pero no horizontalmente!

Por lo tanto, si el usuario se ve obligado a desplazarse horizontalmente o alejarse, para ver toda la página web, la experiencia del usuario es deficiente.

Algunas reglas adicionales a seguir:

  1. NO utilice elementos grandes de ancho fijo: por ejemplo, si una imagen se muestra con un ancho más ancho que la ventana, puede hacer que la ventana se desplace horizontalmente. Recuerde ajustar este contenido para que se ajuste al ancho de la ventana gráfica.

  2. NO permita que el contenido dependa de un ancho de ventana en particular para renderizarse bien : dado que las dimensiones y el ancho de la pantalla en píxeles CSS varían ampliamente entre dispositivos, el contenido no debe depender de un ancho de ventana en particular para renderizarse bien.

  3. Utilice consultas de medios CSS para aplicar diferentes estilos para pantallas pequeñas y grandes : establecer anchos CSS absolutos grandes para los elementos de la página hará que el elemento sea demasiado ancho para la ventana gráfica en un dispositivo más pequeño. En su lugar, considere usar valores de ancho relativo, como ancho: 100%. Además, tenga cuidado con el uso de valores de posicionamiento absolutos grandes. Puede hacer que el elemento se salga de la ventana gráfica en dispositivos pequeños.

Creo conveniente armar la estructura html5 sin el snippet ( La estructura que se arma sola) , de esta forma podemos entender como están conformados los anidamientos y las etiquetas de mejor manera.

!DOCTYPE html, es el referente especifico para decirle al navegador, “esto está en html5, interpretalo como tal.”

Me pareció super crucial dejar el comentario, muchas gracias 😄

La etiqueta DIV es un contenedor de varios elementos. Los empaqueta como un solo elemento y cuando se desea aplicar un estilo, entonces se puede aplicar a todos los elementos dentro del DIV.

HTML es muy sencillo:3 Puedes escribir lo que desees en donde desees, un dato curioso es que la etiqueta html siempre tendrá como unicos 2 hijos a head y body uwu

Definir bien las etiquetas y poner el texto <alt></alt> en las imagenes puede parecer una tontería, pero es súper importante en los siguientes casos:

  • Empezar a trabajar con otro programador en un proyecto. Si tú eres el único trabajador de un proyecto, y escribiste todo el código de maera que sólo lo entiendas tú y pusiste las etiquetas como quiciste, el programador que llegue no va a entender casi nada de lo que hiciste en el proyecto.

  • El SEO en Google. Colocar las etiquetas <alt></alt> en las imágenes ayuda a esa imagen a ser tomada en cuenta por el SEO (al igual que ponerle un nombre al archivo de esa imagen que tenga relación con su contenido). Al igual que esa existen muchas otras prácticas que ayudan a tu página web a mejorar su SEO en Google, como usar etiquetas <strong></strong> o <em></em> en el texto para cuando quieras resaltar algo importante.

Mi aporte! 😃

<!DOCTYPE html>
<!-- Nos asegura que el documento sea analizado de la misma manera en todos los navegadores -->
<html lang="en">
<!-- Etiqueta principal de html, root element.
    head y body son sus hijas -->
    <head>
        <!-- No hace nada visualmente -->
        <meta charset="UTF-8">
        <!-- Codificación de los caractéres -->
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <!-- Tpitulo de la aplicación, se verá en la pestaña, no en el contenido -->
    </head>
    <style>
        /* Los estilos pueden ir aquí, pero es mejor en otor archivo */
    </style>
    <body>
        <!-- En body irá el esqueleto del html, los estilos pueden ir aquí, pero va mejor en otro archivo -->
        <h1>Esta es mi primera etiqueta HTML</h1>
        <!-- Etiqueta principal -->
        <div>
            <!-- div es una caja, es para envolver otros elementos -->
            <p>Estoy muy feliz de escribir este parrafo</p>
            <!-- p es un parrafo -->
        </div>
    </body>
</html>

Anatomía de un Documento HTML: DOCTYPE, html, head y body**

  • <head>

    No afecta visualmente pero es muy importante

  • <meta/>

    Sirve para agragar caracteristicas a la pagina

  • <tltle>

    Es el título de la página web

  • <body>

    Aquí ira el esqueleto de nuestra página web

  • <style>

    En esta etiqueta le puedes poner estilos CSS al HTML directamente

  • <div>

    Es una caja que contiene más etiquetas HTML

  • <p>

    Sirve para escribir parrafos

  • <h1>

    Título principal

! + TAB = creará todo el documento del HTML.

Para comenzar quiero comentarles que con el comando Ctrl + d pueden seleccionar texto repetido y pueden editarlos de manera simultanea. Primero seleccionan por ejemplo un <img y luego con el comando ctrl + d pueden seleccionar varios <img que existan y pueden editarlos. En caso se necesite cambiar algo y no estar editando uno por uno.
(Lo uso en Visual Code)

Les comparto una liga con más info sobre meta tag.
https://www.w3schools.com/tags/tag_meta.asp

Si desean comentar en su código HTML, se utiliza:
😄

<!-- "Comentario" -->

Genial!!!

Con alt + mayus + F puedes acomodar tu código en Visual Code Studio

![](

AquÍ puedes usar el pluggin EMMET en VSCODE

me gusta como explica

Excelente explicación, ya vi otros cursos de HTML y css pero no lo detallan tanto con en este curso
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Clase 1</title>
    </head>
    <body>
        <h1>Esta es mi primera etiqueta en HTML!</h1>
        <div>
            <p>Estoy muy feliz de escribir este párrafo.</p>
        </div>
    </body>
</html>``

escogi como editor ATOM, y tambien me ha funcionado muy bien

Corrección... la etiqueta <style> se define dentro de la etiqueta <head>

El meta viewport es para que se adapte al ancho de pantalla, más esto, es solo una forma virtual de resolver los sitios que no están adaptados a móvil, así no se romperá la web al verlos en pantallas pequeñas, no obstante, se deben agregar los estilos de CSS para cuando se vea desde un dispositivo móvil.

Un tip que les puede ser útil es que en VSCode hay un comando que nos permite identar el código que seleccionamos y es CTRL + K + F

una extension de VS para poder diferenciar con colores la estructura de su codigo. Bracket Pair Colorizer 2

Para quien se lo pregunte lo que hace el autocompletado cuando escribe html:5 y pulsa Tab o Enter, quien completa ese código es el plugin Emmet que viene preinstalado con VS Code y que si no usas este editor puedes instalarlo en muchos otros (Sublime Text, Atom, Brackets, NetBeans…). Por aquí tenéis el enlace de descarga y el de la documentación ya que es un potente plugin para escribir código HTML pudiendo escribir mucho código desde una línea de código.

Descargar Emmet
Documentación Emmet

Excelente la explicación a detalle de cada cosa. Para no dejar vacíos que puedan afectar en el futuro! 😄

Si les da pereza identar pueden o se les enredá el código pueden usar una extensión en visual studio code que se llama Beautify .
Luego de que la tengan instalada solo basta con ejecutar CTRL + SWIFT + P eso abre un buscador colocas beautify file y sucede la magia

Ey coder’s la linea 5 es importante para el desarrollo web responsive

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<<!DOCTYPE html>
<html lang="es">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <link rel="stylesheet" href="platzi.css">
        <title>Mi Primera Pagina Web</title>
	<style>
	      p{
   		  color: #98CA3F;
   		  font-size: 40px;
   		  font-weight: bold;
    		  font-family: "Helvetica";
		}
	</style>
    </head>
    <body>

        <p>NUNCA PARES DE APRENDER!!</p>
        
    </body>
</html>>
<code>
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Interplanetary Weight</title>
        <link rel="shortcut icon" href="https://img.icons8.com/cotton/512/planet-on-the-dark-side.png">
        <style>
        body {
            background-color: black;
            font-weight: bold;
            font-family: Helvetica;
        }

        .container {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
            max-width: 60vw;
            max-height: 45vh;
            text-align: left;
            margin-left: 12vw;
            font-size: 21px;
            padding: 18px;
            float: right;
            background-color: rgb(255, 255, 255);
            width: 40vw;
            height: 30vh;
            position: absolute;
        }
        .c2 {
            max-width: 19vw; 
            max-height: 35vh;
            text-align: left;
            margin-left: 38vh;
            margin-top: -8vh;
            position: absolute;
        }

        .weight {
            margin-top: 3vh;
            margin-left: 5vh;
            max-height: 35vh;
            max-width: 20vw; 
            text-align: center;
            position: absolute;
        }
        </style>
    </head>
    <body>
        <div class="container">
            <label style="color: black; padding: 8px; margin-left: 12vw; font-size: 25px; background-color: rgb(177, 177, 177); box-shadow: 1px 2px 2px;">Interplanetary Weight</label>
            <br>
            <br>
            <div class="weight">
                <label type='text' id="planet" style="color: black; margin-left: 0vh;">Planet Weight</label>
                <br>
                <label type='text' id="planet" style="color: black; margin-left: -0.5vw;">Your Weight :</label>

            <div class="c2">
                <input id="resul" type="text" readonly='readonly' style=" width: 19vw;">
                <input id="weight" type="number" placeholder="Write your weight on kg" style="width: 19vw;">
                <button onclick="reseat()" style=" background-color: rgb(177, 177, 177); color: rgb(0, 0, 0); font-weight: bold; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; width: 40vh;">RESEAT</button>
            </div>
        </div>

        <div>
            <img src="https://cdn.pixabay.com/photo/2013/07/12/13/55/earth-147591_960_720.png" onclick="earthweight()" style="border-radius:50%; border: rgb(188, 233, 231) 2px solid; width: 22vh; height: 22vh; margin-top: 45vh; position: absolute;">
            <img src="https://cdn.pixabay.com/photo/2012/04/05/00/54/mars-25461_960_720.png" onclick="marsweight()" style=" border-radius:50%; border: rgb(250, 161, 129) 2px solid; width: 18vh; height: 18vh; margin-left: 50vh; margin-top: 48vh; position: absolute;">
            <img src="https://cdn.pixabay.com/photo/2012/04/10/17/37/planet-26617_960_720.png" onclick="jupiterweight()" style=" border-radius:50%; border:rgb(229, 236, 195) 2px solid; width: 67vh; height: 67vh; position: absolute; margin-left: 95vh; margin-top: 9vh; position: absolute;">            
        </div>

        <label style="color: aliceblue; margin-left: 3vh; font-size: 40px; margin-top: 70vh; position: absolute;">EARTH</label>
        <label style="color: aliceblue; margin-left: 14.5vw; font-size: 40px; margin-left: 52vh; margin-top: 70vh; position: absolute;">MARS</label>
        <label style="color: aliceblue; margin-left: 20vw; font-size: 40px; margin-left: 118vh; margin-top: 79vh;  position: absolute;">JUPITER</label>
    </body>
</html>

Es importante el concepto de identar ya que éste le establecerá un orden a nuestro código

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>Esta no es mi primera etiqueta html</h1>
    <div>
        <p>Estoy muy happy por esto</p>
    </div>
</body>
</html>```
<<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title> Clase 1 </title>
  </head>
  <body>
    <h1> Hola </h1>
    <h3>Vamos a usar  la etiqueta a </h3>
    <div>
      <p>Esta etiqueta nos permite transportarnos a otras paginas web a traves de url</p>
      <a href="file:///C:/Users/Laura%20Herrera/Desktop/Referencia.html">Click aqui para ir a mi otra pagina</a>
    </div>
  </body>
</html>
>




<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Curso Frontend Developer</title>
  </head>
  <body>
    <h1>Primero etiqueta HTML</h1>
    <div>
      <p>Saludos</p>
    </div>
  </body>
</html>```

Root = Html,

ANATOMIA DE UN DOCUMENTO HTML

- <!DOCTYPE html>   Nos asegura que el archivo sea analizado como html en los diferentes navegadores
- <htm>             Root element, etiqueta principal
- <head>            No tiene implicación visual en el navegador, incluye la codificación en caracteres (UTF-8 por ejemplo)
- <title>           La etiqueda de nuestra aplicación (se ve en la pestaña del navegador)
- <body>            Todo lo que se ve en la pantalla/navegador
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>Titulo principal</h1>
    <h2>Titulo secundario</h2>
    <h3>Titulo con menor importancia</h3>
    <h4>Titulo con mucho menor importancia</h4>
    <h5>¿Que es esto?</h5>
    <h6>:O</h6>
    <div>
        <p>**Parrafo**</p>
    </div>
    <br>Esto es un BR</br> 
    <div>
        <br>Boton</br> 
        <input type="text" name="myInput" id="myInput">
    </div>
</body>
</html>

En un documento HTML el elemento “div” permite crear divisiones, también llamadas secciones o zonas. Las divisiones se utilizan para agrupar elementos y aplicarles estilos.

Excelente información.

Con la extensión Live Server, puedes ejecutar el archivo HTML desde Code.
Ya instalada le das click derecho en cualquier lugar del editor y te dirá “Open with Live Server”.
Te abrirá una pestana del navegador y tan solo guardando (ctrl+s) recargará automaticamente el sitio aplicando todos los cambios sin tener que refrescar la pagina.

con CRTL + O puedes abrir más fácil y rápido el archivo sin necesidad de escribir toda la ruta