1. Project Requirements
2. Purpose
3. Planning & Development
4. Deployment
5. Use of AI
6. Credits
| Area | Criteria |
|---|---|
| 🌐 1. Front-End Design | i. Build a one-page layout with a main nav menu. ii. Use HTML + CSS (or Bootstrap) for structure + responsiveness. iii. Follow accessibility rules: a. Proper colour contrast. b. Alt text for images. c. No WCAG (Web Content Accessibility Guidelines) errors. iv. Use media queries, Flexbox, Grid, or Bootstrap to make it work on all screen sizes. v. Use semantic HTML for clear structure. |
| 🧠 2. User Experience (UX) | i. Organise content clearly with headings that guide users. ii. Prioritise information to make key content easy to find. iii. If media is included (e.g., video), user must control it and get immediate feedback. |
| 💻 3. Validation | i. All code must pass W3C and Jigsaw validators ii. Layout must remain functional and consistent across devices. iii. Navigation must be intuitive and smooth. |
| ☁️ 4. Deployment | i. Ensure the deployed version matches the dev version. ii. Use Git/GitHub: a. Clear commit history. b. Clean, commented code. c. No leftover commented-out code. iii. All internal links and interactive elements must work. |
| 📄 5. Documentation | i. Create a concise README.md: a. Purpose of the app. b. Who benefits and how? c. How to deploy it. ii. Include screenshots + feature descriptions. iii. Attribute any code you didn’t write. |
| 🤖 6. AI Integration | i. Mention where you used AI to generate code. ii. Reflect on AI’s help with debugging and performance optimisation. iii. Discuss how AI tools affected your workflow (briefly, don’t write a novel). iv. Put these reflections in your README. |
| User Type | Brief |
|---|---|
| 💁🏾 External User’s Goal | The user seeks clear, easy-to-understand information on safeguarding practices, including how to recognize and respond to safeguarding concerns. |
| 🧑🏻💼 Site Owner’s Goal | The site owner wants to create a straightforward webpage that outlines the key principles of safeguarding using clear, structured content with basic HTML and CSS. The layout should be simple and intuitive, making the information easy to access and understand. |
The general purpose of the website is to educate and inform people on safeguarding practices so it needs to be concise and easy to follow; so the layout needs to be compact and small chunks of highly dense information. Delivered in a cool and friendly manor. The website has an embedded video too to watch for eductation.
The value to the user is that information regarding safeguarding and its practices are quick and easy to access. There is also a newsletter and report form so the user can seek more additional resources while not having to access any additional sites or pages.
Link to desktop image in repo: https://github.com/etherOnGitHub/solo-project-safeguarding/blob/main/assets/readme/Wireframe-desktop.webp | Link to mobile image in repo: https://github.com/etherOnGitHub/solo-project-safeguarding/blob/main/assets/readme/Wireframe-mobile.webp
The wireframes helped visualise how the design may look and I did deviate from it a bit but I think in a positive direction, a more interesting direction.
Mobile is the largest audience to target so it makes sense to build websites with mobile in mind first.
Link to image in repo: https://github.com/etherOnGitHub/solo-project-safeguarding/blob/main/assets/readme/main-page-mobile-collapse.webp | Link to image in repo: https://github.com/etherOnGitHub/solo-project-safeguarding/blob/main/assets/readme/main-page-mobile-footer.webp
As you can see the website collapses down into a single column for scrolling and has a navbar at the top that collapses down to see the main headings on the page. This means that it is very easy to navigate all the elements even withing the restricted screen space. The footer contains external links to other pages that could be set up for the organisation.
Desktop view consolidates all the sections of the page into a wider view range, with the central column being the largest to fit a video within the column. The elements align across the page making use of grids to condense the information on a wide screen.
Link to image in repo: https://github.com/etherOnGitHub/solo-project-safeguarding/blob/main/assets/readme/main-page-mobile-collapse.webp | Link to image in repo: https://github.com/etherOnGitHub/solo-project-safeguarding/blob/main/assets/readme/main-page-mobile-footer.webp
Link to image in repo: https://github.com/etherOnGitHub/solo-project-safeguarding/blob/main/assets/readme/website-examples-proj-1.webp
Both validators used in the credits passed my code.
GitHub Copilot was used during the creation of this website, used as a tool for assisting in creation of content and not as a replacement for building the website. AI is good for assisting but often makes vital mistakes and errors along the building process.
ChatGPT was used to generate images for the content as well as help generate some body text that is concise and informative, it refined the text given to be short and to the point in some cases.
An example use case of AI is to sidestep creating the folders and file structures to save time on menial tasks to focus more on development. It is quite reliable at creating these structures for you but it can sometimes, if you dont specify it not to, can generate a javascript folder or name soemthing wrong so its best to specify what you need with it.
Link to image in repo: https://github.com/etherOnGitHub/solo-project-safeguarding/blob/main/assets/readme/AI-generate-boilerplate.webp
AI is great at squashing syntax errors without wasting 5 minutes reading line by line throught the code. This increase my workrate exponentially as any syntax errors are immediately detected.
Link to image in repo: https://github.com/etherOnGitHub/solo-project-safeguarding/blob/main/assets/readme/AI-bugfix-example.webp
Some generated images needed further cropping to resolve issues with the navbar element.
Link to image in repo: https://github.com/etherOnGitHub/solo-project-safeguarding/blob/main/assets/readme/AI-picture-need-crop.webp
Identified the text area property for Bootstrap to make the radius 0.
Link to image in repo: https://github.com/etherOnGitHub/solo-project-safeguarding/blob/main/assets/readme/AI-border-radius-textarea.webp
I encountered an error with the program where it wouldn't engage with the issue, this only happened rarely and when it did it was a case of changing how the prompt was worded.
Link to image in repo: https://github.com/etherOnGitHub/solo-project-safeguarding/blob/main/assets/readme/AI-problems.webp
Occasionally the transormer model would just not fix the issue despite accurate instructions given, usually to do with styling. It can also introduce bugs when it adds a section of code to your work, in those cases I usually would delete the code and proceed manually.
AI definitely has its use cases as a tool to speed up the menial work in coding, whether thats creating forms and tables or columns and sections. It does this with ease and most of the time great accuracy. I find its used best to tackle specific issues that have been given context to help 'guide' its methodology. Often I find myself renaming the ID selectors it uses or the field names it creates. Styling is a lot easier done by hand in most cases, although, since I am yet to learn JavaScript (as of writing) it has helped with some rudimentary JS queries.