On Psychology
I have been in exactly the same place. Psychologically you have to come to terms with something. NOBODY LEARNS TO DO IT RIGHT THE FIRST TIME. Just let yourself get a result of any kind. That means being DRY and writing at the proper level of abstraction comes later. Resign yourself to throwing away your first baby after several rounds of refactoring…. And most answers being kinda half-assed on the coding forums.
Also, ALL LANGUAGES ARE FLAWED. If you look for the perfect OOP or FUNCTIONAL approach in a given situation, chances are you'll realize it's not there!!! You’ll find lots of things work really great but if you work hard enough you’ll find the ugly void. Everyone does eventually. Just learn the way that you can best remember and move on. You’ll be back… ;)
A Practical Path
I wouldn't recommend this path to someone without your background. It risks too many pigeonholes for the neophyte.
What you need is a stack that gives instant gratification. You need minimal configuration so you don't get bogged down in editing she'll scripts. And you need aspects of that chain to become intelligible to you as your knowledge expands.
If your environment is a *nix and hasn't taken too much of a beating from various installs from failed development attempts, install on it. Ifnot, stand up a fresh virtual machine with Ubuntu or something.
Install git, node.js and then harp.js. Don't bother with databases, connectors to your favorite api or any of that shit yet.
Lesson 1 - follow the harp.js directions till you're looking at your first page. Play around till you're familiar with jade and markdown. Pay special attention to adding tags and scripts to the page. Use HTMLTidy, JSBeautify, or whatever to look at the out put and compare it to the input. Congratulations you're using a rendering engine and you're learning 3 markup languages and a bit of CSS and LESS at the same time.
Lesson 2 - Learn how to change CSS attributes for standard tags, classes and ids. The learn to use variables, loops and conditionals in LESS. Learn how to include another LESS file. Harp.js will do the rendering work for you. Congratulations, you now know how to apply the three core grammars of a programming language to do something cool in a language that is EVERYWHERE.
Lesson 3 - Get the source code package for BOOTSTRAP. Copy the LESS files into the right spot and include bootstrap.less in your less file.
Go through the CSS section on the bootstrap site and play with tags and content. Congratulations, you're using a library to speed the process of doing something you already have the skills to do yourself. Go look at some of those LESS files and CAREFULLY READ THEM. Enjoy understanding someone else's code.
Lesson 4 - Use JAVASCRIPT to replace the content of a div or other DOM tag. Replace everything with a p tag with the word, "Suweet!" Now learn how to make an array and access an element of that array. Make "suweet" the 3rd element in the array and replace all the p tags with it. Now learn how to iterate through the array and display a list.
Lesson 5 - Spend a few days learning simple Javascript stuff from Thau's book or W3Schools. Have some fun with it. Learn how to make objects and access their properties and methods. Then learn to use a callback function. Notice I said, "Learn to use...." Understanding the callback function might be SUPER irritating at this point.
Congratulations you've had some fun with a language and finished up by learning the feature that will betray you constantly until you master it - then, if you're really as versed in theory as you say, it will make you feel dirty. Javascript without mastering the callback is a toy. With it, it's a slowly collapsing black hole that will eat the lives of a generation of developers.
DEAL WITH IT. Magic always betrays you. Complexity management is a boring drag like buying insurance. That's why nobody does it. Worry about it when you're further along the learning curve.
You can hardly get anything done on the Web without Javascript. JQUERY, NODE.JS and the rest of the pony show use callbacks and nested callbacks for EVERYTHING. Don't fear using deep nests of callbacks, you'll be in good company and have some ugly war stories to share.
Lesson 6 - Learn basic JQUERY. Do the same things from lesson 5 but do them the JQUERY way.
Lesson 7 - Get bootstrap fully folded into your harp.js playground. Make version 0 of your personal website with it using LESS and the rest of what you've learned.
Lesson 8 - build a reply form that uses node.js to send you an alert.
Lesson 9 - use what you've learned so far to make a publish-to-site.js file that automates harp.js publishing your site as static html via SFTP or some other secure protocol.
At this point you've created a really sophisticated toolchain for building and managing your web site. It should be easy to operate and maintain and should also stay FAR out of the way of any cool web app stuff you might want to try. You have many of the benefits of Wordpress without being stuck in the Wordpress world running off of mySQL.
If you get this far and nothing has grabbed you.... Do Python the Hard Way all the way to the end, then focus entirely on something like text processing until RegEx is a second language. Then learn everything you can about Bayes - start with the Statistics class at Udacity. ;)
Ultimately, you learn a language by constantly attempting to express ideas with it. Coding is no different. Speak pidgin for a while, eventually things will click.