The world we live in today is vastly different to the one we lived in a few short years ago. With many companies switching to a fully remote commercial enviroment in the aftermath of covid. It is a cheaper model for companies as they dont have to provide and maintain office space for its employees. But what about the employees? I for one dont enjoy working from home as i find my days structure to be negatively effected with working in the same enviroment i live in. This is where workspace comes in. It will be a platform to advertise and rent any space which would be suitable for a comfortable office enviroment.

Welcome to the journey through Workspace.

• User stories
• Wireframes
• Features
  • Navigation
  • The header
  • Middle section
  • How it works
  • Footer
  • Locations page
  • Contact Us page
  • Get Started page
• Technologies Used
• Testing
  • Acessibility
  • Browser Compatibility
• Bugs
  • Resolved bugs
• Deployment
  • To deploy the project
• Credits
  • Content
  • Media
• Acknowledgements

• As a user i want to understand the site purpose and function in a very short amount of time.

  • The purpose of the site is clear from the homepage and the navigation is at the top of every page.
  • The how it works section is above the footer at the bottom of the page with a link in the navbar at the top.

• As a user i want a clear and simple route to making a account.

  • The get started button takes you to a form to start the account creation process.

• As a user i want to see the location of the offices.

  • The locations button is the navbar at the top of the page and leads to the office locations.

• As a user i want access to the companys social media pages.

  • All social media links are in the footer.

• As a user i want to see the benefits of using the service.

  • In the middle section of the homepage there is a video showing a workgroup with a learn more button and a breif description of the quality provided.

• As a user i want to see the office space before commiting.

  • Although not yet developed the learn more button will show the standard of a typical office rental space.

The Workspace wireframes was developed using the software Balsamiq. The wireframe provides a view for desktop and mobile devices of the four pages (Home page, Locations, Contact Us, and Get Started).

Back to top

The Workspace website was developed to be a seamless and intuitive experience. By using familiar features I intented to provide the customer with a efficient, smooth, and enjoyable experience. I kept consistency through the look and feel of the webpages structure across all pages and breakpoints.

• Featured at the top of the page, the navigation bar shows at the left corner of the Workspaces logo that also links to the index.html page.
• The navigation bar also provide the users with links to the remaining pages. The links located in the middle of the navigation bar are How it works, Locations, and Contact Us which link to different pages and sections of the same page.
• The navigation bar also provide the users with the button "Get Started" that gives the uses the option of log in or create a new account.

Back to top

• This section provides the user with clear information of what the site is and how can it can supports the work from home workers.

Back to top

• This section shows the user important information they need to know about the Workspace and provides a video of one of the office locations.
• Also provides the users with a Learn more button that will take the use to the locations page where the user can access information about all the office locations.

Back to top

• The How it works section provides the information about the two available plans and the benefits of the membership.

Back to top

• The footer provides the main navigation links making it easy for users to navigate through the website and to understand the site map.
• This section includes social media icons so users are able to find Workspace through Twitter, Instagram, Linkedin, and Facebook.
• The social media presence will help the user with news about Workspace, tips of how to improve work productivity and will also encourage them to connect with Workspace.

Workspace

• To help the user with navigation on all devices the links on the footer will take the user back to the top of the page.

Back to top

• The Locations page presents the users all the Workspace locations and provide more information about each one.

Back to top

• The Contact Us page encourages users to get in touch by providing the users with the contact form. It also gives the user the phone number, email address and street address where the Workspace headquarters is located.
• The contact form has 3 inputs, name, email and text area.

Back to top

• The Get Started page gives the user the option to log in and to create a new account.
• The log in form collects the users email and password information.
• The Log in form also gives the user the funtionality Remember me and Forgot password.
• The sign up form is valuable to the user as it gives them the ability to sign up for free to the Workspace.

Back to top

• HTML5 - provides the content and structure for the website.
• CSS - provides the styling.#
• Balsamiq - used to create the wireframes.
• Gitpod - used to deploy the website.
• Github - used to host and edit website.

Back to top

The Workspace site code has been tested through the W3C HTML Validator, and the W3C CSS Validator. Minor errors were found on the homepage, locations page and contact us page. After a fix and retest, no errors were found.

The HTML validator results for each page presented below:

• Homepage

The CSS validator results presented below:

Back to top

I confirmed that the colors and fonts chosen are easy to read and accessible by manually running a test lighthouse in Google Chrome DevTools.

• Lighthouse The site was also tested using Google Lighthouse

  • Performance - How the page performs while loading.
  • Accessibility - Is the site accessible for all users and how can it be improved.
  • Best Practices - Site conforms to industry best practices.
  • SEO - Search engine optimisation. Is the site optimised for search engine result rankings.

  The Workspace results home page are presented below: The test shows that the site is slow to load, mainly due to the images sizes.

Back to top

The Workspace site was tested with no visible issues for the user on the following browsers: Google Chrome, Microsoft Edge, Safari and Mozilla Firefox. Appearance, functionality and responsiveness were consistent throughout for a range of device sizes and browsers.

Back to top

During validation stage two bugs became known, a brief description is presented below:

• Home page It was necessary to go back to the index HTML code and the add space between attributes.

• Locations page It was necessary to go back to the Locations HTML code and the add space between attributes.

• Contact us page It was necessary to go back to the Contact us HTML code and the add space between attributes.

• Video

  The video was not loading while the site was in production. This was solved by copying the download link on github and adding it to the video source.

Back to top

The site was deployed to GitHub pages. The steps to deploy the site are presented below:

1. In the GitHub repository, navigate to the settings tab.
2. Once in settings, navigate to the pages tab on the left menu.
3. Under source, select the branch to main, then click save.
4. Once the main branch has been selected, the page will be automatically refreshed with a detailed ribbon display to indicate the successful deployment.

The live link to the Github repository can be found here Workspace github repository.

Back to top

• The font came from Google Fonts.
• The colour palate was compiled by Colorhunt.
• The icons came from [Font Awesome](https://fontawesome.com/.
• Balsamiq was used to create the wireframes.
• MDN was used as a code resource.
• W3 Schools was used as a code resource.
• Stackoverflow was used as a code resource.
• Dribbble was used for design inspiration.

Back to top

• The website photos came from Pexels, Freekpik, and Unplash.

The site was completed as a Portfolio 1 project piece for the Full Stack Software Developer diploma at the Code Institute, and UCD - University College Dublin.

Back to top