Feedback: Dasmoto's Arts & Crafts HTML/CSS

Hello everyone! I am hoping to get some feedback on the webpage I created for the Dasmoto’s Arts & Crafts project. I’m honestly SUPER proud of it, but I know its very much not perfect. Please feel free to drop any suggestions or other feedback!

I appreciate any feedback I can get. Thanks in advance!

Here’s the html:

<!DOCTYPE html>
<html>
    <head>
        <title>Dasmoto's Arts & Crafts</title>
        <meta charset="UTF-8">
        <link href="./style.css" type="text/css" rel="stylesheet"/>
    </head>
    <body id="top"> 
        <header class="background-image">
            <h1 class="store-name">Dasmoto's Arts & Crafts</h1>
            <nav class="navbar">
                <ul>
                    <li class="nav-item"><a href="#brushes">Brushes</a></li>
                    <li class="nav-item"><a href="#frames">Frames</a></li>
                    <li class="nav-item"><a href="#paint">Paints</a></li>
                    <li class="nav-item"><a href="#top">Back to Top</a></li>
                </ul>
            </nav>  
        </header>
        <main>
            <section>
                <h3 class="section-head" id="brushes">Brushes</h3>
                <div class="image">
                    <img src="./images/hacksaw.webp"/>
                </div>    
                <div class="copy">
                    <h4 class="title">Hacksaw Brushes</h4>
                        <p class="paragraph">
                        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. <br><br><span class="price"> Starting at $3.00 / brush.</span>
                        </p>
                </div>        
            </section>
            <section>
                <h3 class="section-head" id="frames">Frames</h3>
                <div class="image">
                    <img src="./images/frames.webp"/>
                </div>    
                <div class="copy">
                    <h4 class="title">Art Frames (Assorted)</h4>
                        <p class="paragraph">
                        Assorted frames made of different material, including MDF, birchwood, and
                        PDE. Select frames can be sanded and painted according to your needs.
                        <br><br><span class="price"> Starting at $2.00 / frame.</span>
                        </p>
                </div>
            </section>
            <section id="bottom">
                <h3 class="section-head" id="paint">Paints</h3>
                <div class="image">
                    <img src="./images/finnish.jpeg"/>
                </div>    
                <div class="copy">
                    <h4 class="title"  id="paints">Clean Finnish Paint</h4>
                        <p class="paragraph">
                        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. <br><br><span class="price"> Starting at $5.00 /
                        tube.</span>
                     </p>
                </div>     
            </section>
        </main>
    </body>
</html>

And here’s the CSS:

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    background-color: grey;
    width: 100%;
    height: 100%;
    border: none;
}

header{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    width: 100%;
}

.background-image {
    background-image: url(./images/pattern.webp);
    height: 100vh;
    width: 100%;
    border: none;
    position: relative;
    top: 0;
    background-size: cover;
}

.store-name{
    font-family: Helvetica;
    font-size: 100px;
    font-weight: bold;
    color: khaki;
    text-align: center;
}

.navbar {
    height: 10vh;
    width: 100%;
    position: fixed;
    left: 0;
    top: 90vh;
    z-index: 10;
    background: rgba(15, 214, 228, 0.6)
}

.nav-item {
    text-decoration: none;
    list-style-type: none;
    display: flex;
    align-items: center;
    justify-content: center;
    float: left;
    width: 25%;  
    height: 10vh;
}

li a {
    text-decoration: none;
    font-family: Helvetica;
    font-size: 2vw;
    color: rgb(240, 230, 140)
}

li:hover {
    background: rgba(15, 214, 228, 0.9)
}

section {
    height: 100vh;
}

.section-head {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 15vh;
    width: 100%;
    font-family: Helvetica;
    font-size: 32px;
    font-weight: bold;
    color: white;
}

.image {
    display: flex;
    align-items: center;
    justify-content: center;
    float: left;
    width: 40%;
    height: 90vh;
    clear: none;
}

img {
    height: 250px;
    width: 250px;
    border: 5px solid whitesmoke;
    border-radius: 125px;
}

.copy {
    float: right;
    width: 60%;
    height: 90vh;
}

.title {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    top: 0;
    width: 100%;
    height: 40%;
    line-height: 40%;
    text-align: center;
    font-family: Helvetica;
    font-weight: bold;
    font-size: 3vw;
    color:rgb(240, 230, 140)
}

