There is a tension in the tech world that has accelerated rapidly in recent times. As the world becomes more tech-led, the demand for tech skills has increased drastically. Businesses are now struggling to hire the right skillsets.

At the same time, bootcamp and university graduates are struggling to secure their first roles. Graduates are often told that they lack experience and it is not uncommon to see entry level roles being advertised as requiring 2-5 years' experience.

Each of these problems are each others' solutions. There is not a shortage of candidates for tech roles, but there is a gap in the experience level that new graduates have, and the experience level that businesses want and expect.

This is only exacerbated by the fact that candidates rarely ever receive meaningful, constructive feedback from unsuccessful applications. This means they simply do not know what to do to improve their chances of success.

Volanto is on a mission to change this.

Young people and career changers are at risk of becoming a generation whose skills are lost. When the industry is in such desperate need of talent, we cannot let this happen.

The Launchpad Scheme is designed to help people who are starting out in their technology careers, or looking to jump up the career ladder. The scheme pairs promising tech talent with an established tech professional who mentors them.

This website provides potential applicants with an online route to apply to the scheme, and with information to help them decide whether the scheme is right for them.

Users of this site will primarily be potential applicants to the Launchpad programme, which may include:

• People who are considering starting a career in tech.
• People looking to change careers.
• People looking to advance their tech careers.

We may also have Volanto clients looking at the site in order to understand more about Volanto's culture and brand values.

Primarily, therefore, the site must cater to potential applicants, whilst also maintaining an appropriate brand that reflects Volanto's values.

The application form is the call to action and must be easy to find and use.

• As a potential Launchpad applicant, I want to understand more about the Volanto Launchpad programme, so that I can understand how it might help me.
• As a potential Launchpad applicant, I want to understand what benefit previous mentees have gained from the programme, so that I can decide whether or not to apply
• As a potential Launchpad applicant, I need to be able to contact Volanto, so that I can get answers if I have any further questions.
• As a potential Launchpad applicant, I need to be able to easily navigate the site, so that I can quickly decide whether to apply.
• As a potential Launchpad applicant, I need to be able to apply to the Launchpad programme, if I wish to proceed.

• As an existing Volanto client, I need to be able to gain a more indepth understanding of the Launchpad programme, so that I can better understand Volanto's brand values.
• As an existing Volanto client, I need to be able to understand how Volanto has helped people in the past, so that I can better understand the impact Volanto is having.
• As an existing Volanto client, I need to be able to contact the Launchpad team, so that I can follow up with any further questions.

The colour scheme was chosen to reflect the brand values of Volanto and the Launchpad Programme. Modern, futuristic, and unusual. Reminiscent of the neon lights of Tokyo and the film Bladerunner: worlds where technology reign.

I selected the following colours:

• Navy blue: #100B44
• Violet: #e60073
• Vivid pink: #b414f3
• Green: #39c21a

The colour pallette is shown below:

I also used a glow function when hovering over buttons to tie in with the neon theme.

The preferred font is Nunito, with Helvetica as the web-safe font and Sans-serif as a fallback font. Nunito was imported from Google fonts.

Nunito was chosen because it is easy to read but also has a modern feel, which sits well with the brand values.

Images are designed to reflect the theme of a future reigned by tech. They are bold, vivid, full of energy.

The header image was created by me, in Canva. The testimonial portrait images were taken from the Snappa image library.

To design my site I hand-sketched a set of low-fidelity wireframes. This was to assist me in planning the content and layout of elements on the page.

The wireframe for the home page is shown below:

The wireframe for the programme page is shown below:

The wireframe for the application page is shown below:

The wireframe for the testimonials page is shown below:

The wireframe for the contact page is shown below:

• Responsive Navigation Bar

  • All pages on the Volanto Launchpad site feature a responsive navigation bar which provides links to the Home, Programme, Application, Testimonial, and Contact pages.
  • The navigation bar displays in full width at all times.
  • When the site is viewed on a large device (desktop or laptop), the navigation links are displayed horizontally across the navigation bar.
  • When the site is viewed on a smaller device (mobile or tablet), the navigation links are displayed in an expandable/colapsible hamburger menu.

On desktop:

On mobile (expanded):

On mobile (collapsed):

• Header Image

  • The Header, which is displayed on all pages, includes a large image consisting of a diagonal ombre gradient in Volanto's brand colours. The word "Soar" is displayed in large text on top of the image.
  • This feature provides a bright and uplifting image that is intended to inspire visitors to the site to take positive action to achieve their career goals.
  • It is also designed to evoke images of a technology-driven future.

On desktop:

On mobile:

