Cómo usar Live Server en proyectos reales de HTML y CSS

Clase 7 de 18 • Curso de Prework: Configuración de Entorno de Desarrollo en Windows

Clase anteriorSiguiente clase

Valentina Rueda Silva

student•

Todos al escribir " se escribir un hola mundo en html (hola mundo btw) XD XD XD XD XD XD JAJAJA es normal :)

Leobardo Adrian Diaz Ruiz

student•

Jajajaja Buenisimo el meme

Jackelinne Achahue Pongo

student•

jajajaj nos pasa a todos

Erick Varillas

student•

Esta imagen les servirá

Russell Sotomayor

student•

Buenazo, para recordar.

Willan Santiago Santos Satalaya

student•

Muchas gracias por el aporte.

Jose Luis Barbosa Cepeda

student•

A LOS QUE NO LES DEJE USAR LIVE SERVER AL INSTALAR LA EXTENSION, DEBEN PRIMERO SERSIORARSE DE QUE TIENEN UN PROYECT FOLDER ABIERTO EN VSCODE CON EL ARCHIVO HTML QUE USARAN Y TIENEN QUE DAR CLICK DERECHO EN EL CODIGO Y DONDE DICE OPEN WITH LIVE SERVER

Omar Carreno

student•

En ese momento me sale esto: Server is started at 5500 but failed to open in Browser Preview. Got Browser Preview extension installed?

Gustavo Adolfo Bolaños

student•

Excelente gracias por tu aporte

Leonard L

student•

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Ya sé programar</title> </head> <body> <h1>Hello world</h1> </body> </html> 😊

Ricardo Celis

teacher•

buen aporte, danke!

Juan Esteban Galvis

student•

JAJA excelente podríamos decir que es tu primer hola mundo, perooo perdón jaja HTML no es programar (JS si es un lenguaje de programación). Pero excelente empezaste muy bien.

Geovanni Javier Nuñez Barrueta

student•

Hola les comparto mis apuntes hasta el momento:

Leonel Alejandro Lugo Padilla

student•

Excelente aporte, muchas gracias.

Rolando Mamani Salas

student•

Gracias por el aporte

Jose Luis Barbosa Cepeda

student•

PARA A LOS QUE NO LES DEJE AUTOCOMPLETAR LA SINTAXIS HTML LES DEJO UNA FORMA DE HACERLO

ES SOLO PONER EL SIGNO DE ADMIRACION Y DAR ENTER :D

Keyner Luque

student•

gracias, por el aporte

james Cortes Valencia

student•

Gracias, gran aporte

Alexander Reyes

student•

Tutorial para ver las extensiones de archivos en Windows 10

Haz click en el botón de inicio
Abre el Panel de Control
En Aperiencia y Personalización, selecciona Opciones de Carpeta
Haz click sobre Opciones
En el cuadro de diálogo, selecciona Ver
Anula el cuadro que dice Ocultar las extensiones de archivo para tipos de archivo conocidos y haz click en Aceptar

Francisco Zuñiga

student•

Me dió curiosidad el termino Boilerplate y me puse a buscar más y encontré algunas cosas interesantes.

En la programación de computadoras, el código repetitivo o simplemente el repetitivo son secciones de código que se repiten en varios lugares con poca o ninguna variación. Cuando se utilizan lenguajes que se consideran detallados , el programador debe escribir mucho código para lograr solo una funcionalidad menor. Este código se llama repetitivo . es casi como los atajos de texto de WhatsApp.

También se me hizo muy chistoso el origen: El término surgió del negocio de los periódicos . Las columnas y otras piezas que fueron distribuidas por los sindicatos de impresión se enviaron a los periódicos suscriptores en forma de planchas de impresión preparadas . Debido a su parecido con las placas de metal utilizadas en la fabricación de calderas , se las conoció como "placas de caldera", y su texto resultante - "texto repetitivo". Como las historias que se distribuían por medio de placas de calderas solían ser " rellenos " en lugar de noticias "serias", el término se convirtió en sinónimo de texto repetitivo y poco original.

Cuando buscas un poco más puedes encontrar cosas muy interesantes, me encantó.

Camilo Leon Camacho

student•

Que gran aporte, muchas gracias! :)

Fernando Nicolás Carrillo López

student•

