Learning and getting help - Learn web development 编辑

It is great that you are putting some time into learning a new set of skills, but there are good practices to employ that will make your learning more effective. There also are times when you'll get stuck and feel frustrated — even professional web developers feel like this regularly — and it pays to know about the most effective ways to try and get help so you can progress in your work. This article provides some hints and tips in both of these areas that will help you get more out of learning web development, as well as further reading so you can find out more information about each sub-topic should you wish..

Effective learning

Let's move straight on and think about effective learning.

Different learning methods

It is interesting to consider that there are two main ways in which your brain learns things — focused and diffuse learning:

• Focused learning is what you might more traditionally associate with academic subjects. You concentrate deeply on a low-level topic and solving the specific problems that it brings. You are focused on a narrow area.
• Diffuse learning is more to do with high-level thinking around a wider area. You let your mind wander more widely, and seemingly make random connections between different things. This is more the kind of thinking you do while you are in the shower, or during a coffee break.

From the studies that neuroscientists have done on brain activity, we have found out that you can't really engage in both ways of learning — or thinking — at once. So which one should you choose? You might think that focused learning is better for studying, but in reality, both are very important.

Focused thinking is great for concentrating hard on specific subjects, getting into deep problem solving, and improving your mastery of the techniques required — strengthening the neural pathways in your brain where that information is stored. It isn't however very good at getting an understanding of "the big picture", and unlocking new neural pathways when you are trying to understand new subjects or solve new problems that you haven't come across before. 

For that, you need diffuse thinking. This is the opposite of focus — you let your brain wander around the wider landscape, searching around for connections you didn't have before, touching on new things (or new combinations of things) that you can then focus on later, to strengthen them and start to really understand what they mean.

This is why it is usually good to read some introductory material first to get a high-level understanding of an area before you leap into the specific details.

It is also why you can sometimes get really stuck on a problem, but then figure out the answer when you go for a coffee break (or a walk). You might:

1. Know how to fix problem A with tool A.
2. Know how to fix problem B with tool B.
3. Not know how to fix problem C.

Let's say you focus on problem C for a while and get frustrated because you can't think how to solve it. But then after going on a walk to get some fresh air, you may well find that as your mind wanders, you suddenly make a connection between tool A and tool B, and realize that you can use them together to fix problem C! It isn't always this simple, but it is also surprising how many times this does happen. This also highlights the importance of taking regular breaks when you are studying in front of the computer.

Different learning materials

It is also worth looking at the different types of learning materials that are available, to see which ones are most effective for you to learn with.

Textual articles

You'll find a lot of written articles on the web to teach you about web design. Like most of this course, for example. Some of the articles will be tutorials, to teach you a certain technique or important concept (such as "learn how to create a video player" or "Learn the CSS box model"), and some of the articles will be reference material, to allow you to look up details you may have forgotten (such as "what is the syntax of the CSS background property"?)

MDN Web Docs is very good for both types — the area you are currently in is great for learning techniques and concepts, and we also have several giant reference sections allowing you to look up any syntax you can't remember.

There are also several other great resources on the web, some of which we'll mention below.

Note: The above text should have given you an important fact — you aren't expected to remember everything! Professional web developers use tools like MDN Web Docs to look up things they have forgotten all the time. As you'll discover, learning web development is more about problem-solving and learning patterns than it is about learning lots of syntaxes.

Videos

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.

Interactive code playgrounds

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.

Making a plan

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

A goal statement

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:

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

The following are not quite as reasonable:

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

What do you need to get there?

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:

• A computer
• Internet access
• Pens and paper

Knowledge I need:

• 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!).
• How to get a domain, hosting, and use them to put a web site or application online.
• How to run a small business.
• How to advertise my business and attract clients.

How much time and money will it take?

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.

How many hours per week do I need to dedicate?

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:

• HTML and CSS basics learned by summer
• JavaScript basics learned by December
• Example website project built by next April
• etc.

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

Staying motivated

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:

• Try to make your work environment as productive as possible. 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.
• Take regular breaks. 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.
• Eat, exercise, and sleep. 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.
• Give yourself rewards. It's true that all work and no play makes Jack a dull boy. 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!
• Co-learning and demoing. 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.

Effective problem solving

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.

Break things down into chunks

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:

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

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

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

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!

Learn and recognize the patterns

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.

Getting practice

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.

Getting help

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.

Effective web searches

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:

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

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.

• Run code after several promises are fulfilled
• Play a video stream from a webcam in the browser
• Create a linear gradient in the background of your element

Error messages

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.

Browser testing

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:

• <video> playback doesn't work in the iOS browser.
• Firefox doesn't seem to support the Beetlejuice API.

Using MDN

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".

Other online resources

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:

• MDN Discourse
• Sitepoint Forums
• webdeveloper.com Forums

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.

Physical meetups

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.

See also

• Coursera: Learning to learn
• Freecodecamp
• Codecademy