大数据开发初学者学习路线
This beginner's roadmap lays out all the basics for web development. We’re going to go through each step–from figuring out what code editor to use, to what JavaScript framework or back-end language you can pick up. And we’ll also include links to resources where you can learn these skills.
该初学者的路线图列出了Web开发的所有基础知识。 我们将经历每个步骤-从确定要使用的代码编辑器，到可以选择JavaScript框架或后端语言。 我们还将包括指向资源的链接，您可以在其中学习这些技能。
The fact is, if you’re just starting out, all you need to know right now are the basics. You really don’t need to know every single technology, tool, or language in existence right from the get-go. (You’ll cross that bridge when you come to it, believe me!)
事实是，如果您刚刚起步，那么现在您需要了解的只是基础知识。 您真的不需要一开始就了解每种技术，工具或语言。 (相信我，您将跨过那座桥！)
By the end of this guide, you’ll have an understanding of the basics of web development, what skills you need to know, and where to find them!
在本指南的最后，您将了解Web开发的基础知识，需要了解哪些技能以及在何处找到它们！
1: What is web development: How websites work, front-end vs back-end, code editor
1：什么是网站开发 ：网站的工作方式，前端与后端，代码编辑器
2: Basic front-end: HTML, CSS, and JavaScript
2：基本前端： HTML，CSS和JavaScript
3: Tools: Package managers, build tools, version control
3：工具 ：程序包管理器，构建工具，版本控制
4a: Additional front-end: Sass, responsive design, JavaScript frameworks
4a：其他前端： Sass，响应式设计，JavaScript框架
4b: Basic back-end: Server and database management, programming language
4b：基本后端：服务器和数据库管理，编程语言
In this roadmap, I recommend doing Steps 1, 2, and 3 in order. Then, depending on whether you want to focus on more front-end or back-end, you can do steps 4a or 4b in any order.
在此路线图中，我建议按顺序执行步骤1、2和3。 然后，根据要集中在前端还是后端上，可以按任意顺序执行步骤4a或4b。
I personally think it’s good idea for front-end web developers to know at least a bit of back-end, and vice versa. At the very least, knowing the basics of both will help you figure out if you like front-end or back-end better 🙂
我个人认为前端Web开发人员至少了解一点后端是个好主意，反之亦然。 至少，了解两者的基础知识将帮助您弄清楚自己是更喜欢前端还是后端🙂
You can also check out the updated version of this article on my blog!
1：什么是Web开发？ (1: What is web development?)
Before we get into actual coding, let’s first take a look at some general information on what web development is: how websites work, the difference between front and back-end, and using a code editor.
在进行实际编码之前，让我们首先看一下有关什么是Web开发的一般信息：网站如何工作，前端与后端之间的区别以及使用代码编辑器。
网站如何运作？ (How do websites work?)
All websites, at their most basic, are just a bunch of files that are stored on a computer called a server. This server is connected to the internet. You can then load that website through a browser (like Chrome, Firefox, or Safari) on your computer or your phone. Your browser is also called the client in this situation.
从根本上讲，所有网站都是一堆文件，存储在称为服务器的计算机上。 该服务器已连接到互联网。 然后，您可以通过计算机或手机上的浏览器(例如Chrome，Firefox或Safari)加载该网站。 在这种情况下，您的浏览器也称为客户端 。
So, every time that you’re on the internet, you (the client) are getting and loading data (like cat pics) from the server, as well as submitting data back to the server (load moar cat pics!) This back and forth between the client and the server is the basis of the internet.
因此，每次您上网时，您(客户端)都会从服务器获取并加载数据(如cat pics)，并将数据提交回服务器( load moar cat pics！ )。客户端和服务器之间的双向通信是互联网的基础。
Anything that you can access in your browser is something that a web developer built. Some examples are small business websites and blogs on the simpler side, all the way up to very complex web apps like AirBnb, Facebook and Twitter.
您可以在浏览器中访问的任何内容都是由Web开发人员构建的。 一些例子是简单的小型企业网站和博客，一直到非常复杂的Web应用程序，例如AirBnb，Facebook和Twitter。
前端和后端有什么区别？ (What’s the difference between front-end and back-end?)
The terms “front end,” “back end,” and “full stack” web developer describe what part of the client/server relationship you’re working with.
术语“前端”，“后端”和“全栈” Web开发人员描述了您正在使用的客户端/服务器关系的哪一部分。
“Front end” means that you’re dealing mainly with the client side. It’s called the “front end” because it’s what you can see in the browser. Conversely, the “back end” is the part of the website that you can’t really see, but it handles a lot of the logic and functionality that is necessary for everything to work.
“前端”意味着您主要在与客户端打交道。 之所以称为“前端”，是因为您可以在浏览器中看到它。 相反，“后端”是网站上您真正看不到的部分，但是它处理了许多正常工作所必需的逻辑和功能。
One way you can think about this is that front-end web development is like the “front of house” part of a restaurant. It’s the section where customers come to see and experience the restaurant– the interior decor, seating, and of course, eating the food.
您可以考虑的一种方式是，前端Web开发就像是餐厅的“房屋前部”部分。 在这里，顾客可以看到并体验餐厅-室内装饰，座位，当然还有食物。
On the other hand, back-end web development is like the “back of house” part of the restaurant. It’s where deliveries and inventory are managed, and the process to create the food all happens. There’s a lot of things behind the scenes that the customers won’t see, but they will experience (and hopefully enjoy) the end product– a delicious meal!
另一方面，后端Web开发就像是餐厅的“后屋”部分。 在这里管理交货和库存，并完成所有创建食物的过程。 幕后有很多客户看不到的东西，但是他们会体验(并希望享受)最终产品–美味的一餐！
Fun illustrations aside, both front and back end web development serve different but very important functions.
除了有趣的插图，前端和后端Web开发都提供不同但非常重要的功能。
使用代码编辑器 (Using a code editor)
When you build a website, the most essential tool that you will use is your code editor or IDE (Integrated Development Environment). This tool allows you to write the markup and code that will make up the website.
建立网站时，最需要使用的工具是代码编辑器或IDE(集成开发环境)。 该工具允许您编写组成网站的标记和代码。
There are quite a few good options out there, but currently the most popular code editor is VS Code. VS Code is a more lightweight version of Visual Studio, Microsoft’s main IDE. It’s fast, free, easy to use, and you can customize it with themes and extensions.
有很多不错的选择，但是当前最流行的代码编辑器是VS Code。 VS Code是Microsoft主IDE Visual Studio的轻量级版本。 它快速，免费，易于使用，您可以使用主题和扩展名对其进行自定义。
Other code editors are Sublime Text, Atom, and Vim.
其他代码编辑器是Sublime Text ， Atom和Vim 。
If you’re just getting started, though, I’d recommend checking out VS Code, which you can download from their website.
不过，如果您只是入门，我建议您查看VS Code，您可以从他们的网站下载 。
Now that we’ve covered some of the broader concepts in what web development is, let’s get into more of the details– starting with the front end.
现在，我们已经涵盖了Web开发的一些更广泛的概念，让我们从前端开始更深入地研究细节。
2：基本前端 (2: Basic front-end)
The front-end of a website is made up of three types of files: HTML, CSS, and JavaScript. These files are what is loaded in the browser, on the client side.
网站的前端由三种类型的文件组成：HTML，CSS和JavaScript。 这些文件是客户端在浏览器中加载的文件。
Let’s take a closer look at each one of them.
让我们仔细看看它们中的每一个。
HTML (HTML)
HTML, or HyperText Markup Language, is the foundation of all websites. It’s the main file type that is loaded in your browser when you look at a website. The HTML file contains all the content on the page, and it uses tags to denote different types of content.
HTML或超文本标记语言是所有网站的基础。 这是浏览网站时浏览器中加载的主要文件类型。 HTML文件包含页面上的所有内容，并且使用标记来表示不同类型的内容。
For example, you can use tags to create headline titles, paragraphs, bulleted lists, images, and so on. HTML tags by themselves do have some styles attached, but they are pretty basic, like what you would see in a Word document.
例如，您可以使用标签创建标题，段落，项目符号列表，图像等。 HTML标记本身确实附加了一些样式，但是它们非常基本，就像您在Word文档中看到的那样。
CSS (CSS)
CSS, or Cascading Style Sheets, lets you style that HTML content so it looks nice and fancy. You can add colors, custom fonts, and layout the elements of your website however you want them to look. You can even create animations and shapes with CSS!
CSS或级联样式表可让您对HTML内容进行样式设置，使其看起来精美。 您可以添加颜色，自定义字体和布局网站元素，但是您希望它们看起来像。 您甚至可以使用CSS创建动画和形状！
There is a lot of depth to CSS, and sometimes people tend to gloss over it so they can move on to things like JavaScript. However, I can’t overestimate the importance of understanding how to convert a design into a website layout using CSS. If you want to specialize in front-end, it’s essential to have really solid CSS skills.
CSS有很多深度，有时人们倾向于掩盖它，以便继续使用JavaScript之类的东西。 但是，我不能高估理解使用CSS将设计转换为网站布局的重要性。 如果您想专门研究前端，那么拥有真正扎实CSS技能至关重要。
JavaScript (JavaScript)
JavaScript is a programming language that was designed to run in the browser. Using JavaScript, you can make your website dynamic, meaning it will respond to different inputs from the user, or other sources.
JavaScript是一种旨在在浏览器中运行的编程语言。 使用JavaScript，您可以使网站动态化，这意味着它将响应用户或其他来源的不同输入。
For example, you can build a “Back to Top” button that when the user clicks it, they’ll scroll back up to the top of the page. Or you can build a weather widget that will display today’s weather based on the user’s location in the world.
例如，您可以构建一个“返回首页”按钮，当用户单击该按钮时，他们将向后滚动到页面顶部。 或者，您可以构建一个天气小部件，该小部件将根据用户在世界上的位置显示今天的天气。
Especially if you want to develop your skills later on with a JavaScript framework like React, you’ll understand more if you take the time to learn regular vanilla JavaScript first. It’s a really fun language to learn, and there’s so much you can do with it!
尤其是如果您想稍后使用React之类JavaScript框架来发展自己的技能，那么如果您花时间先学习常规的普通JavaScript，您将会了解更多。 这是一种非常有趣的语言，您可以做很多事情！
在哪里学习HTML，CSS和JavaScript (Where to learn HTML, CSS and JavaScript)
I often get asked what the best places to learn coding are, and I will usually tell them some of the following resources. Also, I have a more in-depth list of the best courses to learn web development on my blog– you might find it helpful!
我经常被问到最好的学习编码的地方是什么，我通常会告诉他们以下一些资源。 另外，我在博客上还提供了更深入的学习Web开发的最佳课程列表，您可能会发现它很有帮助！
Note: Some of the links below (the ones to paid courses and books) are affiliate links, which means I’ll get a commission if you buy through them at no additional cost to yourself. It’s one way you can support me in creating helpful resources like this one!
注意 ：以下某些链接(指向付费课程和书籍的链接)是会员链接，这意味着如果您通过购买无偿购买，我将获得佣金。 这是支持我创建此类有用资源的一种方式！
freeCodeCamp
freeCodeCamp
One of my favorite places to recommend is freeCodeCamp. It’s an online coding bootcamp that is non-profit and completely free! I love this option because if you’re a beginner and not completely sure if coding is for you, it’s a low pressure, risk-free way to see if you like it.
我最喜欢推荐的地方之一是freeCodeCamp 。 这是一个非盈利且完全免费的在线编码训练营！ 我喜欢这个选项，因为如果您是一个初学者，并且不确定完全适合您的编码，那么这是一种低压力，无风险的方式来查看您是否喜欢它。
One downside to freeCodeCamp is that while they do have an incredible curriculum with a built-in coding environment, they don’t have structured videos as part of it.
freeCodeCamp的一个缺点是，尽管他们的确拥有内置编码环境的令人难以置信的课程，但他们并未将结构化视频作为其中的一部分。
So if you really like learning from videos, here are a few other options:
因此，如果您真的喜欢从视频中学习，这里还有其他一些选择：
Team Treehouse
团队树屋
Team Treehouse is a premium online learning platform that is video based and has multiple tracks that you can follow. They even have an online Tech Degree program which is like an online bootcamp that you can complete in 4-5 months.
Team Treehouse是一个高级的在线学习平台，该平台基于视频，并且可以跟踪多个曲目。 他们甚至有一个在线技术学位课程，就像一个在线训练营，您可以在4-5个月内完成。
Unfortunately, Treehouse isn’t free, but they do have different monthly or yearly plans depending on your budget. They have a free 7-day trial so you can see if you like it, and I can also give you a deal where you can get $100 off of 1 year of their Basic Plan. If you’re fairly certain you want to get into web development, Team Treehouse is a great place to learn.
不幸的是，Treehouse不是免费的，但是根据您的预算，它们确实有不同的月度或年度计划。 他们有7天的免费试用期 ，您可以看一下是否喜欢它，我也可以为您提供一笔优惠，您可以在其基本计划的1年中获得100美元的优惠 。 如果您确定要进入Web开发，Team Treehouse是一个学习的好地方。
If you’re more of a fan of one-off video courses, there are some free and paid options:
如果您更喜欢一次性视频课程，则有一些免费和付费选项：
Wes Bos
韦斯·博斯
Wes Bos has free courses on learning Flexbox, CSS Grid, and JavaScript that are excellent. I just went through his CSS Grid course, and it was really thorough and also fun. Wes is a great teacher!
Wes Bos提供了有关学习Flexbox ， CSS Grid和JavaScript的出色的免费课程。 我刚刚完成了他CSS Grid课程，这确实很彻底，也很有趣。 韦斯是一位了不起的老师！
Udemy
乌迪米
Udemy is an online learning platform with a lot of great courses as well. One in particular that you might like is The Advanced CSS and Sass course by Jonas Schmedtmann– this paid course covers CSS grid, flexbox, responsive design, and other CSS topics!
Udemy是一个在线学习平台，其中还包含许多很棒的课程。 您可能会特别喜欢Jonas Schmedtmann的“高级CSS和Sass”课程 ，该课程涵盖CSS网格，flexbox，响应式设计和其他CSS主题！
YouTube
的YouTube
There are also a ton of free video resources on YouTube:
YouTube上还有大量的免费视频资源：
Traversy Media, probably the biggest web development channel out there, has an HTML Crash Course and CSS Crash Course.
Traversy Media可能是目前最大的Web开发渠道，其中包含HTML Crash Course和CSS Crash Course 。
DesignCourse, a channel focused on web design and front-end, has an HTML & CSS tutorial for as well.
DesignCourse是一个专注于网页设计和前端的频道，也提供HTML和CSS教程 。
And freeCodeCamp has their own YouTube channel, with videos like a Learn JavaScript course and other in-depth courses.
freeCodeCamp拥有自己的YouTube频道，其中包含诸如学习JavaScript课程和其他深入课程之类的视频。
Books and articles on web development
有关网络开发的书籍和文章
If you’re more of a reading person, I would highly recommend the following:
如果您更喜欢读书，我强烈建议您：
The incredibly popular Jon Duckett books, on HTML & CSS, and JavaScript & jQuery. These books are not your dense, run-of-the-mill textbooks at all. They are beautifully designed, really well-written, and have lots of photos and images to help teach the material.
乔恩·达克特(Jon Duckett)受欢迎的书籍 ，有关HTML和CSS，以及JavaScript和jQuery。 这些书根本不是您的常识课本。 他们的设计精美，写得很好，并配有许多照片和图像来帮助教授这些材料。
Eloquent JavaScript is another book that I really like. You can read it for free on their website, or buy a paper copy from Amazon if you like physical books. I have this one myself, and I really like it!
出色JavaScript是我非常喜欢的另一本书。 您可以在他们的网站上免费阅读它，或者，如果您喜欢实体书，可以从亚马逊购买纸质版本 。 我自己有这个，我真的很喜欢！
If you'd like to see more book recommendations, check out my post on recommended books for learning web development.
如果您想查看更多推荐书，请查看我在推荐书中的文章， 以学习网络开发 。
And last but not least, some websites that have great articles and other resources are:
最后但并非最不重要的是，一些网站上有不错的文章和其他资源是：
3：工具 (3: Tools)
Let’s get into some other front-end technologies now. As we mentioned, HTML, CSS, and JavaScript are the basic building blocks of front-end web development. In addition to them, there are a few other tools that you’ll want to learn.
现在让我们进入其他一些前端技术。 如前所述，HTML，CSS和JavaScript是前端Web开发的基本构建块。 除了它们之外，您还需要学习其他一些工具。
包装经理 (Package managers)
Package managers are online collections of software, much of it open source. Each piece of software, called a package, is available for you to install and use in your own projects.
软件包管理器是在线软件集合，其中大部分是开源的。 每个软件(称为软件包)都可供您在自己的项目中安装和使用。
You can think about them like plugins– instead of writing everything from scratch, you can use helpful utilities that other people have written already.
您可以像插件一样考虑它们–可以从头开始编写所有有用的实用程序，而不必从头开始编写所有内容。
The most popular package manager is called npm, or Node Package Manager, but you can also use another manager called Yarn. Both are good options to know and use, although it’s probably best to start out with npm.
最受欢迎的软件包管理器称为npm或Node Package Manager，但您也可以使用另一个名为Yarn的管理器。 两者都是了解和使用的好选择，尽管最好从npm开始。
If you’re curious to learn more, you can read this article on the basics of using npm.
如果您想了解更多信息，可以阅读有关使用npm的基础知识的本文。
构建工具 (Build tools)
Module bundlers and build tools like Webpack, Gulp, or Parcel, are another essential part of the front-end workflow.
模块打包器和Webpack，Gulp或Parcel等构建工具是前端工作流的另一个重要组成部分。
On a basic level, these tools run tasks and process files. You can use them to compile your Sass files to CSS, transpile your ES6 JavaScript files down to ES5 for better browser support, run a local web server, and many other helpful tasks.
从根本上讲，这些工具运行任务和过程文件。 您可以使用它们将Sass文件编译为CSS，将ES6 JavaScript文件转换为ES5，以获得更好的浏览器支持，运行本地Web服务器以及许多其他有用的任务。
Gulp, technically a task runner, has a suite of npm packages that you can use to compile and process your files.
Gulp从技术上讲是一个任务运行器，它具有一套npm软件包，可用于编译和处理文件。
Webpack is a super powerful bundler that can do everything Gulp can do plus more. It’s used a ton in JavaScript environments, particularly with JavaScript Frameworks (which we’ll get to in a bit). One down side of Webpack is that it requires a lot of configuration to get up and running, which can be frustrating.
Webpack是一个超级强大的捆绑器，可以完成Gulp可以做的所有事情以及更多事情。 在JavaScript环境中，尤其是在JavaScript框架(我们将稍后介绍)中，它花了很多时间。 Webpack的缺点是它需要大量配置才能启动和运行，这可能令人沮丧。
Parcel is a newer bundler like Webpack, but it comes pre-configured out of the box, so you can literally get it going in just a few minutes. And you won’t have to worry as much about configuring everything.
Parcel是像Webpack这样的较新的捆绑器，但是它是预先配置的开箱即用的，因此您实际上可以在几分钟之内完成它。 而且您不必担心配置所有内容。
Personally I like using Gulp for my own front-end workflows where I just want to compile my Sass and JavaScript files and not do too much else.
我个人喜欢将Gulp用于自己的前端工作流程，在这里我只想编译Sass和JavaScript文件，而不做太多其他事情。
Helpful links
有用的网址
If you’re interested in Gulp or Parcel, I have tutorials for both of those:
如果您对Gulp或Parcel感兴趣，那么我将为您提供两种教程：
If you want to learn more about Webpack check out the following YouTube videos:
如果您想了解有关Webpack的更多信息，请观看以下YouTube视频：
版本控制 (Version control)
Version control (also called source control) is a system that keeps track of every code change that you make in your project files. You can even revert to a previous change if you make a mistake. It’s almost like having infinite save points for your project, and let me tell you, it can be a huge lifesaver.
版本控制(也称为源代码控制)是一个系统，可跟踪您在项目文件中进行的每个代码更改。 如果输入有误，您甚至可以恢复到以前的更改。 这几乎就像为您的项目拥有无限的保存点，让我告诉您，这可能是一个巨大的救星。
The most popular version control system is an open source system called Git. Using Git, you can store all your files and their change history in collections called repositories.
最受欢迎的版本控制系统是称为Git的开源系统。 使用Git，您可以将所有文件及其更改历史记录存储在称为存储库的集合中。
You may have also heard of GitHub, which is an online hosting company owned by Microsoft where you can store all your Git repositories.
您可能还听说过GitHub ，这是Microsoft拥有的在线托管公司，您可以在其中存储所有Git存储库。
To learn Git and GitHub, GitHub.com has some online guides that explain how to get up and running. Traversy Media also has a YouTube video explaining how Git works.
要学习Git和GitHub， GitHub.com上有一些在线指南 ，解释了如何启动和运行。 Traversy Media还提供了YouTube视频，介绍Git的工作原理。
4a：其他前端 (4a: Additional front-end)
Once you have the basics of front-end down, there are some more intermediate skills that you will want to learn. I recommend that you look at the following: Sass, responsive design, and a JavaScript framework.
掌握了前端基础知识之后，您将需要学习其他一些中级技能。 我建议您查看以下内容：Sass，响应式设计和JavaScript框架。
萨斯 (Sass)
Sass is an extension of CSS that makes writing styles more intuitive and modular. It’s a really powerful tool. With Sass, you can split up your styles into multiple files for better organization, create variables to store colors and fonts, and use mixins and placeholders to easily reuse styles.
Sass是CSS的扩展，使书写样式更加直观和模块化。 这是一个非常强大的工具。 使用Sass，您可以将样式分成多个文件以更好地组织，创建变量以存储颜色和字体，并使用mixins和占位符轻松地重用样式。
Even if you just utilize some of the basic features, like nesting, you will be able to write your styles more quickly and with less headache.
即使您只是利用了嵌套等一些基本功能，也可以更快，更轻松地编写样式。
You can learn more about Sass in this Scotch.io tutorial, as well as a YouTube video by Dev Ed.
您可以在此Scotch.io教程中了解有关Sass的更多信息，以及Dev Ed的YouTube视频 。
响应式设计 (Responsive design)
Responsive design ensures that your styles will look good on all devices–desktops, tablets, and mobile phones. The core practices of responsive design include using flexible sizing for elements, as well as utilizing media queries to target styles for specific devices and widths.
自适应设计可确保您的样式在所有设备(台式机，平板电脑和手机)上看起来都不错。 响应式设计的核心实践包括对元素使用灵活的大小调整，以及利用媒体查询来针对特定设备和宽度的目标样式。
For example, instead of setting your content to be a static 400px wide, you can use a media query and set the content to be 50% width on desktop and 100% on mobile.
例如，您可以使用媒体查询，而不是将内容设置为静态的400像素宽，而将内容设置为在台式机上为50％宽度，在移动设备上为100％宽度。
Building your websites with responsive CSS is a must these days, as mobile traffic is outpacing desktop traffic in many cases.
如今，必须使用自适应CSS构建网站，因为在许多情况下，移动流量已经超过了桌面流量。
For more information on responsive design and making your websites responsive, check out this article. I also do live coding streams on my YouTube channel where I build a website from scratch and viewers can ask me questions in real time!
有关响应式设计和使您的网站具有响应性的更多信息，请参阅本文 。 我还在YouTube频道上进行实时编码流，在这里我从头开始构建网站，观众可以实时向我提问！
JavaScript框架 (JavaScript frameworks)
Once you have the basics of vanilla JavaScript down, you may want to learn one of the JavaScript frameworks (especially if you want to be a full-stack JavaScript developer).
掌握了普通JavaScript的基础知识之后，您可能想学习其中一个JavaScript框架(尤其是想成为一名全栈JavaScript开发人员时)。
These frameworks come with pre-built structures and components that allow you to build apps more quickly than if you started from scratch.
这些框架带有预构建的结构和组件，这些结构和组件使您可以比从头开始更快地构建应用。
Currently, you have three main choices: React, Angular, and Vue.
当前，您有三个主要选择：React，Angular和Vue。
React (technically a library), was created by Facebook and is the most popular framework right now. You can get started learning by going to the React.js website. If you’re interested in a premium React course, both Tyler McGinnins and Wes Bos have great courses.
React (从技术上讲是一个库)，是由Facebook创建的，是目前最受欢迎的框架。 您可以访问React.js网站开始学习。 如果您对高级React课程感兴趣，那么Tyler McGinnins和Wes Bos都有很棒的课程。
Angular was the first big framework, and it was created by Google. It’s still very popular, even though it has been surpassed by React recently. You can start learning Angular on their website. Gary from DesignCourse also has an Angular crash course on YouTube.
Angular是第一个大型框架，由Google创建。 尽管它最近已经被React超越，但它仍然非常受欢迎。 您可以在他们的网站上开始学习Angular。 DesignCourse的Gary还在YouTube上开设了Angular速成课程 。
Vue is a newer framework created by Evan You, a former Angular developer. While it is smaller in use than React and Angular, it is growing quickly and is also considered easy and fun to use. You can get up and running with it on the Vue website.
Vue是由前Angular开发人员Evan You创建的较新框架。 尽管它的使用比React和Angular小，但它正在Swift发展，并且也被认为易于使用和娱乐。 您可以在Vue网站上启动并运行它。
Which framework should you learn?
您应该学习哪个框架？
You might be wondering now, “Ok, well, which framework is the best?”
您可能现在想知道，“好吧，哪个框架是最好的？”
The truth is, they are all good. In web development, there’s almost never a single choice that is 100% the best choice for every person and every situation.
事实是，它们都很好。 在Web开发中，几乎没有一个选择是100％针对每个人和每种情况的最佳选择。
Your choice will most likely be determined by your job, or simply by which one you enjoy using the most. If your end goal is to land a job, try researching which framework seems to be the most common in potential job listings.
您的选择很可能取决于您的工作，或者仅取决于您最喜欢使用哪种工作。 如果您的最终目标是找到工作，请尝试研究在潜在工作清单中最常见的框架。
Don’t worry too much about which framework to choose. It’s more important that you learn and understand the concepts behind them. Also, once you learn one framework it will be easier to learn other ones (similar to programming languages).
不必担心选择哪种框架。 学习并理解其背后的概念更为重要。 同样，一旦学习了一个框架，学习其他框架(与编程语言类似)将变得更加容易。
Let’s move on now to our last section: back-end web development!
现在让我们继续上一节：后端Web开发！
4b：基本后端 (4b: Basic back-end)
The back-end, or the server-side of web development, is made up of three main components: the server, a server-side programming language, and the database.
Web开发的后端或服务器端由三个主要组件组成：服务器，服务器端编程语言和数据库。
服务器 (Server)
As we mentioned at the very beginning, the server is the computer where all the website files, the database, and other components are stored.
正如我们一开始提到的，服务器是一台存储所有网站文件，数据库和其他组件的计算机。
Traditional servers run on operating systems such as Linux or Windows. They’re considered “centralized” because everything–the website files, back-end code, and data are stored together on the server.
传统服务器在Linux或Windows等操作系统上运行。 之所以将它们视为“集中式”，是因为所有内容(网站文件，后端代码和数据)都存储在服务器上。
Nowadays there are also serverless architectures, which is a more decentralized type of setup. This type of application splits up those components and leverages third party vendors to handle each of them.
如今，也有无服务器架构，这是一种更加分散的设置类型。 这种类型的应用程序将这些组件分开，并利用第三方供应商来处理每个组件。
Despite the name, though, you still do need some kind of server, to at least store your website files. Some examples of serverless providers are AWS (Amazon Web Services) or Netlify.
尽管有这个名称，但是您仍然需要某种服务器，以至少存储您的网站文件。 无服务器提供程序的一些示例是AWS (Amazon Web Services)或Netlify 。
Serverless setups are popular because they are fast, cheap, and you don’t need to worry about server maintenance. They’re great for simple static websites that don’t require a traditional server-side language. However, for very complex applications the traditional server setup might be a better option.
无服务器设置之所以受欢迎是因为它们快速，便宜，并且您无需担心服务器维护。 它们非常适合不需要传统服务器端语言的简单静态网站。 但是，对于非常复杂的应用程序，传统的服务器设置可能是更好的选择。
To learn more about serverless setups, Netlify has an informative blog post that takes you through all the steps to setup a static website with deployment.
要了解有关无服务器设置的更多信息，Netlify有一篇内容丰富的博客文章 ，其中带您逐步完成设置带有部署的静态网站的所有步骤。
程式语言 (Programming language)
On the server, you need to use a programming language to write the functions and logic for your application. The server then compiles your code and conveys the result back to the client.
在服务器上，您需要使用编程语言来编写应用程序的功能和逻辑。 然后，服务器编译您的代码，并将结果传递回客户端。
Popular programming languages for the web include PHP, Python, Ruby, C# and Java. There is also a form of server-side JavaScript– Node.js, which is a run-time environment that can run JavaScript code on the server.
Web上流行的编程语言包括PHP，Python，Ruby，C＃和Java。 服务器端JavaScript还有一种形式-Node.js，这是一种可以在服务器上运行JavaScript代码的运行时环境。
There are also frameworks that you can use with each of these server-side languages. Just like the front-end JavaScript frameworks, these back-end frameworks are helpful tools that make building web apps much quicker.
您还可以使用每种服务器端语言使用的框架。 就像前端JavaScript框架一样，这些后端框架是有用的工具，可帮助您更快地构建Web应用程序。
Let’s check out a list of the most commonly used programming languages for web development:
让我们检查一下用于Web开发的最常用编程语言的列表：
C#
C＃
C# was developed as Microsoft’s competitor to Java. It’s used to make web apps with the .NET framework, game development, and can even be used to create mobile apps.
C＃被开发为Microsoft的Java竞争对手。 它用于通过.NET框架 ，游戏开发来制作Web应用程序，甚至可以用于创建移动应用程序。
Places to learn C#:C# Programming Yellow Book by Rob MilesC# Basics on Udemy
地方学习C＃： C＃编程黄皮书由罗布万里 在Udemy C＃基础知识
Java
Java
Java is one of the most popular programming languages, and is used in web apps as well as to build Android apps.
Java是最流行的编程语言之一，并且用于Web应用程序以及构建Android应用程序。
Places to learn Java:University of Helsinki’s MOOCThe Complete Java Developer Course on Udemy
地方学习Java： 赫尔辛基的MOOC大学 完整的Java开发课程Udemy
Node.js
Node.js
Node.js is a very popular technology (according to Stack Overflow’s 2019 developer survey). One thing to note: it isn’t technically a server-side language– it’s a form of JavaScript that runs on the server using the Express.js framework.
Node.js是一项非常受欢迎的技术(根据Stack Overflow的2019年开发人员调查 )。 需要注意的一件事：从技术上讲，它不是服务器端语言，而是一种JavaScript形式，它可以使用Express.js框架在服务器上运行。
Places to learn Node.js:Node.js tutorial by Programming with MoshLearn Node by Wes Bos
需要学习的地方Node.js的： Node.js的教程与MOSH编程 韦斯博斯了解节点
PHP
PHP
PHP is the language that powers WordPress, so this might be a good choice if you think you will be working with small business websites, as many of them use WordPress. You can also build web apps with the Laravel framework.
PHP是支持WordPress的语言，因此，如果您认为自己将要使用小型企业网站，这是一个不错的选择，因为其中许多企业都使用WordPress。 您还可以使用Laravel框架构建Web应用程序。
Places to learn PHP:Introduction to PHP by mmtutsPHP by Edwin Diaz on Udemy
地方学习PHP： 介绍PHP通过mmtuts PHP埃德温·迪亚兹Udemy
Python
Python
Python is growing in popularity, especially as it is used in data science and machine learning. It’s also considered to be good, as its syntax is simpler than some other languages. If you want to build web apps, you can use the Django or Flask frameworks.
Python越来越受欢迎，尤其是在数据科学和机器学习中。 它的语法比某些其他语言更简单，因此也被认为是很好的。 如果要构建Web应用程序，则可以使用Django或Flask框架。
Places to learn Python:The Modern Python 3 Bootcamp by Colt Steele on UdemyLearnPython.org
：地方学习Python 在Udemy现代Python 3的训练营由柯尔特斯蒂尔 LearnPython.org
Ruby
Ruby
Ruby is another language that has a syntax considered to be fu to learn. You can build web apps with the framework Ruby on Rails.
Ruby是另一种语言，其语法被认为很容易学习。 您可以使用Ruby on Rails框架构建Web应用程序。
Places to learn Ruby:The Odin ProjectRuby on Rails Tutorial by Michael Hartl
需要学习的地方Ruby： 奥丁项目 Ruby on Rails的教程由迈克尔·哈特尔
Just like with the JavaScript frameworks, there’s no #1 best programming language. Your choice should be based on either your personal interest and preference, as well as potential jobs– so do a little research on which might be a good choice for you.
就像JavaScript框架一样，没有＃1最佳编程语言。 您的选择应该基于您的个人兴趣和喜好以及可能的工作-因此，请做一些研究，这可能对您来说是一个不错的选择。
资料库 (Databases)
Databases, as the name implies, are where you store information for your website. Most databases use a language called SQL (pronounced “sequel”) which stands for “Structured Query Language.”
顾名思义，数据库是您存储网站信息的地方。 大多数数据库使用一种称为SQL的语言(读作“续集”)，该语言代表“结构化查询语言”。
In the database, data is stored in tables, with rows sort of like complex Excel documents. Then you can write queries in SQL in order to create, read, update, and delete data.
在数据库中，数据存储在表中，其行类似于复杂的Excel文档。 然后，您可以使用SQL编写查询以创建，读取，更新和删除数据。
The database is run on the server, using servers like Microsoft SQL Server on Windows servers, and MySQL for Linux.
该数据库在服务器上运行，使用Windows服务器上的Microsoft SQL Server和Linux上的MySQL之类的服务器。
There are also NoSQL databases, which store the data in JSON files as opposed to the traditional tables. One type of NoSQL database is MongoDB, which is often used with React, Angular, and Vue applications.
还有NoSQL数据库，该数据库将数据存储在JSON文件中，而不是传统表中。 Nogo数据库的一种类型是MongoDB ，它经常与React，Angular和Vue应用程序一起使用。
Some examples of how data is utilized on websites are:
有关如何在网站上利用数据的一些示例是：
If you have a contact form on your website, you could build the form so that every time someone submits the form, their data is saved onto your database.
如果您的网站上有联系表，则可以构建该表，以便每次有人提交该表时，他们的数据都保存到您的数据库中。
You can also user logins on the database, and write logic in the server-side language to handle checking and authenticating the logins.
您还可以在数据库上登录用户，并以服务器端语言编写逻辑以处理登录的检查和身份验证。
Some resources to learn the basics of SQL are:
一些学习SQL基础知识的资源是：
一些提示，让您离开… (Some tips to leave you with…)
Thanks for reading! I sincerely hope that this guide helps you get started learning web development.
谢谢阅读！ 我衷心希望本指南可以帮助您开始学习Web开发。
A few tips that I have if you are going the self-taught route:
如果您要走自学路线，我有几点建议：
Don’t try to learn everything at once. Pick one skill to learn at a time.
不要尝试一次学习所有内容。 一次选择一项技能来学习。
Don’t jump around from tutorial to tutorial. As you’re learning, it’s ok to check out different resources to see which one you like best. But again, pick one and try to go all the way through it.
不要从一个教程跳到另一个教程。 在学习时，可以检查不同的资源以查看最喜欢的资源。 但是，再次选择一个，并尝试贯穿其中。
Know that learning web development is a long-term journey. Despite the stories you may have read of people going from zero to landing a web dev job in 3 months, I would aim more at 1 to 2 years to become job ready, if you’re starting from the beginning.
知道学习网络开发是一个长期的旅程。 尽管您可能已经读到过一些故事，说人们在3个月内从零开始从事网络开发工作，但如果您是从头开始的话，我会在1到2年内准备更多工作。
Just watching a video course or reading a book won’t automatically make you an expert. Learning the material is just the first step. Building actual websites and projects (even just demo ones for yourself) will help you to really cement your learning.
仅观看视频课程或读书不会自动使您成为专家。 学习材料只是第一步。 建立实际的网站和项目(甚至只是自己的演示站点)将帮助您真正巩固学习的基础。
Best of luck as you start learning web development! If you're interested in more, check out this article on my blog: Learn web development as an absolute beginner.
祝您开始学习Web开发时一切顺利！ 如果您对更多内容感兴趣，请在我的博客上查看此文章： 以绝对的初学者学习Web开发。
想跟随我吗？ (Want to follow me?)
I post mini-tips in web development on Instagram and Twitter, and create coding tutorial videos on YouTube!
我在Instagram和Twitter上发布了Web开发方面的小技巧，并在YouTube上创建了编码教程视频！
翻译自: https://www.freecodecamp.org/news/beginners-roadmap-web-development/
大数据开发初学者学习路线
519
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
