前端初学者开发学习视频_初学者学习前端开发的实用指南

前端初学者开发学习视频

by Nikita Rudenko

通过尼基塔·鲁登科(Nikita Rudenko)

初学者学习前端开发的实用指南 (A practical guide to learning front end development for beginners)

I started my coding journey in spring 2018, a bit less than one year ago. I earned some programming skills since that time but still, I understand there are many more things to learn ahead. Anyway, I decided to gather these tips in a single place to help future developers on their path. This article is the guide I would have liked to have found when I started my journey.

我在不到一年前的2018年Spring开始了编码之旅。 从那时起，我获得了一些编程技能，但我仍然知道，还有很多事情需要学习。 无论如何，我决定将这些技巧汇总在一个地方，以帮助将来的开发人员前进。 本文是我开始旅程时希望找到的指南。

在开始之前 (Before Starting)

If you decided to study on your own, there is a lot of information on the Internet and it’s hard to wrap your head around everything. It’s important to have a structured plan and avoid wasting time by jumping from one resource to another.

如果您决定自己学习，那么互联网上就会有很多信息，您很难将所有事情都束之高阁。 重要的是要有一个结构化的计划，避免浪费时间从一种资源转移到另一种资源。

Please note that these are just the first steps into the front-end universe. It will help you get started but it’s not intended to be a complete guide.

请注意，这些只是进入前端世界的第一步。 它可以帮助您入门，但它并不旨在成为完整指南。

As a disclaimer, please note that the following resources are not an advertisement. I mention them because they helped me at some point and I personally recommend them. Most of them are free, otherwise, it will be specified.

作为免责声明，请注意以下资源不是广告。 我之所以提到它们，是因为它们在某些时候对我有所帮助，因此我个人推荐它们。 其中大多数是免费的，否则将指定它。

As a starting point, I recommend signing up on freeCodeCamp. And I will base the rest on their curriculum. I consider it to be a great resource for various reasons:

首先，我建议注册freeCodeCamp 。 我将以他们的课程为基础。 由于多种原因，我认为它是一种很好的资源：

1. Curriculum. This can be your main path. It’s a well-structured overview of the things you should learn and provides a good learning curve.

   课程。 这可能是您的主要路径。 它是您应该学习的东西的结构良好的概述，并提供了良好的学习曲线。

2. Exercises. They are bite-sized so you can easily keep up the pace by doing a couple of them every day and keeping your heat map green.

   练习。 它们很小，因此您可以每天进行几次操作并保持绿色热点，从而轻松地跟上步伐。

3. Projects. After completion of every chapter, you will build 5 projects to get your certification. It’s ideal to get some practice and consolidate your knowledge.

   项目。 完成每一章后，您将构建5个项目以获得认证。 进行一些练习并巩固您的知识是理想的。

4. Community. It’s more than just a learning platform. There is a forum, blog, and YouTube channel where developers of different levels share their knowledge and where you can find inspiration.

   社区。 它不只是一个学习平台。 有一个论坛，博客和YouTube频道，不同级别的开发人员可以在此共享知识，并在其中找到灵感。

5. It’s free. Money can be critical for many people and here, in any case, you won’t spend anything except time.

   免费。 金钱对许多人来说至关重要，在任何情况下，除了时间，您什么都不会花。

Pro tip: you can create an account on Twitter, if you don’t have one yet, and publicly commit to the 100DaysOfCode challenge. The reason is simple - there are many people doing this challenge. You will get motivation and support, and it will help you to keep up the pace. I highly recommend it, don’t be shy and enjoy the community ?

专家提示：如果您还没有Twitter ，可以在Twitter上创建一个帐户，并公开承诺 100天的代码 挑战。 原因很简单-有很多人在挑战。 您将获得动力和支持，并将帮助您跟上步伐。 我强烈推荐它，不要害羞并喜欢这个社区吗？

现在我们都准备开始了！ ？ (Now we are all set to start! ?)

响应式网页设计 (Responsive Web Design)

The first section encompasses the very basics of how to build static sites and apply styles to them.

第一部分涵盖了如何构建静态网站并为其应用样式的基本知识。

