My assignment.html page for linking to assignment items for your Website Assesment


This page is the marking guide to your website that your tutor will use to find your elements. Do not name this page anything other than assignment.html (all lower case) or else we may not be able to find and mark your assignment elements.  How to use this page:


Website Topic

Purrfect Companions: A Deep Dive into the World of Cats

Note: You will not be able to change this topic in the future.


Website Release 1.0

1.1 Introduce Your Topic/Passion

  • About me

    • Notes: I use Edge browser for development, and my screen resolution is 2560 x 1600.

    1.2 CSS

  • style.css (default css file)
  • index.css
  • aboutme.css
  • Source.css
  • Feedback.css
  • sitemap.css

    • Notes: None.

    1.3 Site Map

  • Site map

    • Notes: None.

    1.4 Source Log

  • Source log

    • Notes: None.

    1.5 Feedback Form

  • Feedback form

    • Notes: Add a Javascript to create a pop window when clicking on the "Submit Feedback" button.

    1.6 This Assessment Page

  • index.html
  • Assessment page

    • Notes: None.



    Website Release 2.0

    2.1 Call to Actions

  • Call-To-Actions 1
  • Call-To-Actions 2
  • index.css

    • Notes: Both CTA sections are in my Home page.

    2.2 Photo Gallery

  • photoGallery.html
  • photoGallery.css

    • Notes: None.

    2.3 & 2.4 Javascript

    I am doing Javascript.

    Notes: None.

    2.3 Javascript addition

  • script.js
  • photoGallery.html
  • photoGallery.css
  • Feedback form
  • Feedback.css

    • Notes: The script.js contains two main functionalities: a feedback form submission alert that confirms user submissions, and a set of lightbox and slideshow controls for navigating photos in the gallery.

    I also improved the design of the Feedback webpage based on the feedback from the Release 2.0.

    2.4 Well written Javascript

  • script.js

    • Notes: For Feedback, mailSubmit() displays an alert message thanking the user for their feedback and informs them that they will receive a response soon.

    For Photo Gallery,when a user clicks on a photo, the openbox() function displays the lightbox by changing the display style of an element. The closebox() function hides the lightbox when called. The plusSlides() and currentSlide() functions allow the user to navigate through the slides either by moving forward/backward or jumping directly to a specific slide, respectively. The showSlides() function is the core mechanism that updates the display of slides and their corresponding thumbnail indicators based on the current slide index.



    Website Release 3.0

    3.1 Reflections

  • aboutMySite.html

    • Notes: None.

    3.2 Alternative CSS

  • darkMode.css
  • index.html

    • Notes: To switch to the dark mode theme, simply click the "Toggle Dark Mode" button located on the top right of the Home webpage. The Dark Mode button is fixed in the top right corner of the page, no matter how the page is scrolled, the button stays in this position and is not obscured by other elements on the page.

    The dark mode theme changes the background color, theme color (from blue to pink), text color, font, button color, etc.

    3.3 Social Networking Button(s) or Feed(s)

  • Social Networking Feeds

    • Notes: I chose to create Social Networking Feeds, which are located on the Home page.

    3.4 Website Accesibility

    Notes: All my website pages are checked by ChatGPT to ensure that they are accessible somewhat to a WCAG 2.1 AA standard and follow the requirements listed on the doc.

    3.5 Website Validation

  • siteValidation.html
  • siteValidation.css

    • Notes: None of my website HTML files or CSS files have error.

    3.6 Something Original

    1. Dark Mode using JS

  • index.html
  • script.js

    • Notes: The functions in the JavaScript file are to remember the user's choices so that even after refreshing the page, the site maintains the pattern set by the user.

    2. Dropdown Menu

  • index.html

    • Notes: There is an dropdwon menu in the navigation bar "About Me & My Site" on every webpage.


    Other

    Continuous Improvement Session

  • Continuous Improvement #3: Cybersecurity and CIA

    • Report

  • u7564812-report1710-6780.pdf


    •