新质生产力实践,我用chatgpt开发网站

news2024/11/24 15:30:59

是的,我用chatgpt开发了一个网站,很轻松。

我之前一点不懂前端,也没有网站开发的代码基础,纯正的0基础。

从0开始到最后成品上线,时间总计起来大致一共花了2-3周的时间。

初始想法我是想给我公司开发一个网站,也想过找外包人员,或者去网上找开发完工,但是我个人对于审美有一定要求,而且内容上我也不能保证我可以一次或者两次就结束,思来想去,与其后面频繁找开发人员调内容,调设计,这不仅要支付费用,还要浪费沟通的时间和精力,所以最终决定自己尝试开发。

开始我并不抱任何的希望,因为我确实都没有接触过网站开发。

找了一位开发朋友,他先建议我上github找一个公司网站的门户模板,因为是开源的,所以下载了就可以使用里面的代码框架,然后又下载了一个可以编辑html、css、JS   代码的工具软件IDEA。

基础条件准备好了就开始进入正式的网站设计环节。

首先是先大致构思下网站的风格、呈现的内容、菜单样式、基础的跳转功能、网站主色调、整体布局。

这些内容清楚之后就可以开始找图片,该下载的下载,该自己设计的就自己设计,菜单内容、文案都写好,找好网站主色调的颜色码。

接下来一切准备就绪,就是如何在已有的模板基础之上改代码了,因为要改菜单,要改功能,改内容,改布局,这些都是细节,每一个细节都和html 和css代码息息相关。

评估了下自己的能力,如果要将html和CSS代码完全学会需要很长的一段时间,所以就想到了chatgpt,之前也对chatgpt能够完成的内容作了一些尝试,因为代码是固定的语法规则,对于chatgpt来说输出代码是准确率最高的,基本不会出现“胡说八道”的结果。

但是你无法将一个网站所有的内容需求输出给chatgpt,基本是一个细节一个细节调整,所以你需要将它输出的代码嵌入进已有的模板中,并删除之前不用的代码,那么评估下来一点都不懂html和css是不可能的,你起码需要具备看懂40%的能力。

所以接下来我就把html和CSS代码语法都过了一遍,这个得益于我数据开发编程能力的功底是不错的,所以两个语言代码看一遍基本达到了一知半解的地步,然后有些互动功能需要用到JS语言,所以把JS语法又扫了一遍,JS相对html和CSS难一些,时间不允许过度消耗就只能上手了。

Html主导网页的布局比如位置、菜单等,CSS主导网页的格式,比如背景色、字体、颜色等等。

所以就开始一处细节一处细节想怎么改,然后写提示词。

这里放出我之前和chatgpt互动的2个小需求,大家可以感受一下。

在这个例子中,我要高亮突出一些文字,这个属于格式,所以我在提示词非常直接提出我的需求+语言需求,然后chatgpt给出了如上的 CSS代码,所以这里提前熟悉CSS语法就有用,因为要把这个代码放进CSS代码中,还要和HTML的代码进行关联,highlight-text是在html中定义的样式名称。

图片

我一般的提示词都是非常直截了当说需求,然后chatgpt会给出代码,这个示例就比较复杂,因为html我们的开头结尾都有了,我只需选取需要的代码放进我的网站代码中就可以了,所以提前熟悉一遍语法是必须的。

基本网站开发的过程就是定网站内容,然后找chatgpt要代码就可以了,当然有时候chatgpt会给到一些无法实现效果的代码,特别是当你需求特别复杂的时候,这个时候你要多次把代码复制进网站中,然后跳转浏览器看看效果,然后再多次调整提示词。

Chatgpt应用中最复杂的就是提示词了,如果是简单的比如我上面列的需求就很简单,基本一次性就通过,我记得我想要一个文字和背景图左右叠加又不重合的效果,多次反复调提示词仍然是没有达到效果,这个我只好把它列入到后面的网站优化中。

