path: root/files/zh-cn/learn/learning_and_getting_help/index.html

---
title: 学习和获得帮助
slug: learn/Learning_and_getting_help
translation_of: Learn/Learning_and_getting_help
---
<p>[学习侧栏]</p>

<p>这是伟大的，你投入一些时间学习一套新的技能，但有好的做法，采用，将使你的学习更有效。有时，您也会陷入困境并感到沮丧，即使是专业的 Web 开发人员也会经常这样，因此，了解最有效的方法，尝试获得帮助，以便您能够继续工作，是值得付出的。本文在这两个方面提供了一些提示和提示，可帮助您从学习 Web 开发中获得更多内容，并进一步阅读，以便您能够找到有关每个子主题的详细信息（如果您愿意）。</p>

<h2 id="有效学习">有效学习</h2>

<p>让我们直接思考一下有效的学习。</p>

<h3 id="不同的学习方法">不同的学习方法</h3>

<p>有趣的是，你的大脑学习东西有两种主要方式——专注<strong>和</strong><strong>分散学习</strong>：</p>

<ul>
 <li>重点学习是您传统上可能与学术科目联系在一起的东西。你专注于一个低级的话题，并解决它带来的具体问题。你专注于一个狭窄的区域。</li>
 <li>分散学习更多的是与围绕更广领域的高层次思维有关。你让你的头脑游荡更广，似乎在不同事物之间随机联系。这更多的是你在洗澡时或喝咖啡休息时的想法。</li>
</ul>

<p>从神经科学家对大脑活动所做的研究中，我们发现，你不能同时参与两种学习或思考的方式。那么，你应该选择哪一个呢？你可能认为集中学习更适合学习，但在现实中，<strong>两者</strong>都很重要。</p>

<p>专注思维对于将精力集中在特定主题上，深入解决问题，以及提高你对所需技术的掌握——加强大脑中存储信息的神经通路——都很棒。然而，当你试图理解新学科或解决以前没有遇到的新问题时，它并不善于理解"大局"，并解锁新的神经通路。</p>

<p>为此，你需要漫不由多的思考。这与焦点正好相反——你让你的大脑在更广阔的环境中游荡，四处寻找你之前没有的联系，接触新事物（或新事物的新组合），然后你可以关注这些事物，加强它们，并开始真正理解它们的意思。</p>

<p>这就是为什么在进入具体细节之前，先阅读一些介绍性材料，以便对一个领域有一个高度的了解，这通常是好的。</p>

<p>这也是为什么你有时真的可以陷入一个问题，但随后找出答案，当你去喝咖啡休息（或散步）。您可以：</p>

<ol>
 <li>知道如何使用工具 A 解决问题 A。</li>
 <li>知道如何用工具 B 解决问题 B。</li>
 <li>不知道如何解决问题 C 。</li>
</ol>

<p>假设您一直专注于问题 C，然后感到沮丧，因为您无法思考如何解决它。但是，在散步获得新鲜空气后，你可能会发现，当你的头脑徘徊，你突然使工具 A 和工具 B 之间的连接，并意识到你可以使用它们一起解决问题 C！它并不总是这么简单，但它也令人惊讶的是多少次，这确实发生了。这也凸显了在电脑前学习时定期休息的重要性。</p>

<h3 id="不同的学习材料">不同的学习材料</h3>

<p>也值得看看可用的不同类型的学习材料，看看哪些材料对您来说最有效。</p>

<h4 id="文本文章">文本文章</h4>

<p><font>你会发现很多书面文章在网上教你有关网页设计。例如，像本课程的多数课程一样。有些文章将是教程，教你某种技术或重要概念（如"学习如何创建视频播放器"或"学习CSS框模型"），有些文章将是参考材料，允许您查找您可能忘记的细节（如"CSS属性的语法是什么"？</font><code>background</code></p>

<p>MDN Web 文档对这两种类型都非常好 - 您当前位于的区域非常适合学习技术和概念，我们还有几个巨大的参考部分，允许您查找任何您不记得的语法。</p>

<p>网上还有其他几个伟大的资源，我们将在下面提及其中一些资源。</p>

