Introducing Me

Welcome to ICSpark! To help the mentors and other students get to know you, let's create a small website to introduce yourself.

Prerequisites

None!

Objective

Learn how to use HTML and CSS to create a short introduction to yourself.

Instructions

Step 1: Create your files

1. Create the following files:

• index.html
• styles.css
• app.js

2. Link your files

<link rel="stylesheet" href="style.css">
<script src=“app.js”></script>

Step 2: Create a header

Using different header tags, create at least two headers.

Ex.

<h1>Hello Everyone!</h1>

Step 3: Add a paragraph

In a short paragraph introduce yourself. What's your name? Do you have any pets? Add as little or as much detail as you want.

Ex.

<p>Hello everyone my name is Maya and I'm a sophomore studying Computer Science at UH Manoa.</p>

Step 4: Add a list

Using either an unordered or ordered list, list at least 3 of your hobbies or likes.

Ex.

<ul>
  <li>Sleeping</li>
  <li>Drawing</li>
  <li>Traveling</li>
</ul>

Step 5: Add pictures

Using the image tag, add at least 3 pictures of your listed hobbies or likes.

Ex.

  <img
    src="https://cdn.thewirecutter.com/wp-content/uploads/2020/02/5cheapish-drawing-lowres-2x1-7321.jpg?auto=webp&quality=75&crop=2:1&width=1024"
    alt="drawing">

Note: make sure the link to your picture is in the right spot (src="" not alt="")

Step 6: Make your website pretty!

1. In your style.css file, edit the text color of one of your headers.

Ex.

h1 {
  color: blue;
}

2. Adjust the text-alignment of your list to the left.

Ex.

ul {
  text-align: left;
}

3. Adjust the width and height of your pictures.

Ex.

img {
  width: 400px;
  height: 300px;
}

Stretch Goals

If you finish early, add more sections to your introduction website using headers, paragraphs, lists and/or pictures. (Ex. add a list of places you traveled to or want to travel to)

Using css, play more with the look of your website using any of the following (you can also look up more css properties online):

• font-family
• font-color
• font-weight
• font-size
• border-radius
• background-color

Example Website

https://replit.com/@MayaChang/IntroducingMe#index.html