Hi there.
I want to ask what do I need to learn to make HTML, CSS websites available in the correct way on mobile phones?
Thank you. 
My advice would be to treat it like a separate design project, the benefits of dealing with mobile devices by offering a freely optimized version of the site (slimmed down) seem to have the most amount of benefit to end users. A lot of people I know setup a subdomain on their site like m.yoursite.com (seems to be the convention) and host a slimmed down edition of the site with smaller images (in terms of scale and size), single columns, simplified layout, less content per page (etc). Trying to convert an existing website to make it mobile friendly is worse than trying to make HTML emails display properly. Mobile devices won’t agree on following the standards and using media queries or at rules for handheld devices aren’t effective enough, neither are user_agent redirection scripts which can’t guarantee effective redirection of the millions of devices out there. Simply put, have a fresh minimized speedier version of the design as a secondary design and notify people on the main site the mobile version is available (with a link) so they can pick which they would prefer - it’s widely accepted to be the most usable solution.
The main problem while working with the mobile devices are the screen size of the mobile device and its rendering engine for html code.
I think using simple HTML layout and less css will help it to be compatible in almost all mobile devices.
As alex mentioned it is better if it is single column design and separate domain for it is the best practices. Later if you want you can set the condition so that mobile device will be automatically redirected to mobile version of the site.