java web开发初学_2018年学习Web开发的绝对初学者指南

最新推荐文章于 2024-05-06 11:07:47 发布

cumichun6193

最新推荐文章于 2024-05-06 11:07:47 发布

阅读量795

点赞数

文章标签：数据库编程语言 java python 大数据

原文链接：https://www.freecodecamp.org/news/the-absolute-beginners-guide-to-learning-web-development-in-2018-d87ba925549b/

版权

java web开发初学

This post was originally published on Coder-Coder.com.

该帖子最初发布在Coder-Coder.com上。

If you’re a beginner coder, this guide is for you!

如果您是初学者，那么本指南适合您！

Here is what this guide covers:

本指南涵盖以下内容：

An explanation of the basic areas in web development,
对Web开发基本领域的解释，
An overview of programming languages and frameworks,
编程语言和框架概述，
And recommended resources to help you learn.
并推荐资源来帮助您学习。

It’s geared for beginners, with helpful links and information to give you a head start into your own research.

它适用于初学者，提供有用的链接和信息，使您可以开始自己的研究。

Here’s what we’ll be going through.

这就是我们要经历的。

目录 (Table of Contents)

*Jump links included, so you can skip around if you want!

*包括跳转链接，因此您可以根据需要跳过！

第1部分：我们将从基础开始： (Part 1: We’ll start out with the basics:)

What web development is: explaining what’s actually happening when you load a website in your browser.
什么是Web开发 ：解释在浏览器中加载网站时实际发生的情况。
HTML, CSS, and JavaScript: the foundation of every website.
HTML，CSS和JavaScript ：每个网站的基础。
Helpful tools: using code editors and Git
有用的工具：使用代码编辑器和Git
What’s front-end and back-end?
什么是前端和后端？

第2部分：然后，我们将介绍更多中级前端技能： (Part 2: Then we’ll get into more intermediate front-end skills:)

Responsive design: making sure your website looks good on computers, tablets, and phones.
响应式设计 ：确保您的网站在计算机，平板电脑和手机上看起来不错。
Grunt, Gulp, and WebPack: using build tools to do some work for you!
Grunt，Gulp和WebPack ：使用构建工具为您完成一些工作！
An introduction to JavaScript front-end frameworks: React, Vue, and Angular
JavaScript前端框架简介 ：React，Vue和Angular

第3部分：随后的后端技能： (Part 3: Followed by back-end skills:)

An overview of the most commonly used back-end languages and how they stack up.
最常用的后端语言及其堆叠方式的概述。
A quick intro to databases and what database languages you should learn.
快速介绍数据库以及您应该学习的数据库语言。
The basics of setting up a website on a server.
在服务器上建立网站的基础。

结语：学习资源 (Epilogue: Learning resources)

A short list of recommended online courses, tutorials, and books.
推荐的在线课程，教程和书籍的简短列表。

Now, before we go through everything about websites… let’s start with you!

现在，在我们浏览有关网站的所有内容之前，让我们开始吧！

您学习编码的最终目标是什么？ (What’s your ultimate goal in learning to code?)

In his book The 7 Habits of Highly Effective People, Stephen R. Covey asserts that in order to be successful, you have to “begin with the end in mind.”

斯蒂芬·科维(Stephen R. Covey)在他的《 高效能人士的七个习惯》一书中断言，要取得成功，您必须“从头开始”。

Consider your own reasons for getting into coding… What end are you aiming for?

考虑您自己进行编码的原因……您的目标是什么？

What is your ultimate goal?

您的最终目标是什么？

Are you looking for a fun hobby, a career change, a flexible job where you can be closer to your family?

您是否正在寻找一种有趣的爱好，职业转变，灵活的工作，可以与家人更亲近？

Your entire approach to web development should be centered around achieving this one dream.

您进行Web开发的整个方法应以实现这一梦想为中心。

You can even try writing down your goal, and putting it someplace where you will see it everyday, like your bathroom mirror or next to your computer.

您甚至可以尝试写下您的目标，并将其放置在每天都能看到它的地方，例如浴室镜子或计算机旁边。

As you go through this article, keep your goal in mind, and let that determine what decisions you make: which languages to learn, even how you choose to learn.

在阅读本文时，请牢记目标，并由其决定您做出的决定：学习哪种语言，甚至选择学习的方式。

With that said, let’s get started with the basics!

话虽如此，让我们从基础开始吧！

第1部分：基础知识 (Part 1: The basics)

This might seem obvious, but I’m going to say it anyway:

这看起来似乎很明显，但是我还是要说一下：

At its core, web development is all about building websites.

Web开发的核心是建立网站。

A website may be a simple one page site, or it could be an incredibly complex web application.

网站可以是简单的一页网站，也可以是非常复杂的Web应用程序。

If you can view it on the web in a browser, it has to do with web development.

如果您可以在浏览器中的Web上查看它，则与Web开发有关。

Here is a simple explanation of how websites on the internet work:

这是有关Internet网站如何工作的简单说明：

Websites are basically a bunch of files stored on computers called servers.
网站基本上是一堆存储在称为服务器的计算机上的文件。
Servers are computers that are used to host websites, meaning that they store the website files. These servers are connected to the giant network called the World Wide Web (to use 90’s lingo), or the Internet.
服务器是用于托管网站的计算机，这意味着它们存储网站文件。这些服务器连接到称为万维网(使用90年代语言)的巨型网络或Internet。
Browsers are programs that you run on your computer. They load the website files via your internet connection. Your computer is also known as the client, which connects to the server.
浏览器是您在计算机上运行的程序。他们通过您的Internet连接加载网站文件。您的计算机也称为客户端 ，它连接到服务器 。

Further reading

进一步阅读

How does the Internet work? — Mozilla Developer Network
互联网如何运作？ — Mozilla开发人员网络
What is the difference between webpage, website, web server, and search engine? — Mozilla Developer Network
网页，网站，Web服务器和搜索引擎之间有什么区别？ — Mozilla开发人员网络

构成每个网站的3个组成部分 (The 3 components that make up every website)

As mentioned above, websites are made up of files, mainly HTML, CSS, and JavaScript files.

如上所述，网站由文件组成，主要是HTML，CSS和JavaScript文件。

Let’s take a closer look at each of them:

让我们仔细看看它们中的每一个：

HTML或超文本标记语言 (HTML or HyperText Markup Language)

HTML is the foundation of all websites. It’s the main file type that is loaded in your browser when you look at a website.

HTML是所有网站的基础。这是浏览网站时浏览器中加载的主要文件类型。

You can actually make a very very basic website just using HTML and no other types of files.

实际上，仅使用HTML而不使用其他类型的文件，您实际上可以创建一个非常基础的网站。

It won’t look very interesting, but that’s the minimum that you need for a website to be a website.

它看起来不会很有趣，但这是网站成为网站所需的最低要求。

(If you’re interested in the basics of HTML, you can check out a video/blog tutorial I have about that.)

(如果您对HTML的基础知识感兴趣，可以查看有关此内容的视频/博客教程。)

CSS或级联样式表 (CSS or Cascading Style Sheets)

Without CSS, a website will look as aesthetically pleasing as a Word document.

没有CSS，网站在外观上将与Word文档一样令人愉悦。

With CSS, you can add colors of all kinds, compelling fonts, and layout the website in pretty much any way you please.

使用CSS，您几乎可以按照任何方式添加各种颜色，引人注目的字体，以及对网站进行布局。

You can even add animations and draw shapes using more advanced CSS.

您甚至可以使用更高级CSS添加动画并绘制形状。

JavaScript (JavaScript)

JavaScript is a programming language that allows you to interact with elements on the website and to manipulate them.

JavaScript是一种编程语言，使您可以与网站上的元素进行交互并进行操作。

While CSS adds style to HTML, JavaScript adds interactivity and makes a website more dynamic.

CSS为HTML添加了样式，而JavaScript增加了交互性并使网站更加动态。

For example, you can use JavaScript to scroll to the top of the page when you click a button, or to build a slideshow with buttons to navigate through the images.

例如，当您单击按钮时，可以使用JavaScript滚动到页面顶部，或者使用按钮构建幻灯片以浏览图像。

To work with HTML, CSS and JavaScript files, you’ll need to use a program on your computer called a code editor.

要使用HTML，CSS和JavaScript文件，您需要在计算机上使用一个称为代码编辑器的程序。

Which brings us to the next point:

这将我们带到下一点：

您应该使用哪个代码编辑器？ (Which code editor should you use?)

This is a very common question, especially if you’re just starting out.

这是一个非常常见的问题，特别是如果您刚开始的话。