.paragraph {
    position: relative;
    bottom: 0;
    width: 100%;
    height: 60%;
    padding-left: 20%;
    padding-right: 20%;
    text-align: center;
    font-family: Helvetica;
    font-size: 2vw;
    color: whitesmoke;
}

span {
    font-weight: bold;
    color: blue;
}

#brushes {
    background-color: rgb(0, 250, 154);
}

#frames {
    background-color: lightcoral;
}

#paint {
    background-color: skyblue;
}

And here are some screenshots of the final product:

Just a comment: We notice that the only paragraph (p) elements all share a common class attribute. Is that class even necessary? Since all the paragraphs in the document are already selected, why not just use the p selector?

Thanks for asking!

When I was coding this, I was trying to think of it like an actual webpage for a real business. I guess I thought if in the future, they added any additional paragraphs to the code (like, say, an intro or “about” paragraph) I didn’t want it to automatically have the styling of the paragraph’s for the products.

Probably way overthinking it, but I’m trying to get into the mindset of someone doing this in the real world, where edits may eventually be made.

Even what you are doing is real world. The same APIs apply. We don’t want to paint our idea of what a production site might look like since this creeps in as bias. Shed any preconceptions and the bias never creeps in, or at least is easily detected.

The most future ready site is the one that uses the lowest specificity. It’s selector rules will be easy to piggyback, or override. This tells us that the more default selector rules we have, the better.

Given that most or all documents will have P elements, it follows that we can give them all a default style ruleset…

p {

}

The only reason I can think of for singling out a paragraph is for a blockquote or an aside. There, again, we can write default selector rules…

blockquote p {

}
aside p {

}

The specificity is just enough to piggyback the default p {} selector rule. We only need to add properties that are not already declared, or modify the targeted values of any that are.

This is a mindset to consider very thoroughly. My penchant is for traversal and generic selector rules which makes for a better challenge… Use class and id only in situations where traversal becomes complicated.

The real world is composed of a lot of varying ideas and approaches. Right from the get go we are immersed in this brain trust. From a learner perspective, focus on specificity (compute it for every selector rule) and look for selectors with the least. It will make it easier for other designers to introduce their style ideas without having to modify your code.

In the old days we used to call over dependence on class or id, ‘classitis’ and ‘iditis’. I don’t think that rule of thought has changed.


BTW

The term traversal, to me means using type selectors, and pseudo-classes and/or pseudo-elements along with combinators, attribute selectors, etc. Where this proves impractical (rarely) then class and id work as a fallback.

Traversal plays on inheritance, substantially. Ancestor properties (those that can be inherited) cascade down to all children and grandchildren. Traversal is one way of following a flower petal down that cascade and targeting for special treatment an element or group of elements along the way.

It’s a special skill that once acquired is never lost. The ‘mindset’ is just too impressed to ever fade.


To understand class, consider how the the built in pseudo-classes behave. A link, once visited, will change color. The default is purple. The pseudo-class is, :visited. Just because the color changes doesn’t mean we have identified it as class=“purple”.

If we wish to bring attention to the by-line of an article, it shouldn’t matter what element it is wrapped in as long as that element has an attribute, class="by-line". We can isolate style properties to that group of elements, not by type, but by class. Again, we’re looking for the least specificity, so dial in class definitions.


Adding to complexity is, id. IE had a devil of a time handling the location bar when hashes were referred, but W3C compliant browsers were cool with it. A hash in the location bar generally refers to a page fragment, an identifiable segment of the document. 'id is the most identifiable attribute since it is global, as in can be looked up in the global namespace. It is locatable, else it would not be referable in the location bar. That’s why we can only have one element with a given id.

Global identifiers are translated to JavaScript in a rather obsequious manner. We needn’t declare the variable in script. It exists by virtue of existing in the DOM. This is evident when registering event listeners, on top of other instances.

<button id="foo">Foo</button>
const handler = function (e) {

};
foo.onclick = handler;

This will not throw an error since JS can see foo in the namespace.


It confuses the issue when we bring the style sheet in and the effect of global identifiers on the cascade. A selector rule or combinator can be written that takes into account a global identifier and cascade over elements within that domain. Again, specificity is at the forefront. Dial in this level of control.


<form action="" id="foo">
  <button>Foo</button>
</form>

The above listener will still work, due to event bubbling. But the event happened on the button, not the form, per se. Now we need to traverse down to the target object that triggered the event.

const handler = function (e) {
  const target = e.target
};
foo.onclick = handler;
1 Like