<div class="blockIndicator note">
<p><strong>注意</strong>：上面的文本应该给你一个重要的事实 - 你不应该记住一切！专业的 Web 开发人员使用 MDN Web 文档等工具查找他们一直忘记的内容。正如您会发现，学习 Web 开发更多的是关于问题解决和学习模式，而不是学习大量语法。</p>
</div>

<h4 id="Videos">Videos</h4>

<p>There are also a number of sites that have video learning content on them. YouTube is an obvious one, with channels such as <a href="https://www.youtube.com/channel/UC7TizprGknbDalbHplROtag">Mozilla Layout Land</a>, <a href="https://www.youtube.com/MozillaDeveloper">MozillaDeveloper</a>, and <a href="https://www.youtube.com/user/ChromeDevelopers/">Google ChromeDevelopers</a> providing many useful videos. Many people prefer textual articles for more in-depth learning and reference material, and videos for quick explanations of concepts and new features, but it is really up to you what you prefer to learn from. There is no right and wrong answer here.</p>

<h4 id="Interactive_code_playgrounds">Interactive code playgrounds</h4>

<p>You might be the kind of person that prefers minimal instructions and would prefer to jump straight in and start playing with code. This is also a reasonable approach, and some learning sites tend to favor it. <a href="https://www.codecademy.com/">Codecademy</a> for example is a learning site where the tutorials mainly consist of interactive code editors where you have to directly write code and see if the desired result was achieved.</p>

<p>Many MDN Web docs reference pages provide interactive examples too, where you can alter the code and see how the live result changes. And there is also nothing wrong with creating your own code examples on your computer, or in an online code editor like <a href="https://jsbin.com/?html,css,js,output">JSBin</a>, <a href="https://codepen.io/">Codepen</a>, or <a href="https://glitch.com/">Glitch</a>. In fact, you'll be called to do so as part of this course when you are learning!</p>

<div class="blockIndicator note">
<p><strong>Note</strong>: Online code editors are also really useful for sharing code you've written, for example, if you are collaborating on learning with someone else who isn't in the same location, or are sending it someone to ask for help with it. You can share the web address of the example with them so they can see it.</p>
</div>

<div class="blockIndicator note">
<p><strong>Note</strong>: You might favor one learning method over the others, but realistically a hybrid approach is probably what you will end up with. And you'll probably come up with other methods than the three we covered above.</p>
</div>

<h3 id="Making_a_plan">Making a plan</h3>

<p>It is a good idea to create a plan to help you achieve what you want to achieve through your learning.</p>

<h4 id="A_goal_statement">A goal statement</h4>

<p>It sounds silly, but why not start with a single sentence that says what you want to achieve? The following have different scopes, but are all realistic and achievable:</p>

<ul>
 <li>I want to become a professional web developer in two years' time.</li>
 <li>I want to learn enough to build a website for my local amateur tennis club.</li>
 <li>I want to learn HTML and CSS so I can expand my job role to take over updating the content on our company website.</li>
</ul>

<p>The following are not quite as reasonable:</p>

<ul>
 <li>I want to go from a complete beginner to becoming a senior web developer in three months.</li>
 <li>I want to start my own company and build a social network that will out-perform Facebook, in two years.</li>
</ul>

<h4 id="What_do_you_need_to_get_there">What do you need to get there?</h4>

<p>Once you've worked out your goal, it is a good idea to research what you'll need to achieve the goal. For example:</p>

<p>Materials I need:</p>

<ul>
 <li>A computer</li>
 <li>Internet access</li>
 <li>Pens and paper</li>
</ul>

<p>Knowledge I need:</p>

<ul>
 <li>How to use HTML, CSS, JavaScript, and associated tools and best practices to build web sites and web applications (we can definitely help you with this one!).</li>
 <li>How to get a domain, hosting, and use them to put a web site or application online.</li>
 <li>How to run a small business.</li>
 <li>How to advertise my business and attract clients.</li>
</ul>

<h4 id="How_much_time_and_money_will_it_take">How much time and money will it take?</h4>

<p>Estimate the time and cost of getting these things. If you'll need to work to earn money to buy the materials required, then the time to do that will have to be factored in. Once you have a time estimate, you can start to build a plan around your life.</p>

<h4 id="How_many_hours_per_week_do_I_need_to_dedicate">How many hours per week do I need to dedicate?</h4>

