Prompt correcto: haz una pagina web con html y css
Introducción
Cómo crear páginas web usando inteligencia artificial
Tu primera página web con IA
Editores de código y navegadores web
Cómo publicar tu página web en internet
Ideas de diseño web
Ideas de sitios web y creación de copies
Mejorando tu página web con IA
Añadir HTML a tu sitio web personalizado
Añadir CSS a tu sitio web personalizado
Actualizando tu página web en internet
Próximos pasos
Mejorando el diseño de tu portafolio
¿Quieres especializarte en desarrollo web?
Editores de código y navegadores web
2/10Recursos
Transcripción
Aportes 74
Preguntas 5
Ordenar por:
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
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.
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:
¿No sienten que falto 1 clase entre la sección de intro y esta segunda clase?
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?
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:
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
No es mucho, pero es trabajo honesto :3
también está la versión de escritorio, y es gratuita, de microsoft y opensource, una rara combinación: https://code.visualstudio.com
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.
Falta la clase 1, porque según la clase uno es la intro nada más....
Esto creo chatgpt xD
Mensajes subliminales jajaja
Una pregunta, soy principiante y tengo una duda: teniendo un web la cual se enlaza con una Base de Datos a través de un .NET 4.5.2 y me ha fijado todo el tiempo el data source y el initial catalog, mi pregunta es cómo puedo cambiar esto, pues lo he hecho a través de la parte codificada conectionString y no hace nada, no me permite loguearme. Si alguien puede ayudarme...
genial, sólo enfocar con el mejor editor VScode 2024
Esto pinta muy interesante!
Si miramos la inteligencia artificial como una herramienta y no como una "competencia" a lo que haces, podrás crecer mucho mas. La misma herramienta te puede ayudar a estudiar sobre algún tema y generar exámenes.
Yo le pedí esto a ChatGPT (tengo un poco de conocimiento en programación): *Me gustaría una pagina para vender 3 productos. No tan robusta, que trabaje con HTML, CSS, y JS.*
Y logre crear esto: (las imágenes las cree con la IA de Canva)
![]()
Así va mi pagina web con la simulación de que es para un ámbito empresarial:
Bien
Existen varias licencias de código abierto que permiten el uso de código para videojuegos. Algunas de las licencias más comunes incluyen:
1. **MIT License**: Esta licencia es muy permisiva y permite a los desarrolladores utilizar, modificar y distribuir el código sin muchas restricciones. Es popular en proyectos de código abierto y es compatible con el uso en videojuegos.
2. **GNU General Public License (GPL)**: La GPL es una licencia de código abierto que garantiza a los usuarios finales la libertad de usar, estudiar, compartir y modificar el software. Sin embargo, si se utiliza en un videojuego comercial, es importante comprender las implicaciones de esta licencia.
3. **Apache License**: Esta licencia es similar a la MIT License en términos de permisividad, pero también incluye disposiciones para la protección de patentes y marcas comerciales.
Para ver un código HTML en un navegador utilizando un editor de código, sigue estos pasos generales:
1. **Crear un archivo HTML**: Abre tu editor de código y crea un nuevo archivo con la extensión .html, por ejemplo, "index.html".
2. **Escribir código HTML**: Escribe o pega tu código HTML en este archivo. Por ejemplo:html Copy code\
\<html>
\<head>
\<title>Título de tu página\</title>
\</head>
\<body>
\
Hola, mundo!\
\Este es un párrafo de ejemplo.\
\</body> \</html> 3. **Guardar el archivo**: Guarda el archivo HTML en tu sistema de archivos. 4. **Abrir el archivo en un navegador**: Encuentra el archivo HTML que has guardado, haz clic derecho sobre él y selecciona "Abrir con" y elige tu navegador web preferido, como Google Chrome, Mozilla Firefox, o Microsoft Edge.Para crear una página web, puedes utilizar varios editores de código y navegadores web. Aquí hay algunas opciones populares:
### Editores de código:
1. **Visual Studio Code**: Un editor de código ligero pero potente con soporte para numerosas extensiones que facilitan el desarrollo web.
2. **Sublime Text**: Un editor de texto sofisticado con una interfaz minimalista y muchas características útiles para el desarrollo web.
3. **Atom**: Un editor de código de fuente abierta desarrollado por GitHub con una gran comunidad y muchas extensiones personalizables.
### Navegadores web:
1. **Google Chrome**: Un navegador web popular con herramientas de desarrollo integradas y una amplia compatibilidad con estándares web.
2. **Mozilla Firefox**: Otro navegador web ampliamente utilizado con herramientas de desarrollo robustas y un enfoque en la privacidad y la personalización.
3. **Microsoft Edge**: El navegador web de Microsoft que ofrece herramientas de desarrollo avanzadas y una integración estrecha con las tecnologías de Microsoft.
Estos son solo algunos ejemplos, pero hay muchos otros editores de código y navegadores web que se pueden utilizar para crear una página web.
Otro editor de codigo en linea bastante interesante es replit (Enlace de la pagina oficial: <https://replit.com/> ),tiene muchas herramientas excelentes auque aun no he profundizado mucho aun, lo que si se nota desde el principio es su AI que te esta constantemente sugiriendo codigo lo que sin duda ahorra tiempo.
![]()
Estoy aprendiendo un montón, cuando algo te apasiona no te cansas, les comparto mi página.
Es una herramienta con super poderes. Depende de nosotros aprender a realizar las preguntas correctas y sobre todo, entender nosotros mismos que es lo que estamos buscando...
allí tiene la pagina web como ensayo, ayudado con GPT. [Mi Primera Página Web](file:///C:/Users/Usuario/Desktop/html/index.html).
Muy genial! Desde la clase 2 te muestra como hacer una pagina web que en lo que la ruta de fundamentos te llevo casi toda la mitad de la ruta de aprendizaje 😁
```js
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="Estilo.css">
<title>Mi primera Pagina</title>
</head>
<body>
<header>
Mi Página Web
</header> <nav> </nav> <main>Bienvenido a mi página web
Esta es una página de ejemplo.
</main> <footer>Derechos de autor © 2023 Mi Empresa
</footer> </body> </html </body> </html> ```\ \<html> \<head> \<meta charset="utf-8"> \<meta name="viewport" content="width=device-width, initial-scale=1"> \<link rel="stylesheet" type="text/css" href="Estilo.css"> \<title>Mi primera Pagina\</title> \</head> \<body> \<header> \Mi Página Web\
\</header> \<nav> \-
\
- \Inicio\\ \
- \Acerca de\\ \
- \Servicios\\ \
- \Contacto\\ \
Bienvenido a mi página web\
\Esta es una página de ejemplo.\
\</main> \<footer> \Derechos de autor \© 2023 Mi Empresa\
\</footer> \</body> \</html \</body> \</html>
Deberia ahber curos de Visual Studio Code, ya que ese curso existe en Udemy, y tambien en Udemy MetaTrader4
Mi favorito es visual Studio Code
Una de las cosas que aprecio al utilizar la inteligencia artificial en el trabajo es que cuanto más la empleo, más adquiero destrezas en su manejo y, al mismo tiempo, continuamente aprendo nuevas habilidades y conocimientos.
[Para investigar sobre un tema de tu interes del que quieres profundizar o conocer el temario](https://github.com/Freddy875/TrentSteel/blob/gh-pages1/index.md#para-investigar-sobre-un-tema-de-tu-interes-del-que-quieres-profundizar-o-conocer-el-temario)
Muestra el temario en formato de lista de los temas que uno necesita aprender para aprender sobre Markdown
**Nota:** Aquí yo use Markdown pero tu puedes sustituirlo por cualquier otro tema de tu interes, o puedes ejecutar el mismo prompt pero con otro tema de tu interes. Y fue efectivo porque este sitio fue elaborado en Markdown y yo sabía cosas muy basicas de Markdwon.
## [Después de ejecutar el anterior para que te sirva como Profesor Personalizado.](https://github.com/Freddy875/TrentSteel/blob/gh-pages1/index.md#despu%C3%A9s-de-ejecutar-el-anterior-para-que-te-sirva-como-profesor-personalizado)
Eres experto en Markdown, me estas enseñando como usarlo. Yo te escribo el tema del que quiero que me expliques de manera sencilla con parafos cortos de 3 a 4 oraciones. Y con un ejemplo. Primero presentate y explica lo que tienes que hacer. Luego espera a que yo ingrese los textos para que empieces a explicar de manera breve y con ejemplos. Preguntame si continuamos con el siguiente tema o vemos otro ejemplos. ¿Entiendes lo que tienes que hacer?
Yo utilizo ambos prompts para usar a ChatGPT como mi mentor personal.
Si quieres ver más puedes ver mi sitio web.
<https://freddy875.github.io/TrentSteel/>
```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/
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?