Introduction (due 6/21)

Make a small website to introduce yourself to the class. You can introduce yourself in whatever way you would like. It might help to pick a concept to focus the site on, to give yourself some boundaries. Maybe you dedicate the site to a strange interest you have, maybe to an animal or pet, maybe to a favorite place, or whatever else you would like!


Part 1 - HTML

Set up the structure of the site using just html at first. For this step, don’t worry about the styling or appearance of the site just yet. It may look bland, but these are the important bones of your site. A strong site is dependent on the quality of its bones (html)! Be sure to look through w3schools HTML Reference for new and interesting tags that we didn't cover in class to experiment with and incorporate into your site.

Should have at least:

  • 1 heading <h1></h1>
  • 1 paragraph <p></p>
  • 1 image <img>
  • 1 list (with at least 3 items) <ul><li></li></ul>
  • 1 link <a></a>

However, it is encouraged to include more than what’s required depending on how you decide to introduce yourself!


Part 2 - CSS

Now add css to your site. Look through the w3schools CSS Reference and play around with different properties——there’s a lot and many will probably seem daunting or confusing, but don’t let that deter you! Each reference has a tutorial for implementing the property and using it. Try to get used to navigating the w3schools site and following tutorials.

Allow yourself to experiment with things. You may not know how to get it to look exactly the way you imagine at first, but the key to learning how to make websites is exploration and experimentation. You may come across something unintended that’s even better!

Requirements:

  • alter the styling for each of the required elements from part 1
  • find 3 css properties on w3schools that we didn’t cover in class to use on your site
  • properties to explore:
    background
    border
    border-radius
    padding
    margin
    width
    height
    color
    font-size
    font-style
    font-weight
    line-height
    font-family
    text-decoration
    text-align
    list-style