Could you please help me by reviewing my code? Thank you!

Projects
1

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;
}

2

Hello @tayhiggins2885318509 , welcome to the forums! Please see this post on how to format code in the forums

1 Like
3

Hi @tayhiggins2885318509 welcome to the forums, and good job with your first attempt :slight_smile:

Please read the link @codeneutrino shared to help you reformat your posted code so it’s easier to read. Currently it’s hard to know if formatting errors in your code are related to your original code (HTML & CSS) or in how you’ve shared them here.

The easiest option is to use the </> button in the top of the text editor menu, and copy/paste your code into it.

Screenshot (29)_LI.jpg
Screenshot (29)_LI.jpg701×104 15.8 KB

Some feedback on your code (giving the benefit of the doubt re incorrect formatting here in the forums):

  • You seem to have the main html structure right, and nice use of semantic html with section and alt tags.
  • To improve the semantic html, you might want to add lang="en" in the html tag.
  • I’m not 100% sure, but I think several major browsers either ignore or penalise meta keywords now days because they are so poorly used by spam sites… google has more sophisticated algorithms to identify relevant content. So I’d delete that line. (However the meta description is fine: leave that ).
  • Don’t forget to close your <h1> tag
  • Well done on putting all your CSS in the one place ( the stylesheet), and importing it, this is good practice.
  • With your CSS, take a look at where you are doubling up and rethink how you could write this to get the same effect with cleaner code. For example, each section has a h2 tag with the same text requirements, so do you need to specify font-size, font-weight, and color three times under three classes?

Good luck :slight_smile: