Embedded Files
Description: For this project, we needed to create a resume using our knowledge of HTML, CSS, and JavaScript Coding. We created two pages for this project, and those pages were our hobbies and our resume. We put a lot of information about ourselves on these pages, and that includes hobbies, name, achievements, highlights, skills, extracurriculars, email, and even a contact form where people could contact us. We also added three buttons on the bottom of our resume, one for our school, hobbies, and this portfolio.
Step 1 - HTML: We started off the project by using HTML code to add all the content of the page. This included all the text and information, which was my name, contact, photo, highlights, education, achievements, skills, abilities, and extracurriculars. On my other page, which is the hobbies page, I described three hobbies that I enjoy and my experience with them. I also included pictures for each individual hobby.
In the HTML code, we learned how to apply heading tags, paragraphs, image tags, ordered lists, unordered lists, forms, and tables.
Step 3 - CSS: Next, we used our knowledge of CSS code to style the pages and make it look better and more colorful. We used a format of CSS called external CSS in a separate file and linked it to our resume HTML file. We learned how to target specific elements using ID and class elements. Using CSS, I changed the text color, font, background color, text-align, margins, padding, font size, font weight, border, and I learned to use pseudo-class, which made the buttons change as the mouse hovered over them.
This is my hobbies page.
This is what our resume project looked like after we applied CSS code to it.
Step 3 - JavaScript: Lastly, we linked another file to our HTML file, and that is the JavaScript file. This made my page interactive, which meant that I could respond to users after they sent a message. We applied JavaScript to our last section, which is the contact form. I programmed 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 I have received the message and will respond as soon as I can through the given email.
SOUL Reflection
S - Strengths: During this project, I had many strengths, but the one that stood out the most is the amount of information and description that I put on the page. I was able to apply what I learned during class and put it into my resume.
O - Opportunities: Some opportunities where I could improve are trying to style my page, or just trying to make the page more interactive. This could mean adding more JavaScript or just changing the colors along the page to make it stand out more.
U - Understanding: I learned a lot when making this project. Not only did I learn HTML and CSS, but I also learned how to use JavaScript to make the page interactive.
L - Limitations: I encountered a few limitations, but one of them is constantly debugging and rewriting code. This wasn't a hard process, but it was one of the most tedious.
WISCR: The two qualities that I demonstrated in this project were S(Self-Motivated) and I(Insightful and Critical Thinkers). I believe I demonstrated being self-motivated because I was constantly pushing myself to debug and rewrite code multiple times just to get it to work. I think this process took the majority of my time, and I had to stay focused throughout. I also believe that I was an insightful and critical thinker because I was trying to find new ways to add new things. Whether it was adding more padding or margin, or just changing font size, I was always trying to make the project look better than it already did. I was also trying to apply as much as I learned into my resume project. Even if it was something I didn't really understand, I would still go out of my way to figure it out and apply it.
Page updated
Report abuse