大家都在说新质生产力,我觉得这个是最小的案例实践了,我的网站如愿从0成功部署上线,一个小白借助AI就轻松完成了。而我在这个过程中学会了快速运用chatgpt来调整优化网站,因为网站只是简单的门户展示,不涉及很复杂的互动,所以网站后续的基本运维我就可以依靠chatpt完成。

向大家展示下我的网站部分截图:

图片

图片

我的网站开发案例就介绍到这里,希望可以帮助你理解更多,也对AI的使用和提高生产力有更深的理解,特别是对新质生产力的理解。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1634072.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

C# wpf 运行时替换方法实现mvvm自动触发刷新

文章目录 前言一、如何实现?1、反射获取属性2、定义替换方法3、交换属性的setter方法 二、完整代码1、接口2、项目 三、使用示例1、倒计时(1)、继承ViewModelBase(2)、定义属性(3)、属性赋值&am…

【Redis 开发】Lua语言

Lua Lua语法 Lua语法 Lua是一种小巧的脚本语言,底层用C语言实现,为了嵌入式应用程序中 官网:https://www.lua.org/ 创建lua文件 touch hello.lua 运行lua文件 lua hello.lua 输出语句 print("Hello World!")数据类型 可以通过t…

python与上位机开发day04

模块和包、异常、PyQt5 一、模块和包 1.1 模块 Python中模块就是一个.py文件,模块中可以定义函数,变量,类。模块可以被其他模块引用 1.1.1 导入模块 """ 导入格式1: import 模块名 使用格式: …

【算法基础实验】图论-最小生成树Prim的延迟实现

最小生成树-Prim的延迟实现 理论基础 树的基本性质 用一条边连接树中的任意两个顶点都会产生一个新的环; 从树中删去一条边将会得到两棵独立的树。 切分定理的定义 定义。图的一种切分是将图的所有顶点分为两个非空且不重叠的两个集合。横切边 是一条连接两个属…

认识认识DHCP

文章目录 认识认识DHCP一、什么是DHCP?1.1、为什么要使用DHCP?1.2、DHCP是怎么工作的?1.2.1、客户端首次接入网络的工作原理1.2.2、客户端重用曾经使用过的地址的工作原理1.2.3、客户端更新租期的工作原理 二、配置DHCP Server,为…

嵌入式开发二:搭建开发环境

工欲善其事必先利其器,本节我们从嵌入式开发的搭建环境开始学习,掌握最基本的搭建环境技能,了解每一部分的作用,以及如何使用是关键所在! 目录 一、常用开发工具简介 二、如何安装KEIL5(MDK) 2.1认识MDK-ARM 2.2 …

Spring基于AspectJ实现验签切点

文章目录 引言I AspectJ 依赖II 验签切点2.1 匹配方法执行的连接点2.2 设置带有CustomAnnotation注解的方法为切点III 案例:验签2.1 用法2.2 定义注解2.3 定义切面和切点引言 需求:验签 实现:基于AspectJ实现验签切点 I AspectJ 依赖 AspectJ 是一个基于 Java 语言的 AOP …

windos蓝屏分析工具

BlueScreenView中文版 - Windows蓝屏分析工具 BlueScreenView中文版是一款非常方便的蓝屏诊断工具。它可以帮助您快速定位蓝屏问题,并提供详细的故障转储信息。该软件可以自动扫描您机器上的minidump文件夹,同时还支持根据路径查找蓝屏文件。 windos发…

Coursera: An Introduction to American Law 学习笔记 Week 06: Civil Procedure (完结)

An Introduction to American Law Course Certificate Course Introduction 本文是 https://www.coursera.org/programs/career-training-for-nevadans-k7yhc/learn/american-law 这门课的学习笔记。 文章目录 An Introduction to American LawInstructors Week 06: Civil Pro…

Flink checkpoint 源码分析

序言 最近因为工作需要在阅读flink checkpoint处理机制,学习的过程中记录下来,并分享给大家。也算是学习并记录。 目前公司使用的flink版本为1.11。因此以下的分析都是基于1.11版本来的。 在分享前可以简单对flink checkpoint机制做一个大致的了解。 …

docker学习笔记3:VmWare CentOS7安装与静态ip配置

文章目录 一、安装CentOS71、下载centos镜像2、安装二、设置静态ip三、xshell连接centos本专栏的docker环境是在centos7里安装,因此首先需要会安装centos虚拟机。 本篇博客介绍如何在vm虚拟机里安装centos7。 一、安装CentOS7 1、下载centos镜像 推荐清华源,下载如下版本 …

【C++】学习笔记——string_1

文章目录 四、模板初阶2. 类模板 五、STL简介1. 什么是STL2. STL的六大组件3. 如何学习STL 六、string类1. string类对象的容量操作 未完待续 四、模板初阶 2. 类模板 函数模板就是:模板 函数;类模板就是:模板 类。和函数模板用法基本相同…

Kafka客户端工具:Offset Explorer 使用指南

Kafka作为一个分布式流处理平台,在大数据处理和实时数据流应用中扮演着至关重要的角色。管理Kafka的topics及其offsets对于维护系统稳定性和数据一致性至关重要。Offset Explorer是一个强大的桌面应用程序,它使得管理和监控Kafka集群变得简单直观。本文将…

数组 Leetcode 704 二分查找/Leetcode 59 螺旋矩阵/Leetcode 203移除链表元素

数组 Leetcode 704 二分查找 Leetcode 704 学习记录自代码随想录 二分法模板记忆&#xff0c;数值分析中牛顿迭代法 class Solution { public:int search(vector<int>& nums, int target) {int left 0, right nums.size()-1;// 是否需要等于号&#xff0c;假设…

verilog分析task的接口设计,证明这种写法:assign {a,b,c,d} = links;

verilog分析task的接口设计&#xff0c;证明这种写法&#xff1a;assign {a,b,c,d} links; 1&#xff0c;task在状态机中的使用好处&#xff1a;2&#xff0c;RTL设计3&#xff0c;测试testbench4&#xff0c;波形分析&#xff0c;正确&#xff01; 参考文献&#xff1a; 1&am…

C++初阶学习第四弹——类与对象(中)——刨析类与对象的核心点

类与对象&#xff08;上&#xff09;&#xff1a;C初阶学习第三弹——类与对象&#xff08;上&#xff09;——初始类与对象-CSDN博客 前言&#xff1a; 在前面文章中&#xff0c;我们已经讲了类与对象的思想和类与对象的一些基本操作&#xff0c;接下来这篇文章我们将讲解以下…

NLP(10)--TFIDF优劣势及其应用Demo

前言 仅记录学习过程&#xff0c;有问题欢迎讨论 TF*IDF&#xff1a; 优势&#xff1a; 可解释性好 可以清晰地看到关键词 即使预测结果出错&#xff0c;也很容易找到原因 计算速度快 分词本身占耗时最多&#xff0c;其余为简单统计计算 对标注数据依赖小 可以使用无标注语…

超级数据查看器 app v2.0发布 欢迎下载使用

超级数据查看器 app v2.0发布 欢迎下载使用 感谢大家的支持 &#xff1a;&#xff09; 点击访问APP下载界面 跳转 腾讯应用宝 简介 超级数据查看器软件&#xff08;简称超级数据查看器&#xff09;是一个提供数据查询和数据管理的手机APP&#xff0c;能导入文本数据&…

ubuntu neo4j 下载与配置(一)

neo4j 官方下载页面 https://neo4j.com/deployment-center/#community 进入页面之后&#xff0c;往下滑 咱们在下载neo4j时&#xff0c;官方可能要咱们填写一下个人信息&#xff0c;比如&#xff1a;姓名组织结构邮箱等&#xff1a; 咱们可以观察一下&#xff0c;ne4j的下载链…

大数据学习笔记14-Hive基础2

一、数据字段类型 数据类型 &#xff1a;LanguageManual Types - Apache Hive - Apache Software Foundation 基本数据类型 数值相关类型 整数 tinyint smallint int bigint 小数 float double decimal 精度最高 日期类型 date 日期 timestamps 日期时间 字符串类型 s…