Herramientas para la web
Todo lo que aprenderás sobre prework en macOS
¿Qué es el navegador?
Escoge e Instala el navegador y conoce sus DevTools
Editor de texto
Instalando nuestro editor de texto
Extensiones y personalización de VSCode
Uso de Live Server en proyectos reales de HTML y CSS
Entorno de desarrollo con Node.js
Instalación de Homebrew y Node.js
Comandos básicos de la terminal
Primer proyecto con React.js
Git y Github
¿Qué es Git y Github?
Manejo de repositorios con SSH y HTTPS
Subiendo nuestro primer repositorio
¿Qué es lo que sigue?
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Aportes 45
Preguntas 23
Para los que quieran cambiar el navegador por defecto de Safari a Google Chrome u otro navegador, es tan simple como:
✨ 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 “actualizar” 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 “matar” 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 “auto 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 “File” 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:
Creamos en nuestro Finder nuestra carpeta de nuestro proyecto, y una buena práctica es crear una carpeta para cada proyecto.
Luego en VSCode, creamos un archivo nuevo y lo guardamos como: con la extensión .html, la guardamos dentro de nuestra carpeta Proyectos.
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.
Luego abrimos el forlder de CursoPrework y le damos permiso para acceder a nuestra carpeta.
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.
Para ingresar a nuestro servidor Live Server, escribimos la dirección de localhost que es: 127.0.0.1:5500
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:
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…me 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 “go live” y ya tienen todo instalado y actualizado, le deben dar a donde dice “port: 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
Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Regístrate o inicia sesión para participar.