<p>Once you know what you need to do, and how long you think it'll take you, you can start writing out a plan to follow to achieve your goal. It can be as simple as:</p>

<p>"It'll take me 500 hours to learn what I need to know, and I have a year to do it. If I assume 2 weeks of holiday, I'll need to do work on this for 10 hours per week. I am free on evenings and weekends, so I'll plan my time around those."</p>

<p>How much time you can spend on this of course depends on what your circumstances are. If you are at school, then you've got way more free time than if you have a job and children to provide for. It is still possible to achieve your goals, but you have to be realistic about how quickly you can do it.</p>

<p>If you are doing a university or college course to learn web development, then most of this planning is done for you — lucky you!</p>

<p>When you have worked out a weekly schedule then you should keep a record of what you manage to do each week in a simple spreadsheet or even in a notebook!</p>

<p>Also, it might be a good idea to have some sub-goals worked out to allow you to keep track of where you are more easily. For example:</p>

<ul>
 <li>HTML and CSS basics learned by summer</li>
 <li>JavaScript basics learned by December</li>
 <li>Example website project built by next April</li>
 <li>etc.</li>
</ul>

<p>Keep thinking about how much progress you are making, and adjust your plan if needs be.</p>

<h3 id="Staying_motivated">Staying motivated</h3>

<p>It is hard to stay motivated, especially if you are trying to learn a complex skill like programming or web development. What follows are some tips to stay motivated and keep working:</p>

<ul>
 <li><strong>Try to make your work environment as productive as possible</strong>. Get a comfortable desk and chair to work in, make sure you have enough light to see what you are doing, and try to include things that help you concentrate (e.g. mellow music, fragrances, whatever else you need). Don't try to work in a room with distractions — for example a television on, with your friends watching football! Also, leave your mobile phone out of the room — most people are distracted by their phone a lot, so you should leave it somewhere else.</li>
 <li><strong>Take regular breaks</strong>. It is not good for your motivation to keep working away for hours with no break, especially if you are finding it hard or getting stuck on a problem. That just leads to frustration. It is often better to take a break, move around for a bit, then relax with a drink before getting back to work. And as we said earlier, the diffuse learning you do during that time can often help you to figure out a solution to the problem you were facing. It is also physically bad to work for too long without a break; looking at a monitor for too long can hurt your eyes, and sitting still for too long can be bad for your back or legs. We'd recommend taking a 15-minute break every hour to 90 minutes.</li>
 <li><strong>Eat, exercise, and sleep</strong>. Eat healthily, get regular exercise, and make sure you get enough sleep. This sounds obvious, but it is easy to forget when you get really into coding. Factor these essential ingredients into your schedule, and make sure you are not scheduling more learning time instead of these things.</li>
 <li><strong>Give yourself rewards</strong>. It's true that <em>all work and no play makes Jack a dull boy</em>. You should try to schedule fun things to do after each learning session, which you'll only have when the learning is over and complete. If you are really into gaming, for example, there is something quite motivating about saying "no gaming tonight unless I get through my 5 hours of learning". Now all you need is willpower. Good luck!</li>
 <li><strong>Co-learning and demoing</strong>. This won't be an option for everyone, but if at all possible try to learn alongside others. Again, this is easier if you are doing a college course on web development, but perhaps you could convince a friend to learn along with you, or find a local meetup or skill-sharing group? It is really useful and motivating to have someone to discuss ideas with and ask for help, and you should also take time to demo your work. Those shouts of appreciation will spur you on.</li>
</ul>

<h3 id="Effective_problem_solving">Effective problem solving</h3>

<p>There is no one effective way to solve all problems (and learn all things) associated with web design and development, but there are some general bits of advice that will serve you well in most cases.</p>

<h4 id="Break_things_down_into_chunks">Break things down into chunks</h4>

<p>For a start, when you are trying to implement something specific and it seems really hard to get your head around, you should try to break it down into multiple smaller problems or chunks.</p>

<p>For example, if you are looking at a task of "Build a simple two-column website", you could break it down as follows:</p>

<ul>
 <li>Create the HTML structure</li>
 <li>Work out basic site typography</li>
 <li>Work out a basic color scheme</li>
 <li>Implement a high-level layout — header, horizontal navigation menu, main content area with main and side columns, and footer</li>
 <li>Implement a horizontal navigation menu</li>
 <li>etc.</li>