The best code editor for you will be highly dependent on what kind of code you’re writing.

最适合您的代码编辑器将高度取决于您正在编写的代码类型。

If you’re doing mainly HTML, CSS, and JavaScript, you could code in Windows Notepad or TextEdit for Macs if you wanted to.

如果主要使用HTML，CSS和JavaScript，则可以在Windows记事本或Mac的TextEdit中进行编码。

But what would the fun be in that?

但是那会带来什么乐趣呢？

Code editor programs like Sublime or VS Code come with a lot of features that just make coding easier.

诸如Sublime或VS Code之类的代码编辑器程序具有许多功能，这些功能使编码更容易。

They allow you to indent multiple lines of text right or left, and can highlight the text in different ways depending on what language the file is in.

它们使您可以左右缩进多行文本，并可以根据文件所使用的语言以不同的方式突出显示文本。

For back-end languages (we’ll get into those in a later section) you’ll need a more powerful code editor called an IDE (Integrated Development Environment). IDEs have features that allow you to debug and compile (process) your code.

对于后端语言(我们将在后面的部分中介绍)，您将需要一个功能更强大的代码编辑器，称为IDE(集成开发环境)。 IDE具有允许您调试和编译(处理)代码的功能。

Here are some popular code editors:

以下是一些流行的代码编辑器：

VS Code: This lightweight version of Visual Studio, Microsoft’s main IDE, is only a few years old but it’s gotten incredibly popular, due to its speed, ease of use, and powerful features. VS Code is my personal editor of choice, so I may be rather biased ?

VS Code ：这是Microsoft主IDE的轻量级版本的Visual Studio，仅使用了几年，但由于它的速度，易用性和强大的功能而广受欢迎。 VS Code是我的首选个人编辑，因此我可能会颇为偏颇？

Atom: Created by GitHub and advertised as a “hackable text editor,” Atom is a well-loved editor. One of its main strengths is its customizability. You can install packages and themes that will add features to the program.

Atom ：由GitHub创建，并宣传为“可破解的文本编辑器”，Atom是一个受欢迎的编辑器。它的主要优势之一是可定制性。您可以安装将为程序添加功能的软件包和主题。

Sublime: A hugely popular program that has been around for a while. Like Atom, you can install packages and themes, and it also has quick performance. Unlike the other two editors, a Sublime license costs $70 (but it is free to try).

Sublime ：一个已经流行了很长时间的程序。像Atom一样，您可以安装软件包和主题，它也具有快速的性能。与其他两个编辑器不同，Sublime许可证的价格为70美元(但可以免费试用)。

I’d recommend trying some or all of these editors out, for comparison’s sake. Then pick one and stick to it, learning its features and shortcut keys.

为了比较起见，我建议尝试使用部分或全部这些编辑器。然后选择一个并坚持使用它，了解其功能和快捷键。

版本控制 (Version control)

Now you have your code editor, and you’re starting to write code.

现在您有了代码编辑器，并且开始编写代码。

However what happens if you make a mistake in your code, and pressing Ctrl-Z to undo a million times isn’t working for you? What do you do?

但是，如果您在代码中输入了错误，然后按Ctrl-Z撤消一百万次怎么办，这对您不起作用？你是做什么？

The answer, is version control!

答案是版本控制！

Version control is like having save points for your code files.

版本控制就像为代码文件保存点一样。

If you think you might be about to make some code changes that could break everything, you can create a new save point (called a commit).

如果您认为可能要对某些代码进行更改以至于破坏所有功能，则可以创建一个新的保存点(称为提交)。

Then if you do break your website, you can revert your code back to the state it was in before.

然后，如果您确实破坏了您的网站，则可以将代码恢复为之前的状态。

It can be a lifesaver if you ever make a mistake that you desperately need to undo.

如果您犯了一个迫切需要撤消的错误，那可能是一个救命稻草。

Version control sounds great! How does it work?

版本控制听起来很棒！ 它是如何工作的？

Using a version control system (VCS) involves storing your code files and the entire history of changes in what’s called a repository.

使用版本控制系统 (VCS)涉及将代码文件和整个更改历史记录存储在所谓的存储库中。

Usually you will use one repository per website or project.

通常，每个网站或项目将使用一个存储库。

Then you store your repository online in what’s known as a central repository, and also keep a version on your computer in a local repository.

然后，您将存储库在线存储在所谓的中央存储库中 ，并在本地存储库中的计算机上保留一个版本。

As you make changes on your computer, you can create commits and then push them up to the central repository.

在计算机上进行更改时，可以创建提交，然后将其推送到中央存储库。

This process allows you to have multiple people working on the same set of code, even changing the same files.

此过程使您可以让多个人处理同一组代码，甚至更改相同的文件。

Git is the most popular VCS right now

Git是目前最受欢迎的VCS

The main version control system nowadays is Git. Its main competitor is Subversion (SVN), an older system.

如今的主要版本控制系统是Git 。它的主要竞争对手是较旧的系统Subversion (SVN)。

But the vast majority of coding bootcamps and tutorials will use Git, so that’s what I’d recommend that you learn.

但是绝大多数编码训练营和教程都将使用Git，所以这就是我建议您学习的内容。

Further reading

进一步阅读

Now, as we move into explaining the actual languages and frameworks that are used, we’ll be using terms that you’ve probably come across already: front end and back end.

现在，当我们开始解释所使用的实际语言和框架时，我们将使用您可能已经遇到的术语： front end和back end 。

前端是关于网站外观的外观。 (The front end is all about how the website looks, visually.)

The front end (or client-side) refers to what is loaded by the user’s browser, also called the client.

前端(或客户端)是指用户浏览器(也称为客户端)加载的内容。

This would be the HTML and CSS that we started out talking about. JavaScript was originally just a front-end language, but nowadays you can use JavaScript as your server-side, or back-end, language also.

这就是我们开始谈论HTML和CSS。 JavaScript最初只是一种前端语言，但是现在您可以将JavaScript用作服务器端或后端语言。

Front-end work deals heavily with making the website look good.

前端工作主要涉及使网站看起来不错。

In addition, it also involves making the site behave in a way that makes sense to the user (also called UX or user experience).

此外，它还涉及使网站以对用户有意义的方式运行(也称为UX或用户体验)。

If you enjoy tweaking your CSS to make sure the site is pixel perfect, and adding subtle JavaScript animations that help the user along, then you will likely enjoy front-end development.

如果您喜欢调整CSS以确保网站完美像素，并添加细微JavaScript动画来帮助用户，那么您可能会喜欢前端开发。

后端全部与功能有关，并确保一切正常。 (The back end is all about functionality and making sure everything works.)

While the front end is about the appearance and visual behavior of the website, the back end is about getting everything to work behind the scenes.

前端是关于网站的外观和视觉行为的，而后端是有关使一切在幕后工作的。

If you’re working in back-end development, you’ll be doing tasks like handling requests to the server and database.

如果您在进行后端开发，则将执行诸如处理对服务器和数据库的请求之类的任务。

Some examples of back-end work would be saving the data when someone fills out a form on the contact page, or retrieving data to display blog posts in a specific category that the user has requested.

后端工作的一些示例将是当有人在联系人页面上填写表单时保存数据，或者检索数据以显示用户请求的特定类别的博客文章。

Back-end work also may involve setting up the website on a server, handling deployment, and setting up SQL databases.

后端工作还可能涉及在服务器上设置网站，处理部署以及设置SQL数据库。

If the idea of setting up all the functional parts of a website sounds fun to you, you may enjoy back-end work!

如果设置网站的所有功能部分的想法听起来很有趣，那么您可能会喜欢后端工作！

将双方放在一起 (Putting both sides together)

The names front-end and back-end came about because the front-end is what you can see in your browser.

之所以命名前端和后端，是因为前端是您在浏览器中看到的。

And the back-end is the part that you can’t see, but it handles a lot of the heavy lifting and functionality that helps the front-end.

后端是您看不到的部分，但它处理了许多繁琐的工作，并为前端提供了功能。

You can think about the front-end as the storefront of a business, the only part that most customers will see. The back-end is like the manufacturing, distribution, and operation centers that help the store run.

您可以将前端视为企业的店面，这是大多数客户唯一看到的部分。后端就像帮助商店运营的制造，分销和运营中心。

Both serve separate functions that are are equally important.

两者都具有同等重要的独立功能。

前端，后端还是完整堆栈？ (Front end, back end, or full stack?)

In web development, you can focus on just the front end, or just the back end. Or you can deal in both, which is called full stack development.

