前端初學者開發學習視頻

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 。我將以他們的課程為基礎。由于多種原因，我認為它是一種很好的資源：

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.
課程。 這可能是您的主要路徑。它是您應該學習的東西的結構良好的概述，并提供了良好的學習曲線。
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.
練習。 它們很小，因此您可以每天進行幾次操作并保持綠色熱點，從而輕松地跟上步伐。
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個項目以獲得認證。進行一些練習并鞏固您的知識是理想的。
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頻道，不同級別的開發人員可以在此共享知識，并在其中找到靈感。
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:

在繼續進行最終項目之前，我建議您執行以下操作：

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上創建一個帳戶。在前端，這是一個很酷的游樂場，您可以在其中構建項目，測試代碼片段并進行練習。
Install a code editor on your machine and learn how to work with it.
安裝一個代碼編輯器在您的計算機上學習如何使用它。
Learn the basics of the command line from this video by Wes Bos or the Shell Workshop on Udacity.
從此視頻中了解命令行的基礎由Wes Bos或Udacity的Shell研討會撰寫。
Learn how to use Git in this playlist by NetNinja.
在NetNin??ja的此播放列表中了解如何使用Git。
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相關的所有內容提供全面信息的最佳資源。

演算法 (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:

我的個人收藏夾：

Complete React Tutorial (with Redux) by NetNinja
完整的React教程(使用Redux) 通過NetNin??ja
React for beginners (paid) by Wes Bos
對初學者的React (由Wes Bos提供)
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:

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

Get ideas for a project in the Take Home Projects section on freeCodeCamp.
在帶回家的項目關于freeCodeCamp的部分。
Build any project along with a course, then modify and improve it by adding new features.
隨課程一起構建任何項目，然后通過添加新功能來對其進行修改和改進。
Tackle D3.js and Node.js to get the next freeCodeCamp certifications!
解決D3.js和Node.js以獲得下一個freeCodeCamp認證！
Read Eloquent JavaScript and You Don't Know JS to become a JavaScript ninja.
閱讀口才JavaScript和你不懂JS 成為JavaScript忍者。
Improve your rank on Codewars.
提高您在Codewars上的排名。
Get a taste of advanced web design from this Web Design for Web Developers course.
從此面向Web開發人員的Web設計中了解高級Web設計課程。
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 ?

希望本指南對您的學習有所幫助，并希望節省您的時間？