Please review Dasmoto's Arts & Crafts Project code

Web Development
1

Hi everyone. Would you mind giving me some feedback on this project I’ve completed. I was having trouble with the H1 element and getting the text to overlay on the picture. I’m also having trouble getting the picture I downloaded for H1 to display. If I use the “background-image: url()” and pull it from Codecademy it works ok, but doesn’t seem to work from the “images” folder I set up. Thanks for your help!

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dasmoto</title>
    <link rel="stylesheet" href="CSS/style.css">  
</head>
<body>
   <!--<div class="image-container"><img src="Images/scales.jpeg" alt="scales">
    <div class="overlay-text">Dasmoto's Arts &amp Crafts</div>
   </div>-->
            
      <h1> Dasmoto's Arts &amp Crafts</h1>
      
    <!--</header> -->
 
  
  <div> 
      <h2 class="brushes">Brushes</h2>
    <img src="Images/brushes.jpeg" alt="Various Hacksaw Brushes">
    <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. <strong class="starting">Starting at $3.00 / brush.</strong></p>
</div>    

<div>
    <h2 class="frames">Frames</h2>
    <img src="Images/frames.jpeg" alt="Various Colored Picture Frames ">
    <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. <strong class="starting">Starting at $2.00 / frame.</strong></p>
</div>

<div>
    <h2 class="paint">Paint</h2>
    <img src="Images/finnish.jpeg" alt="Various Colored Paint Squeeze tubes">
    <h3>Clean Finnish Paint</h3>
      <p>Imported paint from Finland. Over 256 colors available in-store, varying in quantity (1 oz. to 8 oz.). Clean Finnish paint microbinds to canvas, increasing the finish and longevity of any artwork. <strong class="starting">Starting at $5.00 / tube.</strong></p>
</div>
</body>
</html>

CSS:


h1 {
    background-image: url(https://content.codecademy.com/courses/freelance-1/unit-2/pattern.jpeg);
    font-family: Helvetica;
    font-size: 100px;
    font-weight: bold;
    color: khaki;
    text-align: center;
    background-size: cover;
}



/*.image-container {
    position:relative;
    display: inline-block;
}

.image-container img {
    display:block;
    width: 100%;
    
}

.overlay-text {
    position:relative;
    font-size: 100px;
    color: khaki;
    font-weight: bold;
    font-family: Helvetica;
}*/

h2 {
    font-family: Helvetica;
    font-size: 32px;
    font-weight: bold;
    color: white;   
}

h3 {
    font-family: Helvetica;
    font-weight: bold;
}

p {
    font-family: Helvetica;
}

.brushes {
    background-color: mediumspringgreen;
}

.frames {
    background-color: lightcoral ;
}

.paint {
    background-color: skyblue;
}

.starting {color: blue;
}
2

Hi there! I’d be happy to help with your project. It looks like you’re having a couple of issues: getting the text to overlay on the picture and displaying the picture from your local folder. Let’s tackle these one by one.
Issue 1: Overlaying Text on the Picture
You’ve already commented out some code that looks like it’s intended to overlay text on an image. Let’s uncomment and adjust that part to make it work properly.
HTML
Uncomment this part and add your h1 text inside the overlay.

<div class="image-container">
    <img src="Images/scales.jpeg" alt="scales">
    <div class="overlay-text">Dasmoto's Arts &amp Crafts</div>
</div>

CSS
Update your CSS to properly position the overlay text.

.image-container {
    position: relative;
    width: 100%;
}

.image-container img {
    width: 100%;
    height: auto;
}

.overlay-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 100px;
    color: khaki;
    font-weight: bold;
    font-family: Helvetica;
    text-align: center;
}

Issue 2: Displaying Local Images

If the image works from a URL but not from your local images folder, it might be due to a path issue. Ensure that the folder structure is correct and the image path is accurate.

Make sure your project directory looks something like this:

