零基础童鞋快速学习前端开发 ---- (1)

article/2025/7/4 23:34:52

初识前端

1、前端开发简介2、前端开发如何入手学习?3、前端入门学习建议4、对初学者的建议5、小结

一.前端开发简介

形成:从简单网页制作演变至功能强大的前端开发。
早期的网页设计制作主要内容都是静态死的页面,以文字图片为主,用户使用网站也以浏览为主。随着互联网的发展,现代网页布局更佳美观,交互效果显著,用户体验超棒,功能更加强大。
因此现在的前端开发的主要技术通常是指html、css、js技术和前端几大框架的使用。
现在市场上主要产品划分有网页,手机app,电视大屏端,H5游戏,微信小程序/小游戏/公众号以及支付宝/钉钉小程序等
二.前端开发如何入手学习?

这里针对于不是本专业(网页设计等)的童鞋
一是报班学习,效果好且能得到系统性的学习,但价格比较贵对时间要求高,不是所有童鞋都能拿得出那么多时间和金钱去学习的。
二是自学和观看免费视频学习,经济实惠但缺点是缺少指导缺少方向,导致学习的内容杂乱无章更可能花费的时间学了无用的内容,如果没有出众的意志力规划力是很难学下去的。
三是报名线上收费课程,优点是价格相对便宜,通常有一个集体可以探讨问题,有老师指导方向的话,效果要比自学好很多,也会清楚更多些。
具体各位童鞋自行考量。

三、前端入门学习建议
1.先明确前端三个概念:
①.HTML是内容层,展示页面内容。它的目的是表示一个HTML标签在页面里是个什么角色。
②.CSS是样式层,它的目的是表示一块内容以什么样的样式(字体、大小、颜色、宽高等)显示,为HTML做化妆打扮的。
③.JS是行为层,它要做的是当用户触发某些行为时,会给内容和样式带来什么样的改变。
建议:入门的可以先从较为系统的技术学习网站开始学习。
2.学习工具
前端的入门门槛极低,体现在 HTML 和 CSS 上。运行环境浏览器即可,推荐 Chrome,易于调试。编辑器直接用 VSCode 吧,超级好用的,当然有些插件需要自己上百度查区别进行按需下载。
3.前端的基础:
JavaScript,HTML+CSS,HTML5+CSS3,ES5,ES6,ES7,jQuery,bootstrap,nodejs,mySql,ajax。
这里建议先学习js,html,css,可以自行选择观看线上视频,选择高质量的,后续学习 es5 / es6 / es7 / jQuery / bootstrap / nodejs / mysql / ajax。时间更多的可以学习 less / scss,它两都属于都属于 CSS 预处理器的范畴,也就是 CSS 的超集。
jQuery是继prototype之后又一个优秀的Javascript库。它是轻量级的js库 ,它兼容CSS3,还兼容各种浏览器。
其中nodejs可以与express或者koa2框架进行搭建前后端分离的后端服务器端,可以接受前端发来的请求并进行做处理后返回结果给前端。这样可以更好地理解前后端分离方式。
mySql就是一个数据库,保存数据的地方,当然你也可以选择其他数据库。
4.前端的几大框架和工具:在这里插入图片描述
前端三大js框架(vue / Angular / React),前端项目打包工具webpack,gulp等,版本控制工具svn / git,还有微信小程序(支付宝,钉钉的可以先别管),至于多端框架方面可以先不进行学习。
前端框架从以前常用的jQuery、Bootstrap等框架,发展成现在的Vue、React、Angular三大框架局面,都是比较成熟的框架,也都有相对成熟的周边UI组件库。下面逐个介绍:在这里插入图片描述
Vue是一个轻量级的框架,通过进行双向数据的绑定来驱动界面,拥有丰富的指令和组件化。Vue框架上手很快且易学,因为它的官方文档介绍的非常清楚,开发Vue的也是中国人,所以文档方面易阅读,而且能够非常快速的通过异步批处理的方式更新DOM,可以把解耦的、可复用的组件组合在一起使用,还可以允许多种模块的安装,使用的场景很灵活。
在这里插入图片描述

Angular是一款很优秀的前端js框架,已经被Google的多款产品采用。它拥有良好的应用程序,模板的功能很强大,自带丰富的angular指令,拥有双向数据绑定,可以通过指令扩宽HTML。 angular 入门很容易 但深入后概念很多, 学习中较难理解,需多加学习,多看文档。
在这里插入图片描述