</ul>

<p>Then you could break it down further. For example, "Implement horizontal navigation menu" could be written out as:</p>

<ul>
 <li>Make a list of menu items that sit horizontally in a line.</li>
 <li>Remove unneeded defaults, like list spacing and bullet points.</li>
 <li>Style hover/focus/active states of menu items appropriately.</li>
 <li>Make the menu items equally spaced along the line.</li>
 <li>Give the menu items enough vertical spacing.</li>
 <li>Make sure the text is centered inside each menu item</li>
 <li>etc.</li>
</ul>

<p>Each of these problems doesn't seem nearly as difficult to solve as the one big problem you had initially. Now you've just got to go through and solve them all!</p>

<h4 id="Learn_and_recognize_the_patterns">Learn and recognize the patterns</h4>

<p>As we said before, web design/programming is mostly about problem solving and patterns. Once you have written out what you'll need to do to solve a specific problem, you can start to figure out what technology features to use to solve it. For example, professional web developers have created lots of horizontal navigation menus, so they'll immediately start thinking of a solution like this:</p>

<p>A nav menu is usually created from a list of links, something like:</p>

<pre class="brush: html notranslate">&lt;ul&gt;
  &lt;li&gt;First menu item&lt;/li&gt;
  &lt;li&gt;Second menu item&lt;/li&gt;
  &lt;li&gt;Third menu item&lt;/li&gt;
  &lt;li&gt;etc.&lt;/li&gt;
&lt;/ul&gt;
</pre>

<p>To make all the items sit horizontally on a line, the easiest modern way is to use flexbox:</p>

<pre class="brush: css notranslate">ul {
  display: flex;
}</pre>

<p>To remove unneeded spacing and bullet points, we can do this:</p>

<pre class="brush: css notranslate">ul {
  list-style-type: none;
  padding: 0;
}</pre>

<p>etc.</p>

<p>If you are a complete beginner to web development, you'll have to do some study and web searches and lookup solutions to such problems. If you are a professional web developer you'll probably remember the last time you solved a similar problem, and only have to look up a few bits of the syntax that you forgot since then.</p>

<p>When you find solutions to such problems, it is worth writing down notes on what you did, and keeping some minimal code examples in a directory somewhere so you can look back on previous work.</p>

<p>In addition, the web has <a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">developer tools</a> that allow you to look at the code used to build any site on the web. If you don't have a solution to hand, one good research method is to find websites with similar features in the wild, and find out how they did it.</p>

<div class="blockIndicator note">
<p><strong>Note</strong>: Notice how above we talked about the problem we are trying to solve first, and the technology used to solve it second. This is pretty much always the best way to do it — don't start with a cool new technology that you want to use, and try to shoehorn it into the use case.</p>
</div>

<div class="blockIndicator note">
<p><strong>Note</strong>: The simplest solution is often the best.</p>
</div>

<h3 id="Getting_practice">Getting practice</h3>

<p>The more you practice solving a problem, the stronger your brain's neural pathways are in that area, and the easier it becomes to recall the details and the logic of that particular problem.</p>

<p>Keep tinkering with code and getting more practice. If you run out of problems to solve, look up some tests online, do some more courses, or ask your friends and family (or local school or church) if there is anything they'd like you to build for them.</p>

<h2 dir="ltr" id="Getting_help">Getting help</h2>

<p dir="ltr">Web development requires you to learn a complex set of skills — you are bound to get stuck sometimes and need help. As we said before, even professional developers need regular help working out issues.</p>

<p dir="ltr">There are a variety of ways to get help, and what follows are some tips for doing so more effectively.</p>

<h3 dir="ltr" id="Effective_web_searches">Effective web searches</h3>

<p dir="ltr">One important skill to learn is the art of effective web searches — what search terms do you need to use in your favorite search engine to find the articles you need? </p>

<p dir="ltr">It is often fairly obvious what to search for. For example:</p>

