Wexford Walking Group is a voluntary group of dog owners, who are keen to have other likeminded people join their group. The group meets up regularly for walks, or just to chill out with some coffee and friends, the weekly coffee is always best because there is cake there.
- As a new user
- I want to click on the company name and be taken to the home page.
- I want to click home and be taken to the home page.
- I want to click routes and be taken to the page with route information.
- I want to click beginners and be taken to a page with guidance on how to walk a dog.
- As a returning user
- I want a website that feels familiar but also a website that is quick to navigate to find route options with ease.
- As an accessible new user
- I want a website that is easy to navigate.
- As an accessible returning user
- I want to be able to skip the navigation bar
- HTML: the markup language used to create the website.
- CSS: the styling language used to style the website.
JavaScript was not used on this site, as it was a HTML and CSS only challenge, if JavaScript was allowed for this I would have used an Event Listener and Arrow Function like below to toggle the active class on the hamburger menu
hamgurgerMenu = document.querySelector(".hamburger-menu");
navBar = document.querySelector(".nav");
hamgurgerMenu.addEventListener("click", () => {
navBar.classList.toggle("active");
});
- All links on hover have an animation and cursor pointer has been set to convey that they are hover a link
- All links on focus (tab) have the same animation as hover for tab users to track their location on the page, footer focus outline visible only!
-
A skip to content link is added on every page for accessilbity users to skip the navigation menu for returning users
-
Both light and dark modes are set per user preferances. (see site previews above)
-
Reduced animation used and set per user preferences
-
A hamburger menu has been added as this is an expectation of users for sites
- A feature query is used to automatically change to hamburger menu on supported platforms
- Selection color has been used to carry the branding (on light and dark mode) but also the default blue does not work well with the theme colors
- The waggling animation has been used to attract users attention and to convey the idea of a dogs tail waggling and being happy.
- This animation does not appear for those with reduced animation preferences.
- This animation does not appear for mobile devices to keep site speed fast.
- ABBR has been used to set the context from KM to kilometer
- The newsletter form on this page has a red required outline
- Upon valid input the color changes from red to green to give the visual feedback for the user
The website was designed to be intuitive, and easy to navigate, and to be quick to get to the information needed, with a focus on user system preferences, and accessibility. As this site is for a dog walking group, I also wanted to include fun for the users through animations and interest. The CSS :: selection pseudo element was also styled (for both dark and light modes) as part of this fun and interesting part of the site. On the Index page, the waggling animation was included to represent that of a dog’s tail. The ::after pseudo elements on the navigation links and form buttons were included to add animations to the hover and focus states. The focuses were on these as for me, if the user has a system preference, I believe that as developers we should accommodate these as much as possible. As well as having a high focus on accessibility. As a developer I believe that the internet is for everyone a fundamental belief for me is that if a site is not accessible a step in the development process has been missed, adding accessibility is not an extra step in the process. Examples of where this can be found:
- If the user has a preference set for reduced motion, the animations are slowed down, and overall animation is reduced. This is to reduce animations that can make users nauseous (vestibular dysfunction) to test this in Chrome
- Go to Inspect
- Select the 3 dots beside the X for close
- Select “Run command”
- Search for “Reduced”
- Click the “Do not emulate CSS prefers-reduced-motion”
- Refresh the Index.html page and the “waggling” animation will not appear.
- To undo this open the site in a new tab.
- If the users have a preference set for dark mode, this is considered and the site will load in dark mode, if not, the site will load in light mode. Some styling changes were made for the “waggling” animation to improve contrast on dark mode, as well as the header is coloured for dark mode. To test this change your browser settings to either dark mode or to light mode. The meta tag for color scheme was used so that even if the css style sheet does not load, the background will be that of the theme picked, and will not "jump" from light to dark as the css files load.
- Go to Inspect
- Select the 3 dots beside the X for close
- Select “Run command”
- Search for "light"
- Click on “Emulate CSS prefers-color-scheme: light”
- The colour scheme should change to a white background
- To undo this open the site in a new tab.
- Go to Inspect
- Select the 3 dots beside the X for close
- Select “Run command”
- Search for “dark”
- Click on “Emulate CSS prefers-color-scheme: dark”
- The colour scheme should change to a dark background
- To undo this open the site in a new tab.
- A “skip to content” link is added to every page, this is hidden from view until you tab onto this. This was placed before the branding, and navigation bar, as this designed to give those using screen readers an option of not having to tab through the navigation bar to reach the main section, if you click on this link the page will scroll to the main section. This was not styled as this is intended for screen readers only. This was styled the same as the navigation links as some users have a tab preference, and styling was added for sighted users.
- Focus states were included as well as hover states, so that any link / button animations are also “triggered” by using tab to accommodate tab navigation preferences (using tab key on keyboard) and that they can tell where on the screen that they currently are. This does not apply to the Font Awesome Social Media Icons, but an outline is visible when tab selected.
- Role = List was also used for those on older browsers and screen readers, this is to introduce the user that there is a list of grouped combinations of items.
- ARIA labels were used for the footer links to provide context that the pages open in a new tab. I did not use a “opens in same page” label for navigation links, as a screen reader will announce when the page has been loaded, and this additional context was not needed.
If you are on dark mode already (black background)
If you are already on light mode (white background)
Semantic HTML was also used on this site to provide additional context for accessibility. Overall Semantic HTML elements used:
- Header
- Nav
- Main
- Section
- Footer
- H1
- H2
- H3
- Unordered List (UL) as the list provided did not require an order.
Below you will find a brief explaination for some of my Symantec HTML decisions made
- Index Page
- The section element was not used on these pages as there is only a main “section” on the page and did not want to cause confusion for accessible users. All other pages have a element.
- Routes page
- A strong element was used for the bold text “important that everyone follows them” to provide additional context for screen readers, as I believe that these rules are important for everyone to follow.
- Success page
- The em element was used on the success page for a similar reason, I want to set the same emphasis for accessible and sighted users.
While the user of multiple H1’s per page is allowed, for accessibility purposes I prefer to err on the side of caution and used 1 H1 per page. As well as with my reset.css all User Agent styling was taken away, this was done intentionally as all fonts are the same, and I do not fall into the “it looks like a H1, so I’ll use a H1” mentality.
The site has 3 main colours that are used in a variety of ways brown, black and white. These colours were used to mimic that of a Bernese Mountain Dog to keep the dog theme throughout this site.
The dark theme background colour is decided by the browser and is not part of the colour palette.
As previously mentioned the selection colours were also changed to black background white text / white background black text, depending on the theme used. This was to keep in-line with the branding color choices (default is blue selection which is not part of the branding) To see this simply use your mouse to select text (hold down the click and drag the mouse over the text / ctrl + a)
Notes: When using Wave a number of contrast errors appear
But upon manual verficiation all colors used have passed WCAG AA and WCAG AAA.
The primary font of the site is Roboto, this was used as it has a variety of weights and styles available for the site, and it was chosen as it could be dynamic in weights and styles.
The secondary font of the site is Bebas Neue this was chosen as it is an uppercase font, but also the weight was appealing as a secondary font. I intentionally kept both fonts a Sans-Serif font as to complement each other.
A paragraph length was also used to ensure that no head turning is required to read long sentences on larger screens. Font weights are not heavily prevalent in the site as this is informal, but also as over-relying on weights can reduce their impact.
As a note before we disucss testing.
The hamburger menu was created using CSS :has which is curently only supported in Chrome and Safari (technical preview) see can I use
This was taken into consideration, and I have built the hamburger menu into a Feature Query in CSS, meaning that when Firefox supports :has() it will automatically become a hamburger menu without having to write any new code.
As a fall back for this, browswers that do not support :has() will have the navigation links wrap to the top beside the branding. See images below. This was all a consious decision as browswer support for :has() is currently at 86.93% (see can I use link above) globally and it is a good time for me, to start to push the bounderies with this psuedo class to get a better understanding of it. Also this is a personal project, so I have no issues with being experimental with newer elements, but still being consious of browswer support. But also it was a good time to practice my feature query skills in css (@supports)
As the nav bar is as designed tests some tests will not apply for Firefox and will be marked as not applicable "N/A"
Firefox Menu Screenshot
Chrome Menu Screenshot
| Testing Number | Testing Description | Result Chrome | Result Chrome Mobile | Result Firefox | Result Firefox Mobile | Result Safari Tablet |
|---|---|---|---|---|---|---|
| 1 | Website Loads | Pass | Pass | Pass | Pass | Pass |
| 2 | Wagggling Animation index page does not laod on mobile | Not Applicable | Pass | Not Applicable | Pass | Pass |
| 3 | Wagggling Animation index page does laod on desktop | Pass | Not Applicable | Pass | Not Applicable | Not Applicable |
| 4 | Index page hero image loads | Pass | Pass | Pass | Pass | Pass |
| 5 | Navigation Links go to correct pages (index page) | Pass | Pass | Pass | Pass | Pass |
| 6 | Footer links open in new tab (index pages) | Pass | Pass | Pass | Pass | Pass |
| 7 | Navigation Links go to correct pages (routes page) | Pass | Pass | Pass | Pass | Pass |
| 8 | Footer links open in new tab (routes pages) | Pass | Pass | Pass | Pass | Pass |
| 9 | Navigation Links go to correct pages (beginners page) | Pass | Pass | Pass | Pass | Pass |
| 10 | Footer links open in new tab (beginners pages) | Pass | Pass | Pass | Pass | Pass |
| 11 | Navigation links open in new tab (success pages) | Pass | Pass | Pass | Pass | Pass |
| 12 | Footer links open in new tab (success pages) | Pass | Pass | Pass | Pass | Pass |
| 13 | Skip to content appears on tab (index page) | Pass | Not Applicable | Pass | Not Applicable | Not Applicable |
| 14 | Skip to content appears on tab (routes page) | Pass | Not Applicable | Pass | Not Applicable | Not Applicable |
| 15 | Skip to content appears on tab (routes page) | Pass | Not Applicable | Pass | Not Applicable | Not Applicable |
| 16 | Skip to content appears on tab (sucess page) | Pass | Not Applicable | Pass | Not Applicable | Not Applicable |
| 17 | Skip to content click and enter goes to main (index page) | Pass | Not Applicable | Pass | Not Applicable | Not Applicable |
| 18 | Skip to content click and enter goes to main (routes page) | Pass | Not Applicable | Pass | Not Applicable | Not Applicable |
| 19 | Skip to content click and enter goes to main (beginners page) | Pass | Not Applicable | Pass | Not Applicable | Not Applicable |
| 20 | Skip to content click and enter goes to main (success page) | Pass | Not Applicable | Pass | Not Applicable | Not Applicable |
| 21 | Hamburger menu appears on mobile devices (index page) | Not Applicable | Pass | Not Applicable | Pass | Pass |
| 22 | Hamburger menu appears on mobile devices (routes page) | Not Applicable | Pass | Not Applicable | Pass | Pass |
| 23 | Hamburger menu appears on mobile devices (beginners page) | Not Applicable | Pass | Not Applicable | Pass | Pass |
| 24 | Hamburger menu appears on mobile devices (success page) | Not Applicable | Pass | Not Applicable | Pass | Pass |
| 25 | Nacigation Links Animate on hover and tab / focus desktop only (index page) | Pass | Not Applicable | Pass | Not Applicable | Not Applicable |
| 26 | Nacigation Links Animate on hover and tab / focus desktop only (routes page) | Pass | Not Applicable | Pass | Not Applicable | Not Applicable |
| 27 | Nacigation Links Animate on hover and tab / focus desktop only (beginners page) | Pass | Not Applicable | Pass | Not Applicable | Not Applicable |
| 28 | Nacigation Links Animate on hover and tab / focus desktop only (success page) | Pass | Not Applicable | Pass | Not Applicable | Not Applicable |
| 29 | Join Us Link Animate on hover and tab / focus desktop only (index page) | Pass | Not Applicable | Pass | Not Applicable | Not Applicable |
| 30 | Footer Links Animate on hover desktop only (index page) | Pass | Not Applicable | Pass | Not Applicable | Not Applicable |
| 31 | Footer Links Animate on hover desktop only (routes page) | Pass | Not Applicable | Pass | Not Applicable | Not Applicable |
| 32 | Footer Links Animate on hover desktop only (beginners page) | Pass | Not Applicable | Pass | Not Applicable | Not Applicable |
| 33 | Footer Links Animate on hover desktop only (sucess page) | Pass | Not Applicable | Pass | Not Applicable | Not Applicable |
| 34 | Footer Links Animate on active mobile only (index page) | Not Applicable | Pass | Not Applicable | Pass | Pass |
| 35 | Footer Links Animate on active mobile only (routes page) | Not Applicable | Pass | Not Applicable | Pass | Pass |
| 36 | Footer Links Animate on active mobile only (beginners page) | Not Applicable | Pass | Not Applicable | Pass | Pass |
| 37 | Footer Links Animate on active mobile only (sucess page) | Not Applicable | Pass | Not Applicable | Pass | Pass |
| 38 | Page Responsive for mobile only (index page) | Not Applicable | Pass | Not Applicable | Pass | Pass |
| 39 | Page Responsive for mobile only (routes page) | Not Applicable | Pass | Not Applicable | Pass | Pass |
| 40 | Page Responsive for mobile only (beginners page) | Not Applicable | Pass | Not Applicable | Pass | Pass |
| 41 | Page Responsive for mobile only (sucess page) | Not Applicable | Pass | Not Applicable | Pass | Pass |
| 42 | Dark mode (index page) | Pass | Pass | Pass | Pass | Pass |
| 43 | Dark mode (routes page) | Pass | Pass | Pass | Pass | Pass |
| 44 | Dark mode (beginners page) | Pass | Pass | Pass | Pass | Pass |
| 45 | Dark mode (success page) | Pass | Pass | Pass | Pass | Pass |
| 46 | Light mode (index page) | Pass | Pass | Pass | Pass | Pass |
| 47 | Light mode (routes page) | Pass | Pass | Pass | Pass | Pass |
| 48 | Light mode (beginners page) | Pass | Pass | Pass | Pass | Pass |
| 49 | Light mode (success page) | Pass | Pass | Pass | Pass | Pass |
| 50 | Selection colour light mode (all devices) (index page) | Pass | Pass | Pass | Pass | Pass |
| 51 | Selection colour light mode (all devices) (routes page) | Pass | Pass | Pass | Pass | Pass |
| 52 | Selection colour light mode (all devices) (beginners page) | Pass | Pass | Pass | Pass | Pass |
| 53 | Selection colour light mode (all devices) (success page) | Pass | Pass | Pass | Pass | Pass |
| 54 | Walking Group Wexford branding links to index page (all devices) (index page) | Pass | Pass | Pass | Pass | Pass |
| 55 | Walking Group Wexford branding links to index page (all devices) (routes page) | Pass | Pass | Pass | Pass | Pass |
| 56 | Walking Group Wexford branding links to index page (all devices) (beginners page) | Pass | Pass | Pass | Pass | Pass |
| 57 | Walking Group Wexford branding links to index page (all devices) (success page) | Pass | Pass | Pass | Pass | Pass |
| 58 | Walking Group Wexford branding links cursor pointer on hover (desktop only) (index page) | Pass | Not Applicable | Pass | Not Applicable | Not Applicable |
| 59 | Walking Group Wexford branding links cursor pointer on hover (desktop only) (routes page) | Pass | Not Applicable | Pass | Not Applicable | Not Applicable |
| 60 | Walking Group Wexford branding links cursor pointer on hover (desktop only) (beginners page) | Pass | Not Applicable | Pass | Not Applicable | Not Applicable |
| 61 | Walking Group Wexford branding links cursor pointer on hover (desktop only) (success page) | Pass | Not Applicable | Pass | Not Applicable | Not Applicable |
| 62 | Navigation Links cursor pointer on hover (desktop only) (index page) | Pass | Not Applicable | Pass | Not Applicable | Not Applicable |
| 63 | Navigation Links cursor pointer on hover (desktop only) (routes page) | Pass | Not Applicable | Pass | Not Applicable | Not Applicable |
| 64 | Navigation Links cursor pointer on hover (desktop only) (beginners page) | Pass | Not Applicable | Pass | Not Applicable | Not Applicable |
| 65 | Navigation Links cursor pointer on hover (desktop only) (success page) | Pass | Not Applicable | Pass | Not Applicable | Not Applicable |
| 66 | Footer Links cursor pointer on hover (desktop only) (index page) | Pass | Not Applicable | Pass | Not Applicable | Not Applicable |
| 67 | Footer Links cursor pointer on hover (desktop only) (routes page) | Pass | Not Applicable | Pass | Not Applicable | Not Applicable |
| 68 | Footer Links cursor pointer on hover (desktop only) (beginners page) | Pass | Not Applicable | Pass | Not Applicable | Not Applicable |
| 69 | Footer Links cursor pointer on hover (desktop only) (success page) | Pass | Not Applicable | Pass | Not Applicable | Not Applicable |
| 70 | Abbreviation HTML routes page only hover mouse over KM and leave for a few seconds (desktop only) (routes page) | Pass | Not Applicable | Pass | Not Applicable | Not Applicable |
| 71 | Input Form contains red border for required input (beginners page) | Pass | Pass | Pass | Pass | Pass |
| 72 | Input Form contains green border for valid input (beginners page) | Pass | Pass | Pass | Pass | Pass |
| 73 | Submit button redirects to success page upon valid input fields completed correctly (beginners page) | Pass | Pass | Pass | Pass | Pass |
| 74 | Reset Form button clears all data from form (beginners page) | Pass | Pass | Pass | Pass | Pass |
| 75 | Required Field First Name cannot submit if blank or incomplete (error appears) (beginners page) | Pass | Pass | Pass | Pass | Pass |
| 76 | Required Field Surname cannot submit if blank or incomplete (error appears) (beginners page) | Pass | Pass | Pass | Pass | Pass |
| 77 | Required Field email cannot submit if blank or incomplete (error appears) (beginners page) | Pass | Pass | Pass | Pass | Pass |
| 78 | Submit Button cursor pointer on hover (desktop only) (beginners page) | Pass | Not Applicable | Pass | Not Applicable | Not Applicable |
| 79 | Reset Form button cursor pointer on hover (desktop only) (beginners page) | Pass | Not Applicable | Pass | Not Applicable | Not Applicable |
| 80 | Submit Button animates on hover and focus (desktop only) (beginners page) | Pass | Not Applicable | Pass | Not Applicable | Not Applicable |
| 81 | Reset Form Button animates on hover and focus (desktop only) (beginners page) | Pass | Not Applicable | Pass | Not Applicable | Not Applicable |
| 82 | Iframes Cursor Pointer on hover (desktop only) (beginners page) | Pass | Not Applicable | Pass | Not Applicable | Not Applicable |
| 83 | Iframes play on click (beginners page) | Pass | Not Applicable | Pass | Not Applicable | Not Applicable |
| 84 | Contrast Colour Checker Light Mode (index page) | Pass | Pass | Pass | Pass | Pass |
| 85 | Contrast Colour Checker Light Mode (routes page) | Pass | Pass | Pass | Pass | Pass |
| 86 | Contrast Colour Checker Light Mode (beginners page) | Pass | Pass | Pass | Pass | Pass |
| 87 | Contrast Colour Checker Light Mode (success page) | Pass | Pass | Pass | Pass | Pass |
| 88 | Contrast Colour Checker Dark Mode (Index page) | Pass | Pass | Pass | Pass | Pass |
| 89 | Contrast Colour Checker Dark Mode (routes page) | Pass | Pass | Pass | Pass | Pass |
| 90 | Contrast Colour Checker Dark Mode (beginners page) | Pass | Pass | Pass | Pass | Pass |
| 91 | Contrast Colour Checker Dark Mode (success page) | Pass | Pass | Pass | Pass | Pass |
| 92 | Wexford Walking Group Title appears (index page) | Pass | Pass | Pass | Pass | Pass |
| 93 | Wexford Walking Group Title appears (routes page) | Pass | Pass | Pass | Pass | Pass |
| 94 | Wexford Walking Group Title appears (beginners page) | Pass | Pass | Pass | Pass | Pass |
| 95 | Wexford Walking Group Title appears (success page) | Pass | Pass | Pass | Pass | Pass |
| 96 | Site favicon loads appears (index page) | Pass | Pass | Pass | Pass | Pass |
| 97 | Site favicon loads appears (routes page) | Pass | Pass | Pass | Pass | Pass |
| 98 | Site favicon loads appears (beginners page) | Pass | Pass | Pass | Pass | Pass |
| 99 | Site favicon loads appears (success page) | Pass | Pass | Pass | Pass | Pass |
Notes on the contrast this has also been verified by a person who has partial colour blindness and all words were legible (both light and dark modes)
HTML Code has been validated with no errors, and 2 warnings regarding Role = list
CSS Code has been validated with errors, but this is due to the dynamic nature of custom properties in CSS, This appears to be an issue with Jigsaw validation and not a code error.
For mobile the performance has been measured as 88, this is primarily due to the static hero image that loads on the home-page, which a site of 32 KiB. While loading="lazy" attribute could be used here for desktop the image loads in view and it is best practice to not have unneccasry lazy load. The picture has been compressed as much as possible without losing too much quality, and any further compression of the image would have an incredibly poor quality introduction to the site, and would not encourage users to progress beyone the index page.
First Contentful Paint score = 2.5s.
Largerst Contentful Paint = 2.7s.
While this is being flagged as a "warning" in lighthouse, the best practice for loading is less than 3 seconds, as this is the average length of time users will wait for a page to load, as this site loads in 2.5s - 2.7s this is still within the average length and this performance would likely not deter the average user away from the site.
Accessiblitiy: For this site on mobile this score is due to the empty label for checkbox, while I agree that JavaScript is best used for toggling classses (see above) this is a personal site and learning more on CSS :has() was a priority for me for this site.
If this were a fully production site JavaScript would be used for the Hamburger naviation (which would have an accessiblity score of 100%)
Performance has declined for this page due to iFrame but is still within the 3 seconds so no further action was taken
No scores to discuss for desktop.
Index Page
Routes Page
Beginners Page
Index Page
Routes Page
Beginners Page
- Image Compressor
- SVG 404 Page
- Dog Favicon
- Google Fonts - Bebas Neue
- Google Fonts - Roboto
- Facebook Social Media Link image (footer)
- Twitter Social Media Link image (footer)
- YouTube Social Media Link image (footer)
- Instagram Social Media Link image (footer)
- Poop Emoji used in rules page
- Paw Icon used in link and buttons
- Andy Bell CSS Reset
- Balsamiq - wireframes
- Home Page Hero Image
- Google Lighthouse
- Routes Image 1
- Routes Image 2
- Routes Image 3
- Fenrir Canine Video 1
- Fenrir Canine Video 2
- Web Dev Simplified Hamburger Menu
- PNG to ICO Converter
- Coolors
- Darrach Barneveld - Classmate for feedback and testing
- Artem Marych - Classmate for feedback and testing
- Izabella Lopes - Classmate for feedback and testing
- Aleksei Konovalov - for being an excellent mentor through this, and providing guidance.
- Last but not least - my better half Chloe, and Oscar for being an absolute rock and inspiration. Thank you!
The website was deployed using GitHub Pages:
- In the GitHub repository navigate to the Settings tab
- On the left-hand menu select Pages
- For the source select Branch: master
- After the web page refreshes automatically you will see a ribbon on the top saying: Your site is live at https://shane-donlon.github.io/ci-project-1/index.html
You can for fork the repository:
- Go to the GitHub repository
- Click on Fork button in the upper right-hand corner
- Edit the repository name and description if desired
- Click the green create fork button
You can clone the repository:
- Go to the GitHub repository
- Locate the green Code button above the list of files and click it
- Select if you prefer to clone using HTTPS, SSH, or Github CLI and click the copy button to copy the URL to your clipboard
- Open Git Bash
- Change the current working directory to the one where you want the cloned directory
- Type git clone and paste the URL from the clipboard ($ git clone https://github.com/YOUR-USERNAME/YOUR-REPOSITORY)
- Press Enter to create your local clone.
- You can run this repository locally:
- Go to the GitHub repository
- Locate the green Code button above the list of files and click it
- From the dropdown menu select download Zip.
- Download and open the zip file to run in an editor
| Learning Outcome | Achieved |
|---|---|
| Design a website that incorporates a main navigation menu and a structured layout | Navigation on all pages |
| Design a website that meets accessibility guidelines (e.g. contrast between background and foreground colours, non-text elements have planned alt text equivalents to cater for the visually impaired) | See screenshots below While there are contrast issues with normal text, the text in the brown and white is considered large text. |
| Design the organisation of information on the page following the principles of user experience design (headers are used to convey structure, information is easy to find due to being presented and categorised in terms of priority) | h1 h2 h3 styling has been used correctly |
| Ensure that foreground information is never distracted by backgrounds | This has been confirmed by testers of the site |
| Include graphics that are consistent in style and colour | All images used are consistent |
| Design the site to allow the user to initiate and control actions such as the playing of audio/video. | iFrames do not auto play and user has control |
| Create a website of at least three pages, or (if using a single scrolling page) at least three separate page areas to match the design and to meet its stated purpose | site currently has 4 pages |
| Write custom HTML code that passes through the official W3C validator with no issues. | Explained Above |
| Write custom CSS code that passes through the official (Jigsaw) validator with no issues | Explained Above |
| Incorporate images that are of sufficient resolution to not appear pixelated or stretched | This has been confirmed during testing |
| Code all external links to open in a separate tab when clicked | All footer links open in a new tab iFrame is inline, but can be opened on a new page |
| Use CSS media queries across the application to ensure the layout changes appropriately and maintains the page's structural integrity across device screen sizes. | Site is responsive on mobile / tablet |
| Use Semantic markup to structure HTML code | |
| Present the finished website with clearly understandable site-specific content, rather than Lorem Ipsum placeholder text | All content is new and no placeholder |
| Implement clear navigation to allow users to find resources on the site intuitively. | This has been confirmed during testing |
| Deploy a final version of the code to a cloud-based hosting platform (e.g. GitHub Pages) and test to ensure it matches the development version | GitHub Pages has been used to deploy site |
| Use Git & GitHub for version control of an interactive web application up to deployment. | Confirmed as used with over 100 commits |
| Remove commented-out code before pushing final changes to version control and deploying. | Comments exist but not coded |
| Ensure that there are no broken internal links | Confirmed in testing |
| Insert screenshots of the finished project in the README | Confirmed |
| Write a README.md file for the web application that explains its purpose, the value that it provides to its users, and the deployment procedure. | Confirmed |
| Insert screenshots of the project features, give a brief description of what each feature does and explain its value to the user. | Confirmed |
| Attribute all code from external sources to its original source via comments above the code and (for larger dependencies) in the README. | Confirmed |
| Clearly separate and identify code written for the website and code from external sources (e.g. libraries or tutorials) | Confirmed external code is in reset.css file or accredited in the readme |
| Organise HTML and CSS code into well-defined and commented sections | Confirmed |
| Place CSS code in external files linked to the HTML page in the HEAD element. | Confirmed |
| Write code that meets at least minimum standards for readability (consistent indentation, blank lines only appear individually or, at most, in pairs) | Confirmed |
| Name files consistently and descriptively, without spaces or capitalisation to allow for cross-platform compatibility. | Confirmed |
| Group files in directories by file type (e.g. an assets directory will contain all static files and may be organised into sub-directories such as CSS, images, etc.) | Images in assets folder, css in assets folder, read me in documentation folder |
| Use consistent and effective markdown formatting to produce a README file in English that is well-structured, easy to follow, and has few grammatical errors. | Confirmed |
- Index page
- Routes page
- Beginners page
- Success Page
- Error 404 page
- Index page
- Routes page
- Beginners Page
- Success page
- Error 404 page
