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

news2024/10/1 5:30:42

很多人都对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://www.coloradmin.cn/o/95893.html

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

相关文章

AI绘画火爆,到现在还只是冰山一角?AIGC掀起当代新艺术浪潮

前言&#xff1a; hello&#xff0c;大家好我是Dream。近日&#xff0c;各大社交平台掀起了一股“AI绘图”风潮&#xff0c;很多同学朋友纷纷在社交平台上晒出了属于自己的AI照片&#xff0c;一时间AI相关话题热度高涨。那对于AI绘画以及开启AI内容创作新时代的昆仑万维你究竟了…

东北大学2023分布式操作系统考试题目及答案

Note&#xff1a;答案仅供参考&#xff0c;自己所写&#xff0c;不是标准答案&#xff0c;若发现错误&#xff0c;请指正&#xff0c;谢谢&#xff01; 文章目录考试题目参考答案考试题目 1、简述分布式系统的设计目标中开放性的特点有哪些&#xff1f; 、 、 、 、 、 、 、…

​燕东微科创板上市:市值276亿 亦庄国投与京东方是股东

雷递网 雷建平 12月16日北京燕东微电子股份有限公司&#xff08;简称&#xff1a;“燕东微”&#xff0c;股票代码为&#xff1a;“688172”&#xff09;今日在科创板上市&#xff0c;燕东微本次发行17986.5617万股&#xff0c;发行价21.98元&#xff0c;募资总额39.56亿元。燕…

关于hcaptcha (vm wasm ob)三合一

该文章主要提供交流学习使用&#xff0c;请勿利用其进行不当行为&#xff01; 如本篇文章侵犯了贵公司的隐私&#xff0c;请联系我立刻删除&#xff01; 如因滥用解密技术而产生的风险与本人无关&#xff01; 1 Hcaptcha hCaptcha 旨在解决机器学习中最劳动密集型的问题&am…

毕业设计 - 基于 java web的网上花店销售系统设计与实现【源码+论文】

文章目录前言一、项目设计1. 模块设计数据流图功能模块2. 实现效果二、部分源码项目源码前言 今天学长向大家分享一个 毕业设计项目: 网上花店销售系统的设计与实现 一、项目设计 1. 模块设计 数据流图 功能模块 1、首页&#xff08;主界面&#xff09; 提供简洁美观的主界…

Jenkins+Kubernetes企业级DevOps容器云平台

一、Kubernetes在DevOps中的作用 1、DevOps DevOps假导所有新的功能特性可以像流动的水一样,迭代到用户的终端,而水是不能讲流的,为了保证水流的质量,我们就必须在水流动的途中治理,直到最终交付到用户的手中。 DevOps是一套方法论、一系列的原则和实践,其主要目标为帮…

【Robot Framework】发送GET和POST请求

做接口自动化时&#xff0c;经常要使用GET与POST请求&#xff0c;那么如何使用RF发送对应的请求呢&#xff1f; 一、安装RequestsLibrary pip install robotframework-requests安装以后&#xff0c;导入到对应的测试套件或测试用例中. 本次主要介绍通过RequestsLibrary来实现…

JavaEE - JVM八股文(JVM内存区域划分,典型面试题,JVM类加载机制)

文章目录1. JVM运行时数据区&#xff08;内存区域划分&#xff09;2. JVM类加载机制常见面试题1. JVM运行时数据区&#xff08;内存区域划分&#xff09; JVM运行时数据区域也叫内存布局&#xff0c;但需要注意的时它和Java内存模型&#xff08;JMM&#xff09;不同&#xff0…

使用PyTorch进行知识蒸馏的代码示例

随着机器学习模型的复杂性和能力不断增加。提高大型复杂模型在小数据集性能的一种有效技术是知识蒸馏&#xff0c;它包括训练一个更小、更有效的模型来模仿一个更大的“教师”模型的行为。 在本文中&#xff0c;我们将探索知识蒸馏的概念&#xff0c;以及如何在PyTorch中实现它…

计算机毕设Python+Vue校园舆情监控系统(程序+LW+部署)

项目运行 环境配置&#xff1a; Jdk1.8 Tomcat7.0 Mysql HBuilderX&#xff08;Webstorm也行&#xff09; Eclispe&#xff08;IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持&#xff09;。 项目技术&#xff1a; SSM mybatis Maven Vue 等等组成&#xff0c;B/S模式 M…

