INTERACTIVE DESIGN EXERCISE 2: SIMPLE PERSONAL PROFILE PAGE
Felice Lee (0381272)
Interactive Design / Bachelor of Design (Hons) in Creative Media / Taylor's University
Exercise 2: SIMPLE PERSONAL PROFILE PAGE
EXERCISE 2
Create a single HTML file that serves as a basic "About Me" or personal profile page. This exercise is designed to test your understanding of core HTML document structure and fundamental elements.
Task
Create one file named index.html. When opened in a web browser, this file must display a simple page about you correctly.
Your index.html file must include the following elements:
- Basic Document Structure:Correctly use the <!DOCTYPE html>, <html>, <head>, and <body> tags.
- Page Title:Add a descriptive title inside the <head> using the <title> tag (e.g., "My Awesome Profile").
- Main Heading:Use an <h1> tag for your name or the page's main topic.
- Sub-Heading:Use an <h2> tag to create a section heading (e.g., "My Hobbies" or "Favorites").
- Paragraph Text:Write at least two descriptive paragraphs using the <p> tag.
- Ordered List:Create a numbered list (using <ol> and <li>) with at least three items (e.g., your top 3 favorite books, movies, or foods).
- Unordered List:Create a bulleted list (using <ul> and <li>) with at least three items (e.g., your skills, goals, or contact methods).
Progress:
Basic Document Structure & Page Title
Firstly, I create my blog with this structure, and decided to give my blog title as: Feli is Here :>
Main Headings & Sub Headings
After that, I started to fill the body, with main heading and sub heading. I want the main heading to be: Get To Know Me!; and sub headings as: Hi I am Felice Lee, I am a creative media student in Taylor's University. Here's some information so you guys could know more about me :>
<h1> is for main heading and <h2> for sub heading
Paragraph Texts
I then make some paragraphs with information of me. The format I use for paragraphs is <p> </p>
Next I put some information about my university life by repeating the same thing I did before with sub headings and paragraphs. I also input my university link, so people could click it and look more about it!
Don't forgot to put jump break after to separate the information and sub headings :D
So far it looks like this in chrome:
Unordered List
Next, I wanted to create an unordered list of what I enrolled in this semester. But before that, I need to create a sub headings named as: Here are the modules that I enrolled this semester:. After that, now I can start to add my ordered list by using the format <ul> and <li>
Next, I wanted to create an unordered list of what I enrolled in this semester. But before that, I need to create a sub headings named as: Here are the modules that I enrolled this semester:. After that, now I can start to add my ordered list by using the format <ul> and <li>
I also wanted to add my time table here, by using the format <table>, <th> (table heading), <tr> (table row), <td> (table data). I too color my table row so it will look cooler and not plain.
How it looks now:
Ordered ListLast, I want to put share a little about my games and friends using ordered list. Of course before that, as usual I need to create sub headings <h2>. Then next I can proceed to make my ordered list using the format <ol> and <li>
After done with all of this, I decided to give some last short message and didn't forgot to put the format </body> and </html>
Preview
And Yay! I'm done with my personal website :D
Netlify
Before I submit, I upload my work to Netlify to get this link that I can copy and share, at first I don't really like the link they gave me, so I edited it again as my liking.
Comments
Post a Comment