For this project, we learn and use HTML, CSS, and JavaScript to create and design an interactive e-resume. There are 30 requirements, each worth one point; they are our name, contact information (email address), at least three highlights, education (current and previous schools with graduation year), at least three skills with the expertise level, at least two achievements, at least three extracurriculars, a contact form, and photo, three hyperlink buttons on the footer of the page (to hobbies page, portfolio page, and school), a bunch of other requirements regarding how to style the resume, and a separate page for hobbies. The hobbies page must have at least two images.
1, I wrote the HTML code for my resume.
This is what my code looked like.
This is what It looked like on chrome without any styling.
2, I added styling with CSS.
This is my CSS code.
Before:
After:
3, I created a separate page for my hobbies. The requirements for this page was to have styling, at least three hobbies, and at least two images for two of the three hobbies. The the next image Is what my hobbies page looks like.
4, added a table of my skills with my experitise level. This table is tyled with a border, font, and background colors.
5, I added a contact for that can be filled and sent. After pressing the send button, an alert from the site will pop up that says, "(name), thank you for your interest! I will be emailing you soon at (email)"
This is what the contact form looks like:
This is what pops up after clicking the send button with the filled out information (in the image of the left).
Reflections:
Strength - I personally really like my styling, since pink is my favorite color.
Opportunities - My hobbies page could've definitely have had better descriptions, but I didn't know what to say.
Understanding - Through this project, I learned how to code HTML, CSS, and JavaScript, and how to use all three together to make a good-looking interactive website.
Limitations - My portrait is coded or styled in a weird way that when you zoom out and the text gets smaller, the portrait stays the same size and its just kinda awkward.
WISCR
-Clear communicator, I asked for help when needed and also helped others clearly
-Self-motivated, I was mostly independent during this project and I finished the project in a way I was proud of.