Scribd
Upload
30 views3 pages

Portfolio_Project_Explanation_WGU

This document outlines the technical aspects of a personal portfolio website project for a WGU course, detailing the development of three HTML pages: résumé, cover letter, and career goals. Each page utilizes semantic HTML structure and various elements for content formatting, while an external CSS stylesheet ensures consistent styling across all pages. The project emphasizes fundamental front-end development skills and adheres to professional communication standards.

Uploaded by

akaren.bauer95
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
30 views3 pages

Portfolio_Project_Explanation_WGU

This document outlines the technical aspects of a personal portfolio website project for a WGU course, detailing the development of three HTML pages: résumé, cover letter, and career goals. Each page utilizes semantic HTML structure and various elements for content formatting, while an external CSS stylesheet ensures consistent styling across all pages. The project emphasizes fundamental front-end development skills and adheres to professional communication standards.

Uploaded by

akaren.bauer95
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 3

Technical Explanation of Personal Portfolio Website

This document provides a technical explanation of the components and implementation


of a personal portfolio website project for a Western Governors University (WGU)
course. The project involves the development of three HTML pages (résumé, cover letter,
and career goals), linked via a navigation bar and styled using a single external CSS
stylesheet. The site demonstrates fundamental front-end development skills, including
HTML structure, CSS styling, and JavaScript interactivity.

A. Résumé Page
The résumé HTML file includes a complete structural layout using essential HTML5
semantic tags: <header>, <nav>, <main>, <section>, <article>, and <footer>. Within this
structure, various elements were used:
- Three heading elements (h1–h3) were used to structure content hierarchically.
- <span>, <p>, <br>, and <hr> were included for inline and block-level content
formatting.
- A <div> was included to display the current date, which is populated using JavaScript.
- The page contains a hyperlink, an unordered list, and a table with a caption, four
columns, and three rows.
- The <strong> and <em> tags were used for semantic emphasis.
- JavaScript writes the current date to the <div> and logs a message to the console.

B. Cover Letter Page


The cover letter page also follows a semantic HTML structure. It contains a <header>,
<nav> for linking to the other documents, <main>, <section>, <article>, and <footer>.
Inline and block-level elements like <span>, <p>, <hr>, <strong>, <em>, and <mark>
were used to enhance readability and highlight key information. All elements work
cohesively within the structure to form a professional layout.
C. Career Goals Page
The career goals page demonstrates more advanced HTML and multimedia features. It
includes:
- An <img> tag to display a personal or representative image.
- <audio> and <video> tags to showcase additional media content.
- A contact form using the <form> element, with the action attribute pointing to
https://wp.zybooks.com/form-viewer.php. The form includes fields for first name, last
name, company name, email (type=email), phone (type=tel), message (textarea), best
contact time (radio buttons), and preferred contact method (select dropdown).

D. External CSS Stylesheet


A single external CSS file was linked to all three HTML pages to ensure consistent
styling. The stylesheet includes:
- An element selector (e.g., body { })
- Class and ID selectors
- Descendant selector for nested elements
- Pseudo-class selector (e.g., a:hover)
- Universal selector (*)
- Typography rules (font family, color, font size)
- Background color for sections and layout elements
- Box model properties including margin, padding, and border
- List-style properties for ordered/unordered lists

E. Acknowledgment of Sources
No external sources were quoted, paraphrased, or summarized in the creation of this
project. All code and explanations reflect original work in accordance with WGU’s
Academic Authenticity policy.

F. Professional Communication
The HTML files and this accompanying document demonstrate professional
communication through clear organization, proper coding practices, and adherence to
WGU’s formatting and submission guidelines. The portfolio site is structured logically
and uses standardized web development conventions to ensure accessibility and user-
friendliness.

You might also like