Effective problem-solving

Intro 

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

Break problems down into chunks

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.

Case Study : Problem & Solutions 

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 a horizontal navigation menu" could be written out as:

• Mark up a list of menu items.

• Lay out the menu items horizontally in a line.

• Remove unneeded defaults, like list spacing and bullet points.

• Style hover/focus/active states of menu items appropriately.

• Evenly space the menu items.

• Give the menu items enough vertical spacing.

• Make sure the text is centered inside each menu item.

• etc.

Conclusion 

Each of these problems doesn't seem nearly as difficult to solve as the one big problem you had initially.