Hello,
I’m new to coding and Codecamy and I am starting out on the web development track. I completed the Dasmoto’s Art’s and Crafts project that completes the Intro to HTML course. After some trial and error, I finally got the web page to work. The major problem I encountered was getting the background image to load from CSS. After some hunting around on the Internet, I figured out the relative file path issue. I noticed on the forum that a lot of others ran into this problem.
I did get the project to work, but I would like some feedback if there is a more efficient way of working/writing the HTML and CSS. Here are the files on Github and the page on the web.
Thanks!
Mike
2 Likes
Hi there, welcome to the forums. 
The only thing I can see which is a bit odd, is that you’ve used an anchor (<a>) element for the pricing. Presumably this is so you could format it as requested in the redline, but you could achieve this just as well using a <span> element with a class attribute.
Im having issues with this. I don’t want to copy anyone’s work but I just don’t quit yet get it.
Hi there, welcome to the forums!
A commendable attitude!
What’s got you stuck? 
hi Michael & all,
i’m new to coding and Codecamy. i’m on an 11-day streak on the web development path. i completed the Dasmoto’s Art’s and Crafts project after some issues with the background image. figured it out after a few great searches online. the problem i’m having now is getting my code onto GitHub.
Michael, would you be able to help me? i really like the ways you linked to the Github files and to the web page directly. any pointers? i would love to share my work and learn Github once and for all.
thanks in advance!
Tiffany
Hi ! I am doing the same project but can’t see to get the background image for the h1 correctly.
Would you be able to check my css please ?
h1 {
font-family: Helvetica;
font-size: 100px;
font-weight: bold;
color: khaki;
text-align: center;
background-image: url("./Resources/images/pattern.jpg");
Maybe I’m not coding the image properly maybe it needs to go on the html file. I am kind of lost.
Thanks for your help !
1 Like
Hi everyone!
I just finished my Dasmoto Project and have a couple of doubts in terms of CSS/HTML syntax and semantics.
Take a look at the code below:
<section class="brushes">
<h2 class="bold brushes-bg">Brushes</h2>
<img src="resources/images/hacksaw.jpeg" alt="painting brushes" />
<h3 class="bold">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="price bold">Starting at $3.00 / brush.</span>
</p>
</section>
<section class="frames">
<h2 class="bold frames-bg">Frames</h2>
<img src="resources/images/frames.jpeg" alt="painting frames" />
<h3 class="bold">Art Frames (assorted)</h3>
<p>
Assorted frames made of different material, including MDF, birchwood, and PDE. Select frames
can be sanded and painted according to your needs.
<span class="price bold">Starting at $2.00 / frame.</span>
</p>
</section>
Question 1: In terms of semantics, am I using correctly or should I use
or even in this case?
Question 2: Is it correct to give such specific class values to my section tags? Or should I use something more generic like “item”.
Question 3: To set the bg color of each h2, initially I tried using the chain CSS selection. For exemple to select the h2 Frames I wrote:
.frames.h2 {
}
.frames being the section class and then chaining the h2. But this didn’t work… What am I doing wrong and how can access each h2 individually without needing the “brushes-bg” and “frames-bg” classes (which is how I ultimately solved the problem)?
Much appreciated in advance for any response received
I am also unable to get the background image to appear for this project when trying to use the locally saved image. It worked fine with the URL.
HTML Code
<body>
<header>
<h1>Dasmoto's Arts & Crafts</h1>
</header>
<h2>Brushes</h2>
<img src="resources/hacksaw.webp">
<h3>Hacksaw brushes</h3>
<p>Made of the highest quality okay, Hacksaw brushes are known for their weight and ability to hold pain in large
amounts. Available in difference sizes. <span class="price"> Starting at $3.00 / brush.</span></p>
<h2>Frames</h2>
<img src="resources/frames.webp">
<h3>Art Frames (assorted)</h3>
<p>Assorted frames made of different material, including MDF, birchwood, and PDE. Select frames can be sanded and
painted according to your needs. <span class="price">Staring at $2.00 / frame.</span></p>
<h2>Paint</h2>
<img src="resources/finnish.webp">
<h3>Clean Finnish Paint</h3>
<p>Imported from Finland. over 256 colors available in-store, varying in quanitity (1 oz. to 8 oz.). Clean Finnish
paint microbonds to canvas, increasing the finish and longvegity of any artwork. <span class="price">Staring at
$5.00 / tube.</span></p>
</body>
CSS Code
body {
font-family: Helvetica;
}
header {
background-image: url("/CSS/skins/pattern.jpeg");
}
h1 {
font-size: 100px;
font-weight:bold;
color:khaki;
text-align: center;
}
The image is saved in a file called ‘skins’ which is in the folder named ’ CSS’ Thank you!
1 Like
Hey @hinokio and @malvinoushka,
I couldn’t see anything wrong so I had a look at my version and you might want to check if the image is a .jpg/.jpeg file and edit the url accordingly…!
2 Likes
Hi, I used this code and it worked. “.header-h1” is the name of the class for my h1.
.header-h1 {
background-image: url("/resources/image/pattern.jpeg");
font-family: Helvetica;
font-size: 100px;
font-weight: bold;
color: khaki;
text-align: center;
}