web开发从0开始
个人成功(PERSONAL SUCCESS)
Getting started into programming can be very scary, and there are a lot of misconceptions out there that make people think that programming is a skill they could never learn, or that landing a job as a web developer is almost mission impossible. They couldn’t be more wrong!
编程入门可能会非常令人恐惧，并且存在许多误解，使人们认为编程是他们永远不会学到的技能，或者找到工作作为Web开发人员几乎是不可能的任务。 他们不能再错了！
The software development industry, web development in particular is full of amazing stories of people with no tech background who switched to development and changed their life for great and they couldn’t be happier with the change.
软件开发行业，尤其是Web开发中充满了令人惊叹的故事，这些故事涉及没有技术背景的人，他们转而从事开发工作并极大地改变了他们的生活，而他们对此变化感到高兴。
Programming is a great skill to have, it will teach you to think differently, it will open you the doors to a lot of job opportunities even in these times where the job market is so hurt by the economic decline, and it will also give you an amazing talent to build your own projects and companies.
编程是一项很棒的技能，它将教会您不同的思维方式，即使在当前由于经济衰退而严重损害就业市场的时期，它也为您打开了许多就业机会的大门，并且还可以为您提供帮助建立自己的项目和公司的杰出人才。
I’m a self-taught developer, I tried college a few times a few years ago, to never succeed there, I was always getting bored at the classrooms and it just wasn’t for me. However thanks to the amazing world of the internet I was able to learn all my skills and become a great software engineer. As a side note here, today I’m completing my degree at an online university, not because I needed it to get a job in tech, or because it was limiting my career in any way, but because it’s a personal debt I want to pay off.
我是一个自学成才的开发人员，几年前我曾尝试过大学几次，但从未成功过，我总是在教室里感到无聊，这不适合我。 但是，由于互联网的惊人世界，我得以学习所有技能并成为一名出色的软件工程师。 在此附带说明，今天我要在在线大学完成我的学位，这不是因为我需要它才能获得技术工作，或者不是因为它以任何方式限制了我的职业，而是因为这是我个人的债务付清。
Going back to our topic here, let me present you my path to becoming a web developer, in particular, a front end developer (if you don’t know what this is, stay with me, I’ll explain it all), and my path to landing your first job in tech.
回到这里，让我向您介绍成为Web开发人员的途径，尤其是成为前端开发人员的途径(如果您不知道这是什么，请与我在一起，我会全解释)我的第一份技术工作职位。
什么是网络开发人员 (What is a web developer)
Congrats! You decided to stay here, that means that you took the first step into becoming a web developer, but what exactly does it mean to be a web developer?
恭喜！ 您决定留在这里，这意味着您迈出了成为Web开发人员的第一步，但是成为Web开发人员到底意味着什么？
I don’t want to be so obvious here, but a web developer is he/she who utilizes a programming language to build web pages and applications. There are 3 types of web developers out there, front-end developers, back-end developers, and full-stack developers.
我不想在这里这么明显，但是他/她是一位网络开发人员，他/她利用编程语言来构建网页和应用程序。 有3种类型的Web开发人员，前端开发人员，后端开发人员和全栈开发人员。
前端开发人员 (Front-end developer)
A front-end developer is responsible for building what you see and interact with on a web page or application. It is the specialist who transforms a design, an image, or an idea into the code that allows web browsers to display the website. We shouldn’t underestimate the work front-end developers do, as a matter of fact as web applications are becoming increasingly more sophisticated, the job of the front-end developer has been mutating from simply working on implementing the design to actually building full working applications which run within our browsers. This is for me a key role where you can combine tech, development, and design to build amazing experiences, and it is my recommendation for those getting started. Starting in front-end would be an easier road than if you start in back-end.
前端开发人员负责构建您在网页或应用程序上看到并与之交互的内容。 正是专家将设计，图像或想法转换为允许Web浏览器显示网站的代码。 我们不应该低估前端开发人员所做的工作，事实上，随着Web应用程序变得越来越复杂，前端开发人员的工作已经从单纯的实现设计转变为实际构建完整的工作。在我们的浏览器中运行的应用程序。 对我来说，这是关键角色，您可以在其中结合技术，开发和设计来构建出色的体验，这是我对那些入门者的建议。 与从后端开始相比，从前端开始更容易。
后端开发人员 (Back-end developer)
This role is responsible for designing and building the systems that will support our front-end application. For example, when you click the “save” button, the back-end developer will write with code the algorithms and logic responsible for receiving your request, process it, store it in a database (if required) and send back the results so that the front-end can let you know it all went good.
该角色负责设计和构建将支持我们的前端应用程序的系统。 例如，当您单击“保存”按钮时，后端开发人员将使用代码编写负责接收您的请求的算法和逻辑，进行处理，将其存储在数据库中(如果需要)，然后将结果发送回去，以便前端可以让您知道一切顺利。
The back-end is what makes applications work across multiple devices, or which makes it possible to store your information in the “could”.
后端使应用程序可以跨多个设备运行，或者使信息可以存储在“罐”中。
全栈开发人员 (Full-stack developer)
It is a new term for an old role, the full-stack developer is someone who can work both, front-end and back-end tasks.
这是旧角色的新名词，全栈开发人员是可以同时执行前端和后端任务的人员。
脚步 (Steps)
Let’s now jump into the steps that you need to become a front-end developer and land your first job.
现在，让我们跳到成为一名前端开发人员并找到第一份工作所需的步骤。
All the steps I’m providing here and my recommendations are what I gather from years in the industry as a developer myself, working as a tech lead for a big multinational company where I interviewed many many candidates and now in my role as a senior software engineer and content creator.
我在这里提供的所有步骤以及我的建议，都是我作为开发人员本人在业界多年收集的经验，是一家大型跨国公司的技术负责人，在那里我采访了许多候选人，现在担任高级软件职位。工程师和内容创建者。
1.学习HTML和CSS (1. Learn HTML & CSS)
In order to become a front-end developer, the first thing you need to know is a little bit about how the web works. Have you ever wondered how does your browser knows how to display on the screen? How to position things and using which colors?
为了成为前端开发人员，您需要了解的第一件事是有关网络的工作原理。 您是否想知道浏览器如何知道如何在屏幕上显示？ 如何定位事物并使用哪种颜色？
HTML (HTML)
HTML (Hypertext Markup Language) is a standard markup language that is known by all web browsers and it’s used to describe the content of your site. Not so much the design of it, but the structure and content itself. HTML works with a specific syntax of tags and nodes and looks something like:
HTML(超文本标记语言)是所有网络浏览器都知道的一种标准标记语言，用于描述您网站的内容。 与其说是设计，不如说是结构和内容本身。 HTML使用标签和节点的特定语法，其外观类似于：
My first web site
Hello World!
Maybe you don’t know what that code does yet, but I’m pretty sure you can at least identify some points, like there’s a title, and there’s some content like “Hello World!” there. HTML is made so it can be read by computers but also by humans in an almost natural way.
也许您还不知道该代码的作用，但是我敢肯定，您至少可以确定一些要点，例如标题，以及“ Hello World！”之类的内容。 那里。 制作HTML使其可以被计算机读取，也可以被人类以几乎自然的方式读取。
This is the place where you want to start, there are plenty of courses out there, pick one, and learn the concepts and how it works before moving on to CSS.
这是您要开始的地方，这里有很多课程，选择其中一门，然后学习概念及其工作原理，然后再转向CSS。
Here are some free resources to get you started:
以下是一些免费资源，可帮助您入门：
Learn-HTML
学习HTML
html.com
html.com
HTML Crash Course For Absolute Beginners (video)
面向绝对初学者HTML速成班(视频)
CSS (CSS)
Now that you know how to place content on the user’s screen we need to make it pretty and here is where CSS can help you. CSS is a code syntax designed to describe how HTML elements will be displayed on the screen. It allows developers to place the content in different positions on the screen, add colors, backgrounds, borders, fonts, animations, anything you need to match your design, is likely CSS supports it.
现在您知道了如何在用户屏幕上放置内容，我们需要使内容漂亮，这是CSS可以为您提供帮助的地方。 CSS是一种代码语法，旨在描述HTML元素如何在屏幕上显示。 它允许开发人员将内容放置在屏幕上的不同位置，添加颜色，背景，边框，字体，动画以及您需要与设计匹配的任何内容，而CSS可能支持它。
Learning CSS is extremely important, no one would use nowadays a page with no design at all, this is a killer skill. Some people do really amazing things with CSS, from amazing designs to art, animations, it’s unbelievable.
学习CSS非常重要，如今没有人会使用完全没有设计的页面，这是一项杀手skill。 有些人使用CSS可以做令人惊奇的事情，从令人惊奇的设计到艺术，动画，这简直令人难以置信。
CSS looks something like:
CSS看起来像：
.title {
color: green;
}A bit scarier, but perhaps you got an idea of what it could possibly do.
有点吓人，但也许您对它可能会做什么有所了解。
Here are some free resources to get you started:
以下是一些免费资源，可帮助您入门：
Learn CSS by Mozilla
通过Mozilla学习CSS
CSS Beginner Guide on HTMLDog
HTMLDogCSS入门指南
2.练习(2. Practice)
Before jumping into the next step, make sure you practice a lot. You can now build static websites, make many of them, start with the basics, move into more advanced features as you get used to it. Build a personal website, one for your dog or cat, add colors, backgrounds, images, titles, menus, etc.
跳到下一步之前，请确保您练习很多。 现在，您可以构建静态网站，创建许多静态网站，从基础开始，逐步熟悉更高级的功能。 建立一个个人网站，一个适合您的狗或猫的网站，添加颜色，背景，图像，标题，菜单等。
Once you are pretty comfortable with HTML and CSS, and this is important to avoid frustrations later on, move on to JavaScript.
一旦您对HTML和CSS相当满意，并且这对于避免日后感到沮丧很重要，请继续使用JavaScript。
3.学习JavaScript并改变世界 (3. Learn JavaScript and change the world)
So far you have been building amazing web pages, but they couldn’t do much right? You were able to present content, style it, and build great designs and animations but they were lacking interactive elements, dynamic parts, and this is what JavaScript is for.
到目前为止，您一直在构建令人惊叹的网页，但是它们做的不对吗？ 您能够呈现内容，对其进行样式设置以及构建出色的设计和动画，但是它们缺少交互式元素，动态部件，而这正是JavaScript的目的。
JavaScript is a programming language, in fact, it is one of the most popular programming languages today available, which has the particularity of running in web browsers, and thus it can be used for building web applications.
JavaScript是一种编程语言，实际上，它是当今最流行的编程语言之一，具有在Web浏览器中运行的特殊性，因此可以用于构建Web应用程序。
JavaScript allows you to interact with your HTML by handling events such as the user clicking on an element, timed events, and much more. It also allows you to dynamically change the contents of your page, meaning that it has access to the “HTML”, or actually to the DOM of the page.
JavaScript允许您通过处理事件(例如用户单击元素，定时事件等)来与HTML进行交互。 它还允许您动态更改页面的内容，这意味着它可以访问“ HTML”或实际上是页面的DOM。
JavaScript today migrated from the browser to many other applications. Many companies are building back-ends that run on JavaScript, even desktop applications are now built with it.
如今，JavaScript已从浏览器迁移到许多其他应用程序。 许多公司正在构建可在JavaScript上运行的后端，甚至现在也使用它来构建桌面应用程序。
Learning JavaScript will be a gigantic step towards achieving your goal of becoming a web developer, it will likely be the hardest, so take your time with this one, it won’t be easy, but it’s not impossible, and with the huge amount of free content out there, there are no excuses.
学习JavaScript是实现您成为Web开发人员目标的巨大一步，这可能是最困难的，因此，花点时间来学习它，虽然并非易事，但并非没有可能，并且花费了大量的时间。免费内容在那里，没有任何借口。
So do your reading and practice, practice, practice.
您也可以阅读和练习，练习，练习。
Here are some resources to get you started:
以下是一些入门资源：
Learn JS
学习JS
FreeCodeCamp
FreeCodeCamp
4.制作一个投资组合网站 (4. Make a portfolio site)
Now that you have the skills it is time to show them off. It is very popular among developers to showcase your skills using a portfolio website. A portfolio website is basically a collection of your best projects to showcase to employers or future customers.
现在您已经具备了技巧，现在该炫耀它们了。 在开发人员中很受欢迎，可以使用投资组合网站展示您的技能。 投资组合网站基本上是您最好的项目的集合，可以向雇主或未来的客户展示。
Usually, developers would have 2 different portfolio websites:
通常，开发人员会有两个不同的投资组合网站：
个人网站 (Personal website)
Build your own website and host it to show the world your talent. This website will be an upsell of your self, it’s the ultimate curriculum for developers, so make it to impress. One of the features on this website is a section where you will link or showcase your projects.
建立并托管自己的网站，向全世界展示您的才华。 该网站将是您的自我增值，它是开发人员的终极课程，因此印象深刻。 该网站的功能之一是一个部分，您可以在其中链接或展示您的项目。
Often you won’t only show the results, so a link to your project running on the internet, but also the source code for it. And here is where the next option is really good.
通常，您不仅会显示结果，还会显示您在Internet上运行的项目的链接，还会显示其源代码。 在这里，下一个选择真的很不错。
的GitHub (GitHub)
GitHub is a website that allows you to host the code for your projects for free and open for everyone to see. GitHub is the most important open-source repository, and the home of many, many of the open applications out there. Getting an account is free, and you can start hosting your code within minutes. Learn all about it on their site.
GitHub是一个网站，允许您免费托管项目代码，并向所有人开放。 GitHub是最重要的开放源代码存储库，也是许多开放应用程序的所在地。 获取帐户是免费的，您可以在几分钟之内开始托管代码。 在他们的网站上了解所有相关信息。
Now, you can use GitHub without any special tool by simply drag and drop files, however, what makes GitHub so special is that they run something called a GIT service, GIT is a technology for hosting code that makes team collaboration possible, and that allows you to look at your code at any point of time and see all the changes from there. It’s an amazing tool and it will be required for you to learn.
现在，您可以通过简单地拖放文件而无需任何特殊工具的情况下使用GitHub，但是，使GitHub如此特别的地方是它们运行一种称为GIT服务的东西，GIT是一种托管代码的技术，使团队协作成为可能，并且允许您可以随时查看您的代码，并从那里查看所有更改。 这是一个了不起的工具，您需要学习它。
There are many resources for learning GIT:
有很多学习GIT的资源：
Git for Absolute Beginners
绝对入门的Git
Git Concepts and workflow for Beginners
初学者的Git概念和工作流程
If you need some project ideas, I have a post that may help you:
如果您需要一些项目构想，我有一篇帖子可以为您提供帮助：
5.建立一个杀手级的简历并开始联系 (5. Build a killer resume and start connecting)
Now that your portfolio is up, you need to work on your resume, and the right place to do it is LinkedIn. You probably already know LinkedIn, but if not check it out. You will need a LinkedIn account to get started building your resume, listing your projects, having a killer profile description, and more importantly to start networking,
现在您的投资组合已经准备好了，您需要处理简历，而LinkedIn正是合适的去处。 您可能已经知道LinkedIn，但如果不了解的话。 您将需要一个LinkedIn帐户才能开始构建您的简历，列出您的项目，提供重要的个人资料描述，更重要的是要开始联网，
Add people from the field, many are willing to help, or they post daily with advice for people who are starting.
从现场添加人员，许多人愿意提供帮助，或者他们每天为刚开始的人员提供建议。
You can add me like your network at:
您可以在以下位置添加我，就像您的网络一样：
https://www.linkedin.com/in/bajcmartinez/
https://www.linkedin.com/in/bajcmartinez /
6.学习框架！ (6. Learn a Framework!)
It’s time now to step up your game and enter the world of frameworks. A framework is a set of functions and libraries that simplify the development tasks. Newer frameworks are sophisticated pieces of code that sometimes reinvent the way we even program web applications.
现在是时候增强您的游戏并进入框架世界了。 框架是一组简化开发任务的功能和库。 较新的框架是复杂的代码片段，有时会重塑我们甚至编写Web应用程序的方式。
Some of these frameworks are like a programming language on its own as they provide very specific ways to get things done. It may take some time to get used to them, but once you do, your productivity will boost.
其中一些框架本身就像一种编程语言，因为它们提供了非常具体的方法来完成任务。 适应它们可能需要一些时间，但是一旦您适应了它们，您的生产力就会提高。
One important thing here, there are many, many frameworks out there and you don’t need to learn them all. Choose one and start there, make a good choice, take one of the most popular frameworks out there, and master it. Perhaps you don’t like it, that’s alright, pick another and switch, but don’t try to learn at the beginning of all of them.
这里很重要的一点是，这里有很多很多框架，您不需要全部学习。 选择一个并从那里开始，做出一个不错的选择，从那里选择最受欢迎的框架之一，并掌握它。 也许您不喜欢它，没关系，选择另一个并切换，但不要尝试在所有课程的开始学习。
My personal recommendation is to go with one of the following:
我个人的建议是选择以下一项：
ReactJS (my personal favorite)
ReactJS (我个人最喜欢的)
Angular
角度的
VueJS
VueJS
Among these 3 there is no right or wrong, there’s a preference and perhaps conveniences depending on the type of project. But they are of the bests in 2020.
在这3个项目中，没有对与错，根据项目的类型，存在偏爱，也许还有便利。 但他们是2020年的佼佼者。
7.面试准备！ (7. Interview prep!)
Way to go! You are now a web developer, though you still need to get a job at it. Interviewing as a web developer is its own unique experience compared to other professions. You will have to show your interviewers your experience, which at this point are the side projects you built along your learning journey. You will also have to show the interviewer that you know how to code and that you have a certain knowledge of HTML, CSS, and JavaScript, and perhaps even of a particular framework.
要走的路！ 您现在是一名Web开发人员，尽管您仍然需要找到一份工作。 与其他行业相比，作为Web开发人员进行面试是其自身的独特经历。 您将必须向面试官展示您的经验，这是您在学习过程中建立的附带项目。 您还必须向面试官表明您知道如何编码，并且对HTML，CSS和JavaScript甚至对特定框架有一定的了解。
Don’t be surprised if the interview contains a section where you actually have to code live a short piece of code, or if you are sent a home assignment that you need to work on and present your results at a later interview. These are all common practices when interviewing for a developer position.
如果面试包含您实际上必须编写一段短代码的部分，或者如果您收到了需要做的家庭作业并在以后的面试中展示结果的信息，请不要感到惊讶。 这些都是面试开发人员职位时的常见做法。
Make sure you practice your skills before and you will be good to go.
确保您之前已经练习过技能，并且会很好。
There are sites which specialize in preparing for interviews, check them out and give them a try. Keep in mind your level though, some of those sites can get really complicated really fast, adjust your challenges to your experience.
有些网站专门准备面试，将其签出并进行尝试。 不过请记住您的水平，其中一些网站可能会很快变得非常复杂，并根据您的体验调整挑战。
最后的话 (Final words)
The world of tech is constantly changing, and as developers working at the edge of technology, we need to do as well. Keeping yourself informed of the latest frameworks, techniques, programming languages, etc is crucial to remain effective in the workplace.
科技的世界在不断变化，作为开发人员在科技前沿工作，我们也需要这样做。 使自己了解最新的框架，技术，编程语言等，对于在工作场所保持高效至关重要。
You just started a life long journey, which provides amazing opportunities, enjoy it!
您刚刚开始了终生的旅程，它提供了惊人的机会，尽情享受吧！
Thanks so much for reading!
非常感谢您的阅读！
升级编码 (Level Up Coding)
Thanks for being a part of our community! Subscribe to our YouTube channel or join the Skilled.dev coding interview course.
感谢您加入我们的社区！ 订阅我们的YouTube频道或参加Skilled.dev编码面试课程。
翻译自: https://levelup.gitconnected.com/how-to-get-started-into-web-development-bc31c90a06a8
web开发从0开始