基础 (The Basics)

Basic HTML and HTML5 and Basic CSS sections are the fundamentals of the modern Internet. Applied Visual Design, Applied Accessibility, and Responsive Web Design Principles will teach you the basics of writing good websites. Don’t rush and step carefully, those are the main building blocks in your knowledge.

基本HTML和HTML5 和 基本CSS部分是现代Internet的基础。 应用视觉设计，应用可访问性和响应式Web设计原则 将教您编写优质网站的基础知识。 不要着急和小心翼翼，这是您所学的主要基础。

You can complement your studies with a great guide on Interneting Is Hard.

您可以通过有关“ 互联网很难”的出色指南来补充您的学习。

Next, you are going to learn powerful layout techniques like CSS Flexbox and CSS Grid. Before moving on, complete this short guide to get an overview of different layout techniques that people used before the Flexbox-Grid era. It’s unlikely that you will ever need to use them, but it’s always good to be aware and appreciate the technologies we have today.

接下来，您将学习强大的布局技术，例如CSS Flexbox和CSS Grid 。 在继续之前，请完成本简短指南 ，以概述在Flexbox-Grid时代之前人们使用的各种布局技术。 您不太可能需要使用它们，但是了解并欣赏我们今天拥有的技术始终是一件好事。

CSS Flexbox (CSS Flexbox)

I fell in love with Flexbox because of its simplicity and power. A lot of different properties may confuse you at first, so my suggestion is to put a cheat sheet near your computer so you can always easily look them up. Additionally, bookmark this interactive Flexbox cheat sheet.

我爱上了Flexbox，因为它简单而强大。 起初，许多不同的属性可能会使您感到困惑，因此我的建议是在计算机附近放置备忘单，以便您始终可以轻松查找它们。 此外，将此交互式Flexbox 备忘单添加为书签。

And finally, practice by playing the addictive Flexbox Froggy game. ?

最后，练习上瘾的Flexbox Froggy 游戏。 ？

CSS网格 (CSS Grid)

The Grid is more advanced and flexible but in most cases, Flexbox is quite enough. Anyway, you will have another powerful tool in your arsenal. Especially, if it’s that easy to understand when you grow your crops in Grid Garden. ?

Grid更先进，更灵活，但是在大多数情况下，Flexbox足够了。 无论如何，您将在武器库中拥有另一个强大的工具。 尤其是当您在Grid Garden中种植作物时，这很容易理解。 ？

实践 (Practice)

Before moving on to the final projects, I recommend you to do this:

在继续进行最终项目之前，我建议您执行以下操作：

1. Create an account on Codepen. It’s a cool playground for the front end where you can build your projects, test your snippets, and practice.

   在Codepen上创建一个帐户。 在前端，这是一个很酷的游乐场，您可以在其中构建项目，测试代码片段并进行练习。

2. Install a code editor on your machine and learn how to work with it.

   安装一个 代码编辑器 在您的计算机上学习如何使用它。

3. Learn the basics of the command line from this video by Wes Bos or the Shell Workshop on Udacity.

   从此视频中了解命令行的基础 由Wes Bos或Udacity的Shell研讨会撰写。

4. Learn how to use Git in this playlist by NetNinja.

   在NetNin​​ja的此播放列表中了解如何使用Git。

5. Get some guided practice. Choose any projects from this playlist by Traversy Media and code along. Build them until you feel confident. It would be great if you already use a code editor and version control, and upload your work to a special study repo on Github.

   获得一些指导性练习。 从Traversy Media的播放列表中选择任何项目，然后进行编码。 建立它们，直到您感到自信为止。 如果您已经使用过代码编辑器和版本控制，并将您的工作上传到Github上的特殊学习库中，那就太好了。

现在您已经准备好获得第一份认证！ ？ (Now you are ready to get your first certification! ?)

Go and build your final projects and share them ?

去构建您的最终项目并共享它们？

Javascript算法和数据结构 (Javascript Algorithms And Data Structures)

Now you know how to build static websites and it’s time to learn JavaScript.

现在您知道了如何构建静态网站，是时候学习JavaScript了。

