Develop Reference

CSS and JS are not loading when i deploy the site on github, netlify

https://github.com/MadhavaY/RandomQuotesGenerator here is the link to the repository. HTML is loading but css and js are not. Link to the website https://madhavay.github.io/RandomQuotesGenerator/. I saw other answers too but i could not get where am i going wrong.

Hello madhava I reviewed your project and found out that you are still using your local paths to link your css and javascript
<link rel='stylesheet' type='css' media='screen' href='/All Projects/randomqotesproject/randomquotes.css'>
just change /All Projects/randomqotesproject/randomquotes.css to
./randomquotes.css

You need to change the path of both files.
As is:
<script src="/All Projects/randomqotesproject/randomquotes.js"></script>
<link rel='stylesheet' type='css' media='screen' href='/All Projects/randomqotesproject/randomquotes.css'>
If you remove the path, e.g:
/All Projects/randomqotesproject/
It should work.

If changing the path doesn't work for you, you can easily add a URL to the CSS and JS instead.
EX: https://madhavay.github.io/RandomQuotesGenerator/randomquotes.css

Section of the html web page not displaying

I am beginner to bootstrap and building a website using HTML5 and bootstrap.
It was working fine. After 2 days, some page contents are not displaying. That particular section and container is not displaying.
What may be the issue and solutions?
enter image description here

I think you are using some online css file. In this case if you are offline, your browser can't loud the css files.
for example: if you are using css like this,
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
please download bootstrap file and put in your project folder and use like this to can use this in offline mode too;
<link rel="stylesheet" href="../css/bootstrap.min.css">

How to add plugins to Bootstrap

I found this really cool plugin for Bootstrap that measures password strength. It looks good, and I want to use it, but I can't figure out how to make it work. According to the Github page, all you have to do to use it is "Just invoke the plugin on the password fields you want to attach a strength meter to.". Unfortunately, they don't tell you where to put the files, nor which javascript files you actually need to use.
I've been Googling every possible iteration of ways to add or install plugins for Bootstrap, and have come up empty each time. Does anyone have an answer here?

I guess the github pages can be confusing with all those source files. All you need to do is get the latest minified file from this page:
https://github.com/ablanco/jquery.pwstrength.bootstrap/tree/master/dist
Download it, upload it, and load it into your HTML somewhere after your original bootstrap javascript file using
<script type="text/javascript" src="file/location/pwstrength-bootstrap-1.2.3.min.js"></script>
When you've done that, add the following javascript code to invoke the plugin on a class or element:
$(document).ready(function(){
$(':password').pwstrength();
});

Just include the plugin css and javascripts after defining bootstrap in head of your html page.
something like this:
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script src="your plugin source"></script>

To add to previous solutions: also make sure to include jquery in your html because it's required by bootstrap's js.

Does implementing twitter bootstrap affect already existing css or form?

So I just discovered the bootstrap and I'm trying to implement it into my small webpage/app so that I can make my form/console box more visually appealing.
After integrating bootstrap as an external resource in jsfiddle, the prototype of my app/page still works. See:
code to make the red box go away
jsfiddle
As you can see, the jsfiddle version of my app is working properly
But when implementing bootstrap into the actual site, everything is out of wack...
Actual site
As you can see, the main image and output of text is completely gone and the structure of the form/console is also gone.
Can anyone explain what's going on here?
Am I integrating the CSS file incorrectly or am I just implementing bootstrap incorrectly, in general? Here's some the of the HTML file uploaded to the server:
<head>
<link rel="stylesheet" href="css/bootstrap.min.css">
</head>
...
<body>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="textualizer.js"></script>
<script type="text/javascript" src="script.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
Or does it have something to do with the CSS selectors and maybe they get altered after integrating bootstrap and that's why it's not working in the actual site? I'm totally lost here as to why it works in the jsfiddle but not with the actual site. (usually when I'm completely lost on something of this magnitude, the answer ends up being the most simple thing that I just happen to overlook)....

As you can see in bootstrap docs, it has some markup with css classes to get what you wanted. example, <div class="container"> </div>, <button type="button" class="btn btn-default">Submit</button> etc. It will not get applied automatically to your html page by just adding the css reference. Since you used your custom css styling in jsfiddle it works fine. However, since you have not used your custom css in your website, it will render as plain html markup without any styles.
Hence, please change the markup with bootstrap layout and classes for your website and see the result. If you wish to override colors, etc, you can use a custom css file just after the bootstrap core css file as:
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/mycustomstyle.css">
You can make overrides to the bootstrap core styles in mycustomstyle.css file. Just read bootstrap docs thoroughly to get an idea about using it in a website/web application.

.js scripts not loading in Colorbox plugin

I am trying to integrate the colorbox lightbox plugin as instructed on there website
I have successfully integrated on one of my pages but i cannot get it to load correctly for the other 3 (in same directory). Onlick it goes to a new page with the full size image on a white background!
An example of this working on my site is here....
http://www.transformyourshape.co.uk/cost-of-Herbalife.php
I have put the exact same scripts, in the exact same places as in this working one on my other page here...
http://www.transformyourshape.co.uk/Herbalife-Weight-Loss.php
But it just won't load the plugin and i have no idea why.
Can anyone see where or why this has gone wrong?
I would appreciate any help, no matter how minor so i can get this resolved
Thanking you all in advance!

You have included two versions of jquery, which causes $.colorbox to become undefined after second inclusion:
<head>
..
<script type="text/javascript" src="Scripts/js/contactForm/jquery-1.8.3.min.js">
</script>
..
..
<!--Colourbox Scripts & CSS -->
<script src="Scripts/js/colourbox/jquery.colorbox.js"></script>
<link href="css/colourbox/colorbox.css" rel="stylesheet" type="text/css">
..
..
<script type="text/javascript" src="cw4/js/jquery-1.7.1.min.js"></script>
..
</head>