Dasmotos Arts & Crafts code review

Hey guys, I finally uploaded my project to github https://github.com/PatriciaIsaacs1997/Codecademy-Off-Platform-Project-Dasmoto-s-Arts-Crafts. Code is pretty standard for Dasmotos Arts & Crafts, but would still love a look over and review from anyone willing. You can even critique the way I did my github repository, as well for it.

For those of you not wanting to be redirected/have a new tab pop open:
HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link href="./resources/index.css" rel="stylesheet" type="text/css">
    <title>Dasmoto's Arts & Crafts</title>
</head>
<body>
    <header id="header" block-size="50%">
        <h1>Dasmoto's Arts & Crafts</h1>
    </header>
    <!--Brush section-->
    <section id="brushes">
        <h2>Brushes</h2>
            <img src="./resources/images/image2.jpeg" alt="">
                <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>Starting at $3.00 / brush.</strong>
                    </p>
    </section>
    <!--Frame section-->
    <section id="frames">
        <h2>Frames</h2>
            <img src="./resources/images/image3.jpeg" alt="">
                <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>Starting at $2.00 / frame</strong>
                    </p>
    </section>            
    <!--Paint section-->
    <section id="paint">
        <h2>Paint</h2>
            <img src="./resources/images/image4.jpeg" alt="">
                <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>Starting at $5.00 / tube.</strong>
                    </p>
    </section>
</body>
</html>

CSS:

* {
    font-family: Helvetica, Arial, sans-serif;
}
#header {
    block-size: auto;
    background-image: url('../resources/images/image1.jpeg');
}
h1 {
    font-size: 100px;
    font-weight: bold;
    color: khaki;
    text-align: center;
}    
h2 {
    font-size: 32px;
    font-weight: bold;
    color: white;
}
#brushes h2 {
    background-color: mediumspringgreen;
    background-image: url('./resources/images/image2.jpeg');
}
#frames h2 {
    background-color: lightcoral;
    background-image: url('./resources/images/image3.jpeg');
}
#paint h2 {
    background-color: skyblue;
    background-image: url('./resources/images/image4.jpeg');
}
strong {
    font-weight: bold;
    color: blue;
}
1 Like

Hey Patricia !

I just finished my Off Platform Dasmotos but not online yet.
It’s very interesting to compare each others code, it is nice to see how others get to the same result with different code.
I share you my codes for that project :

HTML

Dasmotos project
<div>
    <h1>Dasmoto's Arts & Crafts</h1>        
</div>

<div>
    <h2 class="Brushes"> Brushes</h2>
    <img class="hacksaw" src="ressources/hacksaw.jpeg" alt="des pinceaux empiler" />
</div>

<div>
    <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. Availiable in different sizes. <span>Starting at $3.00 / Brush.</span></p>
</div>

<div>
    <h2 class="Frames">Frames</h2>
    <img class="Frames picture" src="ressources/frames.jpeg" alt="des cadres photo de couleur"/>
</div>

<div>
    <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>Starting at $2.00 / frame.</span></p>
</div>

<div>
    <h2 class="Paint">Paint</h2>
    <img class="Finnish" src="ressources/finnish.jpeg" alt=" Tube de peintures de couleurs">
</div>

<div>
    <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.<span> Starting at $5.00 / tube.</span></p>
</div>

CSS :

h1 {
font-family: Helvetica;
font-size: 100px;
font-weight: bold;
color: khaki;
background: url(…/ressources/pattern.jpeg);
text-align: center;
background-size: cover;

}
.Brushes {
font-family: Helvetica;
font-size: 32px;
color: white;
background-color: mediumspringgreen;
}

.Frames {
font-family: Helvetica;
font-size: 32px;
color: white;
background-color: lightcoral;
}
.Paint {
font-family: Helvetica;
font-size: 32px;
color: white;
background-color: lightblue;
}
span {
font-weight: bold;
color: blue;
}

1 Like

I like it, the code is clean and easy to follow.

1 Like

Hi everyone! I also just finished my first off-platform project (yay!). If anyone gets a chance, please review my code below:

HTML
Dasmoto’s Arts and Crafts

<div class = "banner">
    <h1 class = "text">Dasmoto's Arts & Crafts</h1>
    <img class ="image" src = './Resources/Images/Image_1.webp'/>
</div>

<div>
    <h2 class="brushes"> Brushes</h1>
</div>

