Resume Webpage Homework
This exercise is to construct your own personal resume website using the html, css, svg, javascript you have learned from the readings and tutorials. Hopefully you can continue to build on this exercise to create a good personal webpage to showcase yourself to potential employers.
Create a personal resume website for yourself. Do not use any templates downloaded from the web. I encourage you to look at examples, understand them and get inspired by them; but your webpage has to be written by you from scratch and be mostly original. You can easily test your webpage by just opening the html file you created using the text editor (Microsoft Visual Code), in your browser. Please attempt this exercise after you have gone through the tutorials.
The website should contain at a minimum the following:
a. Should use most of the basic HTML elements such as different levels of headings, paragraphs, lists, etc.
b. Should contain comments that explain what each section/part of the html code is doing.
c. Include the project’s you have done so far as a list in your resume
d. Construct the education section of your resume as a table with degree, graduation year, university, major as columns.
e. Include links for the universities in your education section.
f. Include at least one image (I would assume your photograph, but could be anything you want!)
g. Should use a separate CSS file to style your webpage. You should use at a minimum the following styles
i. Colors – background, text, border etc.
ii. Borders
iii. Text formatting (font, alignment, etc.)
iv. Margins, padding, borders
h. Use classes and ids to apply the CSS style to the HTML elements.
i. Create a Download Resume button, which will let you download a pdf version of your resume when clicked.
j. Add a contact me email link, which when clicked should allow the user to email you.
k. Using SVG draw a small circle with your initials inside it and place it where you want on the webpage. Think of it as your personal logo!
l. Write a javascript function which gets the DOM node for your name and sets the color of your name to blue (or any color you want). This javascript should run when you load the html page. So, when you open the html file in the browser the javascript automatically runs and sets the color of your name. Hint: You can use the getElementById() to access any html element that has been given an id and then set it’s properties. The javascript should be in a separate javascript file.
m. Write a javascript that runs on load (similar to above) that sets the background color for your webpage.
n. Please make your webpage as creative as you want, but at a minimum your webpage should look better than your paper resume.
Deliverables
You should have created three file (.html, .css, js) for this exercise. Create a zip file which includes the html file, the css file, the javascript file, the images you have used and any other file that is needed to run your webpage. Make sure you have all the files needed. I will be evaluating the assignment by running your webpage and if it does not work then it would be hard for me to evaluate it. Turn in the zip file via blackboard.
