Error 404 - CSS file missing: encountering a 404 error while attempting to execute Flask code

Hello there! I'm still getting the hang of programming, especially when it comes to web development. Recently, I encountered an issue with my CSS file - whenever I link it to my HTML and run the Python code, I get an error saying that the CSS file cannot be found. If you have any insight or suggestions, please feel free to check out the git repository where the code is stored. Thank you in advance for your help! https://github.com/NelsonNNN/SecondApp.git

Answer №1

  1. To start, make sure to establish a new folder named static within the root directory.
  2. Then proceed by moving the css folder into this newly created static folder.
  3. Next step involves updating the layout.html file:

Remove the following:

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

And replace it with:

<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/style.css')}}">

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

Stop the bootstrap navbar from resizing

I implemented a bootstrap navbar that looks like this... <nav class="navbar navbar-inverse"> <div class="container-fluid"> <div class="navbar-header"> <a class="navbar-brand" href="#">WebSiteName</a> </div& ...

When I attempted to extract data with selenium through web scraping, the data stored in my csv file appeared unusual. Instead of the expected content, all I found were j

from selenium import webdriver from selenium.webdriver.chrome.service import Service from webdriver_manager.chrome import ChromeDriverManager from selenium.webdriver.common.keys import Keys from selenium.webdriver.common.by import By import time import cs ...

Text Parallax Effect

For my website, I am interested in incorporating a unique parallax effect. Instead of just fixing a background image and allowing scrolling over it, I want to apply this effect to all of the content on my site. The website consists of a single page with m ...

What causes the presence of a boundary around the svg?

I have been encountering an issue while attempting to incorporate my logo into the header of my webpage. Specifically, when viewed on smaller screens, I noticed that there is a margin surrounding the SVG image. Below is my HTML file: <html lang="e ...

Recursively insert a number into a sorted list

How can I insert my_num into the given list in the correct position using the provided structure? I've tried but am not getting the expected results, what should I do? my_lst = [1, 3, 5] my_num = 4 def new_number(lst): return lst def plus_nu ...

Enhancing user experience with autocomplete feature in gtk3 and pygobject

Currently, I am in search of a way to enable autocompletion for gtk3 libraries within Vim. My attempt with vim-jedi, which is considered the top autocompletion tool for Python in Vim (also recommended here), did not provide support for the gtk3 content imp ...

Can someone guide me on how to customize the CSS of a fab element in Onsen UI?

I've been struggling to change the background color or border of the onsen fab element. I'm working with angular 2 and onsen v2. Even after trying the !important rule, my CSS doesn't seem to take effect unless I disable the fabs default styl ...

Elevate the expanded card above the others on hover instead of displacing them downward

I'm working on a grid of cards where hovering over one card expands the bottom section to reveal more content. The issue is, when it expands, it pushes all other cards down. What I actually want is for it to overlay on top of the card below it. Here ...

Selenium, scrolling through web pages

I have been attempting to scroll through a webpage using Selenium at "https://jobsearch.az/vacancies". However, when you open the page and click on a job vacancy, there are two side-by-side pages that need to be scrolled. The challenge is to scroll the one ...

What is the best way to eliminate all elements from a duplicated Proto field in Python?

If I have the following .proto file: message Hello { } message World { repeated Hello greetings = 1; } What is the best way to clear all the items in the greetings field? ...

How can I import the raw JSON data from a table into a pandas DataFrame?

I am attempting to extract the JSON data and convert it into a dataframe from: "" , which is the original data displayed in a table at the bottom of this page "" The content on the JSON page seems to be basic JSON data like"[{\"SECURITYCODE\":& ...

Category-Specific Page Display

Can anyone help with CSS coding using Wordpress Elementor to make a page only display posts from the coaching category? I attempted to use this selector article.type-post:not(.category-coaching) { display: none; }, but it doesn't seem to be functi ...

Use the angular cli to incorporate the CSS styles found in the node_modules directory

After successfully installing a new library with npm, I now face the challenge of importing the CSS into my project. It seems unwise to directly link to the node_modules folder. Can anyone suggest an easy way to import this CSS into my Angular CLI project? ...

How can I customize the styling of Autocomplete chips in MUI ReactJS?

Trying to customize the color of the MUI Autocomplete component based on specific conditions, but struggling to find a solution. Any ideas? https://i.stack.imgur.com/50Ppk.png ...

Can the creation of an Allure report be done within Python's unittest framework?

Is there a way to generate an allure report in python-unittest, similar to how it's done in Pytest? ...

How can I ensure that Chakra UI MenuList items are always visible on the screen?

Currently, I am utilizing Chakra UI to design a menu and here is what I have so far: <Menu> <MenuButton>hover over this</MenuButton> <MenuList> <Flex>To show/hide this</Flex> </MenuList> </ ...

Tips on creating adaptable images for mobile viewing

My coding conundrum involves the use of two columns - one for an image and the other for a description of that image. However, when viewing my site on mobile devices, the image is cut off at only half its height. Adjusting both columns to col-sm-6 results ...

Filtering rows of an HTML table that contain links in the `<href>` column data in real time

When using HTML and JavaScript, I have found a solution that works well for many of the columns I am working with. You can see the details on how to dynamically filter rows of an HTML table using JavaScript here. var filters=['hide_broj_pu',&apo ...

What is the equivalent to the mysqlDB fetchone() function in pandas.io.sql?

Is there a similar function in the pandas.io.sql library that functions like mysqldb's fetchone? Perhaps something along these lines: qry="select ID from reports.REPORTS_INFO where REPORT_NAME='"+rptDisplayName+"'" psql.read_sql(qry, con=d ...

Why won't my sticky element function properly with the position attribute set to sticky?

Hey there! I've been diving into learning all about CSS positions and have nailed down most of them. However, for some reason, the sticky position just won't cooperate and is stubbornly acting like a relative one instead. Check out my HTML snipp ...