新质生产力实践,我用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 摘要: 目前最先进的方法是用真实标签训练标注数据,用伪标签训练未标注数据。然而,这两个训练流程是分开的,这就使…

mybatis - XxxMapper.java接口中方法的参数 和 返回值类型,怎样在 XxxMapper.xml 中配置的问题

这个例子中的mybatis-config.xml文件,引用这个文件即可 实体类src/main/java/com.atguigu.pojo/Employee.java package com.atguigu.pojo;public class Employee {private Integer id;private String name;private String plone;public Integer getId() {return i…

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

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

OceanBase 分布式数据库【信创/国产化】- OceanBase 数据库整体架构

本心、输入输出、结果 文章目录 OceanBase 分布式数据库【信创/国产化】- OceanBase 数据库整体架构前言OceanBase 数据更新架构OceanBase 数据库采用 Shared-Nothing 架构OceanBase 分布式数据库【信创/国产化】- OceanBase 数据库整体架构 编辑 | 简简单单 Online zuozuo 地址…

linux 修改hosts文件新增域名映射

1、 切换到root账号 su - root 2、 输入root密码 xxxxxx 3、 进入hosts文件 vi /etc/hosts 4、 输入i进入新增模式 i 5、写入新的 127.0.0.1 rm-8123456789k7x6zr6.mysql.sss 6、保存退出 按下esc (确保你在命令模式:按下Esc键确保你处于正…

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

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

机器学习-- 爬虫IntelliScraper 重大更新说明

IntelliScraper 🕷️ 地址:IntelliScraper 介绍 🌟 IntelliScraper 是一个高级的Python网络抓取项目,专为精确解析HTML内容和特征匹配而设计,用于从特定网页提取关键信息。该项目利用了如BeautifulSoup和scikit-le…

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

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

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

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

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

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

CDA一级备考策略分享

但对于很多考生来说,没有备考经验,不知道应该如何备考?今天,我来指导大家应该如何备考,让大家充分准备,拿下CDA考试。在CDA考试大纲中为新考生讲解备考经验一下。 1、数据分析概述与职业操守、数据结构 考…

Excel 批量创建sheet页

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

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

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

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

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

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

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

manim

当安装Manim时,首先需要安装Manim库本身,然后安装一些依赖库和工具,以确保Manim可以正常运行。以下是合并后的安装步骤: 安装Manim和依赖的步骤: 1. 安装Manim 首先,安装Manim库。你可以使用以下命令在终…

Java面试题:什么是Java中的CompletableFuture及其优势?有哪些性能提升

CompletableFuture是Java 8引入的一个类,用于简化异步编程模型。它是Future接口的一个增强版,提供了更加丰富和灵活的操作,使得编写异步、非阻塞的代码变得更加容易。CompletableFuture的主要优势和性能提升体现在以下几个方面: …

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

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

cannot import name ‘img_as_ubyte‘

前提: pip install scikit-image 已经成功安装,我的版本是0.22.0.但 from skimage.util import img_as_ubyte 报错,加个util即可 from skimage.util import img_as_ubyte API调用详见官网: 官网链接

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…