前端初學(xué)者開發(fā)學(xué)習(xí)視頻

by Nikita Rudenko

通過尼基塔·魯?shù)强?Nikita Rudenko)

初學(xué)者學(xué)習(xí)前端開發(fā)的實(shí)用指南 (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開始了編碼之旅。 從那時(shí)起，我獲得了一些編程技能，但我仍然知道，還有很多事情需要學(xué)習(xí)。 無論如何，我決定將這些技巧匯總在一個(gè)地方，以幫助將來的開發(fā)人員前進(jìn)。 本文是我開始旅程時(shí)希望找到的指南。

在開始之前 (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.

如果您決定自己學(xué)習(xí)，那么互聯(lián)網(wǎng)上就會有很多信息，您很難將所有事情都束之高閣。 重要的是要有一個(gè)結(jié)構(gòu)化的計(jì)劃，避免浪費(fèi)時(shí)間從一種資源轉(zhuǎn)移到另一種資源。

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.

請注意，這些只是進(jìn)入前端世界的第一步。 它可以幫助您入門，但它并不旨在成為完整指南。

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.作為免責(zé)聲明，請注意以下資源不是廣告。 我之所以提到它們，是因?yàn)樗鼈冊谀承r(shí)候?qū)ξ矣兴鶐椭?#xff0c;因此我個(gè)人推薦它們。 其中大多數(shù)是免費(fèi)的，否則將指定它。

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

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.

課程。 這可能是您的主要路徑。 它是您應(yīng)該學(xué)習(xí)的東西的結(jié)構(gòu)良好的概述，并提供了良好的學(xué)習(xí)曲線。

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.

練習(xí)。 它們很小，因此您可以每天進(jìn)行幾次操作并保持綠色熱點(diǎn)，從而輕松地跟上步伐。

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.

項(xiàng)目。 完成每一章后，您將構(gòu)建5個(gè)項(xiàng)目以獲得認(rèn)證。 進(jìn)行一些練習(xí)并鞏固您的知識是理想的。

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.

社區(qū)。 它不只是一個(gè)學(xué)習(xí)平臺。 有一個(gè)論壇，博客和YouTube頻道，不同級別的開發(fā)人員可以在此共享知識，并在其中找到靈感。

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

免費(fèi)。 金錢對許多人來說至關(guān)重要，在任何情況下，除了時(shí)間，您什么都不會花。

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上創(chuàng)建一個(gè)帳戶，并公開承諾 100天的代碼 挑戰(zhàn)。 原因很簡單-有很多人在挑戰(zhàn)。 您將獲得動(dòng)力和支持，并將幫助您跟上步伐。 我強(qiáng)烈推薦它，不要害羞并喜歡這個(gè)社區(qū)嗎？

現(xiàn)在我們都準(zhǔn)備開始了！ ？ (Now we are all set to start! ?)

響應(yīng)式網(wǎng)頁設(shè)計(jì) (Responsive Web Design)

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

第一部分涵蓋了如何構(gòu)建靜態(tài)網(wǎng)站并為其應(yīng)用樣式的基本知識。

基礎(chǔ) (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部分是現(xiàn)代Internet的基礎(chǔ)。 應(yīng)用視覺設(shè)計(jì)，應(yīng)用可訪問性和響應(yīng)式Web設(shè)計(jì)原則 將教您編寫優(yōu)質(zhì)網(wǎng)站的基礎(chǔ)知識。 不要著急和小心翼翼，這是您所學(xué)的主要基礎(chǔ)。

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

您可以通過有關(guān)“ 互聯(lián)網(wǎng)很難”的出色指南來補(bǔ)充您的學(xué)習(xí)。

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.

接下來，您將學(xué)習(xí)強(qiáng)大的布局技術(shù)，例如CSS Flexbox和CSS Grid 。 在繼續(xù)之前，請完成本簡短指南 ，以概述在Flexbox-Grid時(shí)代之前人們使用的各種布局技術(shù)。 您不太可能需要使用它們，但是了解并欣賞我們今天擁有的技術(shù)始終是一件好事。

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，因?yàn)樗唵味鴱?qiáng)大。 起初，許多不同的屬性可能會使您感到困惑，因此我的建議是在計(jì)算機(jī)附近放置備忘單，以便您始終可以輕松查找它們。 此外，將此交互式Flexbox 備忘單添加為書簽。

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