在Web开发中，您可以只关注前端或后端。或者，您可以同时进行这两种处理，这称为全栈开发。

What you choose to focus on should mainly depend on two things:

您选择重点关注的内容主要取决于两件事：

Your personal preference: Not everyone likes both front and back end.
您的个人偏好：并非每个人都喜欢前端和后端。
Job availability: Browse your local job listings and get involved with local coding meetups to get a feel for what types of jobs there are.
职位空缺：浏览本地职位列表，并参与本地编码聚会，以了解有哪些类型的职位。

It’s worth mentioning that if you enjoy both front and back end, being a full stack developer will make you more marketable.

值得一提的是，如果您同时喜欢前端和后端，那么作为一个全栈开发人员可以使您更具市场价值。

It makes sense — the more technologies you can work with, the more tasks you will be able to perform.

这很有意义-您可以使用的技术越多，您将能够执行的任务越多。

Stack Overflow reported in their 2017 survey of users that 63.7% identified as full-stack, 24.4% as back-end, and 11.9% as front-end developers:

Stack Overflow在其2017年对用户的调查中报告称，有63.7％的用户认为是全栈的，有24.4％的是后端的，有11.9％的是前端开发的：

However again, this will be heavily dependent on the company. Some companies may utilize full stack developers, where others split the back and front ends.

但是，这将再次严重依赖于公司。一些公司可能会使用全栈开发人员，而其他公司则将后端和前端分开。

Some also have their front-end developers spill over into design, where the developers will design and build the front end of the application.

有些人的前端开发人员也参与了设计，开发人员将在其中设计和构建应用程序的前端。

第2部分：让您的前端技能大放异彩 (Part 2: Making your front-end skills shine)

Once you’ve gotten the basics of HTML, CSS, and JavaScript down, you can start getting into more advanced skills in the front-end.

掌握了HTML，CSS和JavaScript的基础知识之后，就可以开始在前端学习更高级的技能了。

This section will go through practices and tools that will help you build more marketable skills as a web developer.

本节将介绍一些实践和工具，这些技巧和工具将帮助您以Web开发人员的身份培养更多适销对路的技能。

在这个移动友好的世界中，响应式设计是必不可少的 (Responsive design is a must in this mobile-friendly world)

When websites were first around, there was only one way to view them: on your computer.

当网站首次出现时，只有一种查看方式：在计算机上。

Smartphones and mobile data didn’t really exist yet. When making a website you only had to worry about how it looked on your computer.

智能手机和移动数据还不存在。建立网站时，您只需要担心它在计算机上的外观。

Now, according to Statcounter.com, more people are using their phones than their desktop computers to browse the internet.

如今，根据Statcounter.com的说法，使用手机的人数要超过台式机浏览互联网的人数。

So we need to make sure that all our websites work and look good on everything from the biggest monitor to the smallest phone.

因此，我们需要确保我们所有的网站都可以正常工作，并且在从最大的显示器到最小的手机的所有内容上看起来都不错。

This practice is what’s known as responsive design. It’s called that because the design can “respond” to any device that is viewing it.

这就是所谓的响应式设计 。之所以这样称呼，是因为该设计可以“响应”正在查看它的任何设备。

You can test how responsive a website is by manually changing the width of your browser window and seeing how the design looks at large and small widths.

您可以通过手动更改浏览器窗口的宽度并查看设计在大和小宽度上的外观来测试网站的响应速度。

Building a truly responsive website involves a lot of planning in the design phase to consider how everything will look on all devices. And in the web development stage, it involves using media queries to control which CSS properties are being used at specific widths.

建立一个真正响应Swift的网站需要在设计阶段进行大量规划，以考虑一切在所有设备上的外观。在Web开发阶段，它涉及使用媒体查询来控制在特定宽度下使用哪些CSS属性。

框架可以帮助您快速建立响应式网站 (Frameworks can help you build a responsive website quickly)

As you might imagine, coding all the CSS of a responsive website takes a lot of work.

您可能会想到，对响应式网站的所有CSS进行编码需要大量工作。

If you can’t spare a lot of extra time, you might try using a responsive framework like Bootstrap or Zurb Foundation.

如果您不能节省很多额外的时间，则可以尝试使用Bootstrap或Zurb Foundation之类的响应式框架。

The beauty of these frameworks is that they come pre-packaged with custom CSS and JavaScript. They’ve done a lot of work for you by pre-styling elements like headlines and buttons.

这些框架的优点在于，它们预先包装了自定义CSS和JavaScript。他们通过对标题和按钮等元素进行预样式化为您做了很多工作。

They also come with JavaScript components (essentially little plugins) like modal pop-up windows and navigation bars.

它们还带有JavaScript组件(基本上是小插件)，例如模式弹出窗口和导航栏。

Since you’re using something that’s already been tested, it will make building your website a lot easier. The only caveat is that you shouldn’t become too dependent on frameworks.

由于您使用的是已经过测试的产品，因此可以轻松构建您的网站。唯一的警告是您不应该过于依赖框架。

There’s no substitute for knowing how to build a responsive website from scratch.

知道如何从头开始构建响应式网站是无可替代的。

Further reading

进一步阅读

Sass会在编写CSS时省时省力 (Sass will save you time and headaches when writing CSS)

Once you’ve gotten the basics of CSS down, I would start to learn Sass, because it is simply awesome.

一旦掌握了CSS的基础知识，我就会开始学习Sass ，因为它真棒。

It’s even in the name! Sass stands for “Syntactically Awesome Style Sheets.” And it’s described on its website as “an extension of CSS.”

甚至是名字！ Sass代表“语法上很棒的样式表”。它在其网站上被描述为“ CSS的扩展”。

It makes writing your CSS styles much easier, more intuitive, and faster.

它使编写CSS样式变得更加轻松，直观和快捷。

Don’t get me wrong, CSS is great. But as you get into it, you’ll realize that regular vanilla CSS can get quite tedious. And, if you aren’t super organized in how you write your styles, your CSS styles can quickly become frustratingly tangled.

不要误会我的意思，CSS很棒。但是当您深入研究它时，您会意识到普通的普通CSS可能会变得非常乏味。而且，如果您对样式的编写不够熟练，那么CSS样式会很快变得令人沮丧。

What Sass does is give you more power and control.

Sass所做的是为您提供更多功能和控制。

Here are a couple examples of how Sass will make your life easier:

以下是Sass如何使您的生活更轻松的几个示例：

Mixins: Instead of copying and pasting the CSS code for certain elements a million times, you can use mixins. They allow you to write a set of styles for an element just once, and reuse as many times as you want.
Mixins ：您可以使用mixins来代替将某些元素CSS代码复制和粘贴一百万次，而无需使用。它们使您可以为一个元素编写一次样式集，并根据需要重复使用多次。
Nesting: Instead of writing all the parent classes of a specific style, you can nest all the children inside the parent’s styles. This also cuts down on a lot of duplicate work.
嵌套：可以编写父样式中的所有子项，而不是编写特定样式的所有父类。这也减少了很多重复的工作。

In short, using Sass will save you time and annoyance. Well worth the effort it takes to learn it!

简而言之，使用Sass可以节省您的时间和烦恼。值得付出努力来学习它！

Further reading

进一步阅读

One note: since the browser can’t read Sass files itself, you have to compile your Sass files into CSS.

注意事项：由于浏览器本身无法读取Sass文件，因此必须将Sass文件编译为CSS。

In order to do this, you’ll have to use something called a build tool and run it on your computer.

为此，您必须使用一种称为构建工具的工具，然后在计算机上运行它。

Which brings us to the next section….

这将使我们进入下一部分……。

这些构建工具到底是关于什么的？ (What are all these build tools about, anyway?)

You’ve probably heard one or several of the following terms: npm, Webpack, Grunt, Gulp, Bower, Yarn… the list gets pretty long!

您可能已经听过以下一项或多项：npm，Webpack，Grunt，Gulp，Bower，Yarn ...列表很长！

These tools are often described as build tools, task runners, task managers, or “NOW what do I have to install?!”

这些工具通常被描述为构建工具，任务运行器，任务管理器或“现在我必须安装什么？！”。

一些工具可以为您完成艰苦的工作(双关语！) (Some tools do your grunt work (pun intended!) for you)

Build tools like Grunt, Gulp, and Webpack are commonly used to do some of the following tasks:

诸如Grunt ， Gulp和Webpack之类的构建工具通常用于执行以下一些任务：

Processing Sass files into CSS
将 Sass文件处理为CSS
Concatenating (combining) multiple CSS files or multiple JavaScript files into one big CSS or JavaScript file.
将多个CSS文件或多个JavaScript文件串联 (组合)为一个大CSS或JavaScript文件。
Minifying (compressing) CSS, JavaScript, and even image files
缩小 (压缩)CSS，JavaScript甚至图像文件
Automatically refreshing your browser with the updated CSS or JavaScript code
使用更新CSS或JavaScript代码自动刷新浏览器

Sure, many of these tasks you could do yourself by hand.

当然，您可以手动完成许多任务。

But having to do it over and over again every time you make a small CSS or JavaScript change gets tiring.

但是，每次您进行小CSS或JavaScript更改时，都必须一遍又一遍地进行操作，这会很累。

您应该使用哪个构建工具？ (Which build tool should you use?)

At the moment, Webpack is taking over the field, but Grunt and Gulp are still in use.

目前，Webpack正在接管该领域，但Grunt和Gulp仍在使用。

I would definitely learn Webpack, but it couldn’t hurt to learn either Grunt or Gulp (Gulp is faster and seems a bit easier to get up and running).

我肯定会学习Webpack，但是学习Grunt或Gulp都不会受到伤害(Gulp更快，并且似乎更容易启动和运行)。

其他工具为您安装软件包(插件) (Other tools install packages (plugins) for you)

In addition, in order to accomplish all those tasks, you generally need to download and install plugins or packages.

此外，为了完成所有这些任务，通常需要下载并安装插件或软件包。

This is where a tool like npm (Node Package Manager), Bower, or Yarn comes in handy. These are tools that allow you to quickly install packages to your computer by typing commands into your computer’s command line.

这是npm (Node Package Manager)， Bower或Yarn之类的工具派上用场的地方。这些工具可让您通过在计算机的命令行中键入命令来将软件包快速安装到计算机上。

They’re tools to get you more tools, basically!

基本上，它们是为您提供更多工具的工具！

As npm is the dominant package manager right now, you should definitely learn how to use it.

由于npm现在是主要的软件包管理器，因此您绝对应该学习如何使用它。

Bower was one of the first package manager tools, but it’s officially obsolete– the creators of Bower.io now recommend using Yarn.

Bower是最早的软件包管理器工具之一，但是正式过时了-Bower.io的创建者现在建议使用Yarn。

Yarn is a very npm-like tool created by Google, Facebook, and others that promises to fix some of the issues that npm has.

Yarn是Google，Facebook和其他公司创建的非常类似于npm的工具，有望解决 npm所存在的一些问题。

While Yarn is in the minority, I’d still recommend checking it out, as it seems to be gaining in popularity.

当Yarn处于少数时，我仍然建议您检查一下它，因为它似乎越来越受欢迎。

Further reading

进一步阅读

每个人都喜欢JavaScript框架 (Everyone loves JavaScript frameworks)

You’ve probably noticed a lot of JavaScript frameworks, libraries, toolkits, and so on being thrown around… you know, those names that all end in “.JS?”

您可能已经注意到了很多JavaScript框架，库，工具包等等，它们都以……结尾。

Let’s first take a step back and define just what a JavaScript framework is.

首先让我们退后一步，定义一个JavaScript框架。

Depending on whom you talk to, the terms framework, library, and/or toolkit may or may not be interchangeable. (It’s still under debate.)

取决于您与之交谈的对象，术语框架，库和/或工具包可以互换也可以不互换。 ( 它仍在辩论中。 )

But they’re all essentially tools that, surprise surprise, do some of the work for you.

但是，从本质上讲，它们都是工具，可以为您完成一些工作。

框架是您在其上构建的预构建结构。 (A framework is a pre-built structure that you build upon.)

Generally speaking, a framework is a system of working parts created by someone else.

一般来说，框架是由其他人创建的工作部件系统。

To use the framework, you install it to your own website files. Then you work off of that existing structure, adding onto it to accomplish what you want to do.

要使用该框架，请将其安装到自己的网站文件中。然后，您可以处理现有结构，然后将其添加到其中以完成您想要做的事情。

Using a framework is like buying a bare bones house that comes with all the structural components (foundation, frame, roof), but isn’t totally complete.

使用框架就像买一栋裸露的房子，里面有所有的结构组件(地基，框架，屋顶)，但还不完整。

You still need to go in and attach the water and electricity, as well as install cabinets, paint the walls, and decorate.

您仍然需要进入并接上水和电，以及安装橱柜，粉刷墙壁和进行装饰。

Some examples of JavaScript front-end frameworks are React, Vue, and Angular.

JavaScript前端框架的一些示例是React ， Vue和Angular 。

库是您添加到自己的结构中的一组预制工具。 (A library is a set of pre-made tools that you add to your own structure.)

In comparison, a library is a collection of individual components that you can take and plug in to your own system.

相比之下，库是单个组件的集合，您可以将其插入并插入自己的系统。

This is the main difference between frameworks and libraries:

这是框架和库之间的主要区别：

While frameworks are pre-made structures, libraries aren’t a structure in themselves. They provide additional functionality for existing systems.

虽然框架是预制的结构，但库本身并不是结构。它们为现有系统提供附加功能。

To continue the home building analogy, you can think of libraries like appliances that you choose to add to your house.

要继续进行房屋建筑类比，您可以考虑选择要添加到房屋中的类似设备的图书馆。

Machines like ovens, showers, and air conditioners all perform a distinct function, but you have to install them into an existing home in order for them to be useful.

烤箱，淋浴器和空调等机器都具有独特的功能，但是您必须将其安装到现有房屋中才能使用。

One example of a library, using the above categorization, is jQuery.

使用上述分类的一个库示例是jQuery。

jQuery is a JavaScript library that doesn’t have any kind of structure in itself, but has over 300 different functions that you can use.

jQuery是一个JavaScript库，它本身没有任何结构，但是具有300多种可以使用的功能。

Again, these definitions are not agreed upon by everyone.

同样，这些定义并非所有人都同意。

React and jQuery categorize themselves as libraries, and Angular and Vue call themselves frameworks.

React和jQuery将自己归类为库，而Angular和Vue称其为框架。

However for my own personal understanding, it helps to separate the tools into these two general buckets of frameworks (systems) and libraries (tools).

但是，以我个人的理解，这有助于将工具分为框架(系统)和库(工具)这两个通用桶。

Which brings us to our next point…

这将我们带到了下一个……

JavaScript框架中的三大要素：Angular，React和Vue (The big three in JavaScript frameworks: Angular, React, and Vue)

In the early 2010’s there was an explosion of frameworks ending in “.js,” almost a new one every month.

在2010年初，以“ .js”结尾的框架激增，几乎每个月都有一个新的框架。

However as we approach 2020, the field has cleared and we’re left with the three big winners: Angular, React, and Vue.

但是，随着我们临近2020年，这一领域已经清除，我们剩下了三大赢家：Angular，React和Vue。

JavaScript frameworks may have started out as a trend, but they’re definitely here to stay.

JavaScript框架可能已经开始成为一种趋势，但是它们肯定会留下来。

Angular, React, and Vue are all growing, and JavaScript itself is extremely popular right now– it’s the most used technology for the fifth year running in Stack Overflow’s annual survey.

Angular，React和Vue都在增长，JavaScript本身现在非常流行- 这是 Stack Overflow年度调查中连续第五年使用最多的技术。

In addition, Stack Overflow publishes trends of technologies based on how many questions are asked per month.

另外，Stack Overflow根据每月要问多少个问题发布技术趋势。

You can see that Angular has the most volume, and both Angular and React have had pretty steep growth over the past year.

您可以看到Angular的数量最多，并且Angular和React在过去的一年中都有相当大的增长。

The State of JavaScript survey shows that React leads in the number of developers who have used it and loved it, while Angular doesn’t seem to be quite as interesting or hold as much desire for reuse.

JavaScript状况调查显示，React在使用和喜欢它的开发人员中处于领先地位，而Angular似乎并没有那么有趣或没有太多的重用愿望。

Vue has a lower amount of actual usage, but is leading the pack in terms of being a technology that developers want to try in the future. So it’s feasible that Vue could become a bigger player in the next couple of years.

Vue的实际使用量较少，但在成为开发人员将来要尝试的技术方面处于领先地位。因此，在未来几年内Vue成为更大的参与者是可行的。

However I think all three are sticking around, at least for the next several years.

但是，我认为这三个方面都将坚持下去，至少在接下来的几年中。

TL，DR：我现在应该学习哪个框架？ (TL,DR: Which framework should I learn right now?)

It depends– if you’re seeking to land a full-time web developer job, I would browse your local job listings to see which framework seems to get mentioned the most.

