Editores de c贸digo y navegadores web

2/10
Recursos

Aportes 47

Preguntas 4

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

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:

Para los que tenemos un conocimiento base de c贸mo trabajar archivos HTML y CSS, se nos facilita entender la idea y poder trabajar los ejemplos en cualquier editor de c贸digo y si en localhost o en un server externo. Pero la profe explica muy bien de manera que una persona que no tenga estas nociones pueda comprender y aprender c贸mo hacerlo desde lo m谩s b谩sico.

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.

![](https://static.platzi.com/media/user_upload/image-d849520c-53f5-4804-9ab6-590339320210.jpg) ```txt Aqui dejo mi avance jaja ```

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.

tremendo. yo estoy usando chat gpt para hacer email marketing con templates en html. me ha resultado muy r谩pido y estructurado.

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/