最后，練習(xí)上癮的Flexbox Froggy 游戲。 ？

CSS網(wǎng)格 (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更先進(jìn)，更靈活，但是在大多數(shù)情況下，Flexbox足夠了。 無論如何，您將在武器庫中擁有另一個(gè)強(qiáng)大的工具。 尤其是當(dāng)您在Grid Garden中種植作物時(shí)，這很容易理解。 ？

實(shí)踐 (Practice)

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

在繼續(xù)進(jìn)行最終項(xiàng)目之前，我建議您執(zhí)行以下操作：

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上創(chuàng)建一個(gè)帳戶。 在前端，這是一個(gè)很酷的游樂場，您可以在其中構(gòu)建項(xiàng)目，測試代碼片段并進(jìn)行練習(xí)。

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

安裝一個(gè) 代碼編輯器 在您的計(jì)算機(jī)上學(xué)習(xí)如何使用它。

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

從此視頻中了解命令行的基礎(chǔ) 由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.

獲得一些指導(dǎo)性練習(xí)。 從Traversy Media的播放列表中選擇任何項(xiàng)目，然后進(jìn)行編碼。 建立它們，直到您感到自信為止。 如果您已經(jīng)使用過代碼編輯器和版本控制，并將您的工作上傳到Github上的特殊學(xué)習(xí)庫中，那就太好了。

現(xiàn)在您已經(jīng)準(zhǔn)備好獲得第一份認(rèn)證！ ？ (Now you are ready to get your first certification! ?)

Go and build your final projects and share them ?

去構(gòu)建您的最終項(xiàng)目并共享它們？

Javascript算法和數(shù)據(jù)結(jié)構(gòu) (Javascript Algorithms And Data Structures)

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

現(xiàn)在您知道了如何構(gòu)建靜態(tài)網(wǎng)站，是時(shí)候?qū)W習(xí)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部分很棒，但我強(qiáng)烈建議您查看j avascript.info 作為其他參考。 這是為與JavaScript相關(guān)的所有內(nèi)容提供全面信息的最佳資源。

更多建議 (More recommendations)

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

如果您更喜歡視覺指南，可以使用Beau Carnes的JavaScript基礎(chǔ)課程 。

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.

關(guān)于JavaScript的新標(biāo)準(zhǔn)，我最喜歡的是對每個(gè)人來說都很棒的ES6課程！ (付費(fèi))由Wes Bos提供， 現(xiàn)代JavaScript由Beau Carnes提供。

Regular expressions course on Scrimba.

Scrimba上的正則表達(dá)式課程。

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

NetNin??ja 的面向?qū)ο驤avaScript課程對我很有幫助。

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

這是我最喜歡的認(rèn)證部分。 我記得當(dāng)我剛開始解決它們時(shí)充滿挑戰(zhàn)。 我可以整日考慮可能的解決方案。 這是學(xué)習(xí)JavaScript以及像程序員一樣思考的一種好方法。

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

作為一點(diǎn)幫助，我建議您觀看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.

要進(jìn)行更多練習(xí)，我強(qiáng)烈建議您注冊CodeWars并為實(shí)現(xiàn)6kyu設(shè)定初始目標(biāo)。 這非常有幫助，因?yàn)楫?dāng)您完成任何挑戰(zhàn)時(shí)，您可以查看其他人的解決方案并發(fā)現(xiàn)新的技巧，方法和想法。

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

要查找包括我在內(nèi)的其他100DaysOfCode挑戰(zhàn)者，請轉(zhuǎn)到“帳戶設(shè)置”，然后在“氏族”字段中輸入＃100DaysOfCode 。

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

在進(jìn)行最后的項(xiàng)目之前，您必須為最后的老板，收銀機(jī)做好準(zhǔn)備。 ？

After you beat it I can say that…

打敗之后，我可以說…

…現(xiàn)在您知道如何使用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!

