DESIGNING RESUME

Project Description: For this project, I will be learning using HTML, CSS, and JavaScript to create my own digital resume on a code editor: Sublime Text.

Project Guidelines: Our basic resume will include:

• Our name

• Email address

• Highlights (at least 3, sharing any positive personality traits, work ethic, and passions)

• Education(listing our current schools as well as previous ones with the date in which we graduate(d))

• Achievements(at least 2 achievements from any academic, sports, or extracurriculars)

• Extracurricular(list at least 3)

• more requirements, including code requirements, can be found here: Requirements.

Brainstorming: For this project, we didn't brainstorm as much as we did for previous projects. This was because we all followed the same formats(Shown above with the project guidelines) with the same three code languages(HTML, CSS, JS). However, we could style our websites however we wanted meaning that we can change the order of sections as well as changing background color, text color, text font, text shadow, etc. For me, I decided to go with a darkish blue with a light blue font color so that it sort of matches the colors of our code editor: Sublime Text. We can also change the information we put in and for my information I put:

Second, we created another file to format and style our resume using CSS, called styles.css. There we set the:

• Background color

• Heading Style

• Text format to bold and italic to emphasize it

• text alignment

• bullets(bullet points)

• And small portrait image of ourselves

To make our resume pop out we added a hobbies page by created a new HTML file and calling it hobbies.html. In the file, we added three of our hobbies. Then we linked the styles.css to this document so that it has the same styling as the resume page.

To access our portfolio, school website, and newly created hobbies, we made a footer to the resume to add three hyperlinks to connect them to our resume.

To make the footer visually appealing, we went into our style.css to

• Edit the size

• Center it to the page

• Create breathing room to the text

• Change their visual when hovered over

Next we added a new heading titled: Skills, to our resume to list our skills and expertise levels(at least 3 skills). To do this, we learned how to create a table so we can display them nicely.

To make our table pop out and fit into our Resume, we edited the following:

• Border

• Background color

• Breathing room(for the data)

• Text alignment

Our last step in our HTML and CSS is to include a Contact Form, in case any recruiters want to hire a couple 8th graders. This form has a text field for name, a text field for email address, a larger text field for message, and a Submit button. 

We then styled this form in styles.css so that it is visually appealing, making sure that:

• The text fields are of the same size and align nicely

• The message text area is bigger than the others.

• The submit button changes its visual appearance when hovered over.

Our final step in our resume is to write JavaScript code in a separate file, resume.js, linking this JS file to our HTML file.

We then used this to write JS code to handle/style the Contact Form. For me, I created a function so that the if the user didn't enter a valid email, left the email blank, left the name blank, and left the message blank, the resume will alert the user by reminding them to fill out the blanks. If they did so, a different alert will tell them:

Reflection(SOUL):

• Strength- I think some strengths I did during this project was the execution, time management, and overall performance and appearance of resume since I was on-time and I think my resume looked good.

• Opportunities for improvement- I think I could've improved the visuals of my resume and adding extra information/visual effects to make my resume look better even more, but I met all requirements.

• Understanding- I understood the codes extremely well, especially with the help of my classmates, especially with more complex and harder to memorize parts of code such as the document.getElementById(); in Java script.

• Limitations- I had some trouble fixing syntax errors and other bugs such as with the footers as some of them wouldn't change color when I hovered over them with the mouse. I also had trouble making sure all pictures were in the same folder as they didn't show in my resume. I fixed these problems eventually but it still held me back

• WISCR: - I think the W(Well-rounded)&I(insightful+critical thinking) applied to me the most as I was well rouned by helping my classmates with parts of their code, and I critically thought where the problem was when my coded didn't work(usually forgetting to save, put photos in the same file, and forgetting quotes and semicolons.)

FINAL RESULT: