My very first webpage with html and css

Project link

Hi Guys,

I just finished my first webpage project without guidelines ( except the spec sheet that was provided ) . I would love to have some feedback since I did get the job done but I feel like there is a more efficient or better way to go about it. Let me know and thank you in advance.

<!DOCTYPE html>
<html>
  <head>
    <title>Dasmoto's Arts & Crafts</title>
    <link type="text/css" rel="stylesheet" href="./style.css/">
  </head>
  <body>
    <h1>Dasmoto's Arts & Crafts</h1> <!-- img input -->

    <h2 class="Brushes">Brushes</h2> <!-- first topic -->
      <img src="img/hacksaw.jpg">
    <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 sizes.
         <a>Starting at $3.00 / brush.</a> <!-- edit to blue betwen ancor -->
      </p>
    <h2 class="Frames">Frames</h2> <!-- second topic -->
      <img src="img/frames.jpg" title>
    <h3>Art Frames (assorted)</h3>

      <p>Assorted frames made of different material,
      including MDF, birchwood, and PDE. Select frames
      can be sanded and painted according to your
      needs. <a>Starting at $2.00 / frame </a> <!-- make blue and bold -->
      </p>

   <h2 class="Paint">Paint</h2><!-- third topic -->
    <img src="img/finnish.jpg">
    <h3>Clean Finnish Paint</h3>
      <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.<a> Starting at $5.00 / tube.</a> <!-- make blue and bold -->
       </p>






  </body>
</html>

CSS:

h1 {
  font-family: Helvetica;
  font-size: 100px;
  font-weight: bold;
  color: khaki;
  text-align: center;
  background-image: url(/Users/TTest/Desktop/Projects/Dasmo/img/pattern.jpg);
}

a {
  font-family: Helvetica;
  font-weight: bold;
  color: blue;
}
body {
  font-family: Helvetica;
}

.Brushes {
  font-family: Helvetica;
  font-size: 32px;
  font-weight: bold;
  color: white;
  background-color: mediumspringgreen;
}

.Frames {
  font-family: Helvetica;
  font-size: 32px;
  font-weight: bold;
  color: white;
  background-color: lightcoral;
}

.Paint {
  font-family: Helvetica;
  font-size: 32px;
  font-weight: bold;
  color: white;
  background-color: skyblue;
}

1 Like

The only thing I would personally do different is to not use capital letters when writing your classes in the HTML and also when choosing them in the class in CSS. its just standard practice to not use caps in those areas

h2 class=“Frames” I would change to h2 class=“frames”
h2 class=“Paint” I would change to as h2 class=“paint”

and for the CSS:

.Frames id write as .frames
.Paint as .paint

You can also change the letters to caps using CSS instead of writing in caps. your code of:

<h3>Clean Finnish Paint</h3>

could be rewritten as:

<h3>clean finnish paint</h3>

then in CSS you’d style it using:
.h3 {
text-transform: capitalize;
}
This declaration would capitalize each first letter of every word between the h3 tags

But your code WILL work as you originally had written it. It’s just technically more proper to write it just a bit different, though. You did VERY good for that being your first webpage without guidelines!!!

Well done on finishing the project! A few refinements that I spotted:

Given you’ve declared Helvetica as the font in body, there is no need to declare it for the elements inside the body tags (i.e. all of the rest), as font-family is a property which is inherited by child elements.

Were that not the case (i.e. the css property was not inherited, or you didn’t want to set a more general rule), it is better practice (I believe) to list all the elements to which a rule applies (separated by commas), and apply it once, such as:

h1, a, .brushes, .frames, .paint {
font-family: Helvetica, sans-serif;
}

As a rule of thumb, set a rule once, with multiple selectors, rather than set all an individual selector’s rules together.

Note it’s also good practice to set a fallback front (in this example the generic sans-serif) in case the user doesn’t have the first choice font installed.

The class naming best practice @etjdogger mentions above is worth abiding by too. It took me a while to stop capitalising in a more typical way, having had it drilled in for non-tech writing!

I’m not so sure, however that using a CSS rule to capitalise is best here though; although it works, it over complicates things, given that it’s straightforward to type it as you want to see it. Where the ability to alter capitalisation etc. in CSS comes into its own is where you want to alter the appearance of text which exists in one state already and affect how it appears in a particular context, or alter it dynamically. For example, you might choose to capitalise the text of the nav bar button on the current page, as well as change the colour and background colour, in which case you could create a single .current class, apply several CSS rules to it, and tag the current button, once, in the html. If you don’t follow the example, just know that it can be useful elsewhere!

Thanks for sharing! Keep it up!

Try to use div’s for your block text. Not saying you didn’t do good, just for practice try to utilize as many tags as possible.

1 Like