Dasamoto's arts & crafts project

Get Help
#1

Hello everyone!

I am a Colombian anthropologist trying to learn how to code. I got into the very popular Dasamoto’s Arts & Crafts assignment (https://www.codecademy.com/paths/front-end-engineer-career-path/tracks/fecp-web-development-fundamentals/modules/fecp-code-review-dasmotos-arts-crafts/informationals/fecp-code-review-dasmotos-arts-crafts) and I want help regarding how to improve my coding. I am interested in saving time and in making the most efficient coding. In the end, with my code, I did what the assignment was asking for, but I believe I could have done it writing less.

Let me know if you know how to write a more efficient code! I am leaving my HTML and my CSS code below.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Dasamoto's Project</title>
    ,<link rel="stylesheet" href="Style.css">
  </head>
  <body>
    <h1>Dasamoto's Arts & Crafts</h1>
    <div>
        <h2 class="brushes">Brushes</h2>
        <img src="Stock\hacksaw.jpeg" alt="hacksaw">
        <h3>Hacksaw Brushes</h3>
        <p>Generating random paragraphs can be an excellent way for writers to get their creative flow going at the beginning of the day. <a class="contact"> The writer has no idea what topic the random paragraph will be about when it appears. </a> </p>
    </div>
    <div>
        <h2 class="frames">Frames</h2>
        <img src="Stock\frames.jpeg" alt="Frames">
        <h3>Art Frames (assorted)</h3>
        <p>Generating random paragraphs can be an excellent way for writers to get their creative flow going at the beginning of the day. <a class="contact"> The writer has no idea what topic the random paragraph will be about when it appears. </a> </p>
    </div>
    <div>
        <h2 class="paint">Paint</h2>
        <img src="Stock\finnish.jpeg" alt="Paint">
        <h3>Clean Finnish Paint</h3>
        <p>Generating random paragraphs can be an excellent way for writers to get their creative flow going at the beginning of the day. <a class="contact"> The writer has no idea what topic the random paragraph will be about when it appears. </a></p>
    </div>
  </body>
</html>




h1{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 100px;
    font-weight: bold;
    color: khaki;
    text-align: center;
    background-image: url("Stock/pattern.jpeg");
}
.brushes{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 32px;
    font-weight: bold;
    color: white;
    background-color: mediumspringgreen;
}
p{
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
}
.contact{
    color: blue;
}
.frames{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 32px;
    font-weight: bold;
    color: white;
    background-color: lightcoral;
}
.paint{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 32px;
    font-weight: bold;
    color: white;
    background-color: skyblue;
}`
#2

Hi @riconogu,

Your code looks good :+1:.

I can see 1 little syntax error in your HTML. You seem to have a comma “,” before your <link> tag in your <head> that needs removing.

As for streamlining your code, the only thing I can see in the HTML is we could make it more semantic and improve accessibility (although this is not asked of in the project instructions):

  1. Wrap your <h1> in a <header> tag.
  2. Wrap you <div> elements in a <main> tag.
  3. Change your <div> for <section> tags.

HTML:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Dasamoto's Project</title>
    <link rel="stylesheet" href="Style.css">
  </head>
  <body>
    <header>
        <h1>Dasamoto's Arts & Crafts</h1>
    </header>
    <main>
        <section>
            <h2 class="brushes">Brushes</h2>
            <img src="Stock\hacksaw.jpeg" alt="Hacksaw">
            <h3>Hacksaw Brushes</h3>
            <p>Generating random paragraphs can be an excellent way for writers to get their creative flow going at the beginning of the day. <a class="contact"> The writer has no idea what topic the random paragraph will be about when it appears. </a> </p>
        </section>
        <section>
            <h2 class="frames">Frames</h2>
            <img src="Stock\frames.jpeg" alt="Frames">
            <h3>Art Frames (assorted)</h3>
            <p>Generating random paragraphs can be an excellent way for writers to get their creative flow going at the beginning of the day. <a class="contact"> The writer has no idea what topic the random paragraph will be about when it appears. </a> </p>
        </section>
        <section>
            <h2 class="paint">Paint</h2>
            <img src="Stock\finnish.jpeg" alt="Paint">
            <h3>Clean Finnish Paint</h3>
            <p>Generating random paragraphs can be an excellent way for writers to get their creative flow going at the beginning of the day. <a class="contact"> The writer has no idea what topic the random paragraph will be about when it appears. </a></p>
        </section>
    </main>
  </body>
</html>

I notice in your CSS file, we have some repeated styles, we could do the following:

  1. Add a body selector and include the font-family: Arial, Helvetica, sans-serif;, then we can remove the font-family from the h1, p .brushes, .frames and .paint selectors.
  2. We could add an h2 selector and add the font-size: 32px;, font-weight: bold; and color: white;. Then we can remove thes style from the .brushes, .frames and .paint selectors.
  3. We could streamline a little more if we remove the font-weight: bold; from the h1, ``h2 and p selectors and combine them. that way we can remove the p selector all together. for example: h1, h2, p { font-weight: bold; }

CSS:

body {
    font-family: Arial, Helvetica, sans-serif;
}
h1, h2, p {
    font-weight: bold;
}
h1 {
    font-size: 100px;
    text-align: center;
    color: khaki;
    background-image: url("Stock/pattern.jpeg");
}
h2 {
    font-size: 32px;
    color: white;
}
.brushes {
    background-color: mediumspringgreen;
}
.frames {
    background-color: lightcoral;
}
.paint {
    background-color: skyblue;
}
.contact {
    color: blue;
}

I hope this helps. If you need any more help please feel free to let me know.

1 Like
#3

Wow!!! Thank you very much @wesleycampbell!!! This is the kind of feedback I was looking for. I will keep working hard having in the back of my mind the comments you are providing.

#4

Your very welcome @riconogu. Happy I can help.