CSET-110 Week 1

Project: Build a Resume

Today, you're going to write a resume. But this won't be like any resume you've made before, so don't bother reaching for Microsoft Word or Google Docs. Instead, we're writing it in HTML.

Like the letter and newspaper examples from the lecture, all resumes have a similar structure. They are built with similar parts. It's your job to take those parts and apply meaning with the proper HTML tags. However, every resume is unique to the person who writes it, so get creative and make it your own!

Setup

• For repl.it:
  1. Create a new HTML, CSS, and JavaScript REPL called resume.
  2. As you work, you'll be able to check changes in the browser window to the right.
  3. You will have to upload files to this REPL to show your own images.
• For a text editor like Atom or VS Code:
  1. Make a new directory called resume and create a new file called index.html inside.
  2. Open the file in a browser so you can view the rendered output. As you work, you'll save changes to your file in the editor then reload the browser to view the changes.
  3. You will have to move files to this directory to show your own images.

To submit the project:

1. Go to your cset repository on GitHub.
2. Click "Add file" then "Create new file".
3. The file path should be cset/110/resume/index.html. You can view my repo to see an example.
4. Add your HTML to this file and hit the "Commit" button.
5. You will also have to upload any image files you used to to this directory.

I'll download all the repositories at the end of class, just like your assessments.

Requirements

• Your file needs to be a properly structured HTML document with a correct document declaration. It should correctly separate the page's metadata and contents using the head and body tags. You also need a title tag and one meta tag to define the page's character encoding.
• Your resume should be organized into sections using appropriate levels of headings, the h1 through h6 tags. You don't need to use all six, you need to use enough to accurately describe your content.
• It should also contain the following elements:
  • Paragraphs: You should have some text to describe yourself.
  • Emphasis or Strong: Within this text, you should add appropriate emphasis or importance where needed.
  • Anchors: You need at least one absolute link to an external resource (e.g. a social media page) and one relative link to an internal resource (e.g. navigation within this page).
  • Lists: Make sure you choose the type that semantically describes the content of your list.
  • Images: You need to show at least one image. This should be something you have the rights to, not something you found. Maybe it's a photo of you or pieces of artwork. Make sure they are in the project directory and have descriptive alt text.
• You should also add at least three new tags that we haven't covered in class. Use the MDN HTML Reference to find something that would be useful. Use HTML comments in your source code to point out these new tags and tell me why you used them. Make sure you aren't using obsolete tags!

Grading

• 5 pts each for following the requirements as syntactically and semantically as you can.
• 10 pts for following code style guidelines.

Total: 30 pts