Muy interesante. Gracias por el aporte.

Eduardo Reyes

student•

Una anotación importante, únicamente les va a salir el botón Go Live si tienen una carpeta abierta, si tienen solo un archivo HTML abierto no les va a salir. Les dejo un ejemplo: En esta imagen solo tengo abierto el documento:

Y aquí sí tengo abierta una carpeta:

Alejandro Enrique Correa Fernández

student•

Buen aporte, por un momento no me quedaba claro porque a veces me aparecía y otras no.

Maria Belen Vicente Sanchez

student•

muchas gracias, me he tirado media hora buscando go live, gracias a su comentario lo pude encontrar, un saludo

Fernando Fabricio Feijoo Feijoo

student•

Este es mi 4to Hola mundo en mi vida, recuerdo que en el 2016 fue el primero cuando quería hacer mi primera pagina web, luego como el 2017 y el 2020... Pero ahora si el definitivo y correcto "Hola mundo" porque ahora si se a lo que voy. Pensar que hubiese empezado desde el 2016...

Fabian Palacios

student•

Te entiendo, tambien pude haber empezado hace muchos años, pero no lo tenia claro en ese momento.

Rocio Guisell López Espinoza

student•

nunca es tarde a menos que nunca lo intentes! espero hayas o estes avanzando!

Usuario anónimo

user•

😀 Que feliz me siento, cuando todo sale bien.

Carlos Felipe González Calero

student•

Hola, como de duvide la pantalla asi en windows?

Carlos Felipe González Calero

student•

divide,perdón

Iván Arcos

student•

Es de gran ayuda Live Server, solo guardas y de inmediato visualizas el cambio :)

Willan Santiago Santos Satalaya

student•

Totalmente cierto, es de gran ayuda.

Carlos Ramirez

student•

Gracias!

Noé Alexander Mozo Chávez

student•

Anatomía del código HTML5 – Las partes y su significado DOCTYPE 1

<!DOCTYPE html>

La etiqueta doctype declara el tipo de documento, por lo que esta está señalando que este es un documento HTML.

HTML 1

<html></html> Delimita el documento HTML.

Atributo a destacar LANG 1

<html lang="es"></html> Indica el lenguaje de contenido del código.

HEAD 1

<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 1 <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.

Usos a destacar META CHARSET 1 <meta charset="UTF-8"> Establece el tipo de codificación del documento.

META TITLE 1 <meta name="title" content="Título de la WEB"> Contiene el titulo que se mostrará en los buscadores.

META DESCRIPTION 1 <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.

LINK 1

Atributo a destacar HREF Especifica la url donde se localiza la hoja de estilo.

BODY 1

<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…

HEADER 1

<header></header> El contenido de esta etiqueta debe ser la cabecera de nuestra página donde se suele encontrar el título, el logotipo y poco más.

NAV 1

<nav></nav> Esta etiqueta sirve para delimitar el menú de la página, donde colocaremos los enlaces internos para movernos entre nuestras diferentes secciones del sitio web.

A 1 <a href="link domino">IR SECCIÓN 2</a> Representa un enlace o hipervínculo.

Atributos a destacar. HREF Dirección URL hacia la que apunta el enlace.

H1, H2, H3, H4, H5, H6 1 2 3 4

<h2>Título de la WEB</h2> <h3>CONTENIDO PRINCIPAL</h3> <h4>Testimonios</h4> <h5>Avisos legales</h5> Estas etiquetas establecen los encabezados. Se organizan por niveles siendo H1 el más importante y H6 el menos importante.

SECTION 1

<section></section> La etiqueta section engloba una sección de texto, imágenes y otros elementos que guardan cierta relación entre ellos. Normalmente siempre le podremos poner un título o encabezado.

ARTICLE 1

<article></article> La etiqueta article se suele encontrar dentro de una etiqueta section y sirve para dividir y ordenar los contenidos en su interior.

DIV 1

<div></div> Otra forma de dividir contenido para posteriormente aplicarle clases y modificar su estilo.

P 1

<p></p> Entre las etiquetas P colocaremos un párrafo de texto.

IMG 1 <img src="imagen.jpg" alt="paisaje"> Esta etiqueta coloca una imagen en el documento mediante un enlace.

