Dasmoto's Arts & Crafts - My first HTML/CSS Project :D

Hi dear fellow coding-learners!

I just finished my first HTML/CSS Website project :slight_smile: being currently at 17% of the Full-Stack Engineer Carrer Path.

I’d love to get some feed-back / suggestions :wink:

Here’s the HTML code:

<!DOCTYPE html>
<html lang="en">
    <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="style.css" />
    <nav class="nav">
        <li><a href="" id="menu-button">HOME</a></li>
        <li><a href="" id="menu-button">PRODUCTS</a></li>
        <li><a href="" id="menu-button">ABOUT</a></li>
    <header class="banner">
      <h1>Dasmoto's Arts & Crafts</h1>
      <section class="products">
        <h2 class="title" id="brushes">Brushes</h2>
          <img src="./Images/hacksaw.webp" alt="paint brushes" />
        <h3>Hacksaw Brushes</h3>
          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>Starting at $3.00 / brush</span>.

        <h2 class="title" id="frames">Frames</h2>
          <img src="./Images/frames.webp" alt="frames of many colors" />
        <h3>Art Frames (assorted)</h3>
          Assorted frames made of different material, including MDF, birchwood,
          and PDE. Select frames can be sanded and painted according to your
          needs. <span>Starting at $2.00 / frame</span>.

        <h2 class="title" id="paint">Paint</h2>
          <img src="./Images/finnish.jpeg" alt="" />
        <h3>Clean Finnish Paint</h3>
          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>Starting at $5.00 / tube</span>.

And here the CSS code:

nav {
  background-color: rgb(12, 161, 161);
  position: fixed;
  top: 0;
  width: 100%;
  color: white;
  text-align: center;
  font-weight: bold;

nav li {
  display: inline-block;

#menu-button {
  color: white;

h1 {
  font-size: 100px;
  font-weight: bold;
  color: khaki;
  text-align: center;
  background-image: url(./Images/pattern.webp);

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

.title {
  font-size: 32px;
  font-weight: bold;
  color: white;

#brushes {
  background-color: mediumspringgreen;

#frames {
  background-color: lightcoral;

#paint {
  background-color: skyblue;

body {
  font-family: Helvetica;


1 Like