Hey guys, I have a question about Web Design

Question

I have been trying to learn webdesign for a few months now, and so far, I am still learning HTML and some CSS. At the moment, my experience is still very thin, I am struggling with things, and I only know how to create simple, static pages. For example I still don't know how to produce "clean code". Or how one determines just how "clean" the code he has produced really is.
I was wondering if someone could answer a few questions I have:
I am still not sure how I will know when I am competent enough to work in Web Design... What are the best signs that an individual is good enough?
I was also wondering what programming language I need to know to do the following:
Create a WORKING Site Search. One like the search bar in the top corner of this page that will return search results from your website... Do I need to know how to program PHP? I've heard that you do need PHP to do this? The same goes for creating e-mail forms, and other forms like this. Do I need PHP for this?
Another thing is CMS systems like Wordpress and Joomla. What is the reason for using these as opposed to just designing a website's pages in Dreamweaver, and then uploading them via FTP to your web server?
And finally, can someone explain to me why CSS is groped like this when it is coded? Why has the Div ID "OuterWrapper" been styled multiple times?
For example: #outerWrapper #feature {
#outerWrapper #subcontentWrapper {
#outerWrapper #subcontentWrapper #rightColumn {
^ Couldnt the designer simply have styled "~OuterWrapper" once and left it at that?
Please see below:
#outerWrapper #feature {
    height: 225px;
    width: 880px;
    margin-left: 0px;
    margin-bottom: 5px;
    background-image: url(images/feature.jpg);
    background-repeat: no-repeat;
    background-position: center top;
#outerWrapper #subcontentWrapper {
    padding-right: 15px;
    padding-left: 15px;
    clear: both;
    padding-top: 20px;
    background-color: #FFF;
    padding-bottom: 40px;
    border-top-width: 4px;
    border-right-width: 4px;
    border-left-width: 4px;
    border-top-style: solid;
    border-right-style: solid;
    border-left-style: solid;
    border-top-color: #F90;
    border-right-color: #F90;
    border-left-color: #F90;
    background-image: url(images/footer-fade.jpg);
    background-repeat: repeat-x;
    background-position: bottom;
    height: 100%;
#outerWrapper #subcontentWrapper #rightColumn {
    float: right;
    width: 220px;
    background-color: #DBE7FB;
    border: 1px solid #DCDFE4;
    margin-bottom: 15px;
Also, regarding Javascript: How exactly does one become proficient enough to learn scripting for the thousands of little widgets, and navigation bars, and other functions that Javascript can do out there?
I know a lot of these questions are strange and may be hard to answer, but I am really hoping some of you guys can provide some helpful advice/direction for me to improve with code. I studied as a Print Graphic Designer, and now it's really hurting me in this economy trying to find a job due to the fact that I lack full competency in Web Design... and the longer it takes me to get better at this, the slimmer my chances become at finding work!
I really need help on this, so I would be extremely grateful for detailed and informative answers. Perhaps some links to very good video tutorials on learning how to effectively design webpages - Common things like Javascripted navigation bars, image slideshows, how to design working site search forms and contact forms, and how to use Wordpress. I ask this because there are so many terrbile tutorial videos out there (I know from experience) and it is next to impossible for myself, a beginner, to tell the good ones from the bad.
Thankyou guys.

Answer 1

CMS's like  WordPress, Joomla! & Drupal are popular open source (PHP & MySql) frameworks.  They contain all the backend PHP code needed to create a dynamic web site that contains capability for advanced functions:  site search, on-line editing, shopping carts, member log-in sites, blogs with comments, scripted contact forms, and so much more...
The allure of Open Source frameworks is that they save developers time and money.  Instead of building everything from scratch (which can take months), an experienced developer can usually install WordPress on the client's server and be up & running in a few hours without customizations, or in a couple of weeks with customizations.   A firm understanding of PHP, how to set up a server-side database, backing up MySql, CSS theming, and HTML code are required skills to work with these frameworks.  WordPress is probably the easiest to set-up; Drupal is for more experienced coders.
I am still not sure how I will know when I am competent enough to work in Web Design... What are the best signs that an individual is good enough?
You're ready when you can look at code and understand what it means/does. Being able to problem solve, identify mistakes and fix them on your own is a must have skill. 
Code Tutorials - http://w3schools.com/
How to Develop with CSS?
http://phrogz.net/css/HowToDevelopWithCSS.html
CSS positioning in 10 Steps
http://www.barelyfitz.com/screencast/html-training/css/positioning/
Code Validation Tools
CSS - http://jigsaw.w3.org/css-validator/
HTML - http://validator.w3.org/
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media  Specialists 
http://alt-web.com/
http://twitter.com/altweb