Editores de código y navegadores web

Aquí tienes las URL de otros editores de código en línea

VS Code Online (Visual Studio Code): https://visualstudio.microsoft.com/services/visual-studio-online/
CodePen: https://codepen.io/
Replit: https://replit.com/
Glitch: https://glitch.com/
JSFiddle: https://jsfiddle.net/
Cloud9: https://aws.amazon.com/cloud9/
Ten en cuenta que las URLs proporcionadas corresponden a las plataformas en general, y puedes encontrar más información y acceder a los editores de código en línea en dichos sitios web.

Prompt correcto: haz una pagina web con html y css

Debemos aprender a hacer la pregunta correcta, y recordar que la herramienta también puede cometer errores. Así también que depende de nosotros y nuestra capacidad analítica, investigar a fondo, contrastar la información que nos da la herramienta antes de aplicar.

debo decir que estaba avanzando en mi ruta ce aprendizaje de data engineer y me tope con este curso en twitter jaja me pareció super entretenido realizar una pagina web junto a chat gpt , así va quedando el sitio web hasta el momento 😄!! excelente el contenido del curso hasta el momento

otra forma es irnos a la parte de extensiones y descargar la extensión de Live Server

la forma de usarla es muy simple solo es ir al HTML y presionar en la parte de abajo donde dice Live Server

Ideas relevantes:
• La idea es direccionar a ChatGPT para no usar editores de texto sino usar un editor de código.
• Prompt correcto para iniciar la elaboración: Haz una página web con html y css.
• En la clase se usaron los siguientes prompts: 1. haz una página web con html y css. Muestra un ejemplo básico de HTML y CSS juntos. 2. cómo puedo ver este código en el navegador utilizando un editor de código? (aquí la idea es que despliegue nombres como el de Visual Studio Code Online. 3. Cómo puedo usar Visual Studio Code desde el navegador? 4. Si ya tengo un HTML y un CSS, cómo puedo crear un archivo en Visual Studio Code para poner este código allí? 5. Cómo podemos visualizar un archivo de HTML en el navegador?
• El resultado es tener una página web básica que se abre como Google, Firefox, etc. Se usa Visual Studio Code para el fin:

PROMPTS usados en esta clase.

1) ¿Podrías mostrarme un ejemplo básico de HTML y CSS juntos?
2) ¿Cómo puedo ver este código en el navegador utilizando un editor de código?
3) ¿Cómo puedo usar Visual Studio Code desde el navegador?
4) Si ya tengo un HTML y un CSS, ¿Cómo puedo crear un archivo en Visual Studio Code para poner este código allí?
5) ¿Cómo podremos visualizar un archivo HTML en el navegador?

también está la versión de escritorio, y es gratuita, de microsoft y opensource, una rara combinación: https://code.visualstudio.com

Yo entiendo que de todas formas hay que saber programación básica para saber que preguntar a ChatGPT y para saber como interpretar la información que nos de ChatGPT. Desde luego que nos facilita las cosas porque solo tendríamos que corregir pequeñas cosas

Recomiento este curso gratuito de deeplearning con la colaboracion de open ai de prompt engineering.
Asi quedo mi web 100% con chatgpt:
html:

css:

resutado:

Es increíble la cantidad de cosas que puedes hacer con la ayuda de chatgpt, y claro, también código de programación. Sin embargo, debemos conocer los trucos que hacen que chatgpt realice este trabajo de la mejor manera. Nadie mejor para enseñarte lo que necesitas saber al respecto que Estefany Aguilar, y por supuesto de la mano de Platzi para nunca parar de aprender.

Esta es mi primera web con Chatgpt

Muy bueno
file:///D:/Pagina_Julia_Herbas/index.html

No me funcionaba ni haciendo doble click ni con abrir con, descargué el archivo y ya pude visualizar cómo se ve el archivo HTML

Está es una página que tiene varias inteligencias artificiales www.poe.com

Así quedó mi página web

Tristemente hoy, sólo esto puedo obtener por el momento. ChatGPT a penas puede responderme. Por ahora mi página se ve así:

me cautivo esta primera clase de paginas web con chat GPT; voy a intentar ahora visualizar mi primera pagina web. Muchas gracias

Así va mi página.

Así va mi página web:

Te invito a que visites mi PÁGINA WEB.

Gracias a este curso me ayudo a trabajo con varias herramientas la cual si conocía pero no sabia como utilizarla 🛠.

Con respecto a la pregunta de como puedo usar visual studio code desde el navegador, y respondio que GitHubCodespaces
le pregunté a ChatGPT que es GitHub Codespaces y me respondió lo siguinete:

GitHub Codespaces es un entorno de desarrollo basado en la nubeque permite a los desarrolladores crear y trabajar directamente desde el navegador o desde visual studiocode en su dispositivo local. Proporciona una máquina virtual con un entrono de desarrollo preconfigurado y acceso a tus repositorios GitHub.

Con GitHub Codespaces, puedes configurar y personalizar entornos de desarrollo según tus necesidades, colaborar con otros desarrolladores en tiempo real y acceder a tus proyectos desde cualquier lugar. También puedes utilizar extensiones de visual studio code y aprovechar las caracteristicas de productividad que ofrece.

📌ASÍ ME SALIO

https://jsfiddle.net/mariacontreras/f2jtp539/15/
envio mi pagina web hasta el momento.

Le indique que genere una animación básica en JavaScript (en realidad no es tan básica para mi :😉 )

Asío se generó mi primera página web desde Chatgpt.

Prompt: Eres un experto en creación de páginas web. Haz una página web con HTML y CSS

A la moyoria no se le vera como la pag de la profe porque ella solo inserto html y todavia le falta el css.

![](

Te amo TeffCode!!!

Así va mi página:

Me quedo asi:

Podrán cuestionar mis metodos pero no mis resultados.

Aca dejare el codigo de esta clase, pero lo estare actualizando hasta terminarla, cuidado con spoilers jeje

aunque no estoy seguro si la comparti bien
https://codepen.io/gaov0510/full/YzJOgJE

Les dejo mi aporte. Este es el prompt que utilice:

Eres un desarrollador de paginas web experimentado. Crea una página web que sirva para crear un portafolio de paginas web y diseños ui/ux usando html y css. Incluye las secciones acerca de mi y contacto.

Haré este proyecto con bard y bing chat, a ver que sale :p

![](

Buena lección…

Hola Hola!!
Así va mi página web 😊

Que increible herramiento, es una página básica pero con lo poco que he aprendido hasta ahora en Platiz la pude modificar, me ahorro mucho tiempo de escribir código.

Es ahora cuando es súper útil el curos de prompting https://platzi.com/cursos/chatgpt/