freeCodeCamp’s JavaScript section is great but I highly advise you to look at javascript.info as an additional reference. This is the best resource that provides comprehensive information for everything related to JavaScript.

freeCodeCampJavaScript部分很棒，但我强烈建议您查看j avascript.info 作为其他参考。 这是为与JavaScript相关的所有内容提供全面信息的最佳资源。

更多建议 (More recommendations)

1. JavaScript Basics Course by Beau Carnes, if you prefer visual guides.

   如果您更喜欢视觉指南，可以使用Beau Carnes的JavaScript基础课程 。

2. Regarding the new standard for JavaScript, my favorites are the great courses ES6 for everyone! (paid) by Wes Bos and Modern JavaScript by Beau Carnes.

   关于JavaScript的新标准，我最喜欢的是对每个人来说都很棒的ES6课程！ (付费)由Wes Bos提供， 现代JavaScript由Beau Carnes提供。

3. Regular expressions course on Scrimba.

   Scrimba上的正则表达式课程。

4. Object-Oriented JavaScript course by NetNinja was very helpful to me.

   NetNin​​ja 的面向对象JavaScript课程对我很有帮助。

演算法 (Algorithms)

This is my favorite part of the certification. I remember how challenging they were when I just started to solve them. I could think about possible solutions all day. This is a great way to learn JavaScript and how to think like a programmer.

这是我最喜欢的认证部分。 我记得当我刚开始解决它们时充满挑战。 我可以整日考虑可能的解决方案。 这是学习JavaScript以及像程序员一样思考的一种好方法。

As a little help, I advise you to watch JavaScript Cardio Sessions by Traversy Media.

作为一点帮助，我建议您观看Traversy Media的JavaScript Cardio Sessions 。

For more practice, I highly recommend you to sign up on CodeWars and set an initial goal to achieve 6kyu. It’s very helpful because when you complete any challenge, you can look through other people’s solutions and discover new tricks, approaches, and ideas.

要进行更多练习，我强烈建议您注册CodeWars并为实现6kyu设定初始目标。 这非常有帮助，因为当您完成任何挑战时，您可以查看其他人的解决方案并发现新的技巧，方法和想法。

To find other 100DaysOfCode challengers including me, go to your Account Settings and type in #100DaysOfCode into the Clan field.

要查找包括我在内的其他100DaysOfCode挑战者，请转到“帐户设置”，然后在“氏族”字段中输入＃100DaysOfCode 。

Before proceeding to the final projects, you have to be prepared for the final boss, the Cash Register. ?

在进行最后的项目之前，您必须为最后的老板，收银机做好准备。 ？

After you beat it I can say that…

打败之后，我可以说…

…现在您知道如何使用JavaScript！ ？ (…now you know how to work with JavaScript! ?)

放在一起 (Sticking things together)

Now it’s time to take the Javascript30 challenge by Wes Bos. This is the best way to learn how HTML, CSS, and JavaScript work together, polish your knowledge of fundamentals, and understand the DOM. Building these little projects was a great experience and really fun for me!

现在是时候接受Wes Bos的Javascript30挑战了。 这是学习HTML，CSS和JavaScript如何协同工作，增强基础知识并了解DOM的最佳方法。 建立这些小项目对我来说是一次很棒的经历，而且真的很有趣！

前端库 (Front End Libraries)

From this point, you are becoming a real front end developer ?

从这一点来看，您正在成为真正的前端开发人员？

引导程序 (Bootstrap)

The most popular CSS framework. Build a couple of websites along with guides on YouTube. Get used to Bootstrap’s famous column grid layout.

最受欢迎CSS框架。 在YouTube上建立几个网站以及指南。 习惯于使用Bootstrap著名的列网格布局。

jQuery的 (jQuery)

Despite some people saying jQuery is dead, it will be always helpful when the solution in pure JavaScript is quirky and using a JS framework is too much. This will be another great tool in your arsenal. Build a couple of little apps with it for practice.