project-folder/
│
├── Images/
│   ├── scales.jpeg
│   ├── brushes.jpeg
│   ├── frames.jpeg
│   └── finnish.jpeg
│
├── CSS/
│   └── style.css
│
└── index.html

Your src attributes should match the paths exactly:

<img src="Images/scales.jpeg" alt="scales">
<img src="Images/brushes.jpeg" alt="Various Hacksaw Brushes">
<img src="Images/frames.jpeg" alt="Various Colored Picture Frames">
<img src="Images/finnish.jpeg" alt="Various Colored Paint Squeeze tubes">

Full Updated HTML
Here’s your updated HTML with the changes:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dasmoto</title>
    <link rel="stylesheet" href="CSS/style.css">  
</head>
<body>
    <div class="image-container">
        <img src="Images/scales.jpeg" alt="scales">
        <div class="overlay-text">Dasmoto's Arts &amp Crafts</div>
    </div>

    <div> 
        <h2 class="brushes">Brushes</h2>
        <img src="Images/brushes.jpeg" alt="Various Hacksaw Brushes">
        <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. <strong class="starting">Starting at $3.00 / brush.</strong></p>
    </div>    

    <div>
        <h2 class="frames">Frames</h2>
        <img src="Images/frames.jpeg" alt="Various Colored Picture Frames">
        <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. <strong class="starting">Starting at $2.00 / frame.</strong></p>
    </div>

    <div>
        <h2 class="paint">Paint</h2>
        <img src="Images/finnish.jpeg" alt="Various Colored Paint Squeeze tubes">
        <h3>Clean Finnish Paint</h3>
        <p>Imported paint from Finland. Over 256 colors available in-store, varying in quantity (1 oz. to 8 oz.). Clean Finnish paint microbinds to canvas, increasing the finish and longevity of any artwork. <strong class="starting">Starting at $5.00 / tube.</strong></p>
    </div>
</body>
</html>

Full Updated CSS

And here’s your updated CSS:

h1 {
    background-image: url(https://content.codecademy.com/courses/freelance-1/unit-2/pattern.jpeg);
    font-family: Helvetica;
    font-size: 100px;
    font-weight: bold;
    color: khaki;
    text-align: center;
    background-size: cover;
}

.image-container {
    position: relative;
    width: 100%;
}

.image-container img {
    width: 100%;
    height: auto;
}

.overlay-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 100px;
    color: khaki;
    font-weight: bold;
    font-family: Helvetica;
    text-align: center;
}

h2 {
    font-family: Helvetica;
    font-size: 32px;
    font-weight: bold;
    color: white;   
}

h3 {
    font-family: Helvetica;
    font-weight: bold;
}

p {
    font-family: Helvetica;
}

.brushes {
    background-color: mediumspringgreen;
}

.frames {
    background-color: lightcoral;
}

.paint {
    background-color: skyblue;
}

.starting {
    color: blue;
}

Give this a try and see if it solves your issues! If you still have trouble, make sure the file paths are correct and that the images are properly located in the Images folder. Happy coding!

3

Just a comment in passing: For the sake of your future sanity, never use uppercase in folder names or filenames.

  • ‘images’
  • ‘css’

This will ensure that all URLs contain only lowercase.

4

Thanks core7022380767 and mtf. I’ll definitely make a note of the uppercase vs lowercase. I did check the file structure and it’s similar to what you posted and the image issue is resolved. I did see there is a solution for this but I’ve been trying to sort this out without relying on it. I’m not sure if this pic will show up correctly. The top part of the pic is based on using the solution and the bottom is based on using “image-container and overlay-text”. Would it be possible to make the image and text the same using second method rather than the solution?

dasmoto
dasmoto1902×898 319 KB

5

Neither of which we are acquainted with. Text will naturally overlay the background… Overlaying an IMG is a bit more work, but not complicated.

6

Great, Thanks! I’ll keep tinkering with this as I continue through the course.

1 Like