React,由facebook推出,正式版推出是在2013年。React 拥有较高的性能,代码逻辑非常简单。拥有 速度快,跨浏览器兼容, 模块化,单向数据流Flux,同构、纯粹的javascript,兼容性好等特点。
react推崇的是JSX语法,在学习react之前还要去了解JSX语法
vue与之不同的是语法更友好,搭配前端模块化,大的小的都能hold住,less等等的也都可以使用

五.小结
第一学习前端的基础,例如HTML需要花费时间来记忆,摸清每个标签的使用场景,最好的记忆就是写,一定要写,写,写!重要的事说三遍!
对于不知道写什么的童鞋,这里建议你可以模仿各大电商网站,比如淘宝网,去实现它的界面效果,先写静态页面和一点点交互功能,后面再拓展。
第二先把前端基础的弄会了再上手前端主流框架的,不然就叫盲目学习了,至于前端工程化模块化等其他高级知识点后续再说
第三框架都学都看看,别害怕。花费一天的时间可以快速了解三大框架你更易于哪一种上手更快更高效。
需求出活快就直接学Vue.js,其他两个可以日后进行学习。


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

相关文章

新手该如何学习前端开发技术

现在有很多小伙伴选择学习web前端开发技术,但是小伙伴在选择web前端培训班学习之前有没有考虑过一个问题,自己选择学习前端开发的初衷是什么,为什么要学习web前端开发技术,是单纯的兴趣爱好还是以就业为目的的技术提升。小伙伴要考…

【个人学习记录】从0开始学习前端开发

提示:没有什么参考意义,只是个人学习的一个记录罢了。 为棕熊先生做一个独一无二的新闻网站 使用HTML、CSS、JavaScript做一个新闻网站,从设计网站开始。 前言 疫情原因,尝试新的有趣的东西,比如从头学一项技术&…

从零走向专业,腾讯前端大牛经验分享:如何快速学习前端开发?

很多同学想学习WEB前端开发,不过面对大量的前端学习资料(视频教程、网上教程、书籍)等,不知道从何处下手。 作为一个多年从事前端开发的程序员,为了让新手程序员少走点弯路,这里就分享腾讯前端大牛快速学习前端开发的经验: 一、前端学习思路 前端学习存在一个普遍的问题…

C语言求一个大数范围以内的素数(质数)既然如此简单

⭐本章简介 本章讲解一下C语言求素数的一个程序。5种求解方式,最后一种可以求大数! 有多种方法,难度依次增大(但是不会太大),程序的质量也依次增大。 ♾️目录 ⭐本章简介⭐求素数的方法💡暴力…

判断素数、输出100内素数 C语言初学

素数又称质数。所谓素数是指除了 1 和它本身以外,不能被任何整数整除的数,例如13就是素数,因为它不能被 2~12 的任一整数整除。 判断一个整数m是否是素数,只需把 m 被 2 ~ m-1 之间的每一个整数去除,如果都不能被整除&…

C语言:查找打印质数(素数)

这个题是很灵活的,有几种解法,也有很多种优化方法,这里,我来谈谈一种个人感觉比较容易理解的方法。 首先,要知道质数(素数)是什么? 质数(素数)是除了1和它本…

输出100 - 200之间的素数C语言

输出100 - 200之间的素数 素数就是质数,即除了1和它本身不再有求它因数的自然数 那么这道题的思路就是用100到200之间的数去除以比这个数小的所有数(除了1和它本身),如果有余数说明它不是一个素数 看下面代码: int m…

求素数C语言

求素数C语言 代码如下&#xff1a; #include<stdio.h> int main() {int i, n;printf("请输入一个数:"); scanf("%d", &n);for (i 2; i < n ; i){if (n%i 0)break;}if (n <1 ) printf("这不是素数\n");else if (i < n) pr…

QQ群 该页面暂时无法显示

如图&#xff0c;在使用QQ群文件时出现“该页面暂时无法显示”的错误信息。 首先检查IE能否正常使用。 打开IE果然显示了错误信息&#xff0c;按照说明改正代理服务器信息。QQ群即可正常使用。

qq群文件问题完美解决

1.点开设置 2.点击网络和Internet 3.点击网络和共享中心 4.点击你家的WiFi 5.点击属性 6.把这个前面的对勾取消掉 7.点击确定 8.完成操作

