NewbieToNinja is a website that provides information about becoming a Jr. Developer. It is primarily targeted at members of the public who are looking to start a career in tech/full-stack development. Users of the site will be able to take a quiz on the subject of full-stack development and find some little mini projects to have a go at by themselves. The theme of the website is based around a ninja training dojo as a place to learn and practice coding with the aid of a master (a ninja coder named DOMo).
The site layout was created using wireframes and done in Canva
A minimal and clean layout was chosen to avoid any overstimulation on the understanding that neurodivergence is a common occurence within the tech community.
The website uses relatively bright colours with some darker ones used for both contrast and accessibility. The aim was to keep the colour scheme as light and friendly as possible as we want users to associate positivity with their desire to learn to code.
The colour palette was selected by utilising both ChatGPT and Coolors. The colours were chosen for their aesthetic appeal and readability. Colours chosen were:
- #263238 Primary Colour - Deep blue-grey: complements coding-photo backgrounds, modern and tech-focused.
- #1a1a1a Secondary Colour - Near-black for strong text contrast.
- #797979 Tertiary Colour - Light gray for hovered buttons etc.
- #d84315 Accent Colour - Highlight colour, used for incorrect answers.
- #4bad3c Accent Colour Two - Another highlight colour, for correct messages.
- #ffffff Background Colour - Pure white for maximum readability.
Typography and Font Awesome libraries were used for typography and iconography.
Primary Font - Used for Headings.
Secondary Font - Used for body text.
Font Awesome was used for icons used in the footer and elsewhere.
There are plans for some future development in the form of:
- Updating the Javascript in the timer to the latest version.
- Adding another two pages (already underway)
- one to provide some tips to newbie developers
- the other which will contain a "day in the life of a developer" where users will be able to look over the notes or annecdotes written by real developers during their day to day work.
- HTML used for the main site content.
- CSS used for the main site design and layout.
- JavaScript used for auto-closing the responsive burger menu.
- Git used for version control. (
git add,git commit,git push) - GitHub used for secure online code storage.
- GitHub Pages used for hosting the deployed front-end site.
- Google Fonts used for fonts on the site.
- Coolors used to generate contrasting and complementary colors
AI such as Chat GPT and Co-pilot was utilised during the project for several functions including tutorials, generation of content and development as well as:
- Image generation, e.g. the ‘DOMo’ character used on the website and ‘dojo artwork' in the header.
- Brand ideas for 'NewbieToNinja, including the name, colour palette and font suggestions.
- Fixing ‘crisis-point' issues, such as the timer on the quiz page which was showing issues. Co-pilot recognised the issue and provided a hot fix with very little changes to the code.
- Debugging in VS Code, finding hard to spot issues such as duplication and formatting problems.
Testing has been completed by using:
- GitHub Co-pilot to assist with debugging during the coding stages.
- W3 validator for validating the HTML pages
- Jigsaw CSS validator for the CSS aspects
- JSHint for validating the Javascript
- There are some issues in JSHint with the Javascript as some of the JS was developed using references from an older version.
- The deployed project was tested with the Lighthouse audit tool to check for any issues.
The site was deployed to GitHub Pages. The steps to deploy are as follows:
- In the GitHub repository, navigate to the Settings tab
- From the source section drop-down menu, select the Main Branch, then click "Save".
- The page will be automatically refreshed with a detailed ribbon display to indicate the successful deployment.
The live depolyed site can be found Here
This project can be cloned or forked in order to make a local copy on your own system.
You can clone the repository by following these steps:
- Go to the GitHub repository
- Locate the 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 or Terminal
- Change the current working directory to the one where you want the cloned directory
- In your IDE Terminal, type the following command to clone my repository:
git clone https://github.com/FollowRob/Team01_Hackathon.git
- Press Enter to create your local clone.
By forking the GitHub Repository, we make a copy of the original repository on our GitHub account to view and/or make changes without affecting the original owner's repository. You can fork this repository by using the following steps:
- Log in to GitHub and locate the GitHub Repository
- At the top of the Repository (not top of page) just above the "Settings" Button on the menu, locate the "Fork" Button.
- Once clicked, you should now have a copy of the original repository in your own GitHub account!
| Participant | Description |
|---|---|
| Mamta Oli | |
| Sean Matthews | |
| Michael Owen | |
| Alex Riley | |
| Rob Smith |