AI‐FINAL - Code-the-Dream-School/intro-to-programming-2025 GitHub Wiki

1. Project should have, as minimum, readme.md, index.html, index.css and index.js files.

On the index.html file:

1. There should be proper boilerplate code.
2. As a stretch goal (optional): There should be a font-family or Google font.
3. The index.css and index.js files should be properly linked.
4. There should be a <h1> heading with the student's name.
5. There should be a navigation menu working with internal links to the following sections: About, Experience, Skills, Projects, Leave a Message. Optionally, there should also be a link to the Connect or Contact Me section.
6. As a stretch goal (optional): A dark mode toggle switch to change coloring of background and text between default and dark mode.
7. On the About section:
   • There should be a <h2> heading.
   • There should be one or more paragraphs <p> of text.
   • As a stretch goal (optional): there should be a photo with alt attribute for accessibility.
8. On the Experience section:
   • There should be a <h2> heading.
   • There should be a list of previous work or experience.
9. On the Skills section:
   • There should be a <h2> heading.
   • There should be a list of skills, inserted using JavaScript from the index.js file.
10. On the Projects section:
    • There should be a <h2> heading.
    • There should be a list of GitHub repositories, fetched using the GitHub API and inserted using JavaScript from the index.js file.
11. On the Leave a Message and Messages section:
    • There should be a <h2> heading.
    • The form found on Leave a Message section should have: Three fields (name, email address and message) and a submit button.
12. On the Messages section:
    • There should be a <h2> heading.
    • There should be a list of messages (once the form has been given inputs and submit button clicked).
    • As a stretch goal (optional): Conditionally render the <h2> header and section content of the Messages section if there are no messages.
13. On the Connect or Contact Me section:
    • There should be a clickable link to email the student.
    • There should be at least two social media links to the student's profile pages.
    • As a stretch goal (optional): Use icons or images in place of text string links for your email and 2+ social media links.
    • If Connect or Contact Me sections don't exist, social media links should be in the footer element of your page as icons/images.
14. On the footer:
    • There should be a copyright logo, current year and student's name inserted using JavaScript from the index.js file.
    • There should be an email and 2+ social media icon/image links (ONLY IF THE PAGE DOESN'T HAVE A CONNECT OR CONTACT ME SECTION).

On the index.css file:

1. Comments in code as appropriate.
2. At least two media queries, each media query should handle 2 property changes to at least 3 HTML elements.
3. As a stretch goal (optional): Navigation menu element set as sticky/fixed element that stays in place when user scrolls down.
4. As a stretch goal (optional): Navigation menu converted to a hamburger menu on smaller devices via media queries.
5. Experience section list should be styled in grid or flexbox layout.
6. Skillssection list should be styled in a grid or flexbox layout.
7. Projects section list should be styled like cards or use flexbox/grid layout.
8. Messages section list should be styled in a grid or flexbox layout.
9. Connect section list should be styled in a grid or flexbox layout.

On the index.js file:

1. Comments in code as appropiate.
2. There should be sections of code to accomplish the following:
   • Insert the copyright symbol, current year, and student's name in the footer of the index.html file.
   • Using an array, insert the array items as a list of skills in the skills section of the index.html file.
   • Using API Fetch, insert the names of the student's GitHub repositories into the projects section of the index.html file.
3. As a stretch goal (optional): On each github repository name list item for the Project section, there should be a clickable link <a> that takes the user to that repository.
4. As a stretch goal (optional): On each github repository list item, display additional information (like created date, description, etc).
5. The Leave a Message section's submit button should have an event listener that adds the form field inputs to the Messages section.
6. The Messages section list's list items should have: Name of the message author as a clickable link to email the author, a message text and a remove button to delete the message from the list of messages. As a stretch goal (optionally), there should be an edit button for user to change one (or more) of the form inputs (name, email, message).
7. As a stretch goal (optional): Conditionally render the <h2> header and section content of the Messages section if there are no messages.