Yeah, if you're just doing a personal site, a hosting provider like OOO just mentioned is probably the best way to go.
I only read some html/css books and started writing them in notepad. It is good for practising, but as soon as layout and contents get bigger things become unmanageable. I wonder how real world pages are written/maintained? how is a page like https://www.quantlab.com/ created? What software is used to generate html for this elatetrader.com ?
But I am talking about the frontend html codes and css layouts. how are they created/generated in real-world sites? even using css frameworks like Tradition/Bootstrap, still a lot of work going into getting things in order..
The answer to your question is that you have to learn the stuff and create the layout out of your head. There's no magic generator. If you get a layout looking how you want it but then it goes haywire when you make the screen smaller or larger, you have to use CSS media queries to change up your CSS code depending on the screen size.
In summary, it's a shit ton of work if you are trying to create a custom layout that works on all sizes of devices.
That's why most of the web sites you see out there are Wordpress sites. If you use Wordpress as your content management system, there are literally thousands of layouts or "themes" that have been created by front end developers that you can purchase or in some cases download for free. These themes already have all the required HTML and CSS baked in. You just download and install the theme you like and that's it.
You are saying if someone is not using some CMS, they are really writing the HTML/CSS line by line?
That's correct. If you don't want to be the person that actually writes the HTML/CSS, then you can design your page layout in something like Photoshop, Sketch, or another program like that and then you can have your layout translated by experienced web developers.