Those links I gave provide some introduction to that. The thing to remember is that HTML works just fine on mobile devices as on desktop machines. But when adding CSS, some of the styles you typically use for desktop layouts may work agains you on mobiles, so it's about learning what works best on various devices.
Also, for buttons would I make them 100% width? Do I set min-widths? These are just some of the questions I have.
It's up to you, but a 100% width button is a bit big. I think Apple's recommendation for mobiles is at least 40px width/height to make a button easily 'clickable' (so to speak).
Also, why do @media queries if you need to re-structure the html for a mobile site???? I just don't get it.
The whole point of using @media is that you don't have to change the HTML for mobiles. For example, you might have a content div and a sidebar. For your desktop styles, you'd typically do something like float the content left and the sidebar right. But that may not suit the mobile screen. So, using media queries, you set alternate styles, for example, just not floating those divs, so that one site on top of another. A lot of modern sites now do this sort of thing, so if you resize your browser window you'll see the layout change. Try this one, for example: http://colly.com/
Almost done with the slide show and I understand some of the important points of building mobile first, THEN full site. The problem is when people come to me with designs they need coded it just doesn't always work that easily.
Yes, designing like this (with mobiles in mind) require a lot more thought and planning; and in my experience so far, the average client is not ready to hear about this sort of thing, or bother with the extra time/costs involved. In a few years, though, I predict that this will be a standard requirement.