Dasmotos Arts and Craft: Feedback!

I am totally new to this and just completed my first project off of code academy. Any feedback is appreciated or any tips anyone has. I added a navbar because I never did one on my own and shadow to the banners to just add a simple design to it.

IMAGES:


index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dasmoto's Arts & Crafts</title>
    <link rel="stylesheet" href="./resources/css/index.css">
</head>
<body>
    <!-- NAV BAR -->
    <nav class="nav">
        <ul>
            <li><a href="">HOME</a></li>
            <li><a class="khaki" href="">PRODUCTS</a></li>
            <li><a href="">ABOUT</a></li>
        </ul>
    </nav>
    <!-- BANNER SECTION -->
    <div class="banner">
        <p>Dasmoto's Arts & Crafts</p>
    </div>
    <!-- PRODUCT SECTION-->
    <div class=products>
        
        <!-- BRUSHES -->
        <p class="product" id="brushes">Brushes</p>
        <img src="resources/images/hacksaw.webp" alt="Hacksaw Brushes by Dasmoto's Arts & Crafts">
        <p class="productname">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. Avaliable in different sizes.<span class="price">Starting at $3.00 / brush.</span></p>
        
        <!-- FRAMES -->
        <p class="product" id="frames">Frames</p>
        <img src="resources/images/frames.webp" alt="Frames by Dasmoto's Arts & Crafts">
        <p class="productname">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>
    
        <!-- PAINT -->
        <p class="product" id="paint">Paint</p>
        <img src="resources/images/finnish.webp" alt="Paint by Dasmoto's Arts & Crafts">
        <p class="productname">Clean Finnish Paint</p>
        <p>Imported paint from Finland. Over 256 colors avaliable in-store, varying in quantitiy (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>
    </div>
</body>
</html>

index.css:

* {
    font-family: Helvetica;
    
}

nav {
    background-color: rgb(212, 203, 255);
    position: fixed;
    top: 0;
    width: 100%;
    color:rgb(212, 203, 255);
}

.nav li {
    display: inline-block;
    padding: 0px 20px;
    filter: drop-shadow(1px 1px 1px black)
}

.nav a {
    text-decoration:rgb(212, 203, 255);
}

a.khaki {
    color: khaki;
}

.banner {
    font-size: 100px;
    font-weight: bold;
    color: khaki;
    text-align: center;
    background-image: url('../images/pattern.webp');
    filter: drop-shadow(1px 1px 1px black);
}

.product {
    font-size: 32px;
    font-weight: bold;
    color: white;
    filter: drop-shadow(1px 1px 1px black);
}

#brushes {
    background-color: mediumspringgreen;
}

#frames {
    background-color: lightcoral;
}

#paint {
    background-color: skyblue;
}

.productname {
    font-weight: bold;
    font-size: 20px;
}

.price {
    font-weight: bold;
    color: blue;
}

Feedback appreciated!

2 Likes

I see you created this post two weeks ago an no one has responded yet. Did you get it all straightened out?

Looking at your screenshot I see your “Frames” section seems duplicated and the home nav bar runs thru one of them (as well as at the top.) Then again, perhaps what I’m seeing is two screenshots stitched together. :thinking:

I’m working on this project now and it is not going as smoothly as I thought it would. The HTML isn’t so much the problem as the CSS is. I’m about to the point of totally wiping my CSS clean and starting over on it.

EDIT\UPDATE
I’m looking over your code comparing to mine. Dang, mine looks a mess. I notice you did yours without a “Header.” But yours appears to work out better than mine.

What I’m trying to do is create nav links below the header banner. Somehow they ended up IN the banner (which I did not use the “banner” function,) but after a lot of tinkering I’ve got them ALMOST satisfactory. But it did not occur to me to use “nav” tags. I just created links. You’ve given me a perhaps better way to do this. Thanks.

1 Like

Glad I could help, I appreciate the feedback. Gonna definitely revamp this project and redo it soon with more customization and features that I learned. I did do it without a header, could’ve added it but for some reason totally forgot. So sorry about the confusion about the duplicated frames, I took screenshots and should’ve left the files, it is not duplicated on the actual page just from the screenshots sorry about that. The Navbar does also glitch too and go through the images sometimes as well which you are correct. Gonna do this project over with more experience!

1 Like

I’m working on it right now. I’m ALMOST happy with it, just have one last problem I’m bangin my head over. I have a footer with a link with hidden text, just something I added for fun. It appears text when you click it followed by a “rehide” link.

I want them all to appear in-line but no matter what I try they keep dropping into a list. I can’t get a “nowrap” function to happen. I’ll figure it out soon, but sheesh. I thought this was gonna be easier. When I’m done I’ll swap ya code if you’re interested.
J

1 Like

Yeah, I’d be very interested to see what you did with this project and I could learn a thing or two from yours.

1 Like

Here’s my github repo:

I’m still not sure WTH I’m doing with Github. I pushed it from VS Code and it uploaded other test/tutorial projects with it. I deleted them, I thought. I no longer see them in one place, but I do in another.

Here’s screenshots in case Git makes less sense to you than it does me. These things are never done. Since I began writing this reply I’ve made 3 more changes and had to resave my screenshots. LMAO I’m getting pretty tired of ol Dasmoto.

The bottom “Attribute” is a clickable button. It makes the “Attribute” appear and disappear. It’s still not exactly like I want though. I wanted it center with the text to replace it onclick with a new button to return to the previous state. But… I’m about ready to move on to the next section.

