Embedded Files
Description: This project was to develop a resume website using HTML, CSS, and JavaScript on Sublime Text. There are 30 requirements all listed in a google doc checklist: https://docs.google.com/document/d/1HqzA_akebJSzXbYE8nz-3CA56zevjmuzKLyeo3wnkyQ/edit?tab=t.0.
Description: This project was to develop a resume website using HTML, CSS, and JavaScript on Sublime Text. There are 30 requirements all listed in a google doc checklist: https://docs.google.com/document/d/1HqzA_akebJSzXbYE8nz-3CA56zevjmuzKLyeo3wnkyQ/edit?tab=t.0.
Procedure: First, we designed the structure of website using HTML, adding in forms, texts, tables, images, and more. We made two HTML files for the home page and a separate one for the hobby page. Then, we created a CSS file to style the website and make it look aesthetic to our liking. Finally, we added a JS file to make the contact form interactive, alerting the user when the message has been successfully sent.
Procedure: First, we designed the structure of website using HTML, adding in forms, texts, tables, images, and more. We made two HTML files for the home page and a separate one for the hobby page. Then, we created a CSS file to style the website and make it look aesthetic to our liking. Finally, we added a JS file to make the contact form interactive, alerting the user when the message has been successfully sent.
1 HTML: First, we structured the website with HTML. We added a heading and a footer, supplemented with an activities, highlights, education, achievements, extracurriculars, and skills list. We also added a contact section towards the bottom of the page. We learned to create tables, lists, buttons, and forms.
1 HTML: First, we structured the website with HTML. We added a heading and a footer, supplemented with an activities, highlights, education, achievements, extracurriculars, and skills list. We also added a contact section towards the bottom of the page. We learned to create tables, lists, buttons, and forms.
2 CSS: Next, we styled our website. I chose a more calming blue theme for my website. I margined the text and added other features such as the psuedo-code for buttons. ex: a:hover{background-color:blue;}. We also styled the table and other texts to make everything follow one in sync theme. We learned about Id and Class to specifically target individual parts of the website and the transform function.
2 CSS: Next, we styled our website. I chose a more calming blue theme for my website. I margined the text and added other features such as the psuedo-code for buttons. ex: a:hover{background-color:blue;}. We also styled the table and other texts to make everything follow one in sync theme. We learned about Id and Class to specifically target individual parts of the website and the transform function.
3 JavaScript: Finally, we learned how to use javascript and create functions to give interactive features to the buttons. Specifically, we coded the button for the contact information sector to send the message and receive a alert() notification to tell the user that their message has been successfully sent.
3 JavaScript: Finally, we learned how to use javascript and create functions to give interactive features to the buttons. Specifically, we coded the button for the contact information sector to send the message and receive a alert() notification to tell the user that their message has been successfully sent.
Step-by-Step:
Step-by-Step:
Reflection:
Reflection:
S- The strength of my work is my efficiency and theme. I was able to keep a simple theme of blues throughout my website and worked fast without distractions during project work time.
S- The strength of my work is my efficiency and theme. I was able to keep a simple theme of blues throughout my website and worked fast without distractions during project work time.
O- Some opportunities to improve are to challenge myself and create more difficult code to enhance the website as a whole.
O- Some opportunities to improve are to challenge myself and create more difficult code to enhance the website as a whole.
U- During this project, I learned how to use java script and use different functions. More specifically, I learned all the syntax of each language.
U- During this project, I learned how to use java script and use different functions. More specifically, I learned all the syntax of each language.
L- A limitation I encountered was when the alert notification for the messaging sector did not (document.getElementById) the email, yet everything looked right. I ended up fixing the error and realized it was the confusing function name that confused the computer.
L- A limitation I encountered was when the alert notification for the messaging sector did not (document.getElementById) the email, yet everything looked right. I ended up fixing the error and realized it was the confusing function name that confused the computer.
WISCR: During this project, I think I displayed the W (well-rounded) and the I (insightful critical thinker) in WISCR because I was working efficiently while also solving problems that came about. I learned a lot and felt I improved as a coder.
WISCR: During this project, I think I displayed the W (well-rounded) and the I (insightful critical thinker) in WISCR because I was working efficiently while also solving problems that came about. I learned a lot and felt I improved as a coder.
Page updated
Report abuse