現(xiàn)在是時(shí)候接受Wes Bos的Javascript30挑戰(zhàn)了。 這是學(xué)習(xí)HTML，CSS和JavaScript如何協(xié)同工作，增強(qiáng)基礎(chǔ)知識并了解DOM的最佳方法。 建立這些小項(xiàng)目對我來說是一次很棒的經(jīng)歷，而且真的很有趣！

前端庫 (Front End Libraries)

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

從這一點(diǎn)來看，您正在成為真正的前端開發(fā)人員？

引導(dǎo)程序 (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上建立幾個(gè)網(wǎng)站以及指南。 習(xí)慣于使用Bootstrap著名的列網(wǎng)格布局。

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已經(jīng)死了，但是當(dāng)純JavaScript的解決方案很古怪并且使用JS框架過多時(shí)，它將總是有幫助的。 這將是您的武器庫中的另一個(gè)出色工具。 用它來構(gòu)建幾個(gè)小應(yīng)用程序進(jìn)行練習(xí)。

薩斯 (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框架的真正功能之前，我沒有完全欣賞它們。 我想學(xué)習(xí)高級CSS技術(shù)，并購買了出色的Advanced CSS和Sass 課程(由Jonas Schmedtmann支付)。 如果您想提高CSS技能并了解工作流程，則強(qiáng)烈建議使用。 我仍然很高興自己找到了它。

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.

這是“前端庫”部分的主要部分。 作為您第一個(gè)學(xué)習(xí)JavaScript庫，React是一個(gè)不錯(cuò)的選擇。

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的格式使用它，因?yàn)槟荒軓念^開始構(gòu)建任何東西，有些事情可以在后臺進(jìn)行。 因此，參加有關(guān)React和Redux的課程，并花一些時(shí)間來了解他們的想法和工具。

My personal favorites:

我的個(gè)人收藏夾：

Complete React Tutorial (with Redux) by NetNinja

完整的React教程(使用Redux) 通過NetNin??ja

React for beginners (paid) by Wes Bos

對初學(xué)者的React (由Wes Bos提供)

React - The Complete Guide (paid) by Academind

React- Academind 的完整指南 (收費(fèi))

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

我希望您很高興在最終項(xiàng)目中使用新知識。

現(xiàn)在您可以構(gòu)建任何想要的東西了嗎？ (Now you can build anything you want ?)

進(jìn)一步發(fā)展 (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.

您現(xiàn)在是真正的前端開發(fā)人員，并且具有足夠的技能來構(gòu)建出色的Web應(yīng)用程序。 也許您很好奇下一步該怎么做，答案很簡單，如“構(gòu)建，構(gòu)建，構(gòu)建！”。 。 您當(dāng)前的任務(wù)是為自己創(chuàng)建投資組合并獲得更多練習(xí)。

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

以下是一些有關(guān)下一步操作的提示：

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

在 帶回家的項(xiàng)目 關(guān)于freeCodeCamp的部分。

Build any project along with a course, then modify and improve it by adding new features.

隨課程一起構(gòu)建任何項(xiàng)目，然后通過添加新功能來對其進(jìn)行修改和改進(jìn)。

Tackle D3.js and Node.js to get the next freeCodeCamp certifications!

解決D3.js和Node.js以獲得下一個(gè)freeCodeCamp認(rèn)證！

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開發(fā)人員的Web設(shè)計(jì)中了解高級Web設(shè)計(jì) 課程。

Keep your GitHub account active and try to contribute to open source.

保持您的GitHub帳戶活躍，并嘗試為開源做貢獻(xiàn)。

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.

如果這些資源之一對您不起作用，那就可以了。 不要沮喪，對某人有效的方法不一定必須對每個(gè)人有效。

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

希望本指南對您的學(xué)習(xí)有所幫助，并希望節(jié)省您的時(shí)間？

祝好運(yùn)！ (Good luck!)

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

前端初學(xué)者開發(fā)學(xué)習(xí)視頻

總結(jié)

以上是生活随笔為你收集整理的前端初学者开发学习视频_初学者学习前端开发的实用指南的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。