And, as you might can tell, I borrowed some tips from you. Yours helped me clean mine up some. Much obliged. :+1:





Dasmoto_HTML_02


Dasmoto_webpage_03

2 Likes

Really cool. Glad I helped out in the slightest way. I like what you did, thank you for sharing. The code looks nice and clean!

1 Like

Hi there, just curious how you got your code to show in your post in such a nice interactive readable way?


Hello! I’m having issues with the banner. I cannot get the picture to go underneath the text. please review my code to go further.

Hi @crystalaguilar164284 !
You will want to remove the image from your html, and only include it in your css, as the background-image for your banner. Let me know if this helps! :slight_smile:

now the picture is just gone

try removing the ( , header ) from your css, in my code all I did was make the banner an h1, and styled it with the h1 in css.
but using your .banner-title class should work fine. here’s mine, this code puts the image behind the text successfully.


it will still not show up.

Are you familiar with uploading your project to github?
it is hard to debug this without being able to see/interact with all of the code/files.

if not- the next thing you could try is replacing the .banner-title with h1 in your css and getting rid of the class on the h1 in your html.

if this doesn’t work, it may be the image link- it looks different than it did in your first couple of images.

i hope one of these ideas helps!

thank you for your help

of course, feel free to reach out to me anytime, i could walk you through git hub if you ever wanted to be able to share projects more easily. Helping others and receiving help is one of the best ways for us to learn code. :raised_hands:

Hello there,
this are my first steps in css. I have a question relating to the background-image url. I saved the pictures in the project folder in my computer. In VSC I set the url to the relative path, then to the absolute path and it never worked. It only worked when I set it to the codeacademy url path. I cannot get why is that. The other pictures inlcuded in the html file did work with the relative path. It seems that html and css files read the urls differently. Any clearings on this?

Hi Everyone! I saw that this feed was recently active. I add a nav bar and a footer. I struggled a bit with centering the nav bar text and kind of just left it as is. It would be great to get some help with alignment and feedback on how to make my code cleaner and maybe even more simplified. Thanks in advance!

<!DOCTYPE html>
<html>
    <head>
        <title>Dasmoto's</title>
        <link rel="stylesheet" href="./main.css">
    </head>
    <body>
        <nav id="nav">
            <ul>
                <li><a href="#brushes">Brushes</a></li>
                <li><a href="#frames">Frames</a></li>
                <li><a href="#paint">Paint</a></li>
            </ul>
        </nav>
        <header>
            <h1>Dasmoto's Arts & Crafts</h1>
        </header>
        <main>
            <div class="item">
                <h2 id="brushes">Brushes</h2>
                <img src="https://content.codecademy.com/courses/freelance-1/unit-2/hacksaw.jpeg" alt="brushes">
                <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 sized. 
                    <span class="price">Starting at $3.00 / brush.</span></p>
            </div>
            <div class="item">
                <h2 id="frames">Frames</h2>
                <img src="https://content.codecademy.com/courses/freelance-1/unit-2/frames.jpeg" alt="frames">
                <h3>Frames (assorted)</h3>
                <p>Assorted frames made of different materials, 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>
            </div>
            <div class="item">
                <h2 id="paint">Paint</h2>
                <img src="https://content.codecademy.com/courses/freelance-1/unit-2/finnish.jpeg" alt="paint">
                <h3>Clean Finnish Paint</h3>
                <p>Imported paints from Finland. Over 256 colors available in-store, varying in quantity (1 oz. to 8 oz.). Clean Finish paint microbinds to canvas, increasing the finish and longevity of any artwork. 
                    <span>Starting at $5.00 / tube</span>
                </p>
            </div>
        </main>
        <footer>
            <p id="author">Built by Kate</p>
        </footer>
    </body>
</html>```

Here is my CSS.

* {
  font-family: "Helvetica", sans-serif;
  padding: 0px;
  margin: 0px;
  box-sizing: border-box;
}

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

h3 {
  margin-bottom: 10px;
}

nav {
  background-color: #704F4A;
  text-align: center;
  position: fixed;
  top: 0;
  width: 100%;
  display: block;
}

nav ul {
  margin: 0;
  padding: 0;
  overflow: hidden;
}

nav li {
  list-style-type: none;
  float: left;
}

nav li a {
  display: block;
  color: khaki;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

nav li a:hover {
  color: white;
}

img {
  width: 100px;
  margin-top: 10px;
  margin-bottom: 10px;
}

footer {
  background-color: #704F4A;
  width: 100%;
  height: 50px;
  position: relative;
  top: 25px;
}

.item {
  margin: 25px 10px 15px 5px;
}

.item h2 {
  font-size: 32px;
  color: white;
  margin-bottom: 10px;
}

.price {
  font-weight: bold;
  color: #1b739c;
}

#brushes {
  background-color: #2cbf7a;
}

#frames {
  background-color: #7464a6;
}

#paint {
  background-color: #A5C7B7;
}

#author {
  padding-top: 20px;
  text-align: center;
  color: khaki;
}```

Hi @codewithkate :slight_smile: !
For centering the nav bar text you should just change the display of your <li>'s to inline-block since by default the browser displays elements in block.
As for making your code cleaner / more simplified, personally the only thing I see that can be improved is, when you can , always favor a type selector (or the least specific selector).
I see that you created a .price class to stylize the span element, which is perfectly fine, but directly selecting the span will make your HTML code a little cleaner and your CSS easier to edit.
I hope this help. :grinning:

1 Like