vlambda博客
学习文章列表

1、首先确定你的目标或道路

• 你想作为一名Web开发人员在一家公司工作，这是最普遍的原因。
• 你想以自由开发人员的身份来开始自己的业务或代理。
• 你可以成为其他公司的顾问。
• 你可以创建自己的应用来赚钱。
• 编码是你的业余爱好。

2、Web开发的基本工具和软件

• 计算机和操作系统： 如果没有计算机和操作系统，则无法编写代码。要学习Web开发，你不需要任何高端计算机（如果你拥有的话，那么更好……）。你可以使用任何类型的中型笔记本电脑或台式机。对于操作系统，可以使用适合你的MacOS，Windows（最新版本）或Linux。
• 文本编辑器/ IDE： 毫无疑问，VSCode适用于大多数情况和大多数语言。它具有良好的性能，出色的扩展性，内置的终端功能以及大量功能。在2019年 StackOverFlow 调查中，VSCode也是开发人员的首选。你还可以选择其他一些不错的选择，例如Sublime Text或Atom。如果我们谈论IDE，那么是Visual Studio（ASP.net或 C＃ ），Eclipse和Netbeans（Java）。是不错的选择。
• Web浏览器： 大多数开发人员的首选是Chrome或Firefox。Chrome速度很快，并且使用V8引擎（JavaScript引擎）。Firefox也取得了长足的进步，其中的一些好东西不在chrome浏览器中。两种浏览器都有出色的开发工具，可以对Web开发中的问题进行故障排除。
• 终端： 您将使用一些系统命令来使用CLI进行很多工作。您可以将默认或第三方终端用于您的Web开发项目。Bash，Zsh，Powershell，Git Bash，iTerm，Hyper这些都是可以使用的选项。
• 设计（可选）：并不是每个人都需要学习。在公司中，有专门的团队来制作图像，徽标或草图，但是如果您是自由职业者，则可能必须学习Adobe XD，Photoshop，Sketch或Figma。

3、从HTML和CSS开始

• HTML5（语义元素，属性，文档类型等）
• CSS基础知识颜色，字体，位置，盒子模型等。
• CSS Grid和Flexbox对齐内容或创建列。
• CSS自定义属性

4、响应式布局

• 了解如何设置视口
• 媒体查询不同的屏幕尺寸。
• 流体宽度
• 雷姆单位
• 移动优先

5、自定义可重用CSS组件

6、CSS框架

• Bootstrap是最流行的CSS框架。学习引导程序也有助于学习其他框架。
• Tailwind CSS是其他正在流行的框架，与其他框架几乎没有什么不同。它是一组实用程序类，因此您可以创建自己的按钮和其他看起来与其他按钮确实不同的东西。它们也是高度可定制的。
• 物化
• 布尔玛

7、前端必须语言：JavaScript

• JavaScript基础知识（变量，数据类型，函数，条件等）
• DOM（文档对象模型）
• JSON（JavaScript对象表示法）
• 提取API（请求/响应/ Ajax）
• 如果您想转向React，Vue，Angular或其他框架，现代JS（ES6）概念对于学习非常重要。

8、一些重要工具

• Git （版本控制）和Github是您肯定会在2020年学习的最受欢迎的工具。Git在与其他开发人员协作和管理代码方面有很多帮助。您还可以选择其他一些选项，例如GitLab，Bitbucket和其他一些选项。
• 了解如何使用浏览器开发工具。无论是chrome还是firefox，您都应该知道如何使用不同的选项卡，例如元素选项卡，javascript控制台，用于请求和响应的网络选项卡，应用程序选项卡以及其他用于不同目的的选项卡。
• 大多数IDE或文本编辑器都具有添加扩展名或插件的功能，这对提高生产力和构建Web应用程序非常有帮助。例如，Visual Studio代码中的VSCode扩展可帮助下载扩展，例如实时服务器或实时saas编译器以与React一起使用。
• Emmet是另一个很棒的工具，它允许您编写非常快速的HTML和CSS，这有助于提高开发人员的生产力。
• 学习使用javascript软件包管理器，例如NPM和Yarn。如果您正在使用Javascript框架或库（例如React），那么这些软件包管理器将使用很多，但是对于其他语言（例如Python或Php），您将使用不同的软件包管理器。
• 如果要在前端安装NPM软件包，则必须使用Webpack或Parcel。如果要创建自己的模块，或者要将一个javascript文件带到另一个javascript文件，则默认情况下不能仅使用浏览器来执行此操作，因此需要Webpack或Parcel对其进行捆绑。

9、基本部署

• 域注册（Namecheap，Google等）
• 托管托管（InMotion，Hostgator，Bluehost等）
• 静态主机（Netlify，Github页面）
• SSL证书。
• FTP，SFTP（文件传输协议）非常适合小型应用程序。
• SSH（安全外壳），用于高级应用程序。
• CLI和Git。

10、前端框架和状态管理

• React：  React库是最流行的Web开发学习方法，与其他框架和库相比，它相当容易。React开发人员还有很多工作要做。您可以将 Redux和 Context API与Hooks一起使用以进行状态管理。
• Vue：  Vue也越来越受欢迎，开发人员也更喜欢学习Vue。与React和Angular相比，Vue最容易学习。VueX是为视图而构建的状态管理器。
• Angular： 此框架通常在大型组织中使用。它具有相当陡峭的学习曲线。用Angular学习 TypeScript也很好。它允许您使用可选的静态类型并支持ES2015的功能。NGRX和 Services是可以学习此框架的良好状态管理器。

• 如果您具有这三个框架之一的知识，那么您还可以使用 Svelte ，它是一个JavaScript编译器，可让您生成纯净的原始JS代码并帮助您轻松构建用户界面。
• 了解服务器端渲染。 NextJS （React）和 NuxtJS （Vue）是允许您在服务器上运行React和Vue的框架。两者都有很好的功能，例如更好的SEO，文件系统路由，自动代码拆分，静态导出，JS中的CSS和许多其他功能。
• 静态网站生成器：Gatsby（反应式）和Gridsome（Vue）

11、服务器端语言（选择一种）

• NodeJS（不是语言，而是运行时环境）
• Python（非常适合初学者）
• Java（适合大型组织）
• Php（适合自由职业）
• Ruby（2020年少两极）
• C＃
• Go

12、服务器端框架（选择一项）

• Node.js – Express，Koa，Adonis，Feather.js，Nest.js
• Python：Django，Flask，
• Java：Spring MVC，Grails
• PHP：Laravel，Symfony，Codeignitor，Slim
• Ruby：Sinatra上的Ruby on Rails
• C＃：ASP.NET MVC
• Go： Revel

13、数据库（选择一项）

• 关系数据库：RDBMS仍然是最受欢迎的数据库。最喜欢使用PostgreSQL，MySQL，MS SQL。
• NoSQL：MongoDB，RethinkDB，CouchDB
• 云数据库：Firebase，Azure Could DB，AWS
• 轻量级和缓存：Redis，SQLlite，NeDB

14、CMS：内容管理

• 传统CMS：WordPress（PHP），Drupal（PHP），Keystone（Javascript），Enduro（Javascript）
• 其他CMS ：DEDECMS，帝国CMS，PHPcms，Prismic.io，Strati。

15、部署和DevOps

• SSH（安全外壳）
• Web服务器环境：NGINX，Apache
• 应用程序托管：Linode，Heroku，AWS，Azure，Now。
• 虚拟化：Docker，Vagrant
• 测试：单元，功能，集成等
• 负载平衡，监视，安全性。