Index

• Project Definition 📃
• UX 💻
• Features ⚙
• Technologies Used 🔩
• Testing 🧪
• Deployment 🚀
• Credits 👉

Code Institute Startup Academy

This project presents the idea of how the Academy's website would look like and the value that it would provide to students and graduates.

The Code Institute Startup Academy is a project idea that involves implementing a startup programme within Code Institute's organisation, to leverage the talent that goes through their courses regularly.

The mission of the Code Institute Startup Academy is to provide access to knowledge, community and tools that will allow CI students and graduates to start a startup and improve their probabilities of success, regardless of who and where they are.

This is for educational purposes only.

1. UX 💻

1.1 Who is this website for? 👨‍🎓👩‍🎓

This website is for Code Institute students and graduates interested in knowing more about the Startup Academy and want to register to participate in its programme.

1.2 What is it that they want to achieve? 🎯

Students and graduates visit the website for different reasons. They want to:

• Learn more about the programme and what knowledge is shared.
• Clarify questions they have about the Academy.
• Register to participate.
• Get in touch with the Startup Academy team.
• Access the dedicated Slack channel for the Academy.

1.3 How my project is the best way to help them achieve those things? 👨‍💻

The Code Institute Startup Academy's website provides all the necessary information and features.

1.3.1 To learn more about the programme and what knowledge is shared. 📚

The website provides:

• A "Topics" page in which all sessions are presented and described.
• An "About" page which describes what the Academy is all about.

1.3.2 To clarify questions they have about the Academy. ❓

The website provides:

• A "FAQ" which an extensive list of frequently asked questions.
• A contact email address where students and graduates can get in touch with the Academy team.
• A direct link to the dedicated Slack channel, in which they can ask the community their questions.

1.3.3 To register to participate. 📃

The website provides:

• A "Sign Up" page in which students and graduates can register to join the Academy.

1.3.4 To get in touch with the Startup Academy Team. 📧

The website provides:

• A "Contact" link in the footer which triggers a new email to [email protected] (fictitious email).

1.3.5 To access the dedicated Slack channel for the Academy. 💬

The website provides:

• A "Slack" page in which they have a single button that takes them directly to the Academy's Slack channel.

1.4 Website Wireframes 💻📱

Below you will find the website's wireframes. These were generated using Balsamiq. There are four versions of the wireframes. Choose your option:

• Wireframes for the desktop version in PDF.

• Wireframes for the mobile version in PDF.

• Wireframes for the desktop version in Balsamiq.

• Wireframes for the mobile version in Balsamiq.

  Back to top

2. Features ⚙

• Navigation bar: It allows students and graduates to easily access the most relevant pages and content on the Academy's website, at all times. It also provides a direct button taking them to the Sign Up page.

• Home page: It welcomes students and graduates with a quick pitch about the Startup Academy, allowing them to grasp why it exists quickly and its value.

• Footer: It allows students and graduates to access additional information and content about Code Institute and the Startup Academy, at all times. It also provides them with a direct contact link, and a button taking them to the Sign Up page.

• Slack page: It allows students and graduates to easily access the Academy's Slack channel by providing a hyperlinked button with the channel's URL.

• Sign Up page: It allows students and graduates to sign up to the Academy by having them fill out the sign-up form.

• Topics page: It allows students and graduates to understand the full programme, all the lessons that will be shared and the order in which we will present them. It divides the Topics into the 6 Sprints that form the programme.

• About page: It allows students and graduates to learn what the Academy is all about and its main objectives.

• FAQ page: It allows students and graduates to clarify the most common questions they have about the Academy. It also provides an email address (hyperlinked) that they can use to contact the Academy team with additional inquiries.

• Help page: It allows students and graduates to contact the Academy's team and community in case they need assistance. It also provides guidance and an email address (hyperlinked) to report abusive behaviours.

  Back to top

3. Technologies Used 🔩

3.1 Languages 🗣

• HTML/HTML5
  • The project used HTML/HTML5 as this is the essential language of websites.
• CSS/CSS3
  • The project used CSS/CSS3 to provide the styles for the website.

3.2 Frameworks ⌨

• BootStrap 4
  • The project used the BootStrap 4 framework to help design the website faster and easier.

3.3 IDEs 🖥

• Gitpod
  • The project used the Gitpod IDE to develop the website.

3.4 External Hostings 🏢

• GitHub
  • The project used the GitHub hosting service to save the project in a repository.
• Imgur
  • The project used the Imgur service to host and access images online.
• Google Drive
  • The project used the Google Drive service to host and access others files and documents online.

3.5 Other Tools 🧰

• Auto-Prefixer
  • The project used the Auto-Prefixer to add CSS compatibility with other browsers.
• Font Awesome
  • The project used the Font Awesome to add vector icons to the project.

4. Testing 🧪

