What could be causing the error message "Failed to load resource: net::ERR_FILE_NOT_FOUND"?

I am currently working on a form utilizing bootstrap. I encountered an error where the styles are not loading when I open my HTML file from the folder. You can see the error image here.

However, everything works fine when I use Live Server in Visual Studio Code to open the HTML file. You can check it out using the following link: live server.

Could someone please explain why this is happening and how I can resolve it? Below is a snippet of my code:

 <!-- Bootstrap CSS -->
<link rel="stylesheet" href="/practica bootstrap-copia/css/bootstrap.min.css">
<link rel="stylesheet" href="/practica bootstrap-copia/form.css">
<link href="https://fonts.googleapis.com/css2?family=Bodoni+Moda:wght@400;800&display=swap" rel="stylesheet">

<title>Arma tu cv</title>

<!-- BOOTSTRAP AND JS -->
<script src="/practica bootstrap-copia/js/bootstrap.min.js"></script>
<script src="/scripts.js"></script>

Here are my folders

Thank you for your attention.

javascripthtmlcssbootstrap-4styles

Answer №1

After testing and investigating your issue, I have identified the problem and solution. Simply remove the forward slashes at the beginning of your href links. They should be relative directory positions, not absolute paths.

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="practica bootstrap-copia/css/bootstrap.min.css">
<link rel="stylesheet" href="practica bootstrap-copia/form.css">
<link href="https://fonts.googleapis.com/css2?family=Bodoni+Moda:wght@400;800&display=swap" rel="stylesheet">

<title>Arma tu cv</title>

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

sending Immutable.Map objects as parameters in React components

It appears that the popularity of the immutable library for React is on the rise. However, I'm encountering difficulties when trying to utilize Immutable.Map objects as props. It seems that Immutable.Map doesn't mesh well with the spread operator ...

javascriptreactjsimmutable.js

Difficulty with rendering speed when reusing a directive in AngularJS

Here is a basic directive called "base": angular.module("base", []) .directive("base", function() { return { restrict: "A", scope: true, controller: function($scope) { this.setHeader = function(header) { $scope.h ...

javascriptangularjsangularjs-directive

Utilizing various directives with distinct scopes for a single element

Is it possible for an element to have multiple directives with their own unique scopes? For example, let's consider a custom directive's child element with the controller's scope along with another directive (such as "ng-class"): <custo ...

javascriptangularjsangularjs-directiveangularjs-scope

Adjusting the background width results in the container position being altered as well

Currently, I am working with two background images, each accompanied by a red box positioned absolutely inside a bootstrap container. The first red box is located on the right side and the second red box is on the left side. So far, everything is running ...

htmlcssbootstrap-4

Utilize underscore's groupBy function to categorize and organize server data

I am currently utilizing Angular.js in conjunction with Underscore.js This is how my controller is structured: var facultyControllers = angular.module('facultyControllers', []); facultyControllers.controller('FacultyListCtrl', [' ...

javascriptjsonangularjsunderscore.js

Discovering the second value with a matching CSS class using Selenium WebDriver

How can I select the second value from a list item that appears as a drop-down on a web page? In this case, the second value is 'Bellevue'. Refer to the screenshot below: I am implementing Page Objects and trying to locate elements using @FindBy ...

javacssseleniumwebdriver

Adaptable bootstrap grids and sections

<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="fb9994948f888f899a8bbbced5c9d5c8">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"/> <div class="c ...

htmlcssbootstrap-5

What's the best method for uploading a file to AWS S3: POST or PUT requests?

Could you please provide insights on the advantages and disadvantages of utilizing POST versus PUT requests for uploading a file to Amazon Web Services S3? Although I have come across some relevant discussions on platforms like StackOverflow, such as this ...

javascriptajaxamazon-web-servicesamazon-s3

Struggles encountered while developing a JavaScript calendar

Hey guys, I'm encountering an issue with Uncaught TypeError: document.getElementById(...) is null. I believe the problem lies in the way types are being parsed for document.getElementById(dayOfWeek).appendChild(dayPTag);. This code is meant to display ...

javascripthtmlnullcalendartypeerror

Receiving constant errors on Search Input in React: continuously encountering the error "Cannot read property 'value' of undefined."

Attempting to incorporate the < ChipInput /> element from https://github.com/TeamWertarbyte/material-ui-chip-input. Using material-UI react component, my current setup includes: A functional search input bar. When an artist's name is typed, it ...

javascriptreactjsmaterial-uijsx

Transform preexisting Vue UI library measurements into pixels

I was curious about converting all existing units (em / rem) to pixels. How can I easily convert the entire output units to px? Are there any tricks or methods available? Currently, I am utilizing Vuesax UI to create a plugin for various websites and temp ...

cssnode.jsvue.jswebpack

Setting a variable before a debounced method function in Vue: Tips and tricks

Is there a way to set isLoading = true prior to the function being executed? Currently, isLoading remains false until the debounced function is triggered. <script> import _ from 'lodash' export default { data: { isLoading: false; ...

javascriptvue.jsvuejs2

What is causing Ajax to fail in connecting to the server?

When trying to submit a simple ajax form and send a response to my server, I keep getting the following error message : Forbidden (CSRF token missing or incorrect.): /designer/addOne/ [31/Jul/2017 12:49:12] "POST /designer/addOne/ HTTP/1.1" 403 2502 Alt ...

jqueryhtmlajax

Why am I unable to view the image in the material-ui-next "Cards" example?

I came across this example on the material-ui-next website, but strangely I am unable to view the lizard image when I try to run it on my computer. Why is the image not showing? There are no errors in my console, and the "simple card" example on the websi ...

htmlcssreactjsmaterial-ui

In order to ensure proper coverage for phones, tablets, and standard screens across various widths, it is essential to implement the

As I delve into my project focused on responsive design and media queries, I have been studying resources like Aaron Gustavson's book, Adaptive Web Design, and Ben Frain's Responsive Web Design with HTML5 and CSS3, along with various online sourc ...

htmlcssresponsive-designmedia-queries

Issue with React Bootstrap: The selected value in the Dropdown component does not update with the

Encountering problems when trying to update the dropdown title after selecting to display the correct data on the page. Upon arriving on this page, the selected option in the dropdown is passed as a prop. However, attempting to switch to other options in ...

javascriptreactjsdropdownreact-bootstrap

Issue with react-router-dom: <Route> elements are strictly meant for configuring the router and should not be rendered on their own

I've been grappling with this issue for quite some time now, but none of my attempts have succeeded and I keep encountering the same error: < Route> elements are for router configuration only and should not be rendered Here's the snippet ...

javascriptreactjsreact-redux

dompdf - adjust page margins starting from the second page

Currently, I am in the process of converting an HTML document to a pdf file using dompdf. Everything is running smoothly, except for one issue - I need to implement page margins for all pages, except the very first one. The first page should ideally have a ...

phphtmlcssdompdf

How to achieve horizontal auto-scrolling in an image gallery with jQuery?

Hey there, I'm currently working on an Image Gallery project. I have arranged thumbnails horizontally in a div below the main images. Take a look at this snapshot img. My goal is to have the thumbnails scroll along with the main pictures as the user ...

javascriptjqueryhtmlcss

When a user clicks on buttons other than the submit button, the input field redirects to another page

A helpful user named Vittore assisted me in displaying the first 5 list items of the unordered list and implementing page navigation with next and previous buttons flawlessly. The issue arises with an input field, which functions correctly by navigating ...

javascriptjqueryhtml