<img src = "./Resources/Images/Image_2.webp">

<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. <span>Starting at $3.00/brush.</span>
</p>

<div>
    <h2 class="frames"> Frames</h2>
</div>

<img src="./Resources/Images/Image_3.webp">

<h3>Art Frames (assorted)</h3>
<p>
    Assorted frames made of different material, incuding MDF, birchwood, and PDE. Select frames can be sanded and painted according to your needs. <span>Starting at $2.00/frame.</span>
</p>

<div>
    <h2 class="paint"> Paint</h2>
</div>

<img src="./Resources/Images/Image_4.jpeg">

<h3>Clean Finnish Paint</h3>

<p>
    Imported paint from Finland. Over 256 colors available in-store, varying in quantity (1 oz. to 8oz.). Clean Finnish paint microbinds to canvas, increasing the finish and longevity of any artwork.
     <span>Starting at $5.00/tube.</span>
</p>

CSS
.text{
font-family: Helvetica;
font-size: 100px;
font-weight: bold;
color: khaki;
text-align: center;
position: absolute;
margin:0 auto;
padding-left: 400px;
padding-top: 50px;
padding-bottom: 50px;
}

.image{
width: 100%;
height: 200px;
}

.brushes{
margin-top: 30px;
background-color: mediumspringgreen;
font-family: Helvetica;
font-size: 32px;
font-weight: bold;
color: white;
}

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

p span{
font-family:Helvetica;
font-weight:bold;
color:blue;
}

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

.frames{
margin-top: 30px;
background-color: lightcoral;
font-family: Helvetica;
font-size: 32px;
font-weight: bold;
color: white;
}

.paint{
margin-top: 30px;
background-color: skyblue;
font-family: Helvetica;
font-size: 32px;
font-weight: bold;
color: white;
}

1 Like

Hi everyone,
just finished my Off-platform Practice Project,
if anyone has any suggestions on how to make it better, please comment,

[codebyte] html

<head>
    <title>Dasmato's new crafts</title>
    <link href="./resources/CSS/index.css" type="text/css" rel="stylesheet">
</head>
<body>
    <h1>Dasmato's Arts & Crafts</h1>
    <div class="Headings">
        <h3 class="brushes">Brushes</h3>
        <img src="c:\Users\gelda\Downloads\hacksaw 2.jpeg">
        <figcaption><h5 class="captions">Hacksaw Brushes</h5></figcaption>
        <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 id="price">Starting at $3.00/brush.</strong></p>

    </div>
    <div class="Headings">
        <h3 class="frames">Frames</h3>
        <img src="c:\Users\gelda\Downloads\frames 3.jpeg">
        <figcaption><h5 class="captions">Art Frames (assorted)</h5></figcaption>
        <p>Assorted frames made of different material, including MDF, birchwood, and PDE. Select frames can be sanded and painted according to your needs.<strong id="price">Starting at $2.00 / frame.</strong></p>

    </div>
    <div class="Headings">
        <h3 class="paint">Paint</h3>
        <img src="c:\Users\gelda\Downloads\finnish 4.jpeg">
        <figcaption><h5 class="captions">Clean Finnish Paint</h5></figcaption>
        <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 id="price">Starting at $5.00 / tube.</strong></p>
    </div>


</body>

[/codebyte]

[codebyte]CSS
html {
display: block;
}

body {
display: block;
position: relative;

}

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

h1 {
display: block;
position: relative;
}

img {
overflow-clip-margin: content-box;
}

.Headings {
font-family: Helvetica;
font-size: 32px;
font-weight: bold;
color: white;
width: 100%;
text-align: left;
}

div {
display: block;
}

#price {
font-family: Helvetica;
font-weight: bold;
color: blue;
}

.brushes {
background-color: mediumspringgreen;
}

.frames {
background-color: lightcoral;
}

.paint {
background-color: skyblue;
}

p {
color:black;
font-size: 20px;
font-family: Helvetica;
font-weight: normal;
}

.captions {
color:black;
font-family: Helvetica
}

[/codebyte]

Yet another poster who,

a) Did not read the decorum guidelines about posting code samples; and,
b) did not bother to go back and check what their post looks like.

Welcome to the ‘Blind Posters Club.’ Post to post and pray that someone will notice. Fun fact, someone would if you took a minute to review how your post presents to the rest of us. Using the lazy approach (Codebyte) to post code that will not run is no consolation, and actually makes it even harder to respond.