AI Final Project Portfolio - Code-the-Dream-School/intro-to-programming-2024 GitHub Wiki

  1. Code executes without errors in the browser
  2. Project structure includes at least the following:
  • a README.md file that is empty or explains how someone can run your code
  • an index.html file
  • a css folder containing an index.css file
  • a js folder containing an index.js file
  • optionally, an images folder containing image file(s)
  1. The index.html should meet the following criteria:
  • include proper boilerplate code
  • index.css and index.js files should be properly linked
  • a level 1 heading with student's name
  • a navigation with working internal links to the About, Experience, Skills, Projects, and Leave a Message sections. There should also be a link to the Connect or Contact Me section if there is one.
  1. The About Section should have a level 2 heading and consist of one or more paragraphs of text. If there is an image file it should contain the alt attribute with a value assigned
  2. The Experience section should have a level 2 heading and list previous work experience in a grid or flexbox styled layout or contain one or more paragraphs
  3. The Skills Section should have a level 2 heading that lists skills. Skills should be inserted using JavaScript from the index.js file and the list should be styled in a grid or flexbox layout
  4. The Projects Section should have a level 2 heading and list GitHub repositories which are fetched using the GitHub API and inserted using JavaScript from the index.js file
  5. The Leave a Message Section, which consists of a Form section and Messages section should have level 2 heading for the Form and the Messages sections. The Form section needs to contain Name, Email Address, and Message fields, a Submit button, and an event listener that adds the form field inputs to the messages section. The list of messages should populate once the form has been given inputs and submit button clicked. The Messages section should be styled in a grid or flexbox layout. Each Message section list item should have the name of message author as a clickable link to email the author at the email address they provided in the form, message text, and a remove button to delete the message from the list of messages
  6. The Footer Section should include a copyright logo, the current year, and the student's name inserted using JavaScript from the index.js file. If the page does not have a Connect or Contact Me section, the footer should also include a link to email the students and 2 or more social media icons/images links
  7. The following items are optional:
  • use of a font-family or Google fonts
  • use icons or images in place of text string links for your email and 2+ social media links
  • conditionally render the level 2 heading and section content for the "Messages" sections depending on whether or not there are messages
  • use sticky/fixed navigation that stays in place when user scrolls down on the page
  • provide a dark mode toggle switch to change coloring of background and text between default and dark mode
  • include navigation converted to a hamburger menu on smaller devices via media queries
  • adjust each GitHub repository name to be a clickable link
  • display additional information about each of the repositories (examples: created date, description, etc.)
  • customize the styling of the projects list (as cards or use flexbox or grid for example)
  • create an Edit button for user to change one (or more) of the form inputs (name, email, message)
  • If a Connect or Contact Me section is in use, it should contain a clickable link to email the student and at least two social media links to the student's profile pages (examples: GitHub, LinkedIn, twitter, instagram, etc.)
  1. The index.js file should have
  • Comments in code as appropriate (to notate what sections of code are used for)
  • Sections of code to accomplish the following:
  • Insert the copyright logo, current year, and student's name in the footer of index.html
  • Using an array, insert the array items as a list of skills in the skills section of index.html
  • Handle the event listener on the message form to convert form inputs into the author's name as a clickable link to email them, display their message and provide a remove button to delete the message
  • Use API fetch to retrieve and insert the names of GitHub repositories in the projects section of index.html
  1. The following items are optional:
  • provide an edit button to change one or more form fields
  • conditionally render the messages header and section of index.html (show it if there are messages, hide it if none)
  • provide additional information about each repository
  • make the repository names clickable links that redirect the user to that repository page
  1. The index.css file should contain at least 2 media queries. In each media query there should be at least 2 property changes to at least 3 html elements. Flexbox (or Grid) should be used to format the layout of the Experience and Connect sections and, if used, the social media icons in the footer. Comments in code as appropriate (to notate what sections of code are for) is optional.
  2. If an images folder is in use, it should be at the root level of the repository and contain only images. Image links in the index.html file should be relative paths. Alt attribute should be used for any and all images.
  3. Styling will have creative variance, but some general style guidelines include:
  • Have appropriate contrast to your site (don't use a dark font on a dark background)
  • The user should not need to horizontally scroll to see site content on any device (mobile, tablet, or desktop)
  • The font sizes and interactive buttons should not be too small to read or click/tap on smaller devices.