Dasmoto's Arts & Crafts

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. :slight_smile:

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. :slight_smile:

Thank you! I knew at the time that there was probably a better way of styling the since in more involved projects, there would be a lot more anchors that would need to have different styles. This project had just the three links that were to be styles the same way.

Mike

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? :slight_smile:

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 :slight_smile:

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;

}