html-jon-doe-resume-unsolved

README.md

@@ -6,7 +6,6 @@
 
 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!
 
-
 Make sure to watch the [INTRO VIDEO](https://www.loom.com/share/7dc80d1a15f74d718dba51ed8490cacd?sid=40bfa1ba-526c-49b2-993f-7822deb6f731) before you start.
 
 ## Learning objectives
@@ -41,7 +40,7 @@ This assignment should prove that a student is able to:
 - [ ] Open the project in VSCode with `code <cloned_repo_folder_name>`
 - [ ] Initialize playwright and install project packages
   - [ ] Use `npm i` to install packages
-  - [ ] Use `npm run browser-install` to install the browser environment for testing 
+  - [ ] Use `npm run browser-install` to install the browser environment for testing
 - [ ] All the tasks of the "Specific requirements" section MUST be solved
 - [ ] All the tests MUST pass. Fix any errors before you submit (acceptance criteria).
   - [ ] Use `npm run test` to run all tests in the terminal
@@ -60,42 +59,42 @@ This assignment should prove that a student is able to:
 
 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" that represents the desired role.
-- [ ] Add an image with required and important attributes
-  - [ ] The image path should be `./assets/avatars/fake_person.jpg`. This image is included into the project already.
-  - [ ] 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"
-- [ ] 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"
-- [ ] Add the UNORDERED list of 4 hobbies
-- [ ] Add the section heading "Contact Me"
-- [ ] 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 (/assets/images/p1-solved-mockup.png).
+- [x] Create an html file with the name of "index" in the root of the project
+- [x] Add HTML Boilerplate to the document
+- [x] Set the document title to be "Jon Doe's resume".
+- [x] Set the page heading to be "Jon Doe"
+- [x] Add a section heading with the content of "Talented Frontend developer" that represents the desired role.
+- [x] Add an image with required and important attributes
+  - [x] The image path should be `./assets/avatars/fake_person.jpg`. This image is included into the project already.
+  - [x] The image alternative text should match the page title.
+- [x] Add a section heading with the content of "About Me".
+- [x] Add a paragraph of text (50 words at least) as the John Doe's bio. You can use random text for the paragraph content.
+- [x] Add the section heading "My Skills"
+- [x] 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)
+- [x] Add the section heading "My Hobbies"
+- [x] Add the UNORDERED list of 4 hobbies
+- [x] Add the section heading "Contact Me"
+- [x] 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.
+- [x] Add Discord as a service and your discord's real username as a value to the table.
+- [x] 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.
+- [x] 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.
+- [x] 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.
+- [x] Check the result mockup to make sure your page looks EXACTLY as the mockup (/assets/images/p1-solved-mockup.png).
 
 ### 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".
+- [x] In the head section connect the CSS file, available by the following path: `./css/styles.css`.
+- [x] 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.
+- [x] The page heading should have the id of "candidate-name"
+- [x] The desired role section heading should the id of "candidate-desired-role"
+- [x] The "About me" section heading should have an id of "about-me".
+- [x] The image should have the id of "candidate-image"
+- [x] The bio paragraph should have a class name of "candidate-bio"
+- [x] The skills section heading should have the id of "skills"
+- [x] The skills list should have the id of "skills-list"
+- [x] The Hobbies section heading should have the id of "hobbies"
+- [x] The hobbies list should have the id of "hobbies-list"
+- [x] The contacts section heading should have the id of "contacts"
+- [x] The contacts table should have a class name of "contacts-table".
+- [x] The body should have a class name of "fancy-body".
 - [ ] Check the result mockup to make sure your page looks EXACTLY as the mockup (/assets/images/p2-solved-mockup.png).

index.html

@@ -0,0 +1,89 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="./css/styles.css" />
+    <script src="./js/scripts.js" defer></script>
+    <title>John Doe Resume</title>
+  </head>
+  <body class="fancy-body">
+    <h1 id="candidate-name">John Doe</h1>
+    <h2 id="candidate-desired-role">Talented Frontend developer</h2>
+
+    <img
+      id="candidate-image"
+      src="./assets/avatars/fake_person.jpg"
+      alt="Fake Person"
+    />
+
+    <h2 id="about-me">About Me</h2>
+
+    <p class="candidate-bio">
+      Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa perferendis
+      accusantium quos nihil iusto sed accusamus debitis nemo ut dolorum id quo
+      dolor sequi, dolore mollitia officia, quisquam saepe distinctio,
+      laudantium possimus tenetur maxime? Aliquid vero iste repellendus ipsum
+      nobis labore possimus, cum quod adipisci modi? Veritatis, nihil aliquid
+      unde velit neque tenetur delectus? Voluptatem, illum temporibus ad minima
+      blanditiis magni explicabo eveniet nostrum autem quam delectus, incidunt
+      odit praesentium at. Tempora quo maxime at fugit! Tenetur quas veniam
+      saepe laudantium. Tempora obcaecati corrupti sunt reprehenderit architecto
+      quaerat, hic aliquid deserunt iure alias similique, maxime asperiores
+      delectus excepturi suscipit fugit!
+    </p>
+
+    <h2 id="skills">My Skills</h2>
+
+    <ol id="skills-list">
+      <li>HTML</li>
+      <li>CSS</li>
+      <li>Javascript</li>
+      <li>React</li>
+      <li>NodeJS</li>
+      <li>gbfgbnsn</li>
+    </ol>
+
+    <h2 id="hobbies">My Hobbies</h2>
+
+    <ul id="hobbies-list">
+      <li>Muay Thai</li>
+      <li>Basketball</li>
+      <li>Cooking</li>
+      <li>Bible reading</li>
+    </ul>
+
+    <h2 id="contacts">Contact Me</h2>
+
+    <table class="contacts-table">
+      <tr>
+        <th>Email</th>
+        <td>
+          <a href="mailto:[email protected]"
+            >[email protected]</a
+          >
+        </td>
+      </tr>
+      <tr>
+        <th>Discord</th>
+        <td>Discord</td>
+      </tr>
+
+      <tr>
+        <th>Linkedin</th>
+        <td>
+          <a target="_blank" href="https://www.LinkedIn.com"
+            >www.LinkedIn.com</a
+          >
+        </td>
+      </tr>
+
+      <tr>
+        <th>Github</th>
+        <td>
+          <a target="_blank" href="https://www.Github.com">www.Github.com</a>
+        </td>
+      </tr>
+    </table>
+  </body>
+</html>