解决QQ或TIM下载群文件网路失败或者网速贼慢的办法

这几天项目上有些文件都放在了Q群上&#xff0c;可是发现只要稍微大一点的文件基本都是下载失败&#xff0c;不是网络错误就是下载半天才下好&#xff0c;现在介绍一下解决的办法&#xff1a; 1- 百度上搜索“群空间” 2- 登录你的QQ账号 3- 在右上角有我的QQ群&#xff0c;在…

解决PC端的的TIM群聊界面无法显示公告、文件、记录栏,不显示群消息

笔者的PC端TIM经常遇到各种“暂时无法显示”&#xff0c;公告、文件、记录栏&#xff0c;群消息都没了。 解决方法&#xff1a; 打开ie浏览器右上角齿轮->Internet选项->连接->局域网设置只勾选 自动检测设置把代理关了。 就能正常显示 转载自贴吧草上黑

电脑版QQ或TIM群文件无法显示,空白,加载不出来

问题描述 登陆电脑版QQ或者TIM后&#xff0c;点击群文件&#xff0c;显示无法打开。 解决办法 将代理服务器关闭&#xff0c;然后QQ或者TIM群文件就能打开啦。&#xff08;然后代理服务器自己确定是否再次开启&#xff09; 参考博文 参考博文1

QQ “安全检查未通过,禁止下载该文件” 解决方法

经评论区提醒&#xff0c;此方法可能已经不再适用。如有人成功解决了&#xff0c;或者没有成功解决&#xff0c;麻烦评论区告诉我一下。谢谢&#xff01; 在下载群文件的时候&#xff0c;偶尔会遇到上图的情况&#xff0c;明明是正经文件&#xff0c;却没有通过安全检查。解决方…

解决QQ群、讨论组上传文件,由于网络原因上传失败?

最近qq上传群文件老是失败&#xff0c;但是同事他们可以&#xff0c;目前已经解决QQ群、讨论组上传文件&#xff0c;由于网络原因上传失败&#xff1f;&#xff0c;做法如下&#xff1a; 输入regedit&#xff0c;打开注册表&#xff0c;然后找到这个位置HKEY_CURRENT_USER\Sof…

QQ头像无法加载,显示初始默认头像的解决方法

前言 终于。。终于&#xff01;查过那么多资料&#xff0c;翻过无数带有蛛丝马迹的信息&#xff0c;根本没有人能解决我遇到的这个问题&#xff0c;它是如此独特&#xff0c;如此难以排查&#xff01;&#xff01; 删过文件、改过网络配置、本地测试过相关数据接口、重装过QQ、…

安全检查未通过_QQ群文件未通过安全检查,禁止下载该文件解决办法(QQ收藏)

需要从群文件下载一个压缩包文件,可是却显示下载失败,具体原因为“QQ群文件未通过安全检查,禁止下载该文件”,按有的说法在设置里把安全防护的等级设置为最低,还是不行,手机也同样。 在将放弃的时候,发现直接用手机收藏群文件,然后用电脑登上qq去收藏里面下载完美解决。…

QQ群无法下载视频和图片解决方案

最近换的新电脑 登录QQ后发现在QQ群里的图片或视频无法下载 如图所示&#xff1a; 一开始以为还是 网络问题 导致无法下载 但是 不影响聊天和上传文件 &#xff1f;&#xff1f;&#xff1f; 意味着网络正常 想了下 新电脑 外置的硬盘一直未装 下载的路径改变了 重新定义的本…

【问题记录】qq中群文件、群相册以及一些服务一直显示不出来

一、问题描述 qq各种服务不给力&#xff0c;以为是qq设置的原因&#xff0c;卸载后重装还是不行 二、解决方法 问了度娘&#xff0c;试了又试&#xff0c;最后通过去掉代理服务器成功解决了问题&#xff0c;步骤如下&#xff1a; 1.按下WinR组合bai键打开运行&#xff0c;…

QQ群文件无法正常显示/微信(PC)电脑端公众号文章打开后显示一片空白的解决办法

QQ群文件无法正常显示/微信&#xff08;PC&#xff09;电脑端公众号文章打开后显示一片空白的解决办法&#xff1a; 【解决办法】 1.打开ie浏览器&#xff0c;右上角类似齿轮的图标&#xff0c;找到Internet选项&#xff0c;打开 2.找到局域网设置 3.把下图中的所有钩去掉 4.…