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:
Index.html looks like this:
Dasmoto's Arts & Crafts
Dasmoto's Arts & Crafts
index.css currently looks like this:
color : rgb(252, 231, 40);
height : 150 px;
width = 50%;
height = 150px;
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.
I am also having trouble showing index.html in this Forum: dunno why.
To show your HTML you will need to use preformatted text:
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!
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:
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:
<title>Dasmoto's Arts & Crafts</title>
<link rel="stylesheet" type="text/css" href="resources/css/index.css">
<!-- <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>
<h1>Dasmoto's Arts & Crafts</h1>
Please let me know if you see this, OK?
Thanks for your help!
Sorry, now that I am looking at your screenshot,
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" />
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.
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.
I have been making progress! The problems were some careless mistakes in syntax.
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:
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:
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!
So, that way is absolutely achievable but complicated. You’ll want to use background-image on the h1.