Procedure

PART 1: First, we used HTML to build a webpage for our resumes, including sections for our achievements, education, and a small portrait image. We also created a table to display our skills and levels of expertise. After completing the main resume page, we added three hyperlinks: one linking to our ePortfolio, one to the Pinewood School website, and one to a second HTML page about our hobbies. On the hobbies page, I shared my interests in cooking/baking,  aviation, and hiking. This page also included a few images related to my hobbies and featured the same three hyperlinks, with the third link connecting back to the main resume page.

PART 2: After building the basic structure with HTML, we used CSS to style both the resume and hobbies pages. We chose a background color and developed a consistent color scheme to give the site a polished and cohesive appearance. Using CSS, we aligned the text neatly and added visual effects like underlines and drop shadows to highlight important headings and make them stand out. We also centered the images on the page to create a more balanced layout. For the hyperlinks, we styled them to resemble buttons, adjusting their appearance with padding, borders, and hover effects. When users hover over the buttons, the colors change to create a more interactive and dynamic experience.

PART 3: Finally, after completing the styling of both pages, we added a contact form to the resume page. We used CSS to style the form so that the text fields, message area, and buttons were visually appealing and neatly aligned. Afterward, we incorporated JavaScript to make the form interactive.

Reflections

SOUL

• S - Strength of My Work:
  I created a clean, organized, and visually appealing resume website that included all the required sections, hyperlinks, images, and interactivity. The structure and styling worked together to make the site easy to navigate and professional-looking.

• O - Opportunities for Improvement:
  In the future, I could add more advanced JavaScript functions, such as better form validation or dynamic animations, to make the site even more interactive and engaging. I could also improve the responsiveness for different screen sizes.

• U - Understanding - What I Learned:
  Through this project, I strengthened my skills in HTML structure, CSS styling, and basic JavaScript functionality. I learned how important it is to plan a website layout carefully and how styling choices can change how professional and usable a website feels.

• L - Limitations Encountered:
  One challenge I faced was making sure all the elements stayed consistently styled across both pages. Also, getting the hover effects and form styling exactly right took a lot of trial and error before it looked polished.

WISCR

• Well-Rounded:
  I showed that I am well-rounded by using different types of skills — coding with HTML, CSS, and JavaScript — to build a complete and functional resume website. I made sure the site looked professional, organized, and easy to navigate while meeting all the project requirements.

• Clear Communicator:
  I demonstrated clear communication by structuring my webpage in a logical and easy-to-follow way. Each section of my resume, such as Highlights, Education, Skills, and Contact, was clearly labeled and styled to make information easy for viewers to understand. In addition, whenever I required help, I expressed my questions and concerns clearly to Mrs. Tran.