这取决于–如果您要寻求一份全职的Web开发人员工作，我将浏览您本地的工作清单，以查看最常被提及的框架。

If you’re just learning right now without that specific end in mind, Vue is a good place to start for beginners. It’s lightweight and documented quite well.

如果您现在只是在学习而没有特定的目标，那么Vue是适合初学者的好地方。它是轻量级的，并且记录得很好。

However, I personally wouldn’t only learn Vue. It would be a good idea to eventually add either React or Angular to your toolbelt, depending on your liking.

但是，我个人不仅会学习Vue。最终根据您的喜好将React或Angular添加到您的工具栏中是个好主意。

Further reading

进一步阅读

第3部分：让我们进入后端 (Part 3: Let’s get into the back-end)

您应该首先学习哪种语言？ (Which language should you learn first?)

There are a ton of back-end languages. Many of them have been around for quite a while, some even before the internet existed!

有大量的后端语言。他们中的许多人已经存在了很长一段时间，甚至在互联网存在之前就已经存在了！

This can make it difficult to choose which language to start out with. To narrow down your choices, I’d recommend applying the following principles to your decision:

这可能会使选择开始使用的语言变得困难。为了缩小选择范围，建议您在决定时遵循以下原则：

Choose a language that is learnable: it has a reasonable learning curve, is well-documented, and/or has a good online support system.
选择一种可学习的语言：具有合理的学习曲线，有据可查和/或具有良好的在线支持系统。
Choose a language that is relevant to your eventual career goals.
选择与您最终的职业目标相关的语言。
Choose a language that is enjoyable. Learning web development is hard enough — there’s no point in forcing yourself to learn a language that you really don’t like.
选择一种愉快的语言。学习Web开发非常困难-强迫自己学习一种您真正不喜欢的语言没有任何意义。

One important thing to keep in mind is that you don’t have to learn every language.

要记住的重要一件事是，您不必学习所有语言。

In fact, if you’re a beginner I would strongly recommend that you focus on one language first.

实际上，如果您是初学者，我强烈建议您先专注于一种语言。

All programming languages share some common principles.

所有编程语言都有一些共同的原则。

For example, you can write a “for” loop in JavaScript, PHP, C# and Python.

例如，您可以使用JavaScript，PHP，C＃和Python编写“ for”循环。

Once you’ve picked up the fundamental principles of programming in your first language, it will be easier to transfer those concepts into other languages.

一旦掌握了第一语言编程的基本原理，就可以轻松地将这些概念转换为其他语言。

I hope this takes off a little pressure from choosing your first back-end language to learn ?

我希望这可以减轻您选择第一种后端语言学习的压力吗？

让我们看一些最流行的后端语言。 (Let’s take a look at some of the most popular back-end languages.)

Java

Java is a stable language that is very widely used and has been around a long time. It has held the top spot on the TIOBE index since 2001. (TIOBE is a ranking of programming languages by number of searches.)

Java是一种稳定的语言，已被广泛使用并且已经存在了很长时间。自2001年以来，它一直在TIOBE索引上排名第一。(TIOBE是按搜索数量对编程语言进行的排名。)

In addition, Java ranked third in Stack Overflow’s rankings of the most commonly used languages and has the second-highest tagged questions on Stack Overflow.

此外，Java在Stack Overflow的最常用语言排名中排名第三，在Stack Overflow上的标记问题排名第二。

Many big tech companies use Java in their websites: Google, YouTube, Facebook, Amazon, and Twitter, among others.

许多大型科技公司在其网站中使用Java ：Google，YouTube，Facebook，Amazon和Twitter等。

One reason for this is that Java is fast, and can scale up to handle large websites. It’s also a consistent language that allows for easier maintenance for long-term projects.

原因之一是Java速度很快，并且可以扩展以处理大型网站。它也是一种一致的语言，可简化长期项目的维护。

Twitter was originally built with Ruby on Rails. But in 2015 they needed to be able to support their huge growth, so they switched to Scala, a language that runs on the Java Virtual Machine.

Twitter最初是使用Ruby on Rails构建的。但是在2015年，他们需要能够支持自己的巨大增长，因此他们改用了Scala (一种在Java虚拟机上运行的语言)。

C# (C Sharp)

C＃(C夏普)

C# was created by Microsoft to be a competitor to Java. You can see that C# peaked on Stack Overflow’s Trends in 2009 and has been on the decline ever since.

C＃由Microsoft创建，是Java的竞争对手。您可以看到C＃在2009年Stack Overflow的趋势中达到顶峰，此后一直在下降。

But I wouldn’t count C# out just yet.

但是我还不会将C＃排除在外。

It’s a powerful, object-oriented language that has the third highest number of Stack Overflow tags. It also came in third in Stackify’s research into the most in-demand languages in Indeed job listings in December of 2017.

它是一种功能强大的，面向对象的语言，具有Stack Overflow标签数量第三高的地位。 2017年12月，它在Stackify的Indeed工作清单中对需求最大的语言的研究中排名第三。

C# is used in a wide variety of applications, such as Windows desktop apps and Android programming.

C＃用于各种应用程序，例如Windows桌面应用程序和Android编程。

It’s also used a lot in game development, through the Unity game engine. So if you’re interested in Android or game development, C# would be a great option to learn.

通过Unity游戏引擎，它在游戏开发中也被大量使用。因此，如果您对Android或游戏开发感兴趣，那么C＃将是一个不错的选择。

Node.js

As mentioned earlier, JavaScript has been the most commonly used language reported by Stack Overflow users for the past five years.

如前所述，JavaScript是过去五年Stack Overflow用户报告的最常用的语言。

A lot of this has to do with Node.js, which topped their list of frameworks and libraries used the most in 2017.

其中很大一部分与Node.js有关，后者是2017年使用最多的框架和库的最高列表。

Node.js, self-described as a “JavaScript runtime,” is basically JavaScript that runs on the back end.

自称为“ JavaScript运行时”的Node.js基本上是在后端运行JavaScript。

It was originally meant to serve as a more efficient alternative to the Apache HTTP server. Since its release in 2009, Node.js has steadily increased in usage, due to its fast, lightweight nature.

它最初旨在作为Apache HTTP服务器的更有效替代。自2009年发布以来，Node.js由于其快速，轻巧的特性而在使用中稳步增长。

Node developers often use the Express framework when building web apps. Express.js is a “minimalist web framework” for Node.js.

节点开发人员在构建Web应用程序时经常使用Express框架。 Express.js是Node.js的“简约网络框架”。

By using Node and Express on the back end, and Angular or React on the front end, this means that you can be a full stack JavaScript developer.

通过在后端使用Node和Express，在前端使用Angular或React，这意味着您可以成为一名全栈JavaScript开发人员。

This stack, or combination of technologies, is very popular at the moment, especially with startups.

目前，这种堆栈或技术组合非常流行，尤其是对于初创公司。

Python

Python first came onto the scene in 1991 and is a frequent “first language” for many programming students.

Python于1991年首次出现，并且是许多编程学生经常使用的“第一语言”。

Due to its readability and use of English keywords, it’s generally considered an easy language to learn.

由于它的可读性和英语关键字的使用，通常被认为是一种易于学习的语言。

There are a couple of Python frameworks that you can use:

您可以使用几个Python框架：

Django (pre-built features, more bells and whistles), and
Django (预建功能，更多功能)，以及
Flask (more minimal and flexible).
烧瓶 (更小巧，更灵活)。

Python’s popularity has soared in recent years. As of this writing, it is ranked #4 on the TIOBE index.

近年来，Python的流行度飙升。在撰写本文时，它在TIOBE索引上排名第四。

And in 2017 it was ranked second in the number of pull requests on GitHub, according to their 2017 Year in Review report.

根据其2017年年度回顾报告，在2017年，它在GitHub上的拉取请求数量中排名第二。

Stack Overflow reported last September that data science, machine learning and academic research are largely the reason for this fast growth.

Stack Overflow于去年9月报告说，数据科学，机器学习和学术研究是实现这种快速增长的主要原因。

Even if you’re not a data scientist, being able to work with and manipulate data is becoming a useful skill.

即使您不是数据科学家，能够使用和操纵数据也成为一项有用的技能。

As Alexus Strong of Code Academy writes:

正如Code Academy的Alexus Strong 所写：

“Python is appealing to those of us in non-technical fields because it puts data analysis […] within arm’s reach.”

“ Python在非技术领域吸引了我们这些人，因为它使数据分析[…]触手可及。”

If you’re curious about data science or machine learning, Python may be a very good bet for you, as these fields will likely expand in the coming years.