• Highlighted Features on Home Page

  • The home page highlights three features of the website which will be most useful and informative for potential applicants.
  • Calls to action are used to encourage the user to explore these highlighted features.
  • Eye catching icons are also highlighted to encourage users to click on these.
  • The signature glow effect is also shown when the user hovers over a call to action to indicate that it is a link.
  • These features are responsive so are displayed horizontally on a large device, or vertically on a small device.

The highlighted features are:

• Discover the programme which links to the programme.html page;
• Explore the impact which links to testimonials;
• Apply to Launchpad which links to the application form.

On desktop:

On mobile:

• The Footer

  • The footer section includes links to the relevant social media sites for Volanto Launchpad. The links will open to a new tab to allow easy navigation for the user.
  • The footer is valuable to the user as it displays the relevant social media platforms that they can use to stay connected to Volanto.
  • It also displays copyright information for the site.
  • The footer is sticky so that it is always visible at the bottom of the page. Where the page is smaller than the screen, it will display at the bottom of the screen.

On desktop:

On mobile:

• Programme page

  • This page will allow users to understand the purpose of the Volanto Launchpad, who it is for (and therefore whether it will be suitable for them), and what they will need to do if they successfully apply.
  • It is laid out so that the text alignment is justify, but the text is centered in the middle of the screen.
  • On large devices, the content takes up just 50% of the screen to reduce the distance that the readers' eyes have to travel across the screen.
  • On mobile devices, this increases to 66% of the screen to account for a smaller device.

On desktop:

On mobile:

• Application Form

  • Users who wish to benefit from the Volanto Launchpad programme will need to apply to the programme.
  • To make this easy for potential applicants, the site provides an online application form.
  • All fields on the form are required to ensure the applicant can be properly contacted, and to encourage them to enter sufficient information to allow Volanto to make a fair decision on whether to accept them to the programme or not.

On desktop:

On mobile:

• Testimonials Page

  • The testimonials page adds value for potential applicants by allowing them to see what benefit previous participants got from the Launchpad programme.
  • The page displays three testimonials, including the text of the testimonial as provided by the previous participant, and a photo of that participant.
  • On desktop devices, the testimonials are laid out such that the text for the testimonial is next to the portrait of the person who provided the testimonial.
  • On smaller devices, the testimonial text appears under the portrait.

On desktop:

On mobile:

• Contact Form

  • Some potential applicants, or clients who want to know more about Volanto's corporate culture, may need to contact us with queries or feedback.
  • The site therefore provides a standard Contact form.
  • All fields on the form are required so that Volanto is clear about who has contacted us and for what purpose, and to allow us the Volanto team to respond.

On desktop:

On mobile:

• Submission confirmation pages

• When users submit an application through the online form, or contact us through the contact page, they will want to know that their form submission was successful.

• The site therefore provides submission confirmation pages for both the contact and application forms.

Contact Confirmation page:

Application Confirmation page:

In the future, the following additional features would add value to the site for potential applicants:

• Design a custom logo and add it to the nav bar.
• Provide a gallery of testimonial videos.
• A blog that would include articles about how to get into tech, information about the latest technology, and tech courses.
• Tech quizzes allowing people to test their knowledge.
• A forum for people to ask questions and get peer support.
• An online chat service to allow potential applicants to ask questions more easily.

For all testing, please refer to the TESTING.md file.

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 link can be found here

In order to make a local copy of this project, you can clone it. In your IDE Terminal, type the following command to clone my repository:

• git clone https://github.com/Laura10101/volanto-launchpad.git

Alternatively, if using Gitpod, you can click below to create your own workspace using this repository.

The following educational and community resources were used during the implementation of this site:

• W3 Schools
• Stack Overflow
• CSS Tricks
• HTML Living Standard

Additionally, assistance was provided by my Code Institute tutor, and by the Code Institute Slack community.

Code libraries or snippets were used in whole or in part from the following sources:

• W3 Schools Responsive TopNav Example
• W3 Schools How To - Glowing Text
• CSS Tricks - Sticky Footer, Five Ways

• The icons for the Home Page features section, in the Footer, and for the responsive hamburger menu were taken from Font Awesome
• I personally created all other content on the site specifically for the Volanto Launchpad project.

The following tools and sources were used to create the images on the site:

• I created the Header image specifically for the site using Canva.
• Testimonial portrait images were sourced from Snappa's stock images.
• I also used Colorzilla's Ultimate CSS Gradient Generator to create the background for the image.
• The glowing effect on links and buttons was adapted from an Instagram post by the developers_community account.

I would like to thank the following people for their support in implementing this project:

• My mentor, Tim Nelson, for his help and guidance throughout.
• The Code Institute community on Slack for their helpful guidance.