I would like to know if I am using the appropriate tags, semantics, structure. Is my code readable? I really appreciate your suggestions. Thank you.
Also, this is my first post, so I don’t know how to publish the pure code; so I added a space in between the tag name and the left angular bracket. If you know how to publish the pure code here, please let me know, thanks!
HTML:
< !DOCTYPE html>
< html>
< head>
< meta charset=“utf-8”>
< !–Title of website–>
< title>Dasmoto’s Art and Crafts
< !–Insert keywords and description for website–>
< meta name=“keywords” content=“Arts and crafts, dasmoto, dasmoto arts and crafts”>
< meta name=“description” content=“E-commerce website for Dasmoto Arts and Crafts”>
< !–Attach external css file–>
< link rel=“stylesheet” type=“text/css” href=“style.css”>
< /head>
< body>
< !–Header text goes here–>
< header>
< h1>Dasmoto’s Arts & Crafts
< /header>
< !–Create main section for website–>
< main>
< !--Divide section into three to store the three categories-->
< !--First section of the three categories-->
< section class="brushes">
< !--Make header for brushes section-->
< h2 class="brush-bar">Brushes</h2>
< !--Insert image file with alt text-->
< img src="Images/hacksaw.webp" alt="paint brushes">
< !--Provide name and information for image-->
< p class="bold-items">Hacksaw Brushes< /p>
< 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">Starting at $3.00 / brush.</span></p>
< /section>
< !--Second section of the three categories-->
<section class="frames">
< !--Make header for frames section-->
< h2 class="frame-bar">Frames</h2>
< !--Insert image file with alt text-->
< img src="Images/frames.webp" alt="colorful picture frames">
< !--Provide name and information for image-->
< p class="bold-items">Art Frames (assorted)</p>
< 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">Starting at $2.00 / frame.</span></p>
< /section>
< !--Third section of the three categories-->
< section class="paint">
< !--Make header for paint section-->
< h2 class="paint-bar">Paint</h2>
< !--Insert image file with alt text-->
< img src="Images/finnish.webp" alt="colorful picture frames">
< !--Provide name and information for image-->
< p class="bold-items">Clean Finnish Paint</p>
< 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 class="price"> Starting at $5.00 / tube.</span>< /p>
< /section>
< !--End of the three categories-->
< /main>
< !--End of the main section-->
< /body>
< /html>
CSS:
body { /Set background color, font and margin/
background-color: #ffffff;
margin: 2em 1em 2em 1em;
font-family: Helvetica;
overflow-x: hidden;
}
h1 { /Style and size h1 text and image/
background-image: url(Images/pattern.webp);
font-size: 100px;
text-align: center;
font-weight: bold;
color: khaki;
}
.brush-bar { /Style and size brush text and background color/
background-color: mediumspringgreen;
font-size: 32px;
font-weight: bold;
color: white;
}
.frame-bar { /Style and size frame text and background color/
background-color: lightcoral;
font-size: 32px;
font-weight: bold;
color: white;
}
.paint-bar { /Style and size paint text and background color/
background-color: skyblue;
font-size: 32px;
font-weight: bold;
color: white;
}
.bold-items { /size name of image/
font-size: 18px;
font-weight: bold;
}
.price { /Style price information/
color: blue;
font-weight: bold;
}
