前端开发如何学习？后端？全栈？零基础入门

于 2020-11-23 09:57:46 发布
阅读量1.7k 收藏 1
点赞数
文章标签： css javascript vue.js html html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/icktpxcls/article/details/109983751
版权

这是一个2020年你成为前端，后端或全栈开发者的进阶指南:

1、你不需要学习所有的技术成为一个web开发者

2、这个指南只是通过简单分类列出了技术选项

3、我将从我的经验和参考中给出建议

4、首选我们会介绍通用的知识, 最后介绍2019年的Web的一些趋势

1、基础前端开发者

1.1 HTML & CSS

在这里插入图片描述

  • 最基础的知识：
  • 语义化的HTML元素
  • 基础的CSS语法
  • Flexbox & Grid
  • CSS变量
  • 浏览器开发者工具

1.2 响应式布局

在这里插入图片描述

  • 响应式设计将不再是网页的加分项, 而是必须的
  • 设置viewport
  • 非固定宽度
  • 媒体查询
  • 使用 rem 替代 px
  • 移动优先,柱状显示

1.3 基础的部署工作

在这里插入图片描述

  • 学会如何部署一个静态网站到服务器
  • 注册一个域名(NameCheap, Google Domains)
  • 管理共享主机或虚拟机(Inmotion, Hostgator, Bluehost)
  • FTP, SFTP 文件上传(Filezilla, Cyberduck)
  • 静态页面托管(Netlify, Github Pages)

1.4 SASS预处理器

在这里插入图片描述

  • 虽然不是必须的, 但是推荐去学, 基础知识的掌握很简单
  • 结构化CSS
  • 变量
  • 嵌套样式表
  • Minxins & 函数
  • 继承

1.5 原生JavaScript语法

在这里插入图片描述

  • 不使用任何框架和库区学习原生的JS语法
  • 数据类型, 函数, 条件判断, 循环, 凑总府
  • DOM操作和事件
  • JSON
  • Fetch
  • ES6+(箭头函数, Promise, async/await, 解构)

1.6 满足了基本的前端开发者的条件

在这里插入图片描述

    <
