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

是的,我用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.mzph.cn/news/830354.shtml

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

相关文章

【弱监督语义分割】AllSpark:从transformer中的未标记特征重生标记特征,用于半监督语义分割

AllSpark: Reborn Labeled Features from Unlabeled in Transformer for Semi-Supervised Semantic Segmentation 摘要: 目前最先进的方法是用真实标签训练标注数据,用伪标签训练未标注数据。然而,这两个训练流程是分开的,这就使…

Android数据恢复:如何在手机上恢复丢失的文件和照片

我们都有 我们错误地从手机中删除重要内容的时刻。确实如此 不一定是我们的错。其他人可以对您的手机数据执行此操作 有意或无意。这在某个时间点发生在我们所有人身上。 但是,今天市场上有各种各样的软件可以 帮助恢复已删除的文件。这些类型的软件被归类为数据恢复…

Pandas数据可视化 - Matplotlib、Seaborn、Pandas Plot、Plotly

可视化工具介绍 让我们一起探讨Matplotlib、Seaborn、Pandas Plot和Plotly这四个数据可视化库的优缺点以及各自的适用场景。这有助于你根据不同的需求选择合适的工具。 1. Matplotlib 优点: 功能强大:几乎可以用于绘制任何静态、动画和交互式图表。高度可定制&a…

用OpenCV先去除边框线,以提升OCR准确率

在OpenCV的魔力下,我们如魔法师般巧妙地抹去表格的边框线,让文字如诗如画地跃然纸上。 首先,我们挥动魔杖,将五彩斑斓的图像转化为单一的灰度世界,如同将一幅绚丽的油画化为水墨画,通过cv2.cvtColor()函数的…

寝室快修|基于SprinBoot+vue的贵工程寝室快修小程序(源码+数据库+文档)

贵工程寝室快修目录 目录 基于SprinBootvue的贵工程寝室快修小程序 一、前言 二、系统设计 三、系统功能设计 1学生信息管理 2 在线报修管理 3公告信息管理 4论坛信息管理 四、数据库设计 五、核心代码 六、论文参考 七、最新计算机毕设选题推荐 八、源码获取&a…

结构方程模型【SEM】:非线性、非正态、交互作用及分类变量分析

张老师(研究员),长期从事R语言结构方程模型、群落生态学、保护生物学、景观生态学和生态模型方面的研究和教学工作,已发表了多篇论文,拥有丰富的科研及实践经验。 利用结构方程模型建模往往遇到很多‘特殊’情况&…

Excel 批量创建sheet页

参考资料 最巧妙的Excel批量创建工作表方法 一. 需求 ⏹有如下模板,现想根据提供的姓名,批量创建sheet页,要求每个sheet页拥有相同的模板 二. 通过透视表,批量创建sheet页面 ⏹如下图所示的步骤,创建透视表后&#…

人工 VS AGV无人搬运机器人,AGV赋能中国智能制造

agv 机器人作为智能制造的重要抓手,正在渗透到各个传统行业,成为我国制造业转型升级的焦点。未来,智能AGV将不仅仅是简单的把货物搬运到指定的位置,而是要把5G技术、大数据、物联网、云计算等贯穿于产品的设计中,让智能…

《动手学深度学习(Pytorch版)》Task03:线性神经网络——4.29打卡

《动手学深度学习(Pytorch版)》Task03:线性神经网络 线性回归基本元素线性模型损失函数随机梯度下降 正态分布与平方损失 线性回归的从零开始实现读取数据集初始化模型参数定义模型定义损失函数定义优化算法训练 线性回归的简洁实现读取数据集…

帕累托森林李朝政博士受聘「天工开物开源基金会」专家顾问

导语: 开源铸造了当前最前沿的科技引擎。开源驱动了软件生态,也以指数级速度驱动硬件生态。 3月中旬,天工开物开源基金会授予李朝政博士专家顾问,表彰他积极推动参与中国智能软件生态的建设,期待一起共筑未来新生态。…

Python_AI库 Pandas的时间序列操作详解

