-
The purpose of this website is to encourage women of all age groups that a career in both Software Development and the Tech Industry as a whole, would not only be an amazing journey for them, which would change their lives in so many positive ways, but it would also provide the industry with the much needed diversity they seek to encourage in their workplace enviornments.
-
This website has combined resources from throughout the internet and constructed 3 individualized pathways that are tailored towards women of all ages.
-
There is a learning pathway targeted at younger girls (2nd level and under), that may be unaware that this career path is something that is not only available to them, but is also something that is highly encouraged among the Tech Industry.
-
There is a learning pathway that is targeted at Female College Students which lays out the path most suited for them to follow.
-
There is also a learning pathway tailored to Women who may have only discovered this potential career later in life and who may want to attempt a career change.
- Introduction
- Live Features
- Desired Features
- User Stories
- Concept Map
- Wireframes
- Testing
- Deployment
- Bugs
- Tools used and Coding Inspiration
- Sticky Navbar for Login which implements hover state transitions.
- Intro message on Landing Page.
- Tailored options on Landing Page for Women of all age groups.
- Personalised intro section shown via a JavaScript transition.
- Sign Up Page. Users can register with Username Email Address and Password
- Log In Page. Previous users can Log In with Username Email Address and Password
- Resource Path Section. This is tailored to each of the 3 categories
-
- The learning path should have different levels of difficulty for the user to work through. Currently the users can work through their path but they have no feedback in terms of wwhat they are covering and where they are in relation to working through their overall learning path.
-
- The resources need to be filtered and applied for the learning path need to be individualised to the actual user who signed in. Currently the resources are not tailored to suit each type of user that logs in to work on their learning path.
-
An image slider/carousel has been designed as a possible solution to the issue on the home page where the user cannot toggle on and off the transition content correctly. Currently each button toggles on and off individually but not automatically when another button in the group is clicked.
These colours provide a high level of contrast for users with impaired vison, as confirmed in the testing section below. They also add to the overall goal of creating a clear and engaging design ethos. The colors were chosen in conjunction with the background image to present a smooth, related connection across the application. This helps provide consistency to the overall aesthetic flow of the user experience.
-
As a First Time User - I want to be informed of this site's purpose quickly - So that I am encouraged to stay engaged.
-
As a First Time User - I want an option to sign up - So that if I am interested I can become a member of the site.
-
As a Returning User - I want to be able to log into my account easily - So that I can focus on my goal.
-
As a Parent - I want to information presented well - So that I can encourage my daughter to learn to code.
-
As a Young Student - I want to learn to code in a fun environment - But I don't know where to start.
-
As a Career Changer - I want a flexible learning platform - So that I can learn and work concurrently.
-
As a Woman - I want feel like coding is for me - So that I have the confidence to change career.
-
As a Parent - I need a basic understanding of what coding is - So that I can understand the career paths available to my child.
For the site pages the wireframe preliminary layout designs can be seen below. These were created using Balsamiq:
- Main Page
- User Category Transition Page
 page Hackathon 2022.jpg)
- Login - Register Page
- User Profile and Resources Page
-
The Chrome dev tool - Lighthouse - Tests the overall performance, Accessibility, Web Development best practices and SEO. The following results were confirmed:
The following sites were used to test the web applications responsiveness: Am I Responsive and Media Genesis Responsive Design Checker
The 'Am I responsive generator' result image has been used at the start of this readme file. Please see the image at the top for the results. This page focuses on the following image viewport sizes - Desktop 1600x992px scaled down to scale(0.3181) Laptop 1280x802px scaled down to scale(0.277) Tablet 768x1024px scaled down to scale(0.219) Mobile 320x480px scaled down to scale(0.219). The site results indicate good performance on all viewport sizes.
The Media Genesis page gives the option to test the page on several different viewport screen sizes from Desktop 24 inch 1920 x 1200px resolution all the way down to the mobile viewport size of 320 x 480px. The site performed very well on all viewport size options.
The Wave Accessibilty testing tool was used to check to test the page contrast and accessibilty of the application.
The colour contrast was AAA rated.
JS Hint was used to check the quality and functionality of the JavaScript code. No significant issues were recorded and the rest of the feedback was directed at tidying up the syntax.
All page links and button functionality were tested including ascertaining that all social media links opened in separate tabs and that all icon play buttons were correctly configured and provided the correct feedback to the user, as indicated. The page was stringently put through it's paces.
The most recent iteration of the WebLife application has been deployed via Github pages. The following instructions clarify the process.
- Log in to GitHub, access the specific GitHub Repository - [) (Hover over this link for the complete repository url)
- Click on the 'Settings' icon in the menu below the repository title.
- Click on the Pages option in the settings page menu on the left hand side of the screen.
- Click on the dropdown button "None" and select 'Master' or 'Main' Branch".
- This will cause the page to automatically refresh and a link to the fully deployed site will be displayed towards the top of the page. There may be a brief delay during this process to accomodate Github as it prepares the application for deployment.
Should you wish to 'Fork' or 'Clone' the repository please follow these instructions:
- Forking enables a third party to create a copy of the repository in order to view and/or make changes without affecting the original.
- Log in to GitHub, access the specific GitHub Repository - [)
- Towards the top right of the repository page, underneath the user icon you will find and click the "Fork" Button.
- You will now have successfully created a copy of the original repository within your GitHub account.
- Follow these instructions to create a clone of the repository within your local development environment to make it easier to fix merge conflicts, add or remove files, and push larger commits.
- Log in to GitHub, access the specific GitHub Repository - [)
- Above the file list on the repository page locate and click the 'Code' button (beside the 'Add file' button)
- Copy the provided link depending on your desired option for either 'HTTPS', 'SSH key' or 'GitHub CLI.
- Open Git Bash and change the current working directory to the location where you want the cloned directory to be made.
- Type
git clone, and then paste the specific URL you copied in Step 3.
The following tools, pages and tutorials were invaluable in helping complete this project:
- HTML5
- CSS3
- Javascript
- GitPod
- GitHub
- Chrome Developer Tools. Application testing.
- W3C Markup Validation Service. HTML testing.
- W3C CSS Validation Service. CSS testing.
- JS Hint testing JavaScript code
- Am I Responsive. Responsiveness testing.
- Media Genesis Responsive Design Checker. Responsiveness testing.
- Wave Accessibilty testing tool. Accessibility and Contrast testing.