尽管有人说jQuery已经死了，但是当纯JavaScript的解决方案很古怪并且使用JS框架过多时，它将总是有帮助的。 这将是您的武器库中的另一个出色工具。 用它来构建几个小应用程序进行练习。

萨斯 (Sass)

I didn’t fully appreciate CSS frameworks until I saw their real power. I wanted to learn advanced CSS techniques and bought an amazing Advanced CSS and Sass course (paid) by Jonas Schmedtmann. Highly recommended if you want to polish your CSS skills and understand the workflow. I’m still happy that I found it.

在看到CSS框架的真正功能之前，我没有完全欣赏它们。 我想学习高级CSS技术，并购买了出色的Advanced CSS和Sass 课程(由Jonas Schmedtmann支付)。 如果您想提高CSS技能并了解工作流程，则强烈建议使用。 我仍然很高兴自己找到了它。

React＆Redux (React & Redux)

This is the main part of the Front End Libraries section. React is a great choice as your first JavaScript library to learn.

这是“前端库”部分的主要部分。 作为您第一个学习JavaScript库，React是一个不错的选择。

Frankly, it’s hard to understand how to work with it in freeCodeCamp’s format since you can’t build anything from scratch and some things work under the hood. So take a course on React and Redux, and take your time to understand their ideas and tools.

坦白说，很难理解如何以freeCodeCamp的格式使用它，因为您不能从头开始构建任何东西，有些事情可以在后台进行。 因此，参加有关React和Redux的课程，并花一些时间来了解他们的想法和工具。

My personal favorites:

我的个人收藏夹：

1. Complete React Tutorial (with Redux) by NetNinja

   完整的React教程(使用Redux) 通过NetNin​​ja

2. React for beginners (paid) by Wes Bos

   对初学者的React (由Wes Bos提供)

3. React - The Complete Guide (paid) by Academind

   React- Academind 的完整指南 (收费)

I hope you are excited to use your new knowledge on the final projects.

我希望您很高兴在最终项目中使用新知识。

现在您可以构建任何想要的东西了吗？ (Now you can build anything you want ?)

进一步发展 (Moving further)

You are a real front-end developer now and have enough skills to build great web applications. Maybe you are curious what to do next and the answer is as simple as “Build, build, build!”. Your current task is to create a portfolio for yourself and get more practice.

您现在是真正的前端开发人员，并且具有足够的技能来构建出色的Web应用程序。 也许您很好奇下一步该怎么做，答案很简单，如“构建，构建，构建！”。 。 您当前的任务是为自己创建投资组合并获得更多练习。

Here are some tips for you on what to do next:

以下是一些有关下一步操作的提示：

1. Get ideas for a project in the Take Home Projects section on freeCodeCamp.

   在 带回家的项目 关于freeCodeCamp的部分。

2. Build any project along with a course, then modify and improve it by adding new features.
   随课程一起构建任何项目，然后通过添加新功能来对其进行修改和改进。
3. Tackle D3.js and Node.js to get the next freeCodeCamp certifications!
   解决D3.js和Node.js以获得下一个freeCodeCamp认证！

4. Read Eloquent JavaScript and You Don't Know JS to become a JavaScript ninja.

   阅读口才JavaScript和 你不懂JS 成为JavaScript忍者。

5. Improve your rank on Codewars.
   提高您在Codewars上的排名。

6. Get a taste of advanced web design from this Web Design for Web Developers course.

   从此面向Web开发人员的Web设计中了解高级Web设计 课程。

7. Keep your GitHub account active and try to contribute to open source.
   保持您的GitHub帐户活跃，并尝试为开源做贡献。

If one of these resources doesn’t work for you, it’s okay. Don’t get frustrated, what works for someone doesn’t necessarily have to work for every single person.

如果这些资源之一对您不起作用，那就可以了。 不要沮丧，对某人有效的方法不一定必须对每个人有效。

I hope this guide will help you with your learning, and hopefully save you time ?

希望本指南对您的学习有所帮助，并希望节省您的时间？

祝好运！ (Good luck!)

翻译自: https://www.freecodecamp.org/news/a-practical-guide-to-learning-front-end-development-for-beginners-da6516505e41/

前端初学者开发学习视频