送给 WEB前端学习 的群友们

群号码: 892152725

qq_group.png

之前闲得无聊在知乎上回答了一个零基础转前端的问题,结果私信找我问问题的人越来越多,索性开了 QQ 群,不知不觉都已经 400 多人了。

虽然这个群我一直没有怎么维护过,但我不可以当作它不存在。

关于编程技能的提升一般人都会经历这么几个时期:

入门 -> 基础学习 -> 做项目 -> 优化项目 -> 系统学习 -> 经验积累并提高 -> upgrade -> 做项目 -> upgrade -> 做项目 -> 取得一定世俗的成就

编程学习的最快捷径就是做项目,为此总结并罗列了以下任务清单,该清单默认是给编程小白入门前端用的

任务清单第一期

请根据自身需求选择食用

该任务清单只是为了入门引导 , 就像你玩游戏的新手训练一样 , 如果有哪一项任务不是很清楚明白 , 在群里提问并@管理员或者群主

你不@一般是很难注意到你的

虽然你不一定可以得到及时回答,但是只要看到了总有人会回复你的

如果有什么困惑迷茫的地方也欢迎随时私信

认识搜索引擎

如果有人说初中级编程的核心是什么,我一定会说是搜索引擎

https://www.google.com/
https://cn.bing.com/
https://www.baidu.com/

注:在这里首先推荐使用 google ,百度对于学术文档搜索支持很差,而且广告居多
其次推荐 bing
科学上网软件推荐蓝灯:
https://github.com/getlantern/lantern/releases/tag/latest

或者参考本站另一篇文章 v2rayN 客户端的安装和使用

学会怎么看文档

https://developer.mozilla.org/zh-CN/docs/Web/HTML

如果打不开就看下面这份

http://www.w3school.com.cn

注:主要观看 HTML/CSS 和 JavaScript 教程就好了

观看顺序 : HTML -> HTML5 -> CSS -> JavaScript

如果文档看不懂,可以在群里提问

你需给自己起一个名字

要求: 符合 js 变量命名规则

PS:使用 bing 搜索 js 变量命名规则
一时半会儿搞不明白的 , 纯字母就好了不要带空格和特殊符号

建立自己的第一个本地网页

  • 调整电脑系统,让其可以显示文件后缀名(相关知识点自行 search)
  • 新建一个文本文档,将以下内容复制进去并保存
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>我的第一个html页面</title>
<style>
.borde {
border: 10px solid #404040;
}
</style>
</head>
<body>
<div style="border:10px dashed ">
这是一个 div 标签 , style的行内样式
</div>

<div class="borde">
这是一个 div 标签 , style的内部样式
</div>

<button onclick="alert('Hello world')">
点我 say hello , 这里是行内的 js 事件绑定
</button>

<button id="hello">点我say hello , 这里是 js 的ID事件绑定</button>
</body>
</html>
<script>
var dom_element = document.getElementById("hello");
dom_element.onclick = function () {
alert("Hello,world");
};
</script>
  • 将文件名字修改为 demo.html (注意,这里的 html 是文件的后缀名 , 修改成功后刷新桌面 , 文件应该会变成浏览器图标 , 双击打开)

    1. 如果电脑弄询问你是否修改 , 请点击 “是”

    2. 如果页面打开乱码 , 请不要慌张看下一步

    3. 回到桌面 , demo.html

      右键打开方式 -> 选择其他应用 -> 选择记事本打开
      如果网页乱码: 记事本界面 -> 文件 -> 另存为 -> 保存按钮旁边的编码选择 UTF-8
      接下来你可以尝试修改里面的内容并保存, 然后刷新浏览器看看效果
      txt_html.png

  • 编辑器的使用:

    如果您你已经有的喜爱的编辑器请忽略, 但是现在前端行业内流行编辑器为 VSCode
    官网地址:

    https://code.visualstudio.com/

    安装完成之后 , 重复上述步骤 3 , 不过这一次是使用 Visual Studio Code 打开;
    关于编辑器的信息 , 可自行使用搜索引擎

git 的使用:

git 是目前主流的代码版本管理工具 , 工作中是必须要熟练掌握的 , 往后的学习课程和进度全部使用 git 来进行交流
官网以及下载地址:

https://git-scm.com

英文不好的同学 , 安装 git 只需无脑下一步就好了 , 或者在去哪里提问

安装 git 之后去 https://gitee.com/ 注册一个账号 , 然后将你的注册邮箱私信群主 , 群主把你拉进项目

根目录下建立一个以自己名字命名的文件夹 (注意命名规范要符合js变量命名规范) 然后将自己的新建的 demo.html 放入并提交

如果你加入了项目,为了方便管理,这里要求,项目的文件夹名称 , 群昵称保持一致
在学习 git 的时候会初步接触到命令行
命令行做到常用命令熟悉即可

浏览器的了解

  • 搜索相关文档,了解浏览器内核、派系
  • Chrome
  • Edge

开发者工具

一般是在聚焦浏览器窗口任意网页然后点击 F12 按钮,对,里面都是各种名词,请搞懂并理解每一个名词的意思和相关的知识概念

请善用搜索引擎

相关基础概念

如果不懂这些概念你不是零基础,是负基础

  • 文件
  • 路径
  • 相对路径
  • 绝对路径
  • 命名规则(css,class,id,js 变量等)

请善用搜索引擎