No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Uso de Live Server en proyectos reales de HTML y CSS

6/13
Recursos

Aportes 45

Preguntas 23

Ordenar por:

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

Para los que quieran cambiar el navegador por defecto de Safari a Google Chrome u otro navegador, es tan simple como:

  • Ir a Code -> Preferences -> Settings.
  • Buscar 鈥淟ive Server Custom Browser鈥.
  • Seleccionar 鈥渃hrome鈥 o el navegador que m谩s les acomode.
  • Listo!

Live Server nos permite ver cambios, sin la necesidad de actualizar la aplicaci贸n Web. Esto nos permite optimizar nuestro tiempo a la hora de ver cambios.

Al principio pensaba:
Esto de Live Server es una tonter铆a, no me cuesta nada darle 鈥渁ctualizar鈥 cada vez que haga un cambio.
Y s铆, en efecto no me costaba nada, pero luego cuando lo haces 20, 50, 100 veces, Live Server te ahorrar muchos clics y por ende tiempo.
En otras palabras instalen Live Server sin pensarlo鈥
Recuerden: Tiempo = Dinero

Hay que estar agradecidos de que existe Live server
En un principio no cuesta nada estar recargando la pagina pero hay veces que esto se olvida.
Que haces cambios y olvidas recargar y piensas que estas haciendo las cosas mal y que no sirves como desarrollador web (Si, es mi historia D: ) Entonces aprovecha esta hermosa extensi贸n que nos proporciona Visual Code y atr茅vete a experimentar con todo lo aprendido hasta el momento.

Siempre es importante recordar que si quieres ejecutar otro c贸digo en live es necesario 鈥渕atar鈥 con el que estabas trabajando.

VER ESTO FUE MUY DIVERTIDO!! NO ME IMAGINO LA EMOCI脫N ENTONCES AL VER MI PROPIA PAGINA , GRACIAS!!!

y si usamos de manera conjunta la extension LIVE SERVER con la opcion de 鈥渁uto save鈥 que trae VScode, todo se ira actualizando casi que en tiempo real en la ventana del navegador. la opcion de auto save la encontramos en la pesta帽a 鈥淔ile鈥 de VSCode

Joder, me puse a instalar un mont贸n de extensiones que recomendaban ah铆 en comentarios y ahora no me deja modificar el documento. Aparece como una l铆nea amarilla pero nada de lo que escribo o borro aparece.

Excelente curso!! 馃槂

Pasos de uso de Live Server:

  1. Creamos en nuestro Finder nuestra carpeta de nuestro proyecto, y una buena pr谩ctica es crear una carpeta para cada proyecto.

  2. Luego en VSCode, creamos un archivo nuevo y lo guardamos como: con la extensi贸n .html, la guardamos dentro de nuestra carpeta Proyectos.

  3. Para generar el c贸digo de HTML, usaremos las etiquetas de HTML, <!DOCTYPE html> y luego html:5 y generar toda la plantilla de HTML, en <tittle> colocamos el t铆tulo de la p谩gina y en <Body> agregamos un texto para mostrar algo de contenido en la p谩gina. Guardamos con Command S.

  4. Luego abrimos el forlder de CursoPrework y le damos permiso para acceder a nuestra carpeta.

  5. Luego seleccionamos dentro del folder nuestro html y le damos clic en Go Live, ah铆 abre nuestro navegador (safari por defecto), y podremos ver el documento.

  6. Para ingresar a nuestro servidor Live Server, escribimos la direcci贸n de localhost que es: 127.0.0.1:5500

  7. Ahora ya podemos hacer los cambios que queramos y solamente guardar con Command S ya veremos reflejado nuestros cambios en tiempo real y sin actualizar en nuestro navegador.

Excelente 馃槃

Rainbow Brackets >>> Para cuando usamos muchos parentesis y corchetes, esta herramienta los marca de diferentes colores

隆Qu茅 teso! En serio que es emocionante ver c贸mo podemos armar nuestro propio entorno de desarrollo. He participado en muchos proyectos digitales -como comunicador- y siempre hab铆a so帽ado estar desde este punto de vista de los proyectos.

AME esta clase! primeros pasos pero me encanta!

Masteriza los shorcuts pra que seas mas agil y productivo xD

Pro tips:

  • si a隆haces cmd + c sin seleccionar nada vs code copia automaticamente toda la linea donde este el cursor
  • si quieres subir o bajar una linea completa solo basta con colocar el cursor en la linea que quieres mover y con la tecla cmd presionada usa la flechas direccionales arriba o abajo para subir o bajar la linea

excelente clase

Una buena herramienta que tambien es util es Bracket Pair Colorizer!!
Como expresa el nombre, lo que hace es colorear las llaves, corchetes y parentesis tanto de inicio como de cierre de a pares, asi es mucho mas f谩cil encontrarlas como as铆 tambi茅n los errores!

coenraads.bracket-pair-colorizer

Auto rename tag es demasiado 煤til! es muy f谩cil olvidar cerrar un tag, mas si estas trabajando con varios <div>

live server es super importante, ya que te quietas mucho tiempo de encima.

Excelente!!! , Live Server nos ahorra mucho tiempo y esfuerzo.

Muy buena la explicaci贸n!
Genial ver los cambios con Live Server!

Acabo seguir las indicaciones del profe Ricardo Celis para ver c贸mo funciona Live Server, en realidad es una buena herramienta para no estar cambiando de contexto.

Como soy nuevo en todas estas din谩micas me toca ir paso a paso y tratar de comprender e registrar muy bien toda esta informaci贸n.

Gracias por las ense帽anzas, estoy aprendiendo bastante.

Para encontrar el puerto N煤mero port en la carpeta VScode

<h1> Me Gusta Cuando las Cosas Salen Bien </h1>
<p> Estoy a la expectativa </p>

Excelente poder ir trabajando en real time.

Un poco complicado pero me sali贸, gracias

cuando llegue a la parte donde hay que pinchar en la opcion de ir a Go Live, no me sale esa opcion, no pude seguir por eso que mal.

Profesor buenas, imag铆nese que no he podido recargar el explorador desde el mismo editor鈥e podr铆a ayudar

Gracias!

Super satisfecho, en seis minutos y medio aprendimos mucho

Excelente clase

Color Highlight鈥 mi favorita, soy muy visual y esta ayuda mucho

El Live server es muy util para hacer pruebas r谩pidas de desarrollo.

Por si les pasa como a mi, yo estuve buscando el 篓go live篓, en mi code, pero no me aparec铆a, resulta que no ten铆a instalado la extensi贸n Live Server, as铆 que la instal茅 y pude correr mi p谩gina en el navegador muy r谩pidamente con esta extensi贸n. Ac谩 les dejo el link de la extensi贸n

https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer

馃槉馃憤馃徑

Pipeline + Alias de commit + AWS Deploy

Tuve un problema al instalar el plugin de ver los iconos de los lenguajes cuando lo guardaba a mi file me sal铆a el icono de django as铆 que me toco desactivar esa extensi贸n para que el documento .html saliera con su correcta sintaxis

Si no les aparece 鈥済o live鈥 y ya tienen todo instalado y actualizado, le deben dar a donde dice 鈥減ort: 5500鈥

Instale live server pero no me aparece en el VSC, que creen que puede suceder ?

Gracias

Buenas noches. Tambi茅n se puede abrir sobre el archivo HTML, haciendo clic con el bot贸n derecho del mouse y escogiendo la opci贸n Abrir con LIveServer

Excelente clase!

super

exelente aporte