自学Web前端开发学习讲解 – 入门篇

article/2025/10/9 11:09:50

很多人都对web前端感兴趣,这一期主要聊关于如何入门学习Web前端开发的过程分享,此篇适合想入门初学者,大佬就不用看了。主要内容是以本人这一路自学web前端的一些经验和建议,学习哪些知识,以及如何正确的去学,自学过程虽然难,但是终归不负众望。下面记录和分享一下:

一,什么Web前端开发 ?

 

首先我们先了解一下大家都在说的Web前端开发到底是个什么东西 ?想从事一个行业,那你起码得知道它是什么,主要用到什么技能,这样我们才能更好的去学习掌握知识技能以满足开发工作的要求。下面回答来自搜狗百科:

前端开发是创建Web页面或app等前端界面呈现给用户的过程,通过HTML、CSS及JavaScript以及衍生出来的各种技术、框架、解决方案,来实现互联网产品的用户界面交互
前端开发从网页制作演变而来,随着互联网技术的发展和HTML5、CSS3的应用,现代网页更加美观,交互效果显著,功能更加强大。

所以说到底,用到的就是老生常谈的前端三剑客了,html,css,js这三个网页基础技术,一个再好看功能再强的网页,也是由这三剑客编写而成。

二,前端三剑客分析:

Web前端入门需要的掌握技能已经说了,那么html,css,js到底是什么,又是怎么形成一个我们平常好看又非常炫酷的网页呢?下面对这三个的作用详细讲解一下,

html:网页基础结构支架

俗解:你可以把它理解为一个人没穿衣服的身体躯干,头部,身体(又包含了肚子,四肢,脚),同时也就对应了html的基本结构,head,body部分。

css:网页修饰美化美观

俗解:你可以把它理解为一个人的身体穿着很漂亮的衣服,戴着各种手势等,这样人看起来就非常的好看了,同样想网页变得好看,我们通过编写一些css,就可以实现好看炫酷的网页了。

js:网页动态交互行为

俗解:你可以把它理解一个人不可能是一直站着,坐着的,是需要用脚走路,动手吃饭,运动吧,而这些动的概念,你就可以大概理解js在网页中的作用就是用户动态交互功能的体现了。

网页基本模板:

<!DOCTYPE html>
<html lang="zh">
<head><!-- 网页头部 --><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>页面标题</title>
</head>
<body><!-- 网站主体 也是网页所有代码编写位置 -->
</body>
</html>

三,如何正确去学?(重点)

预计学习具体时间还是看个人学习能力,并不是唯一的。基础学习的顺序也是按照下方步骤来。

1,学习html(1-6天)

  • 推荐看一些基础的教程:w3cschool,不推荐视频教程(因为视频教程讲的太多了,很多东西对于入门做东西用不上)看了没多久也忘记了。
  • 只看我这张图上提到的部分(图上的大纲都是按照w3cschool的教程写的),要看到什么程度呢?大致有印象,知道这个标签是干啥的就行了

简单介绍图:

2,学习css(1-4天)

  • 教程:推荐w3cschool,不推荐视频教程
  • 只学我这张思维导图提到的部分,学到什么程度呢?有个大致印象,能对下面那些问题做出自己的理解就好了

简单介绍图

3,学习js(2周-4周)

js这一块是相对难一点的,也比较枯燥的一部分了,这大概是开始劝退的一个阶段了,因为开始复杂起来了呀~~很多人都在这溜了,因此重点就需要放在这一块了,慢慢啃吧。js学了大部分后,这时候也可以同时结合前面html+css联系,做一些综合小demo项目了

简单介绍图

4,案例推荐

这个是我前期学习网上接单仿做的一个站酷网的一个界面效果,很适合拿来作为检验和练习的小案例,不止有首页,导航栏所有都是可以点击的,有对应页面显示。你也可以去搜站酷网就可以找到更多页面。然后自己仿写,如果有需要这个案例demo源码的,

可以私信评论找我领取。

四,开发工具

古人云:工欲善其事必先利其器,学任何一门技术,都是需要有一个好的工具支持,更加有利于学习和开发工作,目前前端常用的工具有,HBuildX(戳我下载),Dreamweaver,vscode (戳我下载),edipus等,当然工具也不止这些还有其他的,了解几款常用即可。

推荐刚入的新手HBuildX,Dreamweaver进行学习。同时也是中文版不用单独进行汉化处理,熟练之后就可以使用强大的vscode编辑器开发了。

 

五,关于自学

题外话:依稀记得刚毕业那会到处说什么培训多好,实际因人而异,这个就不做过多评价,反正坚持走自己的路,不要听风是雨,学习贵在坚持!!!如果你也还在读书,那么大学快毕业就是需要做选择的时候了。

我本人是自学过来的,自学之路确实容易走一些弯路,但是这会让你会记忆很深刻。因此我也是推荐学习前端还是靠自学吧,而自学最重要的其实是驱动力

学习任何一门技术,关于自学这一件事情都是相对不容易的,如果没有持续的驱动力,兴趣都会慢慢减弱的。刚好前端这个体系又很庞大,就很容易出现这种局面:(来自知乎一段对话)

  1. 看html,哎呦,挺简单呀,每天看一点,我很有进步啊(兴趣很高,一段时间过去了
  2. 看css,好像难了一点,不过我好像抗的住(兴趣减弱了,又一段时间过去了
  3. 看js,emmmmm(兴趣已经不足以让我学习了,摊手
  4. 看框架,mmp,好累啊,凉透了(放弃治疗
  5. 再见,我不适合编程……

所以学以致用是关键,通过现阶所学的段学的一些用法和知识点,慢慢的结合之前学的一起做小demo案例,不至于兴趣磨灭的太严重,然后用项目驱动自己消化知识,用做完项目的成就感来加强自己的兴趣,入门之后再巩固基础,这样大概就能迈进前端的门槛了

 

 

 


http://chatgpt.dhexx.cn/article/XiYS8iok.shtml

相关文章

前端开发需要学习什么?

前端开发需要学习什么&#xff1f;web前端相对于编程语言Java、C等来说相对要更容易入门&#xff0c;更适合新手学习。所以有越来越多的人想要学习web前端开发&#xff0c;那么我们学习web前端开发需要学习什么呢&#xff1f; web前端都要学习哪些内容呢? 1、HTML5CSS3&#…

适合普通大学生的前端开发学习路线

大家好&#xff0c;我是帅地。 假如你没有明确的目标&#xff0c;或许可以按照我说的学习路线来学习一波&#xff0c;我写的每一份学习路线&#xff0c;不会很全面&#xff0c;因为我认为&#xff0c;东西列的太多&#xff0c;反而不利于新手的学习&#xff0c;所以我列举的&a…

从sql2016导出数据库到sql2014

因为数据库版本不一样&#xff0c;无法通过backup数据库在restore的方法 1. sql2016导出数据 右击-> tasks-> generate scripts 高级里面选择是只导出数据库结构还是结构加数据 2. sql2014导入脚本&#xff0c;创建数据库 a. 注意脚本里的FILENAME路径是否存在 b. 因为Q…

Sql Server2014显示代码行数

【工具】——>【选项】——>【文本编辑器】——>【所有语言】

Sqlserver高版本数据库还原到低版本方法,SQL2014数据库还原到SQL2012中

Sqlserver高版本数据库还原到低版本数据库的操作步骤如下 一、从高版本数据库导出数据 ①选择需要导出到低版本的数据库&#xff0c;点击鼠标右键-->选择“任务”-->选择“生成脚本” ②在弹出界面选择下一步 ③选择“选择特定数据库对象”和“勾选所有表” ④选择数据…

sqlserver2014 -- 数据库还原

sqlserver2014 -- 数据库还原 1. 新建数据库&#xff0c;右键&#xff0d;任务&#xff0d;还原&#xff0d;文件和文件组&#xff0c;在源设备中找到备份文件 use master; --用此语句得到备份文件的逻辑文件名 RESTORE FILELISTONLY FROM DISK ND:\dbbak\test.bak; --Logica…

安装sqlserver 2014出现无法安装

访问此网站&#xff1a;https://www.microsoft.com/en-us/download/details.aspx?displlaylangen&id22 点击下载 运行 问题解决可以继续安装 重启后完成

SQL Server 2014安装笔记

最近要部署一个项目&#xff0c;需要用到SQL Server 2014。我把安装过程简单记录一下&#xff0c;给有需要的朋友吧。 下载安装包 在国内微软的官网下载速度还是比较慢的&#xff0c;我是从 https://msdn.itellyou.cn/下载的。 搜索SQLServer我是下载以下的版本。 文件名 c…

Win10安装SQL2012或SQL2014报错

前2天公司全部换了新电脑&#xff0c;都是高配置&#xff0c;系统都是Win10企业版。本人也是微软程序猿&#xff0c;所有SQLServer是必不可少的&#xff0c;但是在安装SQL2012时老是报错&#xff0c;数据库引擎服务实例报错、全文索引扫描错误等等&#xff0c;安装了2次都是相同…

SQL Server 2014无法连接到服务器之解决方法

问题如图所示&#xff1a; 解决方法 1、打开SQL server 配置管理器--->SQL server 网络配置--->MSSQLSERVER的协&#xff0c;将SQLEXPRESS协议中的Named Pipes改为已启用&#xff1a; 2、点击SQL Server服务&#xff0c;将SQL Server(MSSQLSERVER)改为启动&#xff1a; …

SQL server 2014 导入excel

SQL server 2014 导入excel 在SQL server 2014版本中导入excel表格时碰到了一些问题&#xff0c;在这里记录下来方便自己查看。 首先在选中想要导入数据的数据库&#xff0c;右键依次选择任务—>导入数据 接下来就会出席那SQL server的导入导出向导&#xff0c;如下图。 …

SQL2014数据导入到SQL2008R2

源库2014 目标库2008R2 &#xff08;源库和目标库版本不一样&#xff09; 由于我的源库的版本比目标库版本高&#xff0c;一些数据的格式不一样尤其是datatime&#xff0c;直接连数据架构导成脚本使用会一直报错&#xff0c;所以我先用导出框架的脚本&#xff0c;再导数据。 …

SQL2014 MySQL_sql server 2014 下载-SQL Server 2014数据库下载 免费版(32位/64位)--pc6下载站...

SQLServer2014数据库是一个免费的、功能强大的可靠数据管理系统&#xff0c;为轻型网站和桌面应用程序提供丰富可靠的数据存储&#xff0c;包含强大的功能&#xff0c;可以轻松地管理数据库&#xff0c;赶快下载使用吧&#xff01;。 相关软件软件大小版本说明下载地址 SQL Ser…

mysql2014汉化版_SQLServer2014企业版下载

SQL Server 2014企业版很多人都会简称为SQL2014企业版&#xff0c;SQL2014企业版是由微软推出的分布式数据库管理系统&#xff0c;一些专业的服务器使用的数据库存储方式就是sql方式&#xff0c;这个版本在安全性、管理性、T-SQL增强、SSIS集成服务&#xff0c;SSAS分析服务以及…

Win7安装SqlServer2014

SQL Server 2014下载&#xff0c;安装和使用教程 一、SQL Server 2014下载二、SQL Server 2014安装三、SQL Server 2014使用 一、SQL Server 2014下载 下载链接&#xff1a;https://pan.baidu.com/s/1AbuEloUEMLsCc6AC5HPPOg 提取码&#xff1a;6ifv 适用对象&#xff1a;Windo…

java sqlserver2014_java 链接数据库 SQL Server 2014

链接 sql 数据库 1.下载 JDBC驱动包 2.打开sql server 2014 配置管理器 (1)用windows验证方式连接数据库:这种方式可能要求管理员权限,至少部分情况下会导致无法正常访问数据库。不建议采用! (2)用sql server身份验证方式连接数据库。 如果安装sql server 2014 时是以window…

win10安装SqlServer2014

首先自己下载好安装包&#xff0c;我上传了资源&#xff0c;一共两个文件&#xff0c;因为太大&#xff0c;只能分成2个资源上传&#xff0c;下载路径如下&#xff1a; 第一部分&#xff1a;sqlserver2014安装包第一部分&#xff0c;一共两部分&#xff01;第二部分我也上传了…

sql——数据库创建以sqlsever2014为例

1、打开sqlsever management 2、点击新建查询 3、输入代码 &#xff08;1&#xff09;代码 Create database testdb01 On primary( Nametestdb01, /*主文件的名字*/ Filename"D:\sql-file\testdb01.mdf", /*主文件的文件夹名字*/ Size5MB, …

sql 2014把一个数据库的内容复制到另一个数据库中

1、复制表结构 首先&#xff0c;打开并连接Sql Server&#xff0c;在源数据库Source_db&#xff08;源数据库名称&#xff09;下面的源表上&#xff0c;点击右键&#xff0c;然后依次点击“编写表脚本为”→“CREATE到” →“新查询编辑器窗口”。 2、在第1步产生的编辑器中按…

SQL Server 2014安装图解

SQL Server 2014安装图解 SQL Server 2014 是Microsoft 公司推出的关系型数据库管理系统。它用于大规模联机事务处理&#xff08;OLTP&#xff09;、数据仓库和电子商务应用的数据库平台&#xff1b;也是用于数据集成、分析和报表解决方案的商业智能平台。 环境说明 SQL Ser…