[学习侧栏]
这是伟大的，你投入一些时间学习一套新的技能，但有好的做法，采用，将使你的学习更有效。有时，您也会陷入困境并感到沮丧，即使是专业的 Web 开发人员也会经常这样，因此，了解最有效的方法，尝试获得帮助，以便您能够继续工作，是值得付出的。本文在这两个方面提供了一些提示和提示，可帮助您从学习 Web 开发中获得更多内容，并进一步阅读，以便您能够找到有关每个子主题的详细信息（如果您愿意）。
让我们直接思考一下有效的学习。
有趣的是，你的大脑学习东西有两种主要方式——专注和分散学习：
从神经科学家对大脑活动所做的研究中，我们发现，你不能同时参与两种学习或思考的方式。那么，你应该选择哪一个呢？你可能认为集中学习更适合学习，但在现实中，两者都很重要。
专注思维对于将精力集中在特定主题上，深入解决问题，以及提高你对所需技术的掌握——加强大脑中存储信息的神经通路——都很棒。然而，当你试图理解新学科或解决以前没有遇到的新问题时，它并不善于理解"大局"，并解锁新的神经通路。
为此，你需要漫不由多的思考。这与焦点正好相反——你让你的大脑在更广阔的环境中游荡，四处寻找你之前没有的联系，接触新事物（或新事物的新组合），然后你可以关注这些事物，加强它们，并开始真正理解它们的意思。
这就是为什么在进入具体细节之前，先阅读一些介绍性材料，以便对一个领域有一个高度的了解，这通常是好的。
这也是为什么你有时真的可以陷入一个问题，但随后找出答案，当你去喝咖啡休息（或散步）。您可以：
假设您一直专注于问题 C，然后感到沮丧，因为您无法思考如何解决它。但是，在散步获得新鲜空气后，你可能会发现，当你的头脑徘徊，你突然使工具 A 和工具 B 之间的连接，并意识到你可以使用它们一起解决问题 C！它并不总是这么简单，但它也令人惊讶的是多少次，这确实发生了。这也凸显了在电脑前学习时定期休息的重要性。
也值得看看可用的不同类型的学习材料，看看哪些材料对您来说最有效。
你会发现很多书面文章在网上教你有关网页设计。例如，像本课程的多数课程一样。有些文章将是教程，教你某种技术或重要概念（如"学习如何创建视频播放器"或"学习CSS框模型"），有些文章将是参考材料，允许您查找您可能忘记的细节（如"CSS属性的语法是什么"？background
MDN Web 文档对这两种类型都非常好 - 您当前位于的区域非常适合学习技术和概念，我们还有几个巨大的参考部分，允许您查找任何您不记得的语法。
网上还有其他几个伟大的资源，我们将在下面提及其中一些资源。
注意：上面的文本应该给你一个重要的事实 - 你不应该记住一切！专业的 Web 开发人员使用 MDN Web 文档等工具查找他们一直忘记的内容。正如您会发现，学习 Web 开发更多的是关于问题解决和学习模式，而不是学习大量语法。
There are also a number of sites that have video learning content on them. YouTube is an obvious one, with channels such as Mozilla Layout Land, MozillaDeveloper, and Google ChromeDevelopers 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.
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. Codecademy 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.
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 JSBin, Codepen, or Glitch. In fact, you'll be called to do so as part of this course when you are learning!
Note: 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.
Note: 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.
It is a good idea to create a plan to help you achieve what you want to achieve through your learning.
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:
The following are not quite as reasonable:
Once you've worked out your goal, it is a good idea to research what you'll need to achieve the goal. For example:
Materials I need:
Knowledge I need:
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.
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:
"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."
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.
If you are doing a university or college course to learn web development, then most of this planning is done for you — lucky you!
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!
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:
Keep thinking about how much progress you are making, and adjust your plan if needs be.
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:
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.
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.
For example, if you are looking at a task of "Build a simple two-column website", you could break it down as follows:
Then you could break it down further. For example, "Implement horizontal navigation menu" could be written out as:
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!
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:
A nav menu is usually created from a list of links, something like:
<ul> <li>First menu item</li> <li>Second menu item</li> <li>Third menu item</li> <li>etc.</li> </ul>
To make all the items sit horizontally on a line, the easiest modern way is to use flexbox:
ul {
display: flex;
}
To remove unneeded spacing and bullet points, we can do this:
ul {
list-style-type: none;
padding: 0;
}
etc.
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.
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.
In addition, the web has developer tools 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.
Note: 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.
Note: The simplest solution is often the best.
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.
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.
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.
There are a variety of ways to get help, and what follows are some tips for doing so more effectively.
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?
It is often fairly obvious what to search for. For example:
<video>background-coloropacityDate.setTime()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.
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.
Note: Stack Overflow 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.
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:
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.
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.
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".
We already mentioned Stack Overflow, but there are other online resources that can help.
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:
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.
Lastly, you should try attending some physical meetups to meet other like-minded people, especially ones that cater to beginners. meetup.com is a good place to find local physical meetups, and you could also try your local press/what's on sites.
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.