最低0.47元/天 解锁文章
爱创乐育知识速递
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
博客
11 个 ES2022（ES13)中惊人的 JavaScript 新特性
08-08 213
11 个 ES2022（ES13)中惊人的 JavaScript 新特性
博客
Web前端VS后端那个好一点
04-11 1309
作为一个从事IT培训行业多年的人，被问及最多的三个问题就是，前端和后端哪个更好学？前端和后端哪个就业前景好？哪个薪资更高？众所周知，最近几年互联网发展迅速，想要从事互联网的同学也越来越多。那对于新手来说，选择一个自己喜欢的方向非常重要。有兴趣才能坚持，坚持才能成功。Java和Web前端，是当前热门职业之中之二，两者在关注度和热度上不分伯仲，也经常被拿来比较。那么，Java和Web前端，IT新人该如何选择呢？从发展层面来说，Java作为一门老牌编程语言，在国内的发展已经非常完善，目前，大部分的企业都使用
博客
web前端培训 - JavaScript 扩展运算符
03-21 295
JavaScript 扩展运算符简介ES6 提供了一个名为扩展运算符的新运算符，它由三个点 (…) 组成。扩展运算符允许我们扩展可迭代对象的元素，例如数组、映射或集合。例如：const odd = [1,3,5];const combined = [2,4,6, …odd];console.log(combined);输出：[ 2, 4, 6, 1, 3, 5 ]在此示例中，奇数数组前面的三个点 (…) 是展开运算符。扩展运算符 (…) 解包奇数数组的元素。请注意，ES6 还具有三个点 (…
博客
web前端培训 - 八进制和二进制字面量
03-18 1044
ES5 提供了八进制（前缀 0）、十进制（无前缀）和十六进制 (0x) 的数字文字。ES6 增加了对二进制字面量的支持并改变了它表示八进制字面量的方式。八进制要在 ES5 中表示八进制文字，我们使用零前缀 (0) 后跟八进制数字序列（从 0 到 7）。例如：let a = 051;console.log(a); // 41如果八进制文字包含超出范围的数字，JavaScript 会忽略前导 0 并将八进制文字视为十进制，如下例所示：let b = 058; // invalid octalcon
博客
web前端培训 - 12个有用的 JavaScript 代码片段
03-14 2480
1、数值排序 | 升序 [⇣⁰₉]const arr = [40, 100, 1, 5, 25, 10];arr.sort(function(a, b){return a-b;});之前：[40,100,1,5,25,10]之后：[1,5,10,25,40,100]说明：对于数字排序，必须创建一个 Comparator 实体或比较函数。在上面的代码片段中，这相当于const compare = function(a, b){return a-b;};排序结果是arr.sort(com
博客
web前端培训 - 使用const 关键字定义常量
03-08 356
JavaScript const 关键字简介ES6 提供了一种使用 const 关键字声明常量的新方法。const 关键字创建对值的只读引用。const CONSTANT_NAME = value;按照惯例，常量标识符是大写的。与 let 关键字一样， const 关键字声明块作用域变量。但是，由 const 关键字声明的块范围变量不能重新分配。let 关键字声明的变量是可变的。这意味着我们可以随时更改它们的值，如以下示例所示：let a = 10;a = 20;a = a + 5;con
博客
web前端培训 - let关键字声明块范围的变量
03-03 769
JavaScript let 关键字简介在 ES5 中，当我们使用 var 关键字声明一个变量时，变量的作用域要么是全局的，要么是局部的。如果在函数之外声明变量，则变量的范围是全局的。在函数内声明变量时，变量的作用域是局部的。ES6 提供了一种使用 let 关键字声明变量的新方法。let 关键字类似于 var 关键字，只是这些变量是块作用域的。例如：let variable_name;在 JavaScript 中，块用花括号 {} 表示，例如 if else、for、do while、while、t
博客
web前端 - 6 个可以在 CSS 代码中使用的CSS 函数
02-21 203
CSS 是每个 Web 开发人员必备的样式表语言。 它允许我们设置网页样式并使其具有响应性。 此外，借助 flexbox 和 grid 等新的 CSS 功能，我们可以轻松地为我们的网页创建复杂的布局。CSS与所有其他不同的语言一样，CSS 也有自己可以使用的功能。 这些函数可以放置在您要放置属性值的位置。在某些情况下，它们可以伴随另一个值声明。 一些 CSS 函数甚至可以嵌套到其他函数中，让您一次完成许多事情。在本文中，我将与您分享一些作为 Web 开发人员应该知道的有用的 CSS 函数。 现在，让我
博客
web前端 - 写出漂亮JavaScript代码的实用技巧
02-15 350
1、按强类型风格写代码js是弱类型的，但是写代码的时候不能太随意，写得太随意也体现了编码风格不好。下面分点说明：（1）定义变量的时候要指明类型，告诉JS解释器这个变量是什么数据类型的，而不要让解释器去猜，例如不好的写法：var num,str,obj;声明了三个变量，但其实没什么用，因为解释器不知道它们是什么类型的，好的写法应该是这样的：var num =0,str =’’,obj =null;定义变量的时候就给他一个默认值，这样不仅方便了解释器，也方便了阅读代码的人，他会在心里有数——
博客
web前端培训好处及前端成长路线
02-11 534
当今IT行业盛行，从事IT行业人员越来越多，从前端到后端职业中，更多的人喜欢前端开发，因为前端入门简单，学习起来容易，并且现在市场需求逐渐加大，只要拥有好的技术，会深受企业亲睐！今天就为各位分享web前端起步阶段、提升阶段、成型阶段都应该学习哪些知识？如何去学习这些知识？起步阶段1、基本知识的掌握在梳理的知识架构中，按照分析的两个维度里最前置的、最浅显的部分，作为打基础的阶段，必须要在这个过程中更多投入到实践中去，通常做的多了、熟练了，就认为这部分知识和内容掌握了。2、常用工具的掌握对于常用工具的
博客
web前端 - CSS快速开发技巧
01-19 392
使用CSS重置（reset）css重置库如normalize.css已经被使用很多年了，它们可以为你的网站样式提供一个比较清晰的标准，来确保跨浏览器之间的一致性。大多数项目并不需要这些库包含的所有规则，可以通过一条简单的规则来应用于布局中的所有元素，删除所有的margin、padding改变浏览器默认的盒模型。*{ box-sizing:border-box; margin:0; padding:0 }使用box-sizing声明是可选择，如果你使用下面继承的盒模型形式可以跳过它。继承盒模型让盒
博客
web前端 - JS中的4个for循环
01-17 622
在 ECMAScript5（简称 ES5）中，有三个循环。在 2015 年 6 月发布的 ECMAScript6（简称 ES6）中，新增了一种循环类型。他们是：forfor infor eachfor of今天，就让我们一起来看看这4个 for 循环。1、简单的for循环我们来看看最常见的写法：const arr = [1, 2, 3];for(let i = 0; i < arr.length; i++) {console.log(arr[i]);}当循环中数组的长度没有变化
博客
web前端 - 5个常见的JavaScript内存错误
01-10 198
JavaScript 不提供任何内存管理操作。相反，内存由 JavaScript VM 通过内存回收过程管理，该过程称为垃圾收集。既然我们不能强制的垃圾回收，那我们怎么知道它能正常工作？我们对它又了解多少呢？脚本执行在此过程中暂停它为不可访问的资源释放内存它是不确定的它不会一次检查整个内存，而是在多个周期中运行它是不可预测的，但它会在必要时执行这是否意味着无需担心资源和内存分配问题?当然不是。如果我们一不小心，可能会产生一些内存泄漏。什么是内存泄漏？内存泄漏是软件无法回收的已分配的内存块。
博客
web前端 -关于this的面试题
01-05 258
1、默认绑定默认绑定通常是指函数独立调用，不涉及其他绑定规则。非严格模式下，this指向window，严格模式下，this指向undefined。01、题目1.1：非严格模式var foo = 123;function print(){this.foo = 234;console.log(this); // windowconsole.log(foo); // 234}print();非严格模式，print()为默认绑定，this指向window，所以打印window和234。这个fo
博客
JavaScript数组函数整理汇总
12-30 739
1、Array.isArray()我们列表中的第一项是 JavaScript 中的 isArray 方法，它确定传递的输入是否为数组。语法：在下面的代码中， arr 将是我们要检查的输入，是否为数组。isArray() 函数的结果将是一个布尔值。Array.isArray(arr)示例：Array.isArray([1, ‘something’, true]);// trueArray.isArray({anything: 123});// falseArray.isArray(‘som
博客
web前端 - JavaScript 中一流函数的日常用例
12-22 175
什么是“一流函数”？维基百科的定义：在计算机科学中，如果一种编程语言将函数视为一等公民，那么它就被称为具有一等函数。这意味着该语言支持将函数作为参数传递给其他函数，将它们作为其他函数的值返回，并将它们分配给变量或将它们存储在数据结构中。例如，在 JavaScript 中，我们可以将一个函数分配给一个变量。var sum = function(a, b) {return a + b;}var total = sum(10, 1);如果我们是第一次阅读，这个定义会有点混乱。然而，事实是我们在不知
博客
web前端 - 10 个很酷、很实用JavaScript特性
12-16 1463
1、空运算符如果左侧为空或未定义，则此运算符返回右侧值。const data= null ?? ‘data’;console.log(data);// expected output: “data”const data1 = 1 ?? 4;console.log(data1);// expected output: 1逻辑 OR (||) 运算符执行相同的操作，但是，当将 0 作为值传递时，它将视为 false，这使得它容易用于数字。function add(a, b) {val1 =
博客
web前端 - Vue常见问题汇总及解决方案
12-08 1023
Q1：安装超时(install timeout)方案有这么些:cnpm : 国内对npm的镜像版本/*cnpm website: https://npm.taobao.org/*/npm install -g cnpm --registry=https://registry.npm.taobao.org// cnpm 的大多命令跟 npm 的是一致的,比如安装,卸载这些yarn 和 npm 改源大法//使用 nrm 模块 : www.npmjs.com/package/nrmnpm co
博客
web前端 - 6 种在 JavaScript 中清理代码的方法
12-01 935
1、删除不必要的 return 语句：检查函数内部是否需要存在。可以简化为一行代码吗？如果是这样，JavaScript 允许使用隐式返回来简化代码。从下面检查代码。在那里，我删除了额外的变量声明 usersFound，让我可以选择删除未使用的 return 语句。// This function receives as arguments an array of objects,// [{ firstName: ‘Test’ }, { firstName: ‘Ignacio’ }, …]// Th
博客
web前端 - 正则表达式的整理汇总
11-25 920
很多不太懂正则的朋友，在遇到需要用正则校验数据时，往往是在网上去找很久，结果找来的还是不很符合要求。所以我最近把开发中常用的一些正则表达式整理了一下，在这里分享一下。给自己留个底，也给朋友们做个参考。01、手机机身码(IMEI)/^\d{15,17}$/02、必须带端口号的网址(或ip)/^((ht|f)tps?????/)?[\w-]+(.[\w-]+)+:\d{1,5}/?$/03、网址(url,支持端口和"?+参数"和"#+参数)/(((ht|f)tps?)????/)?[\w-]+(.

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值