Feral Cats Family

Cross Reference

Important Information. Please read: The Chrome browser minimum width is 500px and thus the mobile version will not be used, unless you change to the mobile version through Developer Tools Console. Here is the website where this issue is explained.

• 2.1 Web Sites:

  3 Web Sites – Similar sites to your site

  • Ontario SPCA

    "The Society and its network of communities facilitate and provide for province-wide leadership on matters relating to the prevention of cruelty to animals and the promotion of animal well-being"(taken from the website of Ontario SPCA). The website of the organization helped me to understand how to organize the pages and what pages to include in the website of Feral Cats Family.

    The website has a lot of webpages divided into 5 primary categories - mainmenu items: Who We Are, What We Do, How You Can Help, Blog and Contact Us. The footer consists of four sections: About us, Links, Follow us and Our location. The header is fixed and icludes the name of the organization, navigational menu, search and three CTAs - call, email(both presented as images) and donate button.

  • Kamloops Humane Society

    "The Kamloops and District Humane Society (KDHS) works to protect dogs, cats, and other companion animals. Formed back in 1993, the Society has helped thousand of pets and their owners live healthier, happier lives"(taken from the website of Humane Society).This website gave me information on the webpages. that need to be in the Feral Cats Family website and what information to include on each of them.

    The website has very good home page: navigational menu in header, in the body: four boxes telling important information and small introduction section that describes organization and what it does, and a nicely designed footer. This website has a good presentation of animation and CTAs and gives a positive impression.

  • Angel's Animal Rescue

    "Since 2008 Angel's Animal Rescue has rescued, cared, and found loving homes for thousands of victimized, abused and neglected animals"(taken from the website of Angel's Animal Rescue). The given website presented information about organization of the website and, in particular, gave an amazing example of CTAs and animation.

    This website seems a little negative due to dark scheme, but otherwise it is very nice, I expecially like the animation effect of home page - 'Hope...', 'Compassion...', 'Love...'. The website presents very good example of CTAs as well. This website is smaller than Ontario SPCA and, because of that, the menu items were a little more helpful - Feral Cats Family website is not big eaither. Overall, Angel's Animal Rescue website is well-structured with appropriate use of media, animation and CTAs.

  3 Web Sites

  • Євразія - Evrasia

    The website presents restaurant called Evrasia located in Ukraine. It has wonderfull animation effects and CTAs.

  • Коты-Воители. Знамение Звезд. - Cat-Warriors. The Star Sign.

    This is part of russian website presents information from the book series called Cat-Warriors. This page gives information about characters of the book series and links to a webpages describing each cat.

  • Jim Ramsden

    This is a personal website of Jim Ramsden, designer from UK. He created an amazing, yet simple website that caught my attention with its design and animation.

  3 Web Sites – Technical Information

  • W3 Schools

    "W3Schools is optimized for learning, testing, and training. Examples might be simplified to improve reading and basic understanding. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content"(taken from the W3 Schools website).

  • Stack Overflow

    "We build products that empower developers and connect them to solutions that enable productivity, growth, and discovery"(taken from Stack Overflow website).

  • MDN Web Docs

    "Resources for developers, by developers" - logo of MDN Web Docs describes perfectly the purpose of the website.

• 2.2 Cross Reference Page
• 2.3 Web Site Design

  Horizontal navidational list is present on all pages of the website and fcf_style.css is the css file used to design it(example: Home Page or current page). Moreover, Quick Links are presented on home page to explain purpose of each web page.

• 2.4
  • 2.4.1 HTML5
    1. Appropriate use of HTML5 section elements tags, including the use of semantic HTML5 elements are used in these web pages:
       • Home page - use of article, footer, header, nav and section elements;
       • Current Fosters page - use of article, footer, header, nav and section elements;
       • Best moments page - use of article, footer, header and nav elements;
       • Adoption Information page - use of article, aside, footer, header nav and section elements;
       • Socialization Process page - use of article, footer, header, nav and section elements;
       • Help Us page - use of article, aside, footer, header and nav elements;
       • About page - use of article, footer, header and nav elements.
    2. Images both static and clickable are presented on Home page - two images of cats in first section link to History of Fosters page and Current Fosters page.
    3. Appropriate special characters were used in the footer of each webpage (example: Home page or current page) - 🐈, 🐾, 😸.
    4. The 'meta charset="utf-8"' and 'meta name="viewport" content="width=device-width, initial-scale=1' tags were used in every web page (example: Home page or current page).
    5. Use of the 'address' element, to indicate dynamically when the web site was last updated or modified: Home page.
  • 2.4.2 CSS3
    1. Format the appearance of paragraphs, lists, headers, background images, tables, forms with the use of appropriate CSS3 selectors:
       • Reset styles - styles for paragraphs, lists, headers.
       • General Styles - styles for paragraphs, lists, headers, background images.
       • Styles of History of Fosters page - styles for a table.
       • Styles of Donation Form page - styles for a form.
    2. CSS3 contextual selectors (e1, e2, e3; e f; e > f; e + f) and at least two other attribute selectors, besides class and id attribute selector:
       • General Styles - h1, h2, h3, footer a, header > h1, .dropdown .button.
       • Styles of Home page - section#second > article > img, #first > a img.
       • Styles of Help Us Help Them page - aside + article.
    3. CSS3 styles for color: RGBA & HSLA(Demonstrate that you understand the concept of progressive enhancement):
       • General Styles - body {background-color: rgba(245, 240, 200, 0.8);}, footer{background: linear-gradient(90deg, rgb(110, 142, 19), rgb(5, 49, 0));}.
       • Styles of Socialization Process page - article {background: radial-gradient(rgba(223, 201, 96, 0.9), rgba(223, 201, 96, 0.7), rgba(223, 201, 96, 0.1));}.
       • Styles of Help Us Help Them page - aside {border: 1px double hsl(160, 90%, 60%);}, article {background: radial-gradient(hsla(50, 100%, 80%, 0.1), hsla(50, 100%, 80%, 0.3), hsla(50, 100%, 80%, 0.6), hsla(50, 100%, 80%, 0.8));}.
    4. Appropriate use of dynamic pseudo-classes to highlight hyperlinks states of link, visited, active, hover, including focus and two structural pseudo-classes: first-of-type and last-of-type:
       • General Styles - footer > a:visited, footer > a:link {color: rgb(230, 215, 185);}, .mainmenu a:hover, .mainmenu a:active, .mainmenu a:focus {text-decoration: none; color: white; background-color: rgb(20, 70, 50);}.
       • Styles of History of Fosters page - h3:last-of-type {margin-top: 1.3em;}, table tr td:first-of-type::first-letter {color: grey; font-size: 30px; font-family: cursive;}.
    5. The user of a drop cap created with CSS3 is to be implemented at an appropriate place on your home page: Styles of Homep page - section > p:first-of-type::first-letter {color: grey; font-size: 30px; font-family: cursive;}
    6. Appropriate use of CSS3 background styles (background size, background-clip, background-origin, etc.), padding, margins, borders, including the use of rounded corners:
       • General Styles - html {background: rgb(110, 142, 19) url(forest.webp) center center fixed; background-size: auto 890px;}, body {margin: 0px auto; padding: 0px;}.
       • Styles of Socialization Process page - article > img {border: 1px solid rgb(240, 150, 40); border-radius: 50px;}.
    7. Use of CSS3 page layout techniques with grid, flex, float and positioning are all demonstrated on my website:
       • Styles for Best Moments page - article#video {display: grid;}.
       • Flex stylesheet(any page including current page) - nav ul {display: flex;}.
       • Flex1 stylesheet of Home page - body > #first {display: flex;}.
       • Styles of Socialization Process page - article > img {float: right;}.
       • General Styles - header > h1 {position: relative; left: 45%;}.
    8. CSS3 text, box shadows, transform, rotate, opacity features are applied appropriately on my web site:
       • Styles for Best Moments page - text features: table tr td:first-of-type::first-letter {color: grey; font-size: 30px; font-family: cursive;}.
       • General Styles - transform feature: button:active {transform: translateY(4px);}.
       • Styles of History of Fosters page - rotate feature: tr:nth-of-type(4) td > img {transform: rotateX(180deg);}.
       • Styles of Home page - box-shadow feature: img, a img {box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.3);}, opacity feature: section#first > a img:active, section#first > a img:hover {opacity: 0.8;}.
  • 2.4.3 Web Form:
    1. Appropriate form elements including the use of HTML5 form widgets: Donation Form - a legend, labels, inputs, a select elements.
    2. Appropriate CSS3 styles applied to Web Forms: The Same Form - legend {font: small-caps 2em/2.3em serif; text-shadow: 2px 2px 6px rgb(100, 132, 9);}.
    3. Use of inline form validation with the focus pseudo-class: The Same Form - select:focus, input:focus {background-color: rgba(250, 250, 230, 0.5);}.
  • 2.4.4 Graphical Web Tables:
    1. Styles of History of Fosters page - two tables, Former Fosters and Current Fosters.
  • 2.4.5 Multimedia:
    1. Video elements on my site: Best Moments page - 5 videos, no longer than 30 seconds each.
    2. Appropriate use of CSS3 transitions and animations:Main styles - a {transition: .4s linear;} and div > a {animation-name: animation; animation-duration: 10s;} @keyframes animation {...}
  • 2.4.6 JavaScript
    1. Use of appropriate variables, arithmetic, comparison and logical operators, subroutines, functions, arrays, conditional statements, conditional operators, running time commands with system clock: Home page, Adoption Form, JS fil for Best Moments, JS file for Adoption Form.
    2. Use of system date on your web site: Home page - lastModified, Adoption Form - clock.
    3. Validating appropriate form input by using JavaScript functions: JS file for Adoption Form.
    4. Use of JavaScript alerts for validation purposes: JS file for Adoption Form.
    5. Use of BOM/DOM in emulating events through the use of event handlers - JS file for Best Moments, JS file for Adoption Form, Home page, Adoption Form.
  • 2.4.7 Responsive Design
    1. Your web site design should implement each of the following responsive techniques on different pages on your web site:
       • CSS Grid Layout using the display: grid - Styles of Best Moments page: article#video {display: grid;}.
       • CSS Flex Layout using the display: flex - Flex1 stylesheet of Home page: body > #first {display: flex;}.
       • CSS Positioning - Main styles: header > h1 {position: relative;}.
    2. The use of contextual selectors to control sub level menus, including the use of a navicon image for mobile design is presented on each webpage by Main styles.
  • 2.4.7 Call to Action (CTAs)
    1. Your website must include at least three CTAs, in particular, on the homepage of the website: Home page, Help Us Help Them page.
• 2.5 Web Project Documentation
  • Web Project Documentation