diff --git a/README.md b/README.md index 5b841ac..0f01ab3 100644 --- a/README.md +++ b/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 ` - [ ] 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). diff --git a/index.html b/index.html new file mode 100644 index 0000000..440e61e --- /dev/null +++ b/index.html @@ -0,0 +1,89 @@ + + + + + + + + John Doe Resume + + +

John Doe

+

Talented Frontend developer

+ + Fake Person + +

About Me

+ +

+ 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! +

+ +

My Skills

+ +
    +
  1. HTML
    2. +
  2. CSS
    3. +
  3. Javascript
    4. +
  4. React
    5. +
  5. NodeJS
    6. +
  6. gbfgbnsn
    7. +
+ +

My Hobbies

+ + + +

Contact Me

+ + + + + + + + + + + + + + + + + + + + +
Email + Nicholas.mason.nm@gmail.com +
DiscordDiscord
Linkedin + www.LinkedIn.com +
Github + www.Github.com +
+ +