Description: For this project, we were assigned to code and create a digital resume of ourselves using our knowledge on HTML, CSS, and Java Script coding. We had two pages - one for our "resume", and one for our "hobbies". In our website page, we added lots of information about ourselves, including our name, email, portrait photo, highlights, education, achievements, skills, extracurriculars, and a contact form. We also would have hyperlinks at the bottom of the page that brings the user to their hobby page, which the created, the Pinewood website, and this portfolio website.
Brainstorm: For this project, I decided to have my hobies and extracurriculars based off of what I am doing currently, and what I have done for a long time, which is Baseball, Rowing, Piano, and RSM.
Part 1, HTML: We started off by doing HTML for creating the resume and hobby page. This included having your name, email, and a photo of yourself in the title, three highlights that you would like to share, your current and past education, five achievements, a table for your skills and how good you are at them, and your extracurriculars. On the hobby page, it included three of your hobbies, with a description and picture. The resume page also had a contact form, which we used java to make it interactive, three boxes with links to your school, hobby page, and portfolio, and it was styled using CCS.
Picture of first half of hobby page
Picture of second half of hobby page
Part 2, CSS: Next, we added CSS styling to the page to make it more visually appealing. We used external CSS in a separate file and linked it to our original HTML file. I also targeted specific elements using ID and class elements. I changed the text color, font, background color, text-align, margins, padding, font size, font weight , border, and I learned how to make the hyperlink buttons change color and size as the mouse hovered over it.
Glimpse of my hobby page with CSS
Glimpse of my CSS code
Part 3, JavaScript: Finally, we added a JavaScript file for the purpose of making our contact form interactive. I programed it so that the user can type in their name, email, and a message. Once they hit submit, a personalized alert will pop up to inform them that it has been sent successfully and properly, which includes their name and email that they entered in the form.
Picture of Contact Form
Picture of Contact Form after entering name and email, and then pressing submit
Soul Reflections:
S: My strengths were in my opinion my writing skills and how I organized my resume, and how it looked and how much detail I put in the writing sections.
O: Some of my opportunities I could've taken were adding more JavaScript in my Contact form and utilizing my knowledge to improve how it works and the functions I used in it.
U: I got to understand the basics of CSS, HTML, and JavaScript, and I felt acomplished from being able to demonstrate my knowledge on this project
L: My limits were the bugs in the codes that took very long to debug, which drained the ammount of time I had, and overall made my project a bit more hardcoded with solutions.
WISCR:
Well-Rounded: I think I was well rounded in this project because I felt like I had relatively the same ammount of skill level in each of the coding languages.Â
Insightful Critical Thinker: I think I was an Insightful Critical Thinker because I was always trying to find a way to improve my project whether it was making it look nice, or adding more information, I always tried to make it the best that I could.