Dasmoto's Arts & Crafts

Hi all,

So I’ve written up the HTML and CSS but for some reason, I can’t get the index.css to link to my HTML code. I’ve followed all the necessary steps, triple checked other codes in the forums, GIThub etc. but no luck at all. Any advice? The codes are below:

Project Link:
https://www.codecademy.com/paths/learn-how-to-build-websites/tracks/build-websites-on-your-own-computer/modules/local-website-development/projects/dasmoto

HTML Code:

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href=".resources/css/index.css" type="text/css">
    <title>Dasmoto's Arts & Crafts</title>
  </head>

  <body>
    <header>
      <h1 class="title">Dasmoto's Arts & Crafts</h1>
    </header>
    <main>
      <div class="item">
        <h2 id="brushes">Brushes</h2>
        <img src="resources/images/hacksaw.jpeg">
        <h3>Hacksaw Brushes</h3>
        <p>Made of the highest quality oak, Hacksaw brushes are known for their
        weight and ability to hold paint in large amounts. Available in
        different sizes.
          <span class="prices">Starting at $3.00 / brush.</span>
        </p>
      </div>
      <div class="item">
        <h2 id="frames">Frames</h2>
        <img src="resources/images/frames.jpeg">
        <h3>Art Frames (assorted)</h3>
        <p>Assorted frames made of different material, including MDF, birchwood,
        PDE. Select frames can be sanded and painted according to your needs.
          <span class="prices">Starting at $2.00 / frame.</span>
        </p>
      </div>
      <div class="item">
        <h2 id="paint">Paint</h2>
        <img src="resources/images/finnish.jpeg">
        <h3>Clean Finish Paint</h3>
        <p>Imported paint from Finland. Over 256 colors available in-store,
          varing in quantity (1 oz. to 8 oz.). Clean Finnish paint microblends
          to canvas, increasing the finish and longevity of any artwork.
          <span class="prices">Starting at $5.00 / tube.</span>
        </p>
      </div>
    </main>
  </body>
</html>

CSS Code:

h1, h2, h3, p {
  font-family: Helvetica;
}

.title {
  font-size: 100px;
  font-weight: bold;
  color: khaki;
  text-align: center;
  background-image: url('./resources/images/pattern.jpeg');
}

.item h2 {
  font-size: 32px;
  font-weight: bold;
  color: white;
}

.prices {
  font-family: Helvetica;
  font-weight: bold;
  color: blue;
}

#bushes {
  background-color: MediumSpringGreen;
}

#frames {
  background-color: LightCoral;
}

#paint {
  background-color: SkyBlue;
}

In your section, have you tried putting the “href=” first (putting it before the “rel” and “type” sections)?
I had a similar problem and that fixed it for me.
I’m honestly not sure why that fixed my problem, but it was a trial and error experiment that worked for me. Maybe one of the more knowledgeable members can educate on why that worked for me.

Thanks for the suggestion.

I’ve given it a try and had the same result. I’ve tried a few other bits and pieces but for some reason, I get nowhere. This is driving me insane.

Is your path correct? I had a similar problem with a image that I linked incorrectly. Can you screenshot your path tree so I can see where everything is stored?

There you go, let me know your thoughts. I kept trying over the weekend but still zero success.

In your first post you have the link href =".resources/css/index.css"
In your picture you have the link href=".\resources\css"
I’m not sure if you were changing those around with experimenting, but judging by your tree they are both incorrect.
It appears that you have your CSS file saved as “style.css”, so if I’m thinking about this correctly your href should be:
href="./resources/css/style.css"

@toastedpitabread would you mind double checking me on this since I just had a similar issue? I want to make sure I’m telling @real_ash_ketchum the correct thing. Thanks in advance.

@real_ash_ketchum You should use forward slashes / as this is what the html file and css file are expecting. The backslash \ acts as an escape character in programming. See more here: html - Single and Double Backslash in Path - Stack Overflow

2 Likes

That’s worked!! Thank you so much! I feel like an absolute git having missed that haha.

On the other hand, I’m still having no luck (like a lot of others) with getting the background to load for the title. Any other genius ideas?

background-image: url('../images/pattern.jpeg');

See this thread for resources/ideas: Dasmotos Arts & Craft project background image not loading - #10 by toastedpitabread

1 Like

Perfect, that worked. Thanks so much!

Thanks for the help @toastedpitabread
I knew if I didn’t have it correct that you’d be able to make sure I didn’t take @real_ash_ketchum too far off the correct approach.
I’m smart enough to know that sometimes I’m not smart enough to know :laughing:
But hey, at least I’m trying to be a useful part of the community.
I come from the health care world, and the old way of thinking there is “watch one, do one, teach one”
I’m trying to help out others because teaching something helps with memorizing information better than any other technique.
And @real_ash_ketchum don’t stress too much about missing stuff. I literally was searching for help on the background image issue the same day I was trying to help you with your problem connecting the CSS file to the HTML. It’s what learning is all about :+1:

1 Like

Oh yea for sure keep at it. Good mantra! I’m just a learner too.

1 Like