Issues with CSS and JS rendering have been observed on a website hosted through BlueHost

Just set up my website with Bluehost and running into issues with CSS and JS not rendering properly.

Here's a glimpse of my public_html folder structure:

https://i.sstatic.net/VnHFP.png

The assets folder includes separate folders for CSS and JS files.

I checked the link in my index.html file for the CSS and it seems correct:

<link rel="stylesheet" type="text/css" href="assets/css/main.css">

Could there be a missing step I overlooked? How do I ensure that my page loads correctly with CSS and JS?

javascripthtmlcssbluehost

Answer №1

Everything seems to be in order with the CSS:

<link rel="stylesheet" type="text/css" href="assets/css/main.css">

If you can provide a link to the page or maybe a screenshot from the inspector tool, that would be helpful.

When it comes to JavaScript, make sure to place it at the end of your page, just before the closing body tag:

<script src="assets/js/myscriptfilename.js"></script>

Additionally, keep in mind that Bluehost might have caching enabled on their server. You may need to clear the cache through their admin panel/cpanel/directadmin or wait for it to refresh on its own. Caching could result in old files being loaded with incorrect paths to your scripts and stylesheets.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Steps to generate a nested array of objects within a given array using JavaScript

I currently have an array called ExampleArray which contains different objects with properties like "No", "Name", and "subject". I want to transform this array into a new format where the "subject" property is an array of strings instead. var ExampleArray ...

javascriptangularjsarrays

Challenges with HTML and JavaScript

Struggling to get this code to work properly with Node.js. const express = require('express') const app = express() app.use(express.static('public')) //includes content of public folder app.get('/', function (req, res){ ...

javascripthtmlnode.js

What steps should I take to create a React component in Typescript that mimics the functionality of a traditional "if" statement?

I created a basic <If /> function component with React: import React, { ReactElement } from "react"; interface Props { condition: boolean; comment?: any; } export function If(props: React.PropsWithChildren<Props>): ReactElement | nul ...

javascriptreactjstypescript

Tips for retrieving the slug value in getStaticProps for invoking the API with the slug as a parameter

Content on the Page: import { useRouter } from "next/router"; export default function Daily({ data }) { let router = useRouter() const { slug } = router.query; return slug; } And display on the page 60d6180ea9284106a4fd8441 ...

javascriptnext.js

Utilizing Three.js Texture with shaderMaterial

I'm encountering an issue where I can't seem to load a texture onto my shader material, resulting in just black dots appearing. Here's the code snippet from my shader.js: THREE.ShaderLib['cloud'] = { uniforms: { textu ...

javascriptthree.js

Increase the worth of current value

Whenever a user enters their name into an input box, I want it to be shown after the word 'hello'. However, currently, the word 'hello' gets replaced by the user's name instead of being displayed after it. var name = document.ge ...

javascripthtml

Is it really necessary to still think poorly of JavaScript in 2011?

Here's an intriguing question for you. I've tested out a variety of popular websites, including Facebook, and I've noticed that many features still work perfectly fine even when JavaScript is disabled. People always used to say that JavaScr ...

javascriptajaxgraceful-degradation

Modification in background when PNG image is hovered upon

Having an issue in Chrome that doesn't occur in Firefox. When hovering over a PNG within a carousel plugin or dragging an element with Jquery, the hover image briefly distorts the background. Looking for a solution to improve user experience. Let me k ...

cssgoogle-chromehoverpng

When using Rspec and Capybara, utilizing jQuery to set focus on an element may not apply the `:focus` CSS as expected

I have implemented jump links for blind and keyboard users on my website, but I've hidden them off-screen visually. When these links gain focus, they are moved into the viewport. Trying to test this behavior using RSpec and Capybara has been unsucces ...

javascriptjqueryrspecphantomjscapybara

Having trouble accessing the 'state' property in ReactJS (Gatsby) because it is undefined

Looking for some help with my code: export default class Contact extends React.Component { constructor(props) { super(props); this.state = { password: '', redirect: false, username: '' }; ...

javascriptreactjsevent-handlinggatsby

What is the best way to position images and text on a webpage using CSS?

Is there a way to properly align images and text in my code? Below is the code I am currently using. Any suggestions on how to achieve the alignment? <ul> <li> <a href=""><i class="icon-profile"></i> </a> < ...

htmlcss

Issue with Chrome extension: inability to submit values

My Chrome extension is not functioning properly. Here is the code that I have: //manifest.json { "manifest_version": 2, "name": "auto login", "description": "This extension allows for automatic logins.", "version": "1.0", "permissions ...

jqueryhtmlgoogle-chromegoogle-chrome-extension

Having trouble with the locality function in Google Places v3 API autocomplete?

After successfully using the code below for about a week, I returned to work on it and found that it was no longer functioning properly. My goal is to only display localities. According to Google's documentation, "locality" is the correct option for a ...

javascriptjqueryajaxapi

Is there a way to inform TypeScript that the process is defined rather than undefined?

When I execute the code line below: internalWhiteList = process.env.INTERNAL_IP_WHITELIST.split( ',' ) An error pops up indicating, Object is possibly undefined. The env variables are injected into process.env through the utilization of the mod ...

javascriptnode.jstypescriptecmascript-6

Update the CSS styling of a parent div based on the active state of specific child divs

I have a class with 4 distinct columns. div class="mainContent"> <div class="left-Col-1" *ngIf="data-1"> </div> <div class="left-Col-2" *ngIf="!data-1"> ...

javascripthtmlcssangulartypescript

Alert event in JavaScript navigating between different pages

My website features two dynamic php pages: customer invoices and customer management. One common request from my users is the ability to swiftly add a new customer directly from the customer invoices page. Instead of cluttering the customer invoices page ...

javascriptjquery

When using JSON stringify, double quotes are automatically added around any float type data

When passing a float data from my controller to a JavaScript function using JSON, I encountered an issue with quotes appearing around the figure in the output. Here is the JS function: function fetchbal(){ $.ajax({ url: "/count/ew", dataType: "jso ...

javascriptjsonsymfony

Discover the most affordable price from an array in Vue Js

One of the challenges I'm facing involves working with an array that loops through all the trips for a listing. <span v-for="price in listing.trips"> <div class="price">{{ price.cost }} </div> </span> I'm wonderin ...

javascriptarrayslaravelvue.js

Utilizing CURL for PHP to extract information from any webpage

Can a PHP function be created to generate an HTML string of any link like a browser does? For example, links such as "", "", "mywebsite.com", "somesite.com/.page/nn/?s=b#85452", "lichess.org" What I have attempted: $curl = curl_init(); curl_setopt($curl, ...

phphtmlparsingcurl

Executing the SQL query more than once is not permitted

I seem to be facing a challenge in executing SQL queries multiple times. In the given code snippet, the first SQL query 【SELECT h.title, h.place, h.introduction ~】works fine. However, the second one 【SELECT name ~】fails to execute. If I comment ...

phphtmlcss