Front Office UI totally distorted

[soadevelopers.com]

I am learning prestashop 1.7.8.7

ubuntu 20 , PHP 7.4

The checker tool is showing all loaded correctly. All parameters are good. But when i start installing itself the UI or front office or front end where you select the options, store name etc are all  like as though text format. Below is a screen shot. Looks like css and jss not loading at all? Please help. I already spent 3 days in this. Always reinstalling. I learnt a lot though below screen shot

searched the entire world and no luck. All php.ini checked , version compatibility checked everything. Like I said, checker tool works fine. Version compatibilities done.

Edited September 7, 2022 by soadevelopers.com (see edit history)

[JBW]

CHeck in the browser console/network tab why the CSS is not loaded