Resume Project

Description: For this project, we designed a digital resume using HTML for the layout, CSS for the design, and JavaScript to add interactivity. The task involved creating two separate HTML files (one for the resume and one for hobbies), linking them to a shared CSS file, and using JavaScript to implement a basic form functionality. The resume needed to showcase a name, contact info, personal highlights, education, achievements, extracurricular activities, a table of skills, a contact form, and a footer with styled links. The site also had to feature consistent design elements, be responsive, and include interactive features such as hover effects and a working submit button. This project was done semi-independently, with some of the coding being taught by Ms. Tran.

Procedure No. 1: To start, we used HTML to create a webpage for our resumes, incorporating sections that highlighted our achievements, education, and a small portrait photo. We also included a table showcasing our skills and proficiency levels. Once the main resume page was finished, we added three hyperlinks: one to our ePortfolio, one to the Pinewood School website, and one to a second page that focused on our hobbies. On the hobbies page, I explained in detail about my passions for cooking, skiing, and piano, along with two images that related to my skiing experiences. This page also featured the same three links, with the third one directing back to the main resume page.

HTML CODE ON SUBLIME TEXT FOR HOBBIES

HTML CODE ON SUBLIME TEXT FOR RESUME

Procedure No. 2: After setting up the basic layout with HTML, we turned to CSS to add style that applied to both the resume and hobbies pages. We chose a background color that met our vision and created a specific color palette to give the site a professional and consistent look. Using CSS, we ensured the text was neatly aligned and applied visual effects like underlines and drop shadows to make key headings more aesthetic. The images were centered to make the page aligned. For the links, we designed them to look like buttons by tweaking their padding, borders, and adding hover effects. As users hover over the buttons, their colors change, adding an extra layer of interactivity and flair to the design.

MY COMPLETED HOBBIES PAGE (CSS APPLIED)

CSS CODE THAT APPLIES FOR RESUME AND HOBBIES

Procedure No. 3: Once the styling for both pages was finished, we added a contact form to the resume page. Using CSS, we made sure the text fields, message box, and buttons were visually appealing and properly aligned. Then, we implemented JavaScript to make the form functional and interactive for users. When the form was submitted, the user would receive an alert that notified that an email was sent to the user's email address.

COMPLETED RESUME WITH CONTACT FORM

JAVASCRIPT CODE FOR CONTACT FORM

SOUL REFLECTION:

S - Strength: I feel like I created a sleek, modern website with an aesthetic appearance and a consistent color scheme. Nothing looked like it didn't belong on the page.
O - Opportunities: I could've spent more time on the contact form. It felt rushed and I didn't have time to add any special effects or to style the submit button.
U - Understanding: I think I've developed a decent understanding of HTML and CSS throughout the lessons (I'm still trying to understand Javascript). I now have the ability to create a basic website without too much guidance.
L - Limitations: I only could make my website aesthetic to a certain extent. I didn't have a lot of flexibility with styling, like unique fonts

WISCR REFLECTION:

Well-Rounded: I was well rounded throughout this project because I learned vastly different elements of coding, like HTML, CSS, and JavaScript.
Clear Communicator: I was being a clear communicator during this project because I reached out to Ms. Tran when my code wasn't working or had syntax errors

Page updated

Report abuse