Exercise: John Doe's Resume

!NOTE! The "Jon Doe" is a placeholder for your first and last names.

Introduction

In this activity, you will create a basic resume webpage using HTML. This activity will demonstrate that by understanding the fundamentals of HTML, you can construct actual web pages!

The StackBlitz documentation says that the project should be opened in Google Chrome Browser to let the WebContainer load properly. Please make sure you use Google Chrome.

Please wait for the Project Web container to complete loading on the right =>>>>

Make sure to watch the INTRO VIDEO before you start.

PART 1 Completed Screenshot: Screenshot PART 2 Completed Screenshot: Screenshot

Learning objectives

This assignment should prove that a student is able to:

• Create an index.html file in the IDE.
• Add the HTML Boilerplate to the HTML document.
• Update the document title through the title tag content.
• Create the page main heading with the h1 tag.
• Create an image element with the img tag.
• Set the required src and important alt image attributes.
• Set a relative/absolute image src attribute value.
• Create a paragraph of text with the p tag.
• Create section headings with the h2 tags.
• Create an ordered list of items with the ol and li tags.
• Create an unordered list of items with the ul and li tags.
• Create a table with the table tag.
• Utilize th tag to create a table header cell.
• Utilize td tag to create a table data cell.
• Set a link with the a tag.
• Utilize the anchor target attribute to open the destination resource it in a new tab.
• Set the link that starts the default email client by a click with the mailto: href attribute value.
• Add global attributes to HTML elements.
• Utilize the link tag to connect a css file.
• Utilize the script tag to connect a js file.

Standard requirements

• Fork the project to your StackBlitz account
• All the tasks of the "Specific requirements" section MUST be solved
• StackBlitz IDE MUST have 0 code problems listed (spelling problems are fine)
• The code MUST be formatted with Prettier
• Submit a .txt file with a secret url to your StackBlitz project.

Specific requirements

Part 1: Setting up HTML elements

All the tasks in the requirements are related to the index.html file! Consider "Jon Doe" to be replaced with your real first and last name.

• [ ✓ ] Create an html file with the name of "index" in the root of the project
• [ ✓ ] Add HTML Boilerplate to the document
• [ ✓ ] Set the document title to be "Jon Doe's resume".
• [ ✓ ] Set the page heading to be "Jon Doe"
• [ ✓ ] Add a section heading with the content of "Talented Frontend Developer" - representing the desired role.
• [ ✓ ] Add an image with required and important attributes
  • [ ✓ ] The image path should be ./assets/avatars/fake_person.jpg.
  • [ ✓ ] The image alternative text should match the page title.
• [ ✓ ] Add a section heading with the content of "About Me".
• [ ✓] Add a paragraph of text (50 words at least) as the John Doe's bio. You can use random text for the paragraph content.
• [ ✓ ] Add the section heading "My Skills" with h2 tag
• [ ✓ ] Add the ORDERED list and add 6 random item into it. (Feel free to use the devslopes website to get the real skill names or use some random skill names)
• [ ✓ ] Add the section heading "My Hobbies" with h2 tag
• [ ✓ ] Add the UNORDERED list of 4 hobbies
• [ ✓ ] Add the section heading "Contact Me" with h2 tag
• [ ✓ ] Add the table of two columns and 4 rows. The first column for every row is the table header with the service name. The second column is for the value.
• [ ✓ ] Add Discord as a service and your discord's real username as a value to the table.
• [ ✓ ] Add LinkedIn as a service and your linkedIn's real username as a value to the table. Make the value to be a link to your LinkedIn profile page opened in a new tab.
• [ ✓ ] Add Email as a service and your real email as the value. Make it to be a link that starts the new email message app.
• [ ✓ ] Add Github as a service and use your real github username as a value. Make the value to be a link that leads to your github profile in a new browser tab.
• [ ✓ ] Check the result mockup to make sure your page looks EXACTLY as the mockup Part 1 Mockup Link.

Part 2: Testing the magic of id and class attributes

• [ ✓ ] In the head section connect the CSS file, available by the following path: ./css/styles.css.
• [ ✓ ] In the head section connect a JS file, available by the following path: ./js/scripts.js. Make sure it will be executed after the html is parsed.
• [ ✓ ] The page heading should have the id of "candidate-name"
• [ ✓ ] The desired role section heading should the id of "candidate-desired-role"
• [ ✓ ] The "About me" section heading should have an id of "about-me".
• [ ✓ ] The image should have the id of "candidate-image"
• [ ✓ ] The bio paragraph should have a class name of "candidate-bio"
• [ ✓ ] The skills section heading should have the id of "skills"
• [ ✓ ] The skills list should have the id of "skills-list"
• [ ✓ ] The Hobbies section heading should have the id of "hobbies"
• [ ✓ ] The hobbies list should have the id of "hobbies-list"
• [ ✓ ] The contacts section heading should have the id of "contacts"
• [ ✓ ] The contacts table should have a class name of "contacts-table".
• [ ✓ ] The body should have a class name of "fancy-body".
• [ ✓ ] Check the result mockup to make sure your page looks EXACTLY as the mockup Final Result Mockup Link.