4.1 Testing Tools ⚗

• JSFiddle
  • The project used the JSFiddle tool to test ideas and codes in a safe environment.
• Chrome DevTools
  • The project used Chrome DevTools to test variations to the CSS rules and ideas to its optimisation.
  • The project also used it to Simulate Mobile Devices and test the website behaviour on mobile views.
• iPhone 8
  • The project used an iPhone 8 mobile device to test the website in a real mobile environment.
• iPad (5th Generation)
  • The project used an iPad (5th Generation) mobile device to test the website in a real mobile environment.

4.2 Testing User Stories 🙆‍♀️

Going over the user stories indicated in the UX section to ensure that they work as intended.

1. To learn more about the programme and what knowledge is shared.

   1. Go to the "Topics" page through the top menu.
   2. Scroll down through the page to review each Sprint and the knowledge shared in each of them.
   3. Learn with it that the programme is split into six Sprints.
   4. Learn with it that each Sprint covers two topics.
   5. Try to accomplish the steps both on desktop and mobile views.

2. To clarify questions they have about the Academy.

   1. Go to the "FAQ" page through the footer.
   2. Scroll down through the page to review each question and the answer to each of them.
   3. Try to use the contact option to get in touch with the Academy team and clarify additional questions.
   4. Try to accomplish the steps both on desktop and mobile views.

3. To register to participate.

   1. Go to the "Sign Up" page through the menu or footer button. The "Home" page also provides two additional buttons with the main content.
   2. Try to submit an empty registration form and verify that an error message about the required fields appears.
   3. Try to submit the registration form with an invalid email address and check that the error message appears.
   4. Try to submit the registration form with all inputs valid and verify that the information is processed.
   5. Try to accomplish the steps both on desktop and mobile views.

4. To get in touch with the Startup Academy team.

   1. Go to the footer of the website, on any page.
   2. Try to click on the "Contact" link to send an email to the Startup Academy team.
   3. Try to accomplish the steps both on desktop and mobile views.

5. To access the dedicated Slack channel for the Academy.

   1. Go to the "Slack" page through the top menu.
   2. Try to click on the "Join The Startup Channel" button to access the #startups channel in the Code Institute's Slack workspace.
   3. Try to accomplish the steps both on desktop and mobile views.

4.3 Bugs & Problems 🐛

There were no brand-new or relevant bugs/problems during the development of this project.

The usual suspects were always there because of my lack of experience and mistyping the code.

5. Deployment 🚀

Carlos developed this project using Gitpod’s IDE. He pushed all developments to the corresponding repository inside his GitHub account. He followed the steps below:

1. He first created the repository inside his GitHub account. Repo URL: https://github.com/RohrerHope/ms1-startup-academy.
2. He launched the project on Gitpod from the repository, using Gitpod's Chrome extension.
3. He continued his work and development on Gitpod.
4. He pushed all relevant and significant changes to the repository, from Gitpod, regularly.

There are no differences between the deployed and the developed version. Carlos used one branch: master.

You can run and view the project by following this URL: https://rohrerhope.github.io/ms1-startup-academy/.

6. Credits 👉

6.1 Code Snippets 🧬

• Inspiration for the navigation bar: https://bootsnipp.com/snippets/vlXGB.
• Inspiration for the hero section: https://codetheweb.blog/demo/full-image-hero/.
• Inspiration for the Sign Up form: https://mdbootstrap.com/snippets/jquery/temp/2023911?action=prism_export.
• Privacy message on the Sign Up form: https://codeinstitute.net/full-stack-software-development-diploma/.

6.2 Media 📸

• Code Institute Logo: https://codeinstitute.net/.
• Font Awesome Icons: https://fontawesome.com/.
• Startup Academy Proposed Icon: https://www.iconfinder.com/icons/3209317/gear_idea_innovation_lightbulb_technology_icon.
• Images on Heros & Topics: https://www.pexels.com/.
• Lato, Google Font: https://fonts.google.com/specimen/Lato?query=lato.

6.3 Acknowledgements 🙏

• Ciara Browne (CI Government Channel Manager): Thanks for believing in the Startup Academy project and for giving it space in your schedule.
• Maria Mcloughlin (CI Slack Community): Thanks for your support. For believing in the overall project, which led to the birth of the #startups channel on Slack. Thank you for the opportunity to be part of your podcast and share a bit of my story and purpose.
• Jonathan Munz (My CI Mentor): Thanks for your support as a mentor. You have provided excellent guidance, feedback and inputs into my ideas and development. Looking forward to working together again on the next milestones.
• Simen Daehlin (Slack user @Eventyret_mentor): Thanks for your support when I had the background image issue, caused by the CSS property background-attachment.
• CI Slack Community: Through several conversations and calls, I continuously improve my knowledge as an engineer, and I grow as a person.