Giter VIP home page Giter VIP logo

pagina-web-chatgpt's Introduction

Crear pagina web con ChatGPT

Mi primera pagina web hecha con ChatGPT 😲

En mi BLOG comparto a detalle como hice para realizar esta web con solo usar ChatGPT.


Me propuse realizar esta pagina web sin tener conocimientos previos.

Si cabe recalcar que hace muchisimo tiempo (en mi descubimiento a la programacion) eh realizado mi primer "hola mundo" con html y ahi quedo todo. Tambien aclaremos que al hacer esta web tenia conocimientos en lo que es la programacion con el lenguaje Python (es decir, que mi logica podria estar un poquitin mas desarrollada que alguien completamente principiante🤔)

Resumen de como la realice 👇

¡En tan solo TRES DIAS diseñe y maquete esta web! (14/17-1-2023)
Esta realizada con HTML/CSS y un simple script en JavaScript que lo unico que hace es validar los datos del usuarios que coloca en el formulario.

Tenia en mente crear una web para un asesor financiero.

  1. Le pedi a ChatGPT que me genere diferentes tipos de texto:
    Como la historia de la empresa, la historia del profesional que la fundo y la menjas, los diferentes tipos de servicios que ofrece y algunas historias y testimonios de clientes de este profesional en finanzas.

  2. Realice en prototipo desde Canva:
    Le di un diseño minimalista como a mi me gusta, y elegi optar por dos simples colores, el blanco y negro, muy acoplados a lo que queria trasmitir (elegancia).

  3. Comence con las instrucciones detalladas a ChatGPT:
    A. Utilice Visual Studio Code.
    B. Empece pidiendole la estructura basica de HTML para ir escribiendo el texto que habia generado anteriormente.
    C. Luego empezo lo mas largo y tedioso para mi,diseñar esa estructura con CSS. Diseñar tal y como era mi prototipo en Canva para todos los formatos y tamaños (Desktop, Movil, Tablet, etc).
    D. Por ultimo, al tener un Formulario para que usuario registre sus datos y asi contactarse con el Asesor, decidi utilizar JavaScript para validar los datos, cosa que le pedi a ChatGPT pero Hubo bastante erroes. Lo fui solucionando con algunas ayuditas web, como Stack OverFlow, y otros sitios de ayuda.

  4. Si quieres ver como ah quedado la web, puedes clonar el repositorio.

Estos fueron mis simples pasos al realizar esta web para "un asesor finansiero". Aunque parezca facil, me ah tomado varias horas y fases de prueba y error realizar esto, no todo fue un cuento de adas.

Esto me lleva a la reflexion de que no es malo apalancarnos de las nuevas herramientas que potencian y acortan nuestro tiempo de creacion. Siempre sabiendo que tener la habilidad sera un plus muchisimo mayor.


Logotipo Cusanotech SOY CUSANOTECH Logotipo Cusanotech

Me considero un desarrollador Python, autodidacta y apasionado por la Tecnología. Mis intereses no dejan por el momento tener una especialidad. Pero lo que si sabemos es que “Lo que CusanoTech aprende, tú también lo aprendes”.😃

Puedes apoyar mi trabajo haciendo "☆ Star" en el repo. ¡Gracias!

En mi perfil tienes todos mis enlaces y más contenido creado para ti..

Web

pagina-web-chatgpt's People

Contributors

cusanotech avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.