Atributos a destacar. ALT Representa el texto alternativo, muy importante para que los bucadores puedan obtener información de la imagen.

SRC URL donde se encuentra la imagen.

ASIDE 1

<aside></aside> Contiene información no vital o que no está estrechamente relacionada con el contenido principal de la página como podrían ser banners de anuncios, citas o enlaces externos.

FOOTER 1

Aquí encontraríamos el código perteneciente al pie de página, donde se suelen colocar los enlaces a textos legales, el copyright, etc.

Posible resultado de nuestro código HTML5

Aquí dejo la imagen que muestra el navegador tras asignarle algunos estilos. He añadido las etiquetas para que puedas orientarte bien.

estructura del código html5

Kevin Hernandez

student•

Muy buen aporte, ¡gracias!

Alonzo Luna

student•

buenazo , vine buscando oro y lo encontre.

Pedro Moreno

student•

Aquí les dejo un listado de temas para que personalicen su VS Code: https://matr1x.cubava.cu/top-12-mejores-temas-para-visual-studio-code/![Captura de pantalla 2020-10-08 131838.png](https://static.platzi.com/media/user_upload/Captura%20de%20pantalla%202020-10-08%20131838-a56794c1-abdc-4dcc-aff5-8202de2dfd00.jpg)

Joel Dominguez Merino

student•

Muchas Gracias! Yo seguiré prefiriendo SynthWave '84 Pero los de la pagina son muy buenas opciones!

Pedro Moreno

student•

Esta muy cool ese Synthewave 84!

Rafael Viatela

student•

Si no les sale la opción **go live ** **Cierra y vuelve a abrir ** vs code para que actualice la extensión si la acabas de instalar

Beatriz Franco

student•

Si ya cerré y volví a abrir, me aparece comoinstalado pero no tengo la opción de Go Live??? :(

Guillermo Díaz

student•

El boilerplate de HTML5 también funciona si solo le damos un signo de exclamación ! y luego presionamos enter.

Eduardo Rodriguez

student•

gracias!

Emma Rosa Pilozo Solano

student•

Hola. No me funciona tampoco.. Que me puede hacer falta?

Alex Padilla

student•

No sabía el significado de btw y encontré algunas palabras más xd https://www.bbva.com/es/lol-btw-fyi-asap-significan-esas-palabras-mundo-utiliza/

Jhoann Camilo Meza Valencia

student•

GRACIAS!

mike brand

student•

Gracias de Mucha Ayuda

Andrés Felipe Eslava Zuluaga

student•

Hecho! Les dejo un tutorial sobre 10 proyectos base que se puede hacer para aprender HTML, CSS, JS -------> ACÁ !

Henry Alexander Velásquez Rosas

student•

Para activar la visibilidad de las extensiones solo debemos hacer lo siguiente. Abrir cualquier carpeta -> Vista -> Activar extensiones de nombre de archivo

juanito choque guzman

student•

gracias por el aporte

Henry Alexander Velásquez Rosas

student•

De nada Juan 🔥😊

Jose Gregorio Mendoza Fernandez

student•

al usar live server no me sale la opción de go live para darle permisos a usar el Internet ....

Roger Carlos Ariel Alba

student•

Hola,

¿pero te funcionó?

Saludos

Anthony Guzman Lopez

student•

Desistala e instala nuevamente, a mi me paso lo mismo y funciono.

Cómo usar Live Server en proyectos reales de HTML y CSS

Herramientas para la web

¡Tenemos una nueva versión de este curso!

Qué es un navegador web

Qué aprenderás para configurar tu entorno de desarrollo en Windows

Instalando Firefox, Chrome y usando sus DevTools

Editor de texto

Editor de texto: instalando el tuyo

Extensiones y personalización de Visual Studio Code

Cómo usar Live Server en proyectos reales de HTML y CSS

Linux dentro de Windows

¿Qué es Windows Subsystem for Linux?

Instalación de Windows Subsystem for Linux

Configuración de Ubuntu en WSL

Instalación de VirtualBox

Instalando Ubuntu en una máquina virtual

Comandos básicos de la terminal e instalación de Node.js

Cómo configurar tu primer proyecto en React.js

Git y Github

Instalando Git

Vinculando nuestra llave SSH en Github

Subiendo nuestro primer repositorio

¿Qué es lo que sigue?