Yeah, if you're just doing a personal site, a hosting provider like OOO just mentioned is probably the best way to go.
personal website: github pages is likely best. the only downside is only static pages, but it is free... Later on wanna learn to make a SNS, EC, whatever sites that require use of backend, just to practise for a few months...any cheap options?
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 ?
Next step up from HTML & CSS is PHP & MySQL, and you can still use notepad. I recommend XAMPP for PHP and MySQL development - download from here: https://www.apachefriends.org/index.html EDIT: I think XAMPP is using MariaDB instead MySQL - but I believe they are both almost 100% compatible.
For the backend, I plan to learn ruby (rails) and mysql. 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.
I thought it would be something like in Java/C#, where you can spend hours working on those fucking GUI Swing components one by one, or use some drag-and-drop in an IDE to get things done quicker. I just imagined there would be some layout libraries or frontend IDE that have some pre-written layout codes where you can choose from and customize..no? 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.