Struggling to find solutions for debugging HTML codes in Visual Studio Code and linking my CSS page to my HTML page

I ran into some issues with linking my CSS stylesheet to my HTML pages. I tried using the 

<link rel="stylesheet" href="style.css">
command, where style.css is the name of the file. However, for some reason, it wasn't working as expected. For reference, here is an image of the CSS file: View CSS file image here. I made sure to check the indentation in both files, but couldn't find any errors causing the problem. Additionally, my debugging suddenly stopped working. I use Chrome as my default debugger and have attempted to troubleshoot by modifying the launch.json file without success. When trying to debug, the browser displays an error message stating "this site can't be reached. Localhost refused to connect." You can see a screenshot of the browser error message here: Browser debugging report image. In my efforts to resolve these issues, I've made changes to the launch.json file and no longer remember its original content. This is what it looks like now: Current launch.json configuration screenshot. If anyone has encountered these problems before or has suggestions on how to fix them, please help me out. Thank you.

htmlcssdebugginglinker

Answer №1

It seems like there is no webserver detected in your captures. Please ensure that you have:

  1. updated the hosts on your system
  2. Activated a webserver if you intend to use URLs such as http://localhost:8080, such as Wamp or Docker image

Alternatively, you can simply open the HTML file in your browser by dragging and dropping it into the browser window. This should work correctly if your relative path files are accurate.

Have a great day!

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

Is it possible for amCharts to show the data properly?

Starting out with amCharts and javascript can be a bit overwhelming. Here is the structure of my html file: <!DOCTYPE html> <html> <head> <link rel="shortcut icon" href=""> <title>chart created with amCharts | amChar ...

javascripthtmljsonamcharts

Unveiling the Quirk of Foundation 5: Grid Encounters a Popping

Recently, I encountered an issue with Foundation 5. Whenever I attempt to apply the "position:fixed" property on a "div" element that is part of the Foundation Grid, it causes the div to break out of the grid and align itself with the left edge of the ro ...

csszurb-foundation

Minimize the number of HTTP requests by including CSS and JS files in PHP

I've been considering a method to reduce the number of HTTP requests made when loading a page by minimizing the amount of downloaded files, while still keeping separate files on the server. The thought process is as follows: <!DOCTYPE html> &l ...

phpjavascriptcssperformanceimport

Enhancing WordPress Icons for Parent and Child Elements

I am seeking to customize icons on a WordPress website. The site contains a variety of product categories, including subcategories. My goal is to display one icon for parent categories and a different icon for child categories. I have tried the following ...

htmlcsswordpressicons

The custom styles in Material-Table are taking precedence over all other styling, including Material UI styles, and causing icons to not

I recently started using the Material-Table component for a project I'm working on, and it's been great for managing tables with features like adding, editing, deleting, and searching rows. However, I've run into a few issues that I need hel ...

cssreactjsiconsmaterial-uimaterial-table

Tips for organizing list items in a grid format using CSS and HTML

In my div block, the width is not fixed. Inside the div, there is a list block with 11 items that I want to display evenly like this: ##item## ##item## ##item## ##item## ##item## ##item## ##item## ##item## ##item## ##item## ##item## I&a ...

htmlcss

Is the condition failing to evaluate for all td elements?

I am currently dealing with an HTML table. When I select a checkbox, I aim to compare the values of the cells in each row. This comparison works correctly for the first row, but it does not work for any subsequent rows. HTML Code - <form role="fo ...

javascripthtmljqueryif-statementconditional-statements

Sorting feature fails to function properly when used in combination with pagination and

<table> <thead> <tr> <th class="col-md-3" ng-click="sortDirection = !sortDirection">Creation Date</th> </tr> </thead> <tbody> <tr dir-paginate="item in items | filter:itemFilter | items ...

javascripthtmlangularjspaginationangularjs-orderby

I'm encountering an issue with implementing a basic "remember me" feature on my PHP login page

I am in the process of implementing a basic "remember me" feature in my login.php file: <?php session_start(); if(isset($_SESSION["comp"])){ header("location view.php");//to redirect to the view page if already logged retur ...

phphtmlwebphpmyadmin

Is there a way to include captions within a bootstrap carousel-item without compromising the responsiveness and alignment of the indicators and controls?

<div id="myUniqueCarousel" className="carousel slide" data-bs-ride="true"> <div className="unique-carousel-indicators"> <button type="button" data-bs-target="#myUniqueCarousel" data-bs-slide-to="0" className="active" aria-curre ...

htmlcssbootstrap-5

Room available on the body's right side for tiny gadgets

I'm currently facing a website issue while using Bootstrap. Everything seems to be working fine until I attempt to check the responsiveness of my website. There appears to be an excessive white space on the right side of my body, but only in a specifi ...

htmlcssbootstrap-4

Is there a method for displaying a gif with an alpha channel for transparency effects?

Is it possible to make the black color in a realistic gif animation transparent using CSS? The snow is white and everything else is black, but I want to overlay it on my header image with the snow falling realistically. I've seen animations of falling ...

css

Fullscreen images stop from getting stretched

I am facing an issue with making images full-screen without them stretching on larger screen sizes. Is there a technique to keep the image size consistent regardless of the screen dimensions? I am aware of how background images can be made fullscreen usi ...

htmlcss

Trouble with jQuery addClass function when trying to add to a specific object variable

I'm attempting to give an error class to an input textbox to inform the user that their input is invalid. Within the change event, I am referencing what seems to be the input field and storing it in a variable. However, calling addClass on the var ...

javascriptjquerycss

The table's content extends beyond the confines of the page

I have an HTML page where I am embedding an SSRS report. The report extends beyond the page as shown in the image below: This is the table that is generated: <table cellpadding="0" cellspacing="0" id="ctl00_MainContent_FiveYearReportViewer_fixedTable" ...

javascripthtmlcss

Tips on setting the ajax parameter contentType to "html"

I'm encountering an issue where the variable "myvariable" is passing as null. Can anyone provide guidance on what I might be doing incorrectly? $.ajax({ type: "POST", url: "/MyController/MyAction", data: JSON.stringify({ items: my ...

jqueryhtmlajax

Trouble arises with the background of the HTML body

There seems to be a mysterious white strip appearing when I use the (google custom sesrch) search results rendering tag gcse:searchresults-only If I remove cse id from var cx or delete the above tag, everything works perfectly and the white stripe disappe ...

htmlcss

A custom class that uses toggleClass() does not trigger an alert upon a click event

I am encountering an issue with the toggleClass() function in jQuery that I haven't seen addressed before. Despite successfully toggling the class of one button when clicked, I am unable to trigger a click event on the newly toggled class. Here is th ...

javascriptjqueryhtmlcss

When attempting to print using React, inline styles may not be effective

<div styleName="item" key={index} style={{ backgroundColor: color[index] }}> The hex color code stored in color[index] displays correctly in web browsers, but fails to work in print preview mode. Substituting 'blue' for color[index] succe ...

javascripthtmlcssreactjs

How do I apply a xPage page style using the styleClass attribute instead of directly using the style attribute

Would like to know how to change the background color of an entire page using styleClass instead of directly in the xp:view tag? Here's an example that works: <xp:view xmlns:xp="http://www.ibm.com/xsp/core" style="background-color:#f1f1f1;"> ...

cssxpageslotus-notes