如果您对数据科学或机器学习感到好奇，Python可能对您来说是一个很好的选择，因为这些领域在未来几年可能会扩展。

Ruby

Ruby was first released in 1995. It started getting a lot of attention in the early 2000s when the startup Basecamp invented the framework Ruby on Rails.

Ruby于1995年首次发布。在2000年代初，初创公司Basecamp发明了Ruby on Rails框架时，它开始引起人们的广泛关注。

Combined with Ruby’s beginner-friendly syntax and readability, Rails made building web apps very quick and easy.

结合Ruby的初学者友好语法和可读性，Rails使构建Web应用程序变得非常快速和容易。

Ruby on Rails grew in popularity and became the framework of choice for startups. (Codepen.io, GitHub, and Shopify all use Ruby on Rails.)

Ruby on Rails越来越受欢迎，并成为初创企业的首选框架。 (Codepen.io，GitHub和Shopify 都使用 Ruby on Rails。)

However, Ruby was never one of the heavy hitters. Last year it came in tenth place both in Stack Overflow’s most commonly used language rankings, and the TIOBE index.

但是，Ruby从来不是沉重的打击者之一。去年，它在Stack Overflow最常用的语言排名和TIOBE索引中均排名第十。

In addition, Ruby on Rails doesn’t scale very well, leading to those startups eventually switching to other languages when they get really big (like Twitter switching to Java, as we mentioned above).

此外，Ruby on Rails的扩展性不是很好，导致这些初创公司最终在真正变得庞大时最终会切换到其他语言(例如，如上所述，Twitter切换到Java)。

It may not be topping the rankings, but Ruby could still be a good choice for your first language to learn.

它可能不会名列前茅，但是Ruby仍然可能是您学习第一门语言的不错选择。

If you’re interested in the startup world or your geographic area has a lot of Ruby jobs, I would consider learning Ruby and Ruby on Rails.

如果您对创业世界感兴趣，或者您的地理区域有很多Ruby工作，那么我会考虑学习Ruby和Ruby on Rails。

PHP

PHP is a language that a lot of people love to hate.

PHP是一种很多人都讨厌讨厌的语言。

However, despite the number of Quora questions asking if PHP is dead, the fact remains that PHP is the most widely used back-end language today.

但是，尽管有很多Quora问题询问PHP是否已失效，但事实仍然是PHP是当今使用最广泛的后端语言。

Research done by W3Techs.com shows that 83% of all websites use PHP. (The next highest language , ASP.NET, comprises only 14%.)

W3Techs.com所做的研究表明，所有网站中有83％使用PHP。 (第二高的语言ASP.NET仅占14％。)

Content management systems (CMSs) are a major reason for the large market share of PHP. The top three CMSs — WordPress, Joomla, and Drupal — are all built with PHP.

内容管理系统(CMS)是PHP占有较大市场份额的主要原因。前三大CMS (WordPress，Joomla和Drupal)都是使用PHP构建的。

WordPress itself has the lion’s share of the CMS market, making up 29.5% of all websites.

WordPress本身在CMS市场中占有最大份额，占所有网站的29.5％。

If you like working with it, WordPress development may be a good area of focus for customizing websites and building plugins or themes.

如果您喜欢使用它，WordPress开发可能是自定义网站和构建插件或主题的重点领域。

In addition to content management systems, PHP has some frameworks that make development easier and quicker. Laravel, a framework that came out in 2011, is currently the most popular one.

除了内容管理系统之外，PHP还具有一些使开发变得更加轻松快捷的框架。 Laravel是2011年推出的一种框架，目前是最受欢迎的框架。

Further reading

进一步阅读

处理数据和数据库 (Working with data and databases)

Databases can seem intimidating if you’re not familiar with them.

如果您不熟悉数据库，它们似乎会令人生畏。

However, if you think about it, you’ve probably worked with and used data in your own life at some point.

但是，如果您考虑一下，您可能已经在自己的生活中使用和使用过数据。

If you’ve ever used Excel to organize data, or created a chart to track your goals, then you’ve done a similar (albeit much simpler) function that databases do.

如果您曾经使用Excel来组织数据或创建了图表来跟踪您的目标，那么您已经完成了与数据库类似的功能(尽管更为简单)。

我需要学习使用数据库什么？ (What do I need to learn to use databases?)

Fortunately, you don’t need to learn a ton of different languages. The main database language is SQL (pronounced sequel).

幸运的是，您不需要学习大量不同的语言。主要的数据库语言是SQL (发音为sequel )。

SQL (Structured Query Language) was created in the 1970s by IBM, and is used in relational databases.

SQL(结构化查询语言)由IBM于1970年代创建，并用于关系数据库中。

The relational model is a way of structuring data into rows and columns (think like an Excel spreadsheet).

关系模型是一种将数据结构化为行和列的方式(就像Excel电子表格一样)。

Each column is designated for a certain kind of data, and it may require that the data is formatted correctly. And each row, or record, contains a unique ID or key in addition to the column, or field, values.

每列均指定用于某种类型的数据，并且可能需要正确格式化数据。每行或记录，除列或字段值外，还包含唯一的ID或键。

You can see this below:

您可以在下面看到此内容：

The records are then stored in multiple collections called tables. And a collection of tables (among other things) makes up the entire database schema, or structure.

然后将记录存储在称为表的多个集合中。表的集合(除其他外)构成了整个数据库的架构或结构。

The main types of SQL database systems are:

SQL数据库系统的主要类型是：

MySQL (used for PHP and open source applications)
MySQL (用于PHP和开源应用程序)
Microsoft SQL Server (generally used for .NET applications)
Microsoft SQL Server (通常用于.NET应用程序)
PostgreSQL (open source)
PostgreSQL (开源)

NoSQL

Even though SQL is the dominant type of database, there is another type: NoSQL (i.e. non-SQL). As the name implies, NoSQL databases are in some ways opposite of traditional SQL ones.

尽管SQL是数据库的主要类型，但还有另一种类型：NoSQL(即非SQL)。顾名思义，NoSQL数据库在某些方面与传统SQL数据库相反。

NoSQL is not relational, and doesn’t enforce the same type of structure that SQL does. Instead, you can store any kind of data in a freer, more flexible type of system.

NoSQL不是关系型的，并且不执行与SQL相同的结构类型。相反，您可以将任何类型的数据存储在更自由，更灵活的系统中。

This creates much faster processes and is much better at scaling up for large, complex applications. The downside is that you sacrifice data consistency.

这样可以创建更快的流程，并且在扩展大型复杂应用程序方面更好。缺点是您牺牲了数据一致性。

As Craig Buckler of Sitepoint writes:

Sitepoint的克雷格圆盾写道：

NoSQL is more flexible and forgiving, but being able to store any data anywhere can lead to consistency issues.

NoSQL更加灵活和宽容，但是能够将任何数据存储在任何地方都可能导致一致性问题。

NoSQL rose in popularity in the 2000s due to large tech companies like Facebook and Amazon needing a fast way to manipulate and store data.

由于象Facebook和Amazon这样的大型科技公司需要一种快速的方法来处理和存储数据，NoSQL在2000年代变得越来越流行。

MongoDB is the most commonly used NoSQL system. The other top types are Cassandra, Elasticsearch, and Couchbase, according to Hackernoon.

MongoDB是最常用的NoSQL系统。 The other top types are Cassandra, Elasticsearch, and Couchbase, according to Hackernoon .

SQL vs NoSQL?

You may run across discussions on whether NoSQL is replacing SQL, or which one is better. The truth is that both types of databases have their strengths and weaknesses.

Like anything else, the right choice will change depending on the project, and the job. Personally, I would recommend learning the basics of both SQL and NoSQL.

Further reading

History of SQL — TheBalance.com
History of SQL — TheBalance.com
SQLCourse.com — free online tutorial about SQL
SQLCourse.com — free online tutorial about SQL
SQL vs NoSQL Difference — XplentyBlog
SQL vs NoSQL Difference — XplentyBlog
NoSQL Explained — MongoDB
NoSQL Explained — MongoDB

Creating websites on servers (Creating websites on servers)

As we mentioned at the beginning, servers are simply computers that store website files and other resources like databases.

In order to have a website be accessible publicly on the internet, it needs to be installed on a server.

Here are some of the things that you’ll have to work with in order to create a live website:

Here are some of the things that you'll have to work with in order to create a live website:

Domain name and SSL certificate (Domain name and SSL certificate)

Domain names are the address of the website, like Google.com, Wikipedia.org or Dartmouth.edu.

In order to get one, you’ll have to choose one that is available, then purchase it from a domain name registrar like Namecheap.com or Google Domains.

