The Career Changers is a fictional career coaching service that offers guidance and support to clients hoping to change their careers. The idea for this project came to me as I was going through this transition myself and thought it could be interesting to create a service for others in the same situation. Instead of only relying on articles, podcasts and opinion pieces, I liked the idea of building a coaching service that would help guide young clients throughout their transition by pairing them to a coach with experience in their specific field.
This was the first of four Milestone Projects that made up the Full Stack Web Development Program at The Code Institute. The main requirements were to make a responsive and static website with a minimum of three pages using HTML5 and CSS3.
Click here to view the project live.
-
To fill a gap in the careers coaching market, by specifically appealing to younger clients who might feel unsure of where to begin and would like to find a source of guidance throughout this process.
-
To make The Career Changers service seem credible, by creating a design that was both streamlined and professional.
-
To make it easy for users to quickly navigate their way to the 'Contact Us' page to potentially increase the client base for the fictional business owners.
-
To create a design that would be fully responsive on all devices and screen sizes.
-
I am a user who wants to change career path at an early stage in my career. I need to be convinced that this career counselling service can meet my needs and that they are reliable. I also want to easily navigate my way through the website before making the decision whether to contact this company or to continue my search online.
-
I am a user who works for a competing career counselling service. I want to know what this company offers, including their price and package details.
-
I am a user who is still unconvinced about whether I might need support as I change my career. I want to get into contact with The Career Changers as I have come across their profile on LinkedIn and am curious about their services. I want to reach out to them and schedule a call for more information.
-
I am a user who primarily uses an iPad Pro to browse websites. I want to have a good experience on this website and view all the features in an equally aesthetic way.
-
I am one of the owners of The Career Changers. I want a website that will provide information about our services, attract potential clients by seeming welcoming and increase the number of people who get in touch with us.
-
I began the design process by outlining the key features that I wanted my website to have and thought about what might be the most intuitive way to navigate through each page. This led me to decide on the four pages I would have on my website: 'Home', 'About Us', 'Our Services' and 'Contact Us'.
-
The first major design decision was to keep the home page as clear and streamlined as possible, with a large hero image and a gripping title that would engage the user straight away. I had a rough idea of what I was looking for (namely, someone who looked pensive at work) and when I came across this image I knew that it could form the basis of the rest of my design.
-
I started a workspace on Figma and began experimenting by making a wireframe. I tried using different colours, fonts and structures for my four pages. All of the colours for this project were ultimately taken from this original image, including the light blue (#dce3ed) and light brown (#7a7573) that are paired together throughout the design project. I also found the two fonts that I would use consisteny, as I thought they worked well together to come across as credible and yet also unintimidating for an audience that includes young professionals: Open Sans and Nato Sans KR.
-
I continued to make changes to my original design idea throughout the project. I designed the logo after I had started builing the website and added more content about the founders than initially intended. I also made a significant change to the structure of the 'About Us' page as I thought that would provide a better user experience (this can be seen by observing my wireframe below with the design of the finished project).
Note: Throughout the design process, I kept referring back to my original 'Main Aims' and 'User Stories' to make sure that my project was developing as intended.
Design for desktop devices:
Design for mobile devices:
Design for tablet devices:
The entire workspace can be viewed on Figma with this link.
This project has four separate pages, each found by clicking on the corresponding name on the menu.
- A menu header with The Career Changers logo on the left (which leads a user back to 'Home' when clicked) and links to the other pages on the right.
- The footer is also consistent across all pages with links to social media profiles there.
- The main title across the hero image slides into view from the right.
- The 'Schedule call' button brings the user directly to the 'Contact Us' page.
- Three quick reasons why a user should use this service with icons to represent each one.
- Three interactive images of the founders that transition into full colour when hovered over.
- A short overview of the company, including how and why it was founded.
- More details about why a client should use this particular service.
- A bulletpoint list of what is included in the price.
- Another 'Schedule Call' button to lead the user directly to the 'Contact Us' page.
- Contains a form that the user fills in; all fields have to be completed to submit the form.
- On submission, a modal message appears to confirm their submission.
-
I considered adding a section with reviews from previous clients. This could be something that the business owner might add in the future.
-
With technology that extends beyond the scope of this project, it could be interesting to add a member's section to the website where current and previous clients could log in to share ideas, chat and offer each other support.
-
Another additional feature that goes beyond the scope of my first project would be to include a feature to get in touch with the support team directly by logging in to the member's section.
- HTML5
- The language used to create the form and add content to the website.
- CSS3
- The language used to style the HTML5 elements according to the design colour scheme.
- Bootstrap framework
- I decided to use Bootstrap's grid container system as I wanted to design my project with a 'mobile first' approach.
- Figma
- Figma helped me crystalise my design ideas, including colour scheme, font style, image placement and overall page layout.
- FontAwesome
- I relied on five free FontAwesome icons for my design project.
- Pexels
- This was the source of all of the images in my project.
- TinyPNG
- I used TinyPNG to compress my image files to try to reduce the loading time for each page.
- Google Fonts
- I used one Google Font to create my logo and two more to style the content of the website.
- Gauger Fonticon Generator
- This free interactive Fonticon Generator allowed me to create a fonticon with a Font Awesome icon and style it with the colours from my colour scheme.
- W3C Markup Validation Service
- This was a great tool throughout the project to test my HTML and CSS code.
- W3C Schools
- I've refered to WSC Schools several times whilst building my project, especially when designing the modal for my contact form, as described here.
- Stack Overflow
- Although it isn't a technology, I found a lot of guidance on Stack Overflow and used this page to help me make images interactive on hover.
Based on the User Stories listed above:
-
This user has already decided they want to change their career before they arrive at the home page. By chronologically following the items in the menu they learn more about the founders of the company, its history, what they specialise in and what is included in the price. Eventually they reach the 'Contact Us' page and submit their form to get in touch.
-
The employee of a competitor reaches their goal with one click by going to 'Our Services' and scrolling down to the details about the package and price.
-
The unconvinced user may spend more time on the website, checking the details on each page, including the social media links. Several buttons throughout the website would take them to the 'Contact Us' page when they are ready, where they can submit the form to get more information.
-
All elements of the website are responsive on smaller screens, so the design is still visually appealing on the user's iPad Pro.
-
The owner would notice that the website has a consistent design and branding throughout and that it provides information about the services. They would see that the 'Contact Us' page would let their customers get in touch with them.
My code documents passed the following tests:
I manually tested the website on the following web browsers, checking that buttons, responsiveness and design worked as planned:
- Google Chrome
- Mozilla Firefox
- Apple Safari
I manually tested the live project by doing the following:
- Using Google Developer Tools to view the project on devices with different screen sizes.
- Asking for feedback from friends and family who opened and interacted with the project on their devices.
Initially I had planned on using a modal message to thank the user for submitting their details on the 'Contact Us' page. I implemented this and styled it to suit the overall design of my project (the code for that can still be seen in earlier versions from 21/05/2020, found in my commit history.) However, I noticed that this was not working correctly as the modal would show the success message even when a user had not fully completed the form.
As I did not yet have the knowledge to correct this with JavaScript (the project was built with HTML5 and CSS3), I changed my design to include a short message on submit instead. Courtesy for help with this goes to my fellow students from the Code Institute Slack community.
With later projects, I would try to implement a function to prevent this from happening in a similar situation.
I created my project on GitHub and used GitPod's development environment to write my code.
To make my project viewable to others, I deployed my project to GitHub Pages with the following process:
- I opened the 'Settings' section of my project repository in GitHub.
- From there, I scrolled to the 'GitHub Pages' section.
- Here I selected 'master branch' as my Source.
- This deployed my project on GitHub Pages and allowed me to share the live website with others.
Use the following link to view my live project: The Career Coachers
More information about this process can be found on the following link: Configuring a publishing source for your GitHub Pages site
If you would like to work on my project further you can clone it to your local machine using the following steps:
- Scroll to the top of my repository and click on the "clone or download button"
- Decide whether you want to clone the project using HTTPS or an SSH key and do the following:
- HTTPS: click on the checklist icon to the right of the URL
- SSH key: first click on 'Use SSH' then click on the same icon as above
- Open the 'Terminal'
- Change the current working directory to the location where you want the cloned directory
- Type 'git clone', and then paste the URL you copied earlier.
- Press 'Enter' to create your local clone.
You can find both the source of this information and learn more about the process on the following link: Cloning a Repository
The content of this website is entirely fictional and written by myself. The images are from Pexels and are referenced below.
The images were all taken from Pexels with the following links:
-
Home page
-
About Us
-
Our Services
-
Contact Us
Thank you to the following people who helped with support, inspiration and guidance at different stages in the project:
- My mentor Seun Owonikoko
- Code Institute mentor Simen Daehlin
- My classmate Marcel Balint
- The supportive Code Institute community on Slack
- My family and friends for their patience and honest critique throughout