首先，什么是前端？前端就是我们肉眼直观看到的网页是片面的，不全面的，但是大意基本是一样的。闲话不多说，说说干货：前端一般分为前端设计和前端开发。前端设计一般可以理解为网站的视觉设计，前端开发就是网站的前端代码实现，包括基本的HTML和CSS以及JavaScript/ajax，最新的HTML5、CSS3进阶版和SVG。如上图：这是百度的搜索页面，大致可以分为五部分：第一部分由1组成；第二部分由2、3、4组成；第三部分为5（其中包括元素6、7、8、9）；10构成第四部分；11是第五部分。分析完网页的组成部分，再说说它的核心技术，也就是前面提到的HTML、CSS和JavaScript/ajax。HTML全称为超文本标记语言，是一种标记语言。它包括一系列标签。通过这些标签，可以统一网络上的文档格式，将分散的互联网资源连接成一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，可以解释文字、图形、动画、声音、表格、链接等。超文本是一种组织信息的方式。它通过超链接将文本中的文字、图形和其他信息媒体联系起来。这些相互关联的信息媒体可能是同一个文本，也可能是其他文件，或者是位于相距遥远的计算机上的文件。这种信息组织方式将分布在不同地点的信息资源以随机方式连接起来，为人们查找和检索信息提供了便利。CSS、JavaScript、ajax用于给网页的效果增加更强的视觉冲击力，让网页更加丰富多彩。上图是程序员在百度初学者眼中看到的。学习一门新技术，往往不知道如何开始，从哪里开始，又是什么终点。为什么有的人月入10k，有的人月入40k，就看你的技术能不能提高生产力，创造更多的价值。学习前端也是如此。要想系统全面，前期就要有追根究底的精神。遇到问题一定要排查原因，直到解决为止。我把前端需要掌握的技术点做一个总结。1.首先确定你的目标或路径我们会讨论很多技术、趋势和工具，但我们不想让你不知所措，所以你需要先决定你想做什么才能成为一名Web开发人员，因为这将帮助您选择合适的工具。和学习技术。成为Web开发人员的原因有很多，下面列出了一些选择因素：您想作为Web开发人员为一家公司工作，这是最常见的原因。您想以自由开发者的身份创办自己的企业或代理机构。你可以成为其他公司的顾问。您可以创建自己的应用程序来赚钱。编码是你的爱好。从以上感兴趣的领域或目标中，您可以为您的目标选择合适的工具和技术。如果你的目标是成为一名前端开发人员，那么你可以选择前端开发的工具和技术。后端和全栈开发也是如此。2、Web开发的基本工具和软件电脑和操作系统：没有电脑和操作系统，就写不出代码。要学习Web开发，您不需要任何高端计算机（如果您有一台，那就更好了……）。您可以使用任何类型的中型笔记本电脑或台式机。对于操作系统，您可以使用适合您的MacOS、Windows（最新版本）或Linux。文本编辑器/IDE：毫无疑问，VSCode适用于大多数情况和大多数语言。它具有良好的性能、强大的可扩展性、内置的终端功能和大量的功能。VSCode也是2019年StackOverFlow调查中开发人员的首选。您还可以选择其他一些不错的选项，例如SublimeText或Atom。如果我们谈论IDE，那就是VisualStudio（ASP.net或C#）、Eclipse和Netbeans(Java)。是个不错的选择。Web浏览器：大多数开发人员的首选是Chrome或Firefox。Chrome速度很快，并且使用V8引擎（JavaScript引擎）。Firefox也取得了长足的进步，一些chrome没有的好东西。这两种浏览器都具有出色的开发人员工具，可用于解决Web开发中的问题。终端：您将使用一些系统命令通过CLI完成大量工作。您可以为Web开发项目使用默认或第三方端点。Bash、Zsh、Powershell、GitBash、iTerm、Hyper都是可以使用的选项。设计（可选）：不是每个人都需要学习。在公司里，有专门的团队来创建图像、标识或草图，但如果你是自由职业者，你可能必须学习Adob??eXD、Photoshop、Sketch或Figma。3.从HTML和CSS开始HTML和CSS是Web开发的基本构建块。无论您的Web应用程序多么先进，或者您使用什么框架和后端语言，您都必须使用HTML和CSS来构建您的前端应用程序。因此，这是Web开发中首先要学习的东西。HTML5（语义元素、属性、文档类型等）CSS基础知识颜色、字体、位置、盒模型等。CSS网格和Flexbox用于对齐内容或创建列。CSS自定义属性4.响应式布局您的应用程序应该可以在所有类型的设备上查看和使用，例如智能手机、平板电脑、台式机、iPad或任何其他屏幕尺寸。因此，了解创建响应式设计或布局很重要。让我们来看看一些重要的主题。了解如何为不同的屏幕尺寸设置视口媒体查询。FluidWidthRemUnitsMobileFirst5.自定义可重用CSS组件与其依赖像Bootstrap这样的大型CSS框架，不如创建您自己的模块化、可重用CSS组件以用于您的项目。如果您构建自己的自定义设计，则无需导入完整的库。您创建仅需要特定UI的组件。最近也出现了帮助更有效地编写CSS代码的新趋势。如果您已经了解CSS，则无需花费大量精力学习SaaS。SaaS是CSS预处理器，可为标准CSS添加更多功能并使其更高效。您可以使用变量、嵌套和条件语句来减少重复并提高CSS中的效率。您还可以为每个可重用组件创建单独的Saas文件。Sass确实节省了很多时间，所以你绝对应该在2020年学习它。6.CSS框架学习CSS框架不像去年那么流行，但它对于不擅长设计的开发人员来说仍然非常相关或有用.有许多流行的CSS框架可用，下面列出了其中的一些。Bootstrap是最流行的CSS框架。学习bootstrap对于学习其他框架也很有帮助。TailwindCSS是另一个越来越受欢迎的框架，它与其他框架没什么不同。它是一组实用程序类，因此您可以创建自己的按钮和其他看起来与其他按钮完全不同的东西。它们也是高度可定制的。MaterializedBulma7.前端所需语言：JavaScript学完HTML和CSS，接下来要学的是VanillaJavascript。对于开发人员来说，掌握javascript的基础知识是非常重要的。您将使用服务器端语言（如PHP、Python或ASP.net）中的大量javascript，如果您想将其与React、Angular、NodeJS、Vue或任何其他javascript框架一起使用，则非常需要学习这种语言或图书馆。以下是您应该在javascript中涵盖的一些重要主题...JavaScript基础知识（变量、数据类型、函数、条件等）DOM（文档对象模型）JSON（JavaScript对象表示法）如果需要，提取API（请求/响应/Ajax）要迁移到React、Vue、Angular或其他框架，学习现代JS(ES6)概念非常重要。8.一些重要的工具Web开发中会用到一些工具。这些工具将帮助您调试、提高生产力、管理代码、与其他开发人员协作等等。让我们讨论其中的一些工具。Git（版本控制）和Github是您在2020年肯定会学习的最受欢迎的工具。Git在与其他开发人员协作和管理代码方面有很大帮助。您还可以选择其他一些选项，例如GitLab、Bitbucket等。了解如何使用浏览器开发工具。无论是chrome还是firefox，你都应该知道如何使用不同的选项卡，例如元素选项卡、javascript控制台、用于请求和响应的网络选项卡、应用程序选项卡以及其他用于不同目的的选项卡。大多数IDE或文本编辑器都能够添加扩展或插件，这对于提高生产力和构建Web应用程序非常有帮助。例如，VisualStudioCode中的VSCode扩展有助于下载实时服务器或实时saas编译器等扩展以与React一起使用。Emmet是另一个很棒的工具，它允许您编写非常快速的HTML和CSS，这有助于提高开发人员的工作效率。学习使用javascript包管理器，例如NPM和Yarn。如果您使用的是Javascript框架或库（如React），那么您将使用很多这些包管理器，但对于其他语言（如Python或Php），您将使用不同的包管理器。如果要在前端安装npm包，必须使用webpack或者parcel。如果你想创建自己的模块，或者将一个javascript文件带到另一个javascript文件，默认情况下你不能只用浏览器来做，所以你需要Webpack或Parcel来捆绑它。9.基本部署至此，当你知道前端开发应该学习哪些工具或技术后，你就需要知道如何在互联网上部署前端网站了。如果您正在为小型企业构建一些小型应用程序、登陆页面或个人网站，您不需要仅仅因为AWS或DevOps很时髦就学习它们。你会让事情变得更复杂而不是简单。2020年需要学习一些部署工具和步骤。域名注册（Namecheap、Google等）托管托管（InMotion、Hostgator、Bluehost等）静态托管（Netlify、GithubPages）SSL证书。FTP、SFTP（文件传输协议）非常适合小型应用程序。SSH(SecureShell)，用于高级应用程序。CLI和Git。到目前为止我们讨论的任何工具、技术趋势或步骤都是前端开发的一部分。您还不知道该框架，但您可以为个人和小型企业构建网站，以及适合移动设备的布局。您还可以使用目前讨论的工具或技术部署小型应用程序或项目。如果你想应聘，学习一些前端框架，如React、Vue或Angular，那是非常棒的。10、前端框架和状态管理框架，让你做更高级的前端开发。框架为您提供了许多优势，例如可重用的组件、更有条理的UI或页面交互。这有利于协作，也有助于编写干净的代码。另外，了解状态管理。每个框架都有不同的方法。以下是2020年一些流行的框架和状态管理器。React：React库是学习Web开发的最流行的方式，与其他框架和库相比，它相当容易。React开发人员还有很多工作要做。您可以将Redux和ContextAPI与Hooks一起用于状态管理。Vue：Vue也越来越受欢迎，开发人员更喜欢学习Vue。与React和Angular相比，Vue是最容易学习的。VueX是为视图构建的状态管理器。Angular：这个框架经常在大型组织中使用。它有一个相当陡峭的学习曲线。用Angular学习TypeScript也很好。它允许您使用可选的静态类型并支持ES2015功能。NGRX和服务是很好的状态管理器，可以从这个框架中学习。可选学习：如果你了解这三个框架中的一个，你也可以使用Svelte，这是一个JavaScript编译器，可以让你生成干净、原始的JS代码，并帮助你轻松构建用户界面。了解服务器端渲染。NextJS(React)和NuxtJS(Vue)是允许您在服务器上运行React和Vue的框架。两者都有很好的功能，如更好的SEO、文件系统路由、自动代码拆分、静态导出、JS中的CSS等等。静态站点生成器：Gatsby(Reactive)和Gridsome(Vue)我们已经讨论了所有最前端的开发工具和技术。现在让我们讨论成为后端开发人员或全栈开发人员的语言和技术。11.服务器端语言（选择一种）你应该至少知道一种服务器端语言。要在2020年选择一种语言，这里有一些选项...NodeJS（不是一种语言，而是一种运行时环境）Python（非常适合初学者）Java（适合大型组织）Php（适合自由职业者）Ruby（2020C#GoNote:无论你喜欢学习哪种服务器端语言，请确保你了解该语言中使用的数据结构和算法。数据结构和算法将帮助你将数据呈现给用户，并将帮助你优化Web应用程序中的代码。我们特别建议您专注于使用数组和字符串（最重要的）。您将使用这两种方法。12.服务器端框架（选择一个）一旦您学习了您选择的服务器端语言，您可以使用其中一个语言框架。您可以选择以下选项之一...Node.js-Express、Koa、Adonis、Feather.js、Nest.jsPython：Django、Flask、Java：SpringMVC、GrailsPHP：Laravel、Symfony、Codeignitor,SlimRuby：Sinatra上的RubyonRailsC#：ASP.NETMVCGo：Revel13，数据库（选择一项）大多数Web应用程序都需要一个地方来存储数据。某些技术或某些语言在某些情况下可以很好地与某些数据库配合使用。例如：在Mern堆栈中，M代表MongoDB，在LAMP堆栈中，M代表MySQL，但这完全取决于您要为应用程序选择哪个数据库。我们将讨论2020年一些流行的数据库。关系数据库：RDBMS仍然是最受欢迎的数据库。最喜欢使用PostgreSQL、MySQL、MSSQL。NoSQL：MongoDB、RethinkDB、CouchDB云数据库：Firebase、AzureCouldDB、AWSLightweight和缓存：Redis、SQLlite、NeDBDataMapper)SQL（结构化查询语言）。GraphQL：（可选）你可以了解一下现在很流行的GraphQL。这是API的查询语言。它有一个简单的类似JSON的语法并且很容易实现。14.CMS：内容管理你绝对应该了解内容管理系统，特别是如果你是一名自由职业者。CMS用于向您的网站或应用程序添加内容。客户能够更新自己的内容非常好。传统CMS：WordPress(PHP)、Drupal(PHP)、Keystone(Javascript)、Enduro(Javascript)其他CMS：DEDECMS、ImperialCMS、PHPcms、Prismic.io、Strati。15.部署和DevOps托管全栈或后端应用程序比仅前端应用程序要复杂一些，尤其是当您有数据库时。确保您知道如何使用CLI进行部署。了解以下有关部署应用程序的信息。在大多数公司中，有不同的团队致力于DevOps。因此，了解DevOps是完全可选的。您可以了解您是否正在从事自己的项目。SSH（安全外壳）Web服务器环境：NGINX、Apache应用程序托管：Linode、Heroku、AWS、Azure、Now。虚拟化：Docker、Vagrant测试：单元、功能、集成等。负载平衡、监控、安全。上面所有的技术工具都足以让你成为前端、后端或全栈开发人员。根据您的最终目标选择正确的工具和技术。对web前端技术感兴趣的朋友可以加入我们的学习圈。这是编程工作的第六个年头。下面给大家分享一些学习方法和实际开发中需要注意的细节。784-783-012秋装。如何从零开始学习前端。看看前辈们是如何在编程世界里昂首阔步前行的！持续更新最新的教程和学习方法（web前端系统学习路线，详细的前端项目实战教程，PDF），想要学习web前端，或者转行，或者大学生，想要的人为提高工作能力，欢迎在读的朋友加入。
