Description: In this project, we wrote code to design our very own online resume. We used HTML, CSS, and Javascript to create the page, style it, and add interactivity. On the website, we included our name, email, photo, highlights, achievements, and skills. We all added 2 pages, our Resume and Hobbies, and included hyperlinks at the bottom to take us there.
Step 1 - HTML: We started by adding the content of the page. To do this, we used HTML and added the text and information. I added my name, email, photo, three highlights, education, five achievements, a skills table, and extracurriculars. On my hobbies page, I wrote about 3 hobbies important to me and added images. In the HTML code, we learned how to format the page, create tables with rows and columns, add forms, and insert images.
Step 2 - CSS: After creating the outline of the page using HTML, we transitioned to CSS for styling. We used external CSS in a different file and linked it to our HTML file. Then we learned how retrive elements using their class and ID. I added a background color and a text color that went well with it. Next, I put in margins and padding for my table and buttons, and fixed font size, font weight, and borders. Lastly, I used the hover function to change color of my buttons as the mouse hovered over it.
Step 3 - JavaScript: Finally, I linked a JavaScript file to my HTML file. This helped me create an interactive page. I used JavaScript in my contact form. Using it, I programmed the form so that the user can type in their name, email, and a message. When they press the submit button, an alert will pop up at the top of the screen, displaying text to inform them that it has been sent and to await a response.
Reflection: I believe that I have learnt a lot about various coding platforms during this project - HTML, CSS, and JavaScript. I have learnt to format and create an HTML document on Sublime Text, style my page and buttons using CSS, and add special features for the user in JavaScript. I have had a lot of fun applying my new knowledge into creating my very own resume.
S - Strengths: I think that one of my strengths was that I made my page very visually appealling by making every table and sentence perfectly lined up, choosing corresponding colors, and adding gradients of color. I also make sure to add lots of accurate information about myself to the page.
O - Opportunities: Some opportunities where I could improve my project is by adding even more interactive elements using JavaScript. In my project, the only interactive element I had was the submit button in the form. I think that adding more buttons could increase the creativity and overall improve the feel of my resume.
U - Understanding: I believe that I learnt a lot about HTML, CSS, and JavaScript during this project. I can now create the base of a web page using HTML. Moreover, I can style the colors, borders, and margins using CSS. Lastly, I can add button interactivity for the user with JavaScript. I feel that I can apply what I learnt about coding.
L - Limitations: Some limitations I encountered during this project were just some bugs in my code along the way. However, I learned how to check my code and ended up fixing all the bugs, and many times the bugs turned out to be small spelling and spacing errors!
WISCR: The two qualities that I believe I demonstrated this project were W (Well Rounded), and I (Insightful and Critical Thinkers). I was well-rounded because I learned three different programming languages and was able to use my knowledge to create my resume, which worked well and looked nice. I was an insightful and critical thinker because I was determined to make my project the best it could be. To do this, I choose new colors to make gradients, made the border and margins thicker, and added more information to make it great.