In order to get one, you'll have to choose one that is available, then purchase it from a domain name registrar like Namecheap.com or Google Domains .

These companies register the domains with ICANN (Internet Corporation for Assigned Names and Numbers).

ICANN is a centralized organization that oversees and manages the DNS (domain name system) and IP (internet protocol) areas of the global internet.

In addition to the domain name, you should also get an SSL (Secure Sockets Layer) certificate for your domain. SSL will encrypt the traffic on your website, which will help protect it from cyber attacks.

Web host server space (Web host server space)

Once you have your domain name to AwesomeStupendousAmazingSite.com, you’ll need to purchase server space.

Once you have your domain name to AwesomeStupendousAmazingSite.com , you'll need to purchase server space.

There are a few different levels of web hosting plans:

Shared servers: The cheapest option, can range from a few dollars to $12–20 per month. Like it sounds, you share your server space with other website “neighbors.” Upside is the affordability, and downside is slower speeds and possible downtime if you exceed your usage for the month. Popular hosts are SiteGround, Bluehost, and WP Engine.
Shared servers : The cheapest option, can range from a few dollars to $12–20 per month. Like it sounds, you share your server space with other website “neighbors.” Upside is the affordability, and downside is slower speeds and possible downtime if you exceed your usage for the month. Popular hosts are SiteGround , Bluehost , and WP Engine .
Cloud servers: Cloud hosting is a relatively new option. It consists of a system of a large number of physical servers whose resources are all shared. Each individual “tenant” is then given a virtual server that pulls resources from the collective pool. This setup allows for more flexibility for bandwidth and can scale up very quickly. One company, Digital Ocean, deals exclusively with cloud servers. Pricing depends on your server specs, and can range from a few dollars a month all the way up to almost $1000.
Cloud servers: Cloud hosting is a relatively new option. It consists of a system of a large number of physical servers whose resources are all shared. Each individual “tenant” is then given a virtual server that pulls resources from the collective pool. This setup allows for more flexibility for bandwidth and can scale up very quickly. One company, Digital Ocean , deals exclusively with cloud servers. Pricing depends on your server specs, and can range from a few dollars a month all the way up to almost $1000.
VPS (Virtual Private Servers): VPSs are similar to cloud hosting in that each tenant has their own virtual server, and all tenants share one physical server. It’s better than shared hosting because you are allocated your own slice of the server resources. This option is a bit more expensive, between $20–60 per month (according to BlueHost).
VPS (Virtual Private Servers): VPSs are similar to cloud hosting in that each tenant has their own virtual server, and all tenants share one physical server. It's better than shared hosting because you are allocated your own slice of the server resources. This option is a bit more expensive, between $20–60 per month (according to BlueHost ).
Dedicated servers: These servers give you one complete physical server all to yourself. As you might imagine, this option is the most powerful but also the most expensive. They often also are managed servers, meaning the company will run maintenance and do other tasks for you. Dedicated hosting will generally run you a couple to a few hundred dollars per month, according to SiteGround pricing.
Dedicated servers: These servers give you one complete physical server all to yourself. As you might imagine, this option is the most powerful but also the most expensive. They often also are managed servers, meaning the company will run maintenance and do other tasks for you. Dedicated hosting will generally run you a couple to a few hundred dollars per month, according to SiteGround pricing.

Server setup and maintenance (Server setup and maintenance)

Once you have your domain name and server space, you’ll have to set up your site on the server.

Once you have your domain name and server space, you'll have to set up your site on the server.

This involves directing your domain name to your server’s unique IP address, setting up your website files and database (if necessary), and other configurations.

This involves directing your domain name to your server's unique IP address, setting up your website files and database (if necessary), and other configurations.

How much work you have to do will depend on type of server plan you purchased from your web host. The simplest shared plans often come with one-click features that will automatically install WordPress, Drupal, or other sites for you.

Other servers, like Digital Ocean, are very minimal and require you to set everything up manually.

Deploying files to your server (Deploying files to your server)

You might be wondering how you get files from your own computer up to your server. You can accomplish this by using a protocol, which is basically a method of transporting files or other data to and from a server.

You might be wondering how you get files from your own computer up to your server. You can accomplish this by using a protocol , which is basically a method of transporting files or other data to and from a server.

Side note:

Side note:

The most simple way is by using a protocol called FTP (File Transfer Protocol). However it’s not recommended to use FTP anymore, because it is not secure (encrypted).

The most simple way is by using a protocol called FTP (File Transfer Protocol). However it's not recommended to use FTP anymore, because it is not secure (encrypted).

Nowadays most people use more secure protocols FTPS (FTP over SSL) or SFTP (Secure SHell FTP).

To get FTP/SFTP working, you need to create an account on your server. You’ll then connect to the server using the IP address of the server, and a username and password login for authentication.

To get FTP/SFTP working, you need to create an account on your server. You'll then connect to the server using the IP address of the server, and a username and password login for authentication.

In order to transfer files over FTP/SFTP you can use programs like Filezilla or CyberDuck. These have a GUI (graphical user interface) that makes it relatively easy to upload and download files to and from your computer and your server.

In order to transfer files over FTP/SFTP you can use programs like Filezilla or CyberDuck . These have a GUI (graphical user interface) that makes it relatively easy to upload and download files to and from your computer and your server.

Deployment tools (Deployment tools)

As you might imagine, having to manually upload files to your server every time you make one little code change can get tedious. In addition, things can get confusing if multiple people are working on the same file and uploading simultaneously.

Fortunately, you can set up deployments that link into your Git repository.

The deployment tool stores your FTP/SFTP settings, and when you push a change in Git to your master branch, for example, the tool will transfer the files for you. That way you don’t need to remember which files you changed, reducing the number of mistakes you make.

The deployment tool stores your FTP/SFTP settings, and when you push a change in Git to your master branch, for example, the tool will transfer the files for you. That way you don't need to remember which files you changed, reducing the number of mistakes you make.

For more complex websites that have a team with several people, there are more advanced deployment tools and systems that you can use to make your deployments more structured.

These systems are beyond the scope of this article, but they include practices such as continuous integration.

These systems are beyond the scope of this article, but they include practices such as continuous integration .

Further reading

Domain Name Registration process — WHOIS
Domain Name Registration process — WHOIS
8 Popular Types of Web Hosting Services — TheBalance.com
8 Popular Types of Web Hosting Services — TheBalance.com
6 Best FTP Clients — WP Beginner
6 Best FTP Clients — WP Beginner
Continuous integration vs. continuous delivery vs. continuous deployment — Atlassian
Continuous integration vs. continuous delivery vs. continuous deployment — Atlassian

恭喜！！ (Congrats!!)

You’ve made it through!

You've made it through!

Now before we continue to the resource list, please note that the following section contains some affiliate links. This means I will receive a small commission from the company if you purchase through the link.

It’s an easy way that you can support writing these types of articles, at no extra cost to yourself. (I’ve also included non-affiliate links as well, if you’d prefer to use that.)

It's an easy way that you can support writing these types of articles, at no extra cost to yourself. (I've also included non-affiliate links as well, if you'd prefer to use that.)

Epilogue: Recommended learning resources (Epilogue: Recommended learning resources)

As I’m sure you know, there are a ton of resources that you can use to learn code.

As I'm sure you know, there are a ton of resources that you can use to learn code.

I’ve included some of the most popular and recommended online tutorials, books, and other resources here.

I've included some of the most popular and recommended online tutorials, books, and other resources here.

Complete web development courses (Complete web development courses)

There are a few online courses that cover all or very close to all of the areas of web development.

If you don’t want to jump around and just want to focus on one place to learn everything, I’d recommend one or more of the following:

If you don't want to jump around and just want to focus on one place to learn everything, I'd recommend one or more of the following:

freeCodeCamp is a non-profit that offers completely free education for aspiring web developers.

Their curriculum is a comprehensive set of courses ranging from front to back end (using Node and Express) and more!

Many people have landed full-time jobs after taking freeCodeCamp. You can also contribute to open source projects via GitHub.

One of the main perks of freeCodeCamp is that it’s very community-centered, with message boards and Facebook groups, so you’re able to get a lot of support as you learn.

One of the main perks of freeCodeCamp is that it's very community-centered, with message boards and Facebook groups, so you're able to get a lot of support as you learn.

You can read some reviews of freeCodeCamp on Quora and Reddit.

You can read some reviews of freeCodeCamp on Quora and Reddit .

Colt Steele’s Web Developer Bootcamp (affiliate link / non-affiliate link)

Colt Steele's Web Developer Bootcamp ( affiliate link / non-affiliate link )

Colt is a former coding bootcamp instructor who wanted to offer a complete bootcamp for a fraction of the price.

He ended up creating one of the most popular and well-rated web developer courses on Udemy, and with good reason.

His course takes you from the basics through full-stack development (using Node and Express as the back-end), with a lot of content and is updated frequently.

You can read reviews of his course on the Udemy page, as well as on a freeCodeCamp forum post.

You can read reviews of his course on the Udemy page, as well as on a freeCodeCamp forum post .

Udacity offers both free courses and paid programs called Nanodegrees.

Udacity offers both free courses and paid programs called Nanodegrees .

The Nanodegrees build off of the free courses– they are intensive (12 hrs/week) programs where you build portfolio projects and have more community interaction and support.

They’re not cheap, currently $199/mth and it may take you between 6 to 10 hours to complete one.

They're not cheap, currently $199/mth and it may take you between 6 to 10 hours to complete one.

If you’re interested, here are some reviews of Udacity’s Nanodegree programs on Quora and Hacker News, and Quora answers about the difference between Udacity’s free courses vs Nanodegree.

If you're interested, here are some reviews of Udacity's Nanodegree programs on Quora and Hacker News , and Quora answers about the difference between Udacity's free courses vs Nanodegree.

其他资源 (Other resources)

Team Treehouse is a very popular website for learning coding. They don’t have free content, but they use a subscription model.

Team Treehouse is a very popular website for learning coding. They don't have free content, but they use a subscription model.

Treehouse offers tiered monthly plans ($25 or $55/mth currently) and you can take unlimited courses.

You can even pause your membership if you want to take a break for a few months, and resume it later when you’re ready.

You can even pause your membership if you want to take a break for a few months, and resume it later when you're ready.

Aside from individual courses, they also have structured tracks like Java Web Development or Front End Web Development which guide you through a series of selected courses.

Udemy (affiliate link / non-affiliate link)

Udemy ( affiliate link / non-affiliate link )

Udemy is one of the largest online learning platforms, and has courses not only in coding, but other professional and hobbyist areas.

You pay for each course individually, and they have frequent sales where course are anywhere from $10–20 each.

Of course, due to the large number of courses and instructors, they vary in quality, so you should do research before buying.

I’d recommend checking ratings and reviews both on the Udemy course page and elsewhere online.

I'd recommend checking ratings and reviews both on the Udemy course page and elsewhere online.

Wes Bos is a web development instructor who has created quite a few very popular courses.

One course I’d definitely check out is JavaScript30 (affiliate link / non-affliate link). This is his free 30-day vanilla (meaning no frameworks or libraries) JavaScript coding challenge.

One course I'd definitely check out is JavaScript30 ( affiliate link / non-affliate link ) . This is his free 30-day vanilla (meaning no frameworks or libraries) JavaScript coding challenge.

He also has premium courses on React, Node, and more advanced JavaScript on his website.

If you’re curious, here are some reviews of his courses on Reddit and the freeCodeCamp forum.

If you're curious, here are some reviews of his courses on Reddit and the freeCodeCamp forum .

Microsoft Virtual Academy (MVA) has a collection of free online courses ranging from C# and Python to SQL Server and other areas like game development.

Some of their popular courses are Introduction to Programming with Python, C# Fundamentals and SQL Database Fundamentals courses.

Some of their popular courses are Introduction to Programming with Python , C# Fundamentals and SQL Database Fundamentals courses.

Here are a couple reviews of MVA courses on Reddit and LinkedIn.

Here are a couple reviews of MVA courses on Reddit and LinkedIn .

SoloLearn has a unique approach to learning coding: you can learn not only from their website, but on their free mobile apps.

Some of their most popular courses are Python, C++, and Java.

They also have a StackOverflow type of message board that is quite active with questions and discussions.

If you’re curious, you can check out some reviews of SoloLearn on Reddit and Quora.

If you're curious, you can check out some reviews of SoloLearn on Reddit and Quora .

图书 (Books)

If you enjoy learning from books, or want some on hand as references, here is a short list of books that I thought would be good for beginners.

Some of them are free and available online for you to read, others are traditional paper books.

HTML and CSS by Jon Duckett(affiliate link / non-affiliate link)

HTML and CSS by Jon Duckett ( affiliate link / non-affiliate link )

JavaScript and JQuery by Jon Duckett(affiliate link / non-affiliate link)

JavaScript and JQuery by Jon Duckett ( affiliate link / non-affiliate link )

Jon Duckett’s books are quite possibly the most popular books for beginner web developers.

Jon Duckett's books are quite possibly the most popular books for beginner web developers.

They aren’t just plain textbooks, but are beautifully-designed books that use photos and illustrations to teach coding concepts.

They aren't just plain textbooks, but are beautifully-designed books that use photos and illustrations to teach coding concepts.

The Front-End Developer Handbook is a free online book from Frontend Masters and written by Cody Lindley.

The Front-End Developer Handbook is a free online book from Frontend Masters and written by Cody Lindley .

It’s updated yearly and you can think of it as a “state of front-end web development” guide with new information, resources, trends, and tools related to the field.

It's updated yearly and you can think of it as a “state of front-end web development” guide with new information, resources, trends, and tools related to the field.

Eloquent JavaScript is a beginner’s book about programming that focuses on JavaScript.

Eloquent JavaScript is a beginner's book about programming that focuses on JavaScript.

You can read it for free online on the website, which has a neat console tool where you can write and test the code as you read.

If you want a physical copy, the book is also available on Amazon (affiliate link / non-affiliate link).

If you want a physical copy, the book is also available on Amazon ( affiliate link / non-affiliate link ) .

总结思想 (Closing thoughts)

Is it possible to teach yourself web development with online resources? I believe the answer is yes.

However it will not be easy at all. Learning and mastering anything is difficult, and learning to code is no different.

With that in mind, if you do want to go down that path, here is some advice:

Stay focused. (Stay focused.)

When you’re learning on your own, it can be very tempting to jump around from one tutorial to another. Especially when you start hitting roadblocks.

When you're learning on your own, it can be very tempting to jump around from one tutorial to another. Especially when you start hitting roadblocks.

But this can result in learning very superficially, when you actually need to develop a deeper knowledge of skills.

Try to stick with the course/book that you’re working on, unless you really don’t like it. Fighting through the roadblocks will help you develop a fuller understanding of the material.

Try to stick with the course/book that you're working on, unless you really don't like it. Fighting through the roadblocks will help you develop a fuller understanding of the material.

And the more seemingly impossible problems you tackle, the more you’ll get used to facing challenges.

And the more seemingly impossible problems you tackle, the more you'll get used to facing challenges.

Any course is simply the first step in your learning journey. (Any course is simply the first step in your learning journey.)

Just taking a tutorial or course doesn’t mean that you’ll be a master by the time you finish. You’ll have to learn and practice many times before you really truly “get” it.

Just taking a tutorial or course doesn't mean that you'll be a master by the time you finish. You'll have to learn and practice many times before you really truly “get” it.

Try going through a tutorial a second time, or even learning the same material with a different course or book.

You’ll see how different people explain the same concept, and it may help the knowledge to stick in your brain better.

You'll see how different people explain the same concept, and it may help the knowledge to stick in your brain better.

And, of course, there is no substitute for practical experience.

As you learn, try to practice the skills you’re learning about on your own. Build random projects, make a website for free for a friend or a non-profit. The more times you solve a problem, the more you will understand it.

As you learn, try to practice the skills you're learning about on your own. Build random projects, make a website for free for a friend or a non-profit. The more times you solve a problem, the more you will understand it.

谢谢阅读！ (Thanks for reading!)

I really hope you found this article helpful!

Feel free to leave a comment below with any thoughts or feedback.

Want more? (Want more?)

I write web development tutorials on my blog, Coder-Coder.com!

I write web development tutorials on my blog, Coder-Coder.com !

Other blog posts there that you might enjoy:

I also post mini-tips on Instagram and coding tutorials on YouTube.

I also post mini-tips on Instagram and coding tutorials on YouTube .

翻译自: https://www.freecodecamp.org/news/the-absolute-beginners-guide-to-learning-web-development-in-2018-d87ba925549b/

java web开发初学

cumichun6193

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
java web开发初学_2018年学习Web开发的绝对初学者指南

java web开发初学This post was originally published on Coder-Coder.com. 该帖子最初发布在Coder-Coder.com上。 If you’re a beginner coder, this guide is for you! 如果您是初学者，那么本指南适合您！ Here is what this guide covers: 本指南...
复制链接

扫一扫