<ul dir="ltr">
 <li>If you want to find out more about responsive web design, you could search for "responsive web design".</li>
 <li><font>If you want to find out more about a specific technology feature, such as the HTML element, or the CSS or properties, or the JavaScript method, you should just search for the feature's name.</font><code>&lt;video&gt;</code><code>background-color</code><code>opacity</code><code>Date.setTime()</code></li>
 <li>If you are looking for some more specific information, you can add other keywords as modifiers, for example "&lt;video&gt; element autoplay attribute", or "Date.setTime parameters".</li>
</ul>

<p dir="ltr">If you want to search for something that has less obvious buzzwords, you need to think about what is most likely to return what you want.</p>

<ul dir="ltr">
 <li>Run code after several promises are fulfilled</li>
 <li>Play a video stream from a webcam in the browser</li>
 <li>Create a linear gradient in the background of your element</li>
</ul>

<h4 id="Error_messages">Error messages</h4>

<p>If you are having a problem with some code and a specific error message is coming up, it is often a good idea to just copy the error message into your search engine and use it as the search term. If other people have had the same problem, there'll likely be some articles or blog posts about it in places like MDN or Stack Overflow.</p>

<div class="blockIndicator note">
<p><strong>Note</strong>: <a href="https://stackoverflow.com/">Stack Overflow</a> is a really useful website — it is basically a huge database of curated questions and answers on various technologies and related techniques. You'll probably find an answer that answers your question. If not, you can ask a question and see if anyone can help you.</p>
</div>

<h4 id="Browser_testing">Browser testing</h4>

<p dir="ltr">It is often a good idea to see if your problem is affecting all browsers, or whether it only occurs in one or a small number of browsers. If it is only affecting one browser, for example, you can use that browser to narrow down the search. Example searches might look like:</p>

<ul dir="ltr">
 <li>&lt;video&gt; playback doesn't work in the iOS browser.</li>
 <li>Firefox doesn't seem to support the Beetlejuice API.</li>
</ul>

<h3 dir="ltr" id="Using_MDN">Using MDN</h3>

<p dir="ltr">The site you are already on has a wealth of information available to you — both reference material for looking up code syntax, and guides/tutorials for learning techniques.</p>

<p dir="ltr">We've provided most of the answers to the questions you'll have about web development fundamentals in this part of MDN. If you are stuck, it is good to re-read the associated articles to see if you missed anything.</p>

<p dir="ltr">If you are not sure which article to read then try searching MDN for some related keywords (as indicated above), or try a general web search. To search on MDN you can either use the site's in-built search functionality or better still, use your favorite search engine and put "mdn" in front of the search term. For example, "mdn responsive web design" or "mdn background-color".</p>

<h3 dir="ltr" id="Other_online_resources">Other online resources</h3>

<p>We already mentioned Stack Overflow, but there are other online resources that can help.</p>

<p>It is good to find a community to be part of, and you'll get a lot of respect if you try to help others answer their questions as well as asking your own. Other good examples include:</p>

<ul dir="ltr">
 <li><a href="https://discourse.mozilla.org/c/mdn">MDN Discourse</a></li>
 <li><a href="https://www.sitepoint.com/community/">Sitepoint Forums</a></li>
 <li><a href="https://www.webdeveloper.com/">webdeveloper.com Forums</a></li>
</ul>

<p dir="ltr">However, it also makes sense to find useful groups on social networking sites such as Twitter or Facebook. Look for groups that discuss web development subjects you are interested in and join up. Follow people on twitter you know are influential, smart, or just plain seem to share lots of useful tips.</p>

<h3 dir="ltr" id="Physical_meetups">Physical meetups</h3>

<p dir="ltr">Lastly, you should try attending some physical meetups to meet other like-minded people, especially ones that cater to beginners. <a href="https://www.meetup.com/find/tech/">meetup.com</a> is a good place to find local physical meetups, and you could also try your local press/what's on sites.</p>

<p dir="ltr">You could also try attending full-fledged web conferences. While these can be expensive, you could try volunteering at them, and many conferences offer reduced rate tickets, for example, student or diversity tickets.</p>

<h2 dir="ltr" id="See_also">See also</h2>

<ul dir="ltr">
 <li><a href="https://www.coursera.org/learn/learning-how-to-learn">Coursera: Learning to learn</a></li>
 <li><a href="https://www.freecodecamp.org/">Freecodecamp</a></li>
 <li><a href="https://www.codecademy.com/">Codecademy</a></li>
</ul>