Your final project will be to make an online, interactive version of your resume. A rubric is forthcoming, but to get you started in thinking about your approach, here’s a few examples that iMedia students made this year:

http://student.elon.edu/pmacleod/pmacleodresume/

http://student.elon.edu/lbourne/ResumeLaurenFinal/

http://student.elon.edu/akim6/resume/

http://student.elon.edu/mmurphy50/MichelleMurphyResume/

http://student.elon.edu/cdonick/resume/

http://student.elon.edu/smoffitt/moffittresume/

http://student.elon.edu/tanderson6/resume/

http://student.elon.edu/mparrott/resumeTyler/

http://student.elon.edu/aveara/aveararesume/

http://student.elon.edu/tholland/hollandresume/

In class, we often declare colors such as ‘red’ or ‘teal’ in our CSS, but in the real world of Web design, much more specificity is used to select exact colors. In CSS, we have three ways to declare what colors we want to use:

• The ‘color name’ approach: ‘red’, ‘green’ – simple and useful for testing, but not good for real-world use.
• The Hexidecimal (Hex) approach: Each color in the (digital) spectrum has a unique 6-character code, made up of the letters A-F and the numbers 0-9, and preceded by the hashtag (#). For instance, ‘white’ is #000000, and ‘black’ is ‘#FFFFFF’.
• The RGBa approach: Computer screens use an ‘additive’ color method, meaning the colors we see on screen are blends of Red, Green and Blue at specific levels. In this scale, each color has values for Red, Green and Blue between ‘0’ and ‘255.’ Additionally, the value for ‘a’ sets the ‘Alpha Channel,’ or amount of transparency. Transparency is measured on a scale from 0.0 to 1.0.

So, for example, ‘white’ would be: ‘RGBa(0,0,0, 1.0);’ and a bright orange would be ‘RGBa(255,155,0, 1.0);’ This scale is a little more complicated, but it’s the only one that allows for transparency.

‘OK, so how do I find the Hex or RGBa value for a color I want to use?’

If you use Photoshop’s color picker, any color you select will have its RGB and Hex values listed in the application.

…that thing at the very bottom with the hashtag is your hex code. The ‘R’, ‘G’ and ‘B’ values listed in the window are the RGB values (the color picker assumes full opacity, so your full RGBa color code would be ‘RGBa(222,117,24,1.0);’

Here’s a great post describing these concepts in greater detail:

color

More on the CSS ‘display’ property can be found here: https://css-tricks.com/almanac/properties/d/display/

Class, for our next assignment, you’ll be asked to write a web article – we were calling it a ‘research paper,’ but that implies you’ll be citing sources in a bibliography and writing something really lengthy, neither of which is required!

Instead, we ask that you write a short (450-800 words) article that summarizes an idea, debate, or history of comparable scale (i.e. don’t do this on ‘how the internet was invented,’ you won’t be able to cover that topic in 800 words). Here are some topics to choose from:

• How GPS ‘works’
• How is reading news on mobile changing journalism?
• How did the W3C (world wide web consortium) start, and how are people elected to it?
• What were the ‘Browser Wars?’
• Why do so many Web designers complain about the Internet Explorer browser?
• How do hard drives work?
• How can diversity be increased in the Computer Sciences?
• What is Code.org, and what problems is it trying to address?
• How are social media apps like Snapchat and Twitter being leveraged by advertisers?
• What is encryption, and how does it work?
• What is a CMS, and how does it work?
• How does WiFi work?
• What is Packet Switching, and how does it allow the Internet to function?
• What is Bandwidth, and what affects it?
• What is Net Neutrality, and why is it important?
• How are political campaigns using social media and the Internet?

If you’d like to write your article on another topic, you must get that topic approved by me in advance. One purpose of this project is to ask you to research a topic related to this class, so you’ll have to justify your choice of topic.

Once you write your article, you’ll be asked to move its content into an HTML/CSS ‘boilerplate,’ mark up the article with the correct HTML tags (<h1>, <h2>, <p>, <img>, etc.), and then style the page to have a custom font, color scheme, floated images, and effective use of margin and padding. We’ll also use media queries to make it responsive.

Your assignment is to take unformatted files, and add HTML and CSS to them to make a visually appealing Webpage. Here’s how to complete it:

• Download the ‘robotCostumeStartPoint’ folder from the ‘walsh’ server (accessed via Quicksilver). Please be sure to copy the folder to your own computer, and not work on the server.
• Following the instructions written in comments in the HTML file, add the appropriate HTML tags to all of the content on the page. Remember, all of the content on the page should be wrapped in an HTML tag.
• Save your work, and view it in a browser to make sure everything is working (image shows up, text is formatted accordingly)
• Using the CSS file (already attached to the HTML file), follow the instructions at the end of the HTML file to add a bottom-border to the H2 tags and change the background color of the page.
• Visit the Google Fonts page, choose a font to use, click the ‘Quick Use’ button, and add the appropriate codes to your HTML and CSS files [NOTE: the HTML snippet you add looks like a link to a stylesheet (it is), and goes inside the <head> of your HTML file. The CSS snippet can be attached to any selector in your stylesheet, such as the <body> tag (to change the font for the whole page)]. Test to make sure the font shows up.
• Upload the entire folder, including the HMTL file, JPG, and CSS file, to your student server, using Cyberduck (you should have a bookmark saved in Cyberduck to connect to your server).
• Open the file up in a browser from the server (i.e. not the local [‘file:///’] version), make sure everything looks right, and then copy the URL and send it to me via email.

Rather than listing your skills on your resume, it’s be better to indicate how good you are at each one – and even better to do so visually!

I’ve created a page (and put it on Quicksilver) that illustrates how to make colored bars indicating your skill level. It can be found on Quicksilver at: ‘walsh’ > COM210 > progress.

The resume assignment is our final project for the class, in lieu of a sit-down exam. You are required to update a digital copy of your resume, then copy its contents into the boilerplate. Think critically about how you’d like to present yourself visually – drawing out some sketches on paper or in Photoshop is a really good idea – and then wrap your content in the appropriate HTML, and style the page with CSS. When you’re finished, show your resume to a friend and get some feedback: what works? What doesn’t? What could you move or adjust?

GETTING STARTED

• Plan out how you want your digital resume to look: what colors, fonts, and layout strategy do you want to employ? What choices best reflect your personality and reflect the way you wish to present yourself to the professional world? Look through the Google Fonts, which one ‘fits’ with you best?
• Look up resumes online, find some inspiration. Look at the iMedia resumes made earlier this year (linked to in a previous post on this blog).
• Update the content of your resume to reflect your current status. While your resume’s content won’t affect your grade, you might as well do the project with an up-to-date resume!

GENERAL

• Adjust your content in the #wrapper with a layout strategy in mind. Consider using a fixed header, or a fixed sidebar (a fixed sidebar is just a <div> that’s floated to the left or right and set to ‘position: fixed;’.).
• Choose a good color scheme – just one or two color, plus black & white – and use it for the background color, or individual elements, the whole page, font colors, borders, anything else.
• Include a way to contact you, either via telephone, email, or social media.
• Make sure your name is very clearly visible and noticeable.
• Apply matching style and layout to similar sections (by using classes), i.e. all of your jobs should be laid out the same way, all of your schools, all of your awards – a resume is an example of design consistency. So class names like .job, .jobDates, .jobTitle are a good idea.
• Use imagery whenever possible: icons for software programs, progress bars indicating your level of expertise, etc.
• Do not include creative content, like movies or papers – this is a resume, not a portfolio.
• Make sure all of your text is wrapped in HTML tags.
• Make the page responsive.

SPECIFIC

• Use the #wrapper in the boilerplate to restrict your resume’s width to 960px.
• Link all relevant content (schools you attend / attended, jobs you’ve had, etc.) to open in a new browser window (target=_blank”).
• Choose and embed a custom font on your page.
• Give your page a title.

To set an element to be fixed, and not scroll, add the following CSS:

position: fixed;

…but please note that this will cause some strange things to happen at first:

• Your element will collapse horizontally, so you have to write in a width attribute.
• The content below your fixed element will be covered by the fixed element, so you’ll need to scoot that element down with margin or padding.

So, if I wanted a fixed header, and this was my HTML:

<header><h1>This is the header</h1></header>
<main><p>This is the main content area.</p></main>

…then here’s the CSS I’d write:

header {
position: fixed;
width: 960px;
height: 120px; /*otherwise it's invisible or really small */
padding-top: 50px; /* to push the text down to be vertically centered in the header */
}
main {
padding-top: 140px; /*to push the main content down below the fixed header */
}

To do this with a sidebar, use the <aside> tag, and adjust your content so the padding is on the left, rather than the top:

<aside><h1>This is the header</h1></aside>
<main><p>This is the main content area.</p></main>

Then, the CSS:

aside {
position: fixed;
width: 120px;
height: 960px; /*otherwise it's invisible or really small */
margin: 0 auto; /* to center text */
}
main {
padding-left: 140px; /*to push the main content right, our of the way of the fixed sidebar */
}

These are example Web Articles handed in over previous Semesters, in no particular order:

http://student.elon.edu/kshannon6/WebArticle/

http://student.elon.edu/dvega/Vega%20Boilerplate/index%20copy.html

http://student.elon.edu/ezimmerman7/boilerplate/

http://student.elon.edu/gabilockclemmons/boilerplate/

http://student.elon.edu/nackman/SnapchatandBrands/

http://student.elon.edu/amaloney3/tracking/

http://student.elon.edu/azwingelberg/WebArticle/

http://student.elon.edu/mhoffman6/webArticle/