Python_AI库 Pandas的时间序列操作详解 本文默认读者具备以下技能: 熟悉python基础知识,vscode或其它编辑工具 了解pandas,matplotlib的基础操作 具备自主扩展学习能力 在数据分析和处理中,时间序列数据是一类常见且重要的数据类型。大量的…

CSS实现各种优惠券效果

一、左半圆效果 <style style"text/css">.coupon {width: 240px;height: 100px;margin-top: 15px;background-color: #ff6347;-webkit-mask: radial-gradient(circle at left center, transparent 20px, red 20px); } </style><div class"coupon…

TruLens

文章目录 一、关于 TruLensHow it works 二、安装三、快速使用Get DataInCreate Vector StoreBuild RAG from scratchSet up feedback functions.Construct the appRun the app 一、关于 TruLens Evaluate and Track LLM Applications 官网&#xff1a;https://www.trulens.o…

linux,从零安装mysql 8.0.30 ,并且更新至mysql 8.0.36

前言&#xff1a; 系统使用的CentOS 7&#xff0c;系统默认最小安装。 一、基础配置 配置虚拟机IP&#xff0c;需要更改的内容&#xff0c;如下红框中 修改之后 至此&#xff0c;基础配置完成。注意&#xff1a;此处虚拟机网络适配器使用的是&#xff1a;桥接模式 二、软件…

掌握Lazada自养号测评技巧,轻松提升产品销量与排名

Lazada店铺销量不佳&#xff0c;时常让卖家们感到困扰。然而&#xff0c;仅仅感叹和自我安慰并不能解决问题。作为卖家&#xff0c;我们需要专注于打牢基础&#xff0c;尤其是要深入了解Lazada店铺测评的益处及其运用技巧。通过巧妙地结合运营策略和测评方法&#xff0c;我们可…

Django框架之请求生命周期流程图

一、引言 WSGI、wsgiref、uwsgi三者是什么关系? WSGI是协议&#xff0c;小写的wsgiref和uwsgi是实现该协议的功能模块 缓存数据库 提前已经将你想要的数据准备好了&#xff0c;需要的时候直接拿就可以&#xff0c;提高了效率和响应时间。 eg:当你在修改你的数据的时候&…

vscode查看变量小技巧

vscode查看变量有3种方法 print()输出要查看的变量&#xff0c;此方法适用于所有编程软件安装jupyter&#xff0c;右键run in interactive window—在交互窗口运行&#xff0c;之后点击变量即可查看 通过调试查看&#xff0c;使用于大多编程软件。打断点&#xff0c;调试后会…

【SZU计算机网络实验】从rdt到GBN,这实验居然实现了TCP的可靠数据传输机制?

前言 一个实验六个任务&#xff0c;实验文档一划划不到底。。看来老师们是真下功夫了啊 本文主要展示了作者在完成SZU计算机网络实验3的思路及过程&#xff0c;实验主要包括&#xff1a; 理解rdt2.1实现rdt2.2实现rdt3.0实现回退N步&#xff08;GBN&#xff09;机制实现面向…

2000.1-2023.8中国经济政策不确定性指数数据(日度、月度)

2000.1-2023.8中国经济政策不确定性指数数据&#xff08;日度、月度&#xff09; 1、时间&#xff1a;日度&#xff1a;2001.1.1-2022.06.17&#xff0c;月度2000.1-2023.8 2、指标&#xff1a;CNEPU&#xff08;经济政策不确定性指数&#xff09; 3、来源&#xff1a;China…

Linux网络-文件传输协议之FTP服务(附带命令及截图)

目录 一.FTP简介 二.FTP的数据模式 1.主动模式 2.被动模式 3.两种模式比较 三.安装配置vsftpd 1.安装vsftpd 1.1.安装前关闭防火墙 1.2.安装vsftpd 1.3.查看 1.4.备份 2.配置 3.重启后生效 四.相关实验 1.以win为例 1.1.设置并测试测试连通性 1.2.在终端里创建…