Having trouble linking HTML and CSS in Off-Platform Project: Dasmoto's Arts & Crafts

Projects Skill Path Projects
1

I am starting my first Off-Platform project here, and am having trouble getting anything to work. It acts as if is is not linking index.htm; and html.css. I have scrupulously followed the guidelines for setting up the files and trying to get them linked, but nothing I try shows any sign that these files are linked. I have probably done something stupid, but I just can’t find it.

Could someone take a look at my files and tell me where I have screwed up? If so, many thanks in advance!

This is not an attempt to make the whole project, but rather, a first attempt at a SMALL PART.

Here is what the project directory tree looks like in VS Code:
image

Index.html looks like this:

Dasmoto's Arts & Crafts

Dasmoto's Arts & Crafts

index.css currently looks like this:

.banner {
color : rgb(252, 231, 40);
height : 150 px;
}

div {
width = 50%;
height = 150px;
}

.h1 {
font-family: Helvetica;
font-size: 100px;
font-weight: bold;
color: khaki;
text-align: center;
}

In its current form, it displays the image 1 and the headline below the image.

Any attempt to place the headline on top of the image fails, by just showing the headline below the image . Seems like index.html and index.css are just not linking.

3

I am also having trouble showing index.html in this Forum: dunno why.

4

Hi, there!

To show your HTML you will need to use preformatted text:
image

1 Like
5

Thanks, but I don’t see that Preformatted Text icon in the options it shows me. Dunno why on this point either.

I have to leave for work in a feew minutes. I will be back round 5:30 PM Eastern time. Thanks in advance for your help!

6

When you reply, it should be up there, but if—for whatever reason—you do not you can use two sets of three back ticks. ( ` ) with your code in between:

```
Code here
```

1 Like
7

I’m back, The Forum code does NOT show me that icon for preformatted text, so will try the 3 back ticks approach you mentioned.
My index.html looks like this:

<html> 
  <head>
    <title>Dasmoto's Arts & Crafts</title>
    <link rel="stylesheet" type="text/css" href="resources/css/index.css"> 
  </head>
 
  <body> 
    <!-- <img src="./resources/images/Image 1.url" alt=""> -->
    <!-- <img src="./resources/images/https://content.codecademy.com/courses/freelance-1/unit-2/pattern.jpeg?_gl=1*12wpbcu*_ga*NTQ2NzU5OTczNi4xNjg0NzY2MTMy*_ga_3LRZM6TM9L*MTY4ODY0OTEzOC45My4wLjE2ODg2NDkxMzguNjAuMC4w" alt=""> -->
    <!-- <img src="./resources/images/pattern.jpeg"> -->
    <div id="cropped"><img src="./resources/images/pattern.jpeg"></div>
    <img src="./resources/images/pattern.jpeg">
    <h1>Dasmoto's Arts & Crafts</h1>
  </body>
</html>

Please let me know if you see this, OK?
Thanks for your help!

8

Sorry, now that I am looking at your screenshot,

image

These images will not work by using
<img src="./resources/images/Image 1.url" alt="" />

You will need to use just the URL unless you save the image directly to your directory, like pattern.jpeg

<img src="https://content.codecademy.com/courses/freelance-1/unit-2/pattern.jpeg?_gl=1*12wpbcu*_ga*NTQ2NzU5OTczNi4xNjg0NzY2MTMy*_ga_3LRZM6TM9L*MTY4ODY0OTEzOC45My4wLjE2ODg2NDkxMzguNjAuMC4w" />

9

I tried downloading the image directly to my directory. Either way, running the partial project did indeed show the image and the text, but showed no adjustment via the index.css file.

I also had considered trying to step through the code using Google Dev Tools, but I heard that Dev Tools can only step through a site that uses Javascript, and this first local project does not use Javascript at all. Could you suggest some small amount of Javascript code that I could add to my project, that could let me debug this problem?

10

So, none of your CSS is working? Try including the relative path ( ./ ) on your <link>s href as you did with the <img>s

No? DevTools can certainly be used on a webpage without JS. And if you’re not already using it, the “Live Server” extension allows you to see updates as you save them.

11

I have been making progress! The problems were some careless mistakes in syntax.

1 Like
12

Although I have made SOME progress, I am having difficulty figuring out how to make the banner text on top of a cropped version of the background image first part of the “Dasmoto’s Arts & Crafts” project.

The text is centered and bolded, and is laid on top of a small part of the 1st image (pattern.jpg). Their sample looks like THIS:

Dashmoto_Wide
Dashmoto_Wide1108×107 117 KB

If you reduce the width of the sample shown on the project page, the image automatically increases its height and rearranges the text, in order to fit in the box. It looks like THIS:

Dashmoto_Narrow
Dashmoto_Narrow704×193 143 KB

I have been tearing my hair out all weekend, reading MDN Web Docs about HTML and CSS, trying to figure out how to make something that looks and acts like this. Can you help? Or can you put me in touch with someone who CAN?

Thanks in advance for anything you can do!

13

So, that way is absolutely achievable but complicated. You’ll want to use background-image on the h1.

1 Like