OLA 2: HTML & CSS

Course: CSCI 4410/5410 Web Technologies

Instructor: Dr. Xin Yang

Due date: 11:59 pm Feb 19th, 2026 (Thursday)

Objective:

In this assignment, you will enhance your web development skills by creating a CV webpage and applying CSS styling and layout to your previous work. The goal is to strengthen your understanding of HTML structure, CSS styling, and website layout.

Workflow Steps (3 Stages)

You must submit all three stages:
  1. Stage 1: Plan the Outline of Structure
  2. Stage 2: HTML & CSS implementation (OLA1.html + CV.html + CSS file)
  3. Stage 3: Reflection: what changed and why

Stage 1: Plan the Outline of Structure

Before writing code, plan the structure of your website pages.

What to submit

  1. • Option A: A clear photo of a hand-drawn outline, OR
  2. • Option B: A text file named outline2.txt

Outline requirements

Your outline must show the order/structure of your website and include:
  1. • A layout plan for both pages (OLA1 personal page + OLA2 CV page)
  2. • A Header, Navigation Bar, Content Section, and Footer
  3. • Main headings for each required content section

Example outline (text)

Page 1: OLA1 (Personal Homepage)
- Header: Site title / name
- Navigation: links to OLA1 and OLA2
- Main Content:
  - About Me
  - Image + caption/credit
  - Favorite Website link
  - Hobbies list (custom bullet style)
  - Favorites table (thead/tbody)
  - Bookmark to Top
- Footer: copyright/contact

Page 2: OLA2 (CV Page)
- Header: "My CV"
- Navigation: links to OLA1 and OLA2
- Main Content:
  - Education
  - Skills
  - Work Experience (optional)
  - Research/Scholarly Activity (optional)
  - Awards (optional)
  - Bookmark to Top
- Footer: copyright/contact

Reflection (Stage 3)
- What changed and why
- Hardest part and why
- One mistake and how it was fixed

Stage 2: HTML & CSS implementation

Part A: Design Your Website Layout

1. Header

A header is usually located at the top of the website. It often contains a logo or a website name.

2. Navigation Bar

Develop a navigation bar that allows users to switch between your Home page (OLA 1 personal webpage) and your CV page. Ensure that the navigation bar is present on both pages for seamless navigation.

3. Content Section

The content section displays the main information on each page. It should be structured with headings, paragraphs, lists, and tables for readability.

4. Footer

The footer provides supplementary information, such as copyright details and contact links. It may also include a return-to-top button or disclaimers.

Part B: Create a CV Webpage in HTML/CSS

Develop a new CV webpage using HTML and CSS. Your CV should include the following sections:
  1. Title — Set an appropriate title for your CV (e.g., "John Doe's CV").
  2. Education Background — Use a list, table, or another HTML structure.
  3. Skills — Use a list, table, or another HTML structure.
  4. Work Experience — Optional if you have none.
  5. Research/Scholarly Activity — Optional if you have none.
  6. Awards — Optional if you have none.
  7. Bookmark — Add a bookmark link that navigates back to the top.
  8. Formatting — Use formatting (bold, italic, marked text) to highlight important info.
  9. Comments — Include comments that explain page sections/components.
  10. CSS Styling — Customize fonts, colors, spacing, and layout to improve appearance.

Part C: Create and Apply an External Style Sheet

1. Create an External CSS File

Develop a single external CSS file (e.g., styles.css) that contains all styling rules for both your OLA 1 and OLA 2 webpages.

2. Link the External CSS File

Add the external CSS file in the <head> section of both pages.

Stage 3: Reflection

At the bottom of your Stage 1 outline, include a section titled Reflection. Answer each question in 2–3 sentences:
  1. What changed between your Stage 1 outline and your final implementation? Why did you change it?
  2. What was the hardest part to implement correctly, and why?
  3. Describe one mistake you made and how you fixed it.

Submission

Please compress all your assignment files (ola1.html, ola2.html, style.css, and other necessary files) into a single ZIP archive and submit it through D2L.

Grading

Part Points
CV HTML 30
External CSS File 30
CSS Layout 20 (OLA1: 10, OLA2: 10)
Navigation Bar 20 (OLA1: 10, OLA2: 10)


If you have any questions, please feel free to reach out to me at Xin.Yang@mtsu.edu or stop by my office in ROTC annex 113E.


⇧