Dasmoto's Arts & Crafts Code Review

Projects Off-platform Practice Projects
#1

Hello everyone, I would like to share with you my project and ask for a review, I’m a beginner currently on 9% into the Front End Engineer Path

** Here’s my html: **

<head>
    <title>Dasmoto’s Arts & Crafts</title>
    <link href="./resources/css/index.css" type="text/css" rel="stylesheet">
</head>
<body>

    <div>
        <h1 class="coolheading">Dasmoto’s Arts & Crafts</h1>
    </div>

    <div class="subtitle_1"> 
        <h2>Brushes</h2>
    </div>
    <div>
        <img src="./resources/images/hacksaw.jpeg">
    </div> 
    <div>
        <h3>Hacksaw brushes</h3>
    </div>
    <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>Starting at $3.00 / brush.</strong> </p>
    </div>

    <div class="subtitle_2"> 
        <h2>Frames</h2>
    </div>
    <div>
        <img src="./resources/images/frames.jpeg">
    </div> 
    <div>
        <h3>Art Frames (assorted)</h3>
    </div>
    <p>Assorted frames made of different material, including MDF, birchwood, and PDE. 
        Select frames can be sanded and painted according to your needs. <strong>Starting at $2.00 / frame.</strong> </p>
    </div>

    <div class="subtitle_3"> 
        <h2>Paint</h2>
    </div>
    <div>
        <img src="./resources/images/finnish.jpeg">
    </div> 
    <div>
        <h3>Clean Finnish Paint</h3>
    </div>
    <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>Starting at $5.00 / tube.</strong> </p>
    </div>

</body>

Here’s my css

  • {
    font-family: Helvetica, Arial, sans-serif;
    }

.coolheading {
background-image: url(…/images/pattern.jpeg);
text-align: center;
font-size: 100px;
font-weight: bold;
color: khaki;
}

.subtitle_1 {
font-family: Helvetica;
font-size: 24px;
font-weight: bold;
color: white;
background-color: mediumspringgreen;
}
h3 {
font-family: Helvetica;
font-weight: bold;
color: black;
}
strong {
font-family: Helvetica;
font-weight: bold;
color: blue;
}
.subtitle_2 {
font-family: Helvetica;
font-size: 24px;
font-weight: bold;
color: white;
background-color: lightcoral;
}

.subtitle_3 {
font-family: Helvetica;
font-size: 24px;
font-weight: bold;
color: white;
background-color: skyblue;
}

Thank you in advance for your kind review :blush:

#2

Hi, María Fernanda
I will not review your code, but will share mine for comparison :slight_smile: as I think it is interesting to see how the task author imagined the solution and what different learners came up with.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="./resources/css/index.css" type="text/css" rel="stylesheet">
        <title>Dasmotos arts and crafts</title>
    </head>
    <body>
        <h1>Dasmoto's Arts & Crafts</h1>
        <h2 id="brback">Brushes</h2>
            <img src="c:\Users\zahra\CodecademyProjects\resources\hacksaw.jpeg" alt="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. 
                <a>Starting at &#36;3.00 &#47; brush.</a></p>
        <h2 id="frback">Frames</h2>
            <img src="c:\Users\zahra\CodecademyProjects\resources\frames.jpeg" alt="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. <a>Starting at &#36;2.00 &#47; frame.</a></p>
        <h2 id="paback">Paint</h2>
            <img src="c:\Users\zahra\CodecademyProjects\resources\finnish.jpeg" alt="Finnish paint"></img>
        <h3>Clean Finnish Paint</h3>
        <p>Inported 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. 
            <a>Starting at &#36;5.00 &#47; tube.</a></p>
        </body>
</html>

CSS:

* {
    font-family: Helvetica, Arial, sans-serif;
  }
   
  h1, h2, h3, a {
    font-weight: bold;
  }

  h1 {
    text-align: center;
    color: khaki;
    font-size: 100px;
    background-image: url('../pattern.jpeg');
    /*background-repeat: no-repeat;*/
    background-color: darkgray;
    background-position: center;
    /*background-size: cover;*/
  }

  h2 {
    color:white;
    font-size: 32px;
  }

    #brback {
    background-color: mediumspringgreen;
    }
    #frback {
    background-color: lightcoral;
    }
    #paback {
      background-color: skyblue;
    }
   
  a {
    color: blue;
    text-decoration: none;
  }

in my CSS code commented out lines: background-repeat and background size as with them the final solution (background) looks different from the task example, but I tried those to see what would be the outcome.
in HTML for blue-bold-price parts I used anchor tag to put a link later on, as it looked like a page user is supposed to press to see more (the solution from the author that I looked at was different though).

PS: just discovered that with VSC it is possible to drag and drop images that convert into url in the text editor - a nice feature in my mind!