xampp in chromebook linux 403 and the xampp virtualhosting wont work

i want to run a sources file i’ve got on udemy, but the thing is it can’t be viewed in the browser by xampp.
The webbrowser would said access forbidden!
if ur interested to view the file its this link: udemy coffee-blend

after installing the xampp and all
1st i’ve try to run it in the browser, it can only be run from my ip address which is “1XX.1XX.9X.1XX”, which will then be redirected to “1XX.1XX.9X.1XX/dashboard/” i already tried making folder and html files in it, in “/opt/lampp/htdocs/” it can run, but if i tried to run that file it will say access forbidden!

after that i’ve tried to make virtual host for easier access, still it won’t run, even the demo html i’ve done can’t be access on that demo1.localhost, but in the old way it can still it means it cant in the vhost…and access forbidden or 403 if the udemy files was run.

i’m restarting it all everytime i’ve done changes. thanks
the udemy files mabually i can access it by opening the files into the browser.

this is the changes ive done on the /opt/lampp/etc/httpd.conf

# Virtual hosts
Include etc/extra/httpd-vhosts.conf

this is the /etc/extra/httpd-vhosts.conf

#<VirtualHost *:80>
#    ServerAdmin webmaster@dummy-host.example.com
#    DocumentRoot "/opt/lampp/docs/dummy-host.example.com"
#    ServerName dummy-host.example.com
#    ServerAlias www.dummy-host.example.com
#    ErrorLog "logs/dummy-host.example.com-error_log"
#    CustomLog "logs/dummy-host.example.com-access_log" common
#</VirtualHost>
#
#<VirtualHost *:80>
#    ServerAdmin webmaster@dummy-host2.example.com
#    DocumentRoot "/opt/lampp/docs/dummy-host2.example.com"
#    ServerName dummy-host2.example.com
#    ErrorLog "logs/dummy-host2.example.com-error_log"
#    CustomLog "logs/dummy-host2.example.com-access_log" common
#</VirtualHost>
<VirtualHost *:80>
ServerAdmin demo1@d.com
DocumentRoot "/opt/lampp/htdocs/coffee-blend"
ServerName coffee-blend.localhost
#ErrorLog "logs/dummy-host2.example.com-error_log"
#CustomLog "logs/dummy-host2.example.com-access_log" common
</VirtualHost>
<VirtualHost *:80>
ServerAdmin demo1@d.com
DocumentRoot "/opt/lampp/htdocs/demo1"
ServerName demo1.localhost
#ErrorLog "logs/dummy-host2.example.com-error_log"
#CustomLog "logs/dummy-host2.example.com-access_log" common
</VirtualHost>

The /etc/hosts :

  GNU nano 5.4                 /etc/hosts *
127.0.1.1       penguin
127.0.0.1       localhost
127.0.0.1       coffee-blend.localhost
127.0.0.1       demo1.localhost
::1             localhost ip6-localhost ip6-loopback
ff02::1         ip6-allnodes
ff02::2         ip6-allrouters