Develop Reference

HTML do not load CSS file

I started to develop a web page project with nodejs ejs engine.
It’s my git repo link: https://github.com/FikretAKBAS/teknikhane.git
The problem is when I start my project “npm start” html pages are loading but css file does not load. I tried many different things to figure out that but I didn’t get any solutions for that. In addition to I guess that’s a file path problem. I hope someone could help to solve this problem. Thanks a lot.
enter image description here

Remove /public from your css files path
for example
before
<!-- Additional CSS Files -->
<link rel="stylesheet" href="/public/css/fontawesome.css">
<link rel="stylesheet" href="/public/css/templatemo-edu-meeting.css">
<link rel="stylesheet" href="/public/css/owl.css">
<link rel="stylesheet" href="/public/css/lightbox.css">
after
<!-- Additional CSS Files -->
<link rel="stylesheet" href="/css/fontawesome.css">
<link rel="stylesheet" href="/css/templatemo-edu-meeting.css">
<link rel="stylesheet" href="/css/owl.css">
<link rel="stylesheet" href="/css/lightbox.css">
After you started the server
Your public folder become a root folder for localhost:5000

Laravel 7.6.2 app.js error app.js:3449 Uncaught TypeError: Cannot convert object to primitive value

I using Laravel 7.6.2 as mentioned, and I keep getting the error in browser console as shown in picture below when I click on my navbar toggle button.
Here is the css and script files used:
<link rel="dns-prefetch" href="//fonts.gstatic.com">
<!-- <link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet"> -->
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Serif:ital,wght#0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,300;1,400;1,500;1,600;1,700&display=swap" rel="stylesheet">
<!-- Styles -->
<link rel="stylesheet" type="text/css" href="{{ asset('css/bootstrap.min.css')}}">
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
<link href="{{ asset('css/jomkurus.css') }}" rel="stylesheet">
<!-- Plugins -->
<script src="{{asset('fontawesome/js/all.js')}}"></script>
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}"></script>
Thank you for your advice in advance.

I have found the root cause of this issue, seem like it is because of the jQuery 3.5.0 version issue. At this moment, the solution is downgrade jQuery to 3.4.1 version. The discussion can be found here. github.com/twbs/bootstrap/issues/30553 I have tried it and it works!

jQuery released 3.5.1, that fixed this bug (jQuery blog).
You can update this module in your project:
npm install jquery#3.5.1
npm run dev

Boostrap css doesn't work

I installed npm install bootstrap --save
and added (below) to index.html but the styles doesn't change.
<link rel="stylesheet"
href="node_modules/bootstrap/dist/css/bootstrap.min.css">
My code (in other file):
<button type="submit" class="btn btn-default">Submit</button>
Only when I add this (below) to index.html, all works but the first web's load is very slow:
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
Update: (More details)
The file bootstrap.min.css does exsist but the console says it cant find it.
Folders Strucure:
There is main folder is ang2project and inside it there are node_modules folder and src folder that contain the index.html
-angular2_projects
-node_modules
-bootstrap
-dist
-css
bootstrap.min.css
-src
-index.html

Grunt build doesn't combine styles inside of build:css(.tmp)

I use Yeoman angular generator and Grunt for front-end. Inside of my build:css(.tmp)section in index.html, i have added several css files but, just first and sass files generated in main.css files in build.
<!-- build:css(.tmp) styles/main.css -->
<link rel="stylesheet" href="styles/components-scss.css">
<link rel="stylesheet" href="styles/register.css">
<link rel="stylesheet" href="styles/style.css">
<link rel="stylesheet" href="styles/custom.css">
<!-- endbuild -->
componets-scss.css contain bootstrap sass file loading and font awesome. another styles is normal style. In Grunt Build just first file (componets-scss.css) combined and minified bootstrap and font awesome.
Every thing is working as well in Grunt serve mod.

I change to this one and now it's work.
<!-- build:css(.tmp) styles/main.css -->
<link rel="stylesheet" href="styles/components-scss.css">
<!-- endbuild -->
<!-- build:css styles/main.css -->
<link rel="stylesheet" href="styles/register.css">
<link rel="stylesheet" href="styles/style.css">
<link rel="stylesheet" href="styles/custom.css">
<!-- endbuild -->

Error in linking to Css and js file in index.html

I want to link my css file in my index.html file. The structure of my project is:
MyWeb
Views
-> index.html
css
-> style.css
js
->jQuery.js
I tried the following relative href links but nothing worked.
<link href="../css/style.css" rel="stylesheet">
<link href="./css/style.css" rel="stylesheet">
<script src="../js/jQuery.js"></script>
Here is the link to the website hosted locally: http://127.0.0.1:5000/

Try <link href="/css/style.css" rel="stylesheet">
its relative to the root

Remove ../ in href
<link rel="stylesheet" href="css/style.css" type="text/css" />

The html files are dynamic if you are using Flask Framework. Try something like:
<link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
Found here: Flask framework intro

assuming your folder structure is as follows
your app
templates
static
style.css
app.py
or you can also do it like this
<link rel="stylesheet" href="/static/style.css" type="text/css" />