Resume Project

This page highlights all the steps done to complete our Resume Project using HTML, JavaScript, and styling with CSS. Follow along as I create my resume and update it on this ePortfolio.

Description:

For this project, we had to create a digital resume using what we learned about HTML, CSS, and JavaScript. We made two web pages: one for our actual resume, and another for our hobbies. On the resume page, we included some important deatils about ourselves, like our name, email, portrait, education, skills, achievments, and more. We also added a contact form at the bottom using our knowledge about making a form. At the very bottom of the page, under the contact form, there are links that take you to the hobbies page, the Pinewood website, and this portfolio.

Step 1 - HTML:

We began by using HTML to add all the content to our web pages. This included my name, email, portrait, highlights, a table showing my skills and abilities, and my extraccurricular activites. On the hobbies page, I added a few hobbies with descriptions and pictures. While working with HTML, we learned how to use heading tags, paragraphs, image tags, ordered and unordered lists, and tables on an app called Sublime Text.

Step 2 - CSS:

In this step, we enhanced the visual design of the page using CSS. We created an external stylesheet and linked it to our original HTML file. Through this process, we learned how to style specific elements by targeting them with IDs and classes. I applied various styles, including changing the text color, font, font weight, font-size, background color, text alignment, margins, and padding. I also added borders and created hover effects for hyperlink buttons, making them change color when the mouse moved over them. 

Using CSS, we were able to make the web page prettier and more unique. Once we add javascript, the page will become interactive and even better.

Step 3 - JavaScript:

Finally, we connected a JavaScript file from Sublime Text to our HTML to add interactivity to the page. I used JavaScript in the contact form section, allowing users to enter their name, email, and a message if they have one. When they click the submit button underneath the form, a personalized alert appears at the top of the screen to confirm that their message has been sent and will be reviewed shortly.

HERE ARE THE FINISHED PRODUCTS:

Overall Reflection:

I am very excited with how this project turned out. From stressful work periods to forgetting everything I learned, I'm glad that my resume and hobbies page turned out the way they did, and I am glad that I had the opportunity to learn so many new topics involving HTML, CSS, and JavaScript. 

SOUL Reflection

S-Strengths:   I think my strength this project was my ability to encorporate CSS into my HTML documents (resume and hobbies webpage). As listed in my hobbies page, I have always been someone who has an artsitic apeal to everything, so applying CSS to my resume and hobbies webpage was a fun and relatively easy task. I liked the part where we could chose the coloring of everything, and watching it all come together.

O-Opportunities:   An opportunity that I missed this project was probably my inability to spot check my finished work. I turning this project in on time, however, I rushed a little bit at the ending and I submitted my resume and hobbies page before I could spot/edit spelling and styling errors. Afterwards when I was creating this portfolio, I was reading some of the information on my webpages and noticed some errors that I should've proof read through.

U-Understanding:   I definitely broadened my understanding using HTML, CSS, and JavaScript this project. Even though we focused primarily on HTML last school year during the first semester of 7th grade, I learned more valuable things this semester. Along with reviewing and adding onto my knowledge of HTML, I was fortunate enough to have the opportunity to learn aboutCSS and JavaScript to style webpages and make them interactive. It was cool that I had a chance to display my knowledge of these three concepts via my resume and hobbies webpages.

L-Limitations:  A limitation I encountered this project is not directly related to it, but it was still a limitation. I was out a few days from days that I had Computer Science because I had back-to-back travel tournaments for volleyball. Within April, I missed around three Computer Science classes because I was out of town. This caused me to fall behind a little bit, but with dedication and a lot of catching up I did, I managed to come back to the same pace as the rest of my class mates, finishing the project on time. One other limitation that I had was that I encountered a few errors in my code, and in most cases, I had no idea where they were because my code was so long. I learned that even one small error, like a misplaced letter or symbol in the code, can cause the whole thing to crash! Thanks to Ms. Tran for helping me fix those accidents.

WISCR Reflection

The two WISCR qualities that I think I demonstarted best during this project were W(Well-Rounded) and S(Self-Motivated). I was well-rounded this project because not only did I learn 3 new coomputer science concepts, I feel more confident than ever in my ability to perform them. This project helped me strengthen my understanding for HTML, JavaScript, and CSS, and I am glad that I am now knowledgable about it. I was self-motivated this project because whenever I had time to work on this project in class, I utilized that time and never fell behind. I would way rather work diligently the whole time than sloppy all the way up until the due date. I surprised myself by turning this assignment in on time—something I thought wouldn't happen!