C#修改富文本框(RichTextBox)指定内容颜色

1.前言 最近给客户做了一个协议解包与组包的工具&#xff0c;以便于他们给终端客户或者集成商使用&#xff0c;让客户能够快速集成产品协议&#xff0c;降低客户集成工作量&#xff0c;产品协议是基于JT/T808&#xff0c;但是有增加了自己的一些特殊修改。 客户使用的是C#开发…

数据库原理及MySQL应用 | 并发控制

无论何时,只要有多个查询需要在同一时刻修改数据,都会产生并发控制问题&#xff0c;MySQL通过多版本并发控制和加锁实现并发控制。 多用户并发执行事务访问同一个数据库时&#xff0c;可能引发脏写、脏读、不可重复读、幻读等一致性问题。并发事务访问相同记录的情况&#xff0…

Golang 【basic_leaming】数组

阅读目录Array(数组)数组定义数组的初始化方法一方法二方法三数组的遍历数组是值类型多维数组二维数组的定义二维数组的遍历数组练习题1、请求出一个数组的和以及平均值 for-range2、请求出一个数组的最大值&#xff0c;并得到对应的下标3、从数组 [1, 3, 5, 7, 8] 中找出和为 …

探花交友_第10章_搭建后台系统(新版)

探花交友_第10章_搭建后台系统&#xff08;新版&#xff09; 文章目录探花交友_第10章_搭建后台系统&#xff08;新版&#xff09;1.1 概述1.2 API网关1.2.1 搭建网关依赖引导类跨域问题配置类配置文件测试1.2.2 配置鉴权管理器1.3 Nacos配置中心1.3.1 添加依赖1.3.2 添加boots…

33.数据统计

数据统计 后台系统首页中&#xff0c;显示各种统计数据&#xff0c;比如&#xff1a;累计用户数、新增用户数、登录次数等内容。 解决方案 数据库表分析 一、数据采集 需求&#xff1a; 1、探花系统将用户操作日志写入RabbitMQ 2、管理后台获取最新消息&#xff0c;构造日…

SpringBoot+微信小程序实现的云音乐小程序系统 附带详细运行指导视频

文章目录一、项目演示二、项目介绍三、项目运行截图四、主要代码一、项目演示 项目演示地址&#xff1a; 视频地址 二、项目介绍 项目描述&#xff1a;这是一个基于SpringBoot微信小程序框架开发的云音乐微信小程序系统。首先&#xff0c;这是一个前后端分离的项目&#xff…

C语言百日刷题第十五天

前言 今天是刷题第15天&#xff0c;放弃不难&#xff0c;但坚持一定很酷~ 再刷一套模拟题 C语言百日刷题第十五天前言一、选择题二、判断题三、多选题四、填空题五、分析程序题一、选择题 1.下列选项中&#xff0c;不属于开发一个C语言应用程序的具体实现步骤的是&#xf…

为什么网络应用程序是今年的主要攻击媒介之一

网络犯罪分子在绕过最新的网络应用程序防火墙方面的独创性正在将互联网应用程序变成今年增长最快的攻击媒介。面向公众的 Web 应用程序现在是渗透组织边界的最广泛使用的攻击媒介。 根据卡巴斯基全球应急响应团队最近的一份报告&#xff0c;始于 Web 应用程序的攻击从 2020 年…

ocker高级篇1-dockeran安装mysql主从复制

大家好&#xff0c;咱们前面通过十篇的文章介绍了docker的基础篇&#xff0c;从本篇开始&#xff0c;咱们的《docker学习系列》将要进入到高级篇阶段(基础篇大家可以查看之前发布的文章)。 咱们先来介绍&#xff1a;docker复杂方式安装软件。通过按照mysql\redis两个案例来讲解…

XC6SLX100-3FGG484C规格、XC7A15T-2CPG236I产品概述及应用

Spartan-6系列提供领先的系统集成能力&#xff0c;为大批量应用提供最低的总成本。这个由13个成员组成的家族扩展了逻辑单元的密度&#xff0c;从3840个扩展到147443个&#xff0c;功耗仅为之前斯巴达家族的一半&#xff0c;并且具有更快、更全面的连接。 Spartan-6系列基于成熟…