# Responsive Website for a Virtual Classroom Product [](https://lmcrean.github.io/Hoverboard/) [](https://github.com/lmcrean/Hoverboard/blob/main/testing.md) [](https://github.com/lmcrean/Hoverboard/commits/main) [](https://github.com/lmcrean/Hoverboard/issues?q=is%3Aissue+is%3Aclosed) [](https://github.com/lmcrean/Hoverboard/issues) [](https://github.com/lmcrean/Hoverboard/labels/html) [](https://github.com/lmcrean/Hoverboard/labels/css)

**This project presents Hoverboard as an exciting new Virtual Learning Environment for schools.** The key focus for the developer was responsive CSS, using ```flex``` and ```grid``` displays to allow the website to be viewed comfortably on different devices. The design also utilised consistent font pairings, border-styles, padding and color themes to reinforce the tone of the product. The website was designed with a mobile-first approach, using Figma, and then implemented with HTML, CSS and Javascript. *The website was deployed to GitHub pages.*

Documentation introduction

This readme introduces the key features of the project, using the framework of the 5 planes of User Experience. It summarises key challenges addressed along the way and also provides credits and acknowledgesments at the end.

Testing is summarised in the readme, while a seperate Testing file is dedicated to a more specific technical account.

In the issues I have logged written, video or screenshot accounts.

Table of Contents

• 1. Features
• 2. UX Development Planes
  • 2.1. Strategy Plane
  • 2.2. Scope plane
  • 2.3. Structure Plane
  • 2.4. Skeleton Plane
  • 2.5. Surface Plane
• 3. Manual Testing
  • 3.1. testing.md
• 4. Automatic Testing
  • 4.1. Validator Testing
  • 4.2. Lighthouse Report
• 5. Fixed bugs
  • 5.1. Unfixed Bugs
• 6. Deployment
• 7. Credits \& Acknowledgements
  • 7.1. Code snippets
  • 7.2. Technologies Used
  • 7.3. Acknowledgements
  • 7.4. Pull request acknowledgements

1. Features

Navbar

displayed with tab-active, regular and :hover states

Navigates to all 3 main pages, with a hamburger icon for mobile devices.

Hero Section

Introductory section with slogan and background image.

Mission Intro with nested features for teachers

Introduces the company's mission and the product's features. The features are nested in a grid display, with the features intro displayed in a column for mobile devices and a row for larger devices.

Call to Action

These are inline links to the features page and sign up page.

Testimonials

These display quotations from previous users, with their name and title. They are displayed in a column for mobile devices and a 2x4 grid for larger devices.

Headers for Features page, Sign up page and Thank you page

Introduces the page and reinforces the design theme.

About features

Describes the features of the product, with graphics and text.

Sign Up Form

Allows the user to sign up for a free trial of the product. The form input requires that the email includes @ and . and that the mobile number is 11 digits long.

Footer

Provides links to social media websites. Displayed on every page and anchored to the bottom of the page.

2. UX Development Planes

The 5 UX development planes are for the purpose of explaining the design process of the website. Both intention and outcome are recorded.

The key tool to bridge UX and code was the Figma wireframe: issues are logged here.

2.1. Strategy Plane

The website itself was aimed at Education Professionals such as teachers and headteachers. The design choices factored in to consideration that students also use the product. To meet both user needs in the long term, the tone of the product would need to strike a balance between professional and playful.

The business goals were to increase the user population of Education Professionals signing up for a free trial. To achieve this, the website needed to be persuasive, informative and easy for the user to navigate.

The new user is most likely a Teacher.

User Stories

New User:

• If I am convinced enough that the product will make my job easier, then I will sign up for a free software trial.
• I need to comfortably access this website on any device such as mobile, tablet, laptop or desktop.
• I need to visualise this product's mission.
• I need to understand the products features and their relevance to my job.
• I need to be able to sign up for a free trial easily.

2.2. Scope plane

The following features were designed to meet the needs of new users. They were displayed across three main pages, sometimes appearing more than once for the purpose of both making the website easy to navigate and consistent branding design.

Feature	Function	Most relevant user story
Navbar	Navigation	- I need to comfortably access this website on any device such as mobile, tablet, laptop or desktop.
Footer	Navigation	[promoting businesses' online profile]
Hero image with slogan	Reinforces brand, Visualizes the experience	- I need to visualise this product's mission.
Page headings	Design appeal and clear navigation	- I need to comfortably access this website on any device such as mobile, tablet, laptop or desktop.
Hoverboard's Mission	Introduces the product persuasively in the context of VLE's, why we're different	- I need to visualise this product's mission.
Call-to-action: Find out about our Features, claim-your free trial	provides clear links for the user to navigate,	- I need to comfortably access this website on any device such as mobile, tablet, laptop or desktop. - I need to be able to sign up for a free trial easily.
Testimonials from different users	Provides users testimonials, Builds social proof and trust	- If I am convinced enough that the product will make my job easier, then I will sign up for a free software trial.
Gallery Views, Peer Feedback, Deep Assessment	Visualizes easy navigation of classwork on a browser,student chat function in action, chatbot in action	- If I am convinced enough that the product will make my job easier, then I will sign up for a free software trial. - I need to understand the products features and their relevance to my job.
Form input	Records essential details: name, address, school. Redirects to thank you page, form method="GET"	- I need to be able to sign up for a free trial easily.

Omissions from the scope There were a few omissions from the project. Several Javascript features were omitted in the testimonials feature mid-project to prioritise developing the responsivity, such as a carousel and read/more read less button for mobile view. Popular frameworks such as bootstrap were not used in this instance in order for the developer to focus on learning CSS responsivity.

2.3. Structure Plane

This diagram illustrates a page structure with simple and accessible hyperlinks. The Navbar links to all 3 main pages. There are 3 call-to-action features that include a hyperlink. The submit button takes user to a thank you page, assuming the form is entered correctly.

When using the submit button, the form input requires that the

• email includes @ and .
• mobile number is 11 digits long.

If the form is entered incorrectly on submission, the user will be prompted to adjust the form.

2.4. Skeleton Plane

In the skeleton plane each feature's display changed according to the device size. As well as adapting to viewport, a sense of depth was achieved by taking background images and discrete overlapping.

The website was designed with a mobile-first approach, using Figma. The key challenge was to use viewport breakpoints at 768px, 1208px and 1768px to display the website comfortably on different devices.

Home page wireframe

*to view wireframe in more detail, ```right click > open image in new tab```*

Navbar (used on all pages)

• The Navbar uses an open/close icon menu in the right-corner for mobile devices.
• The logo is always displayed on the left and the links are always displayed on the right.
• The links are displayed in a column for mobile devices and a row for larger devices.

  Footer (used on all pages)

• The footer displays social media links in 2 rows for mobile devices and a row for larger devices.
• It is always located at the bottom of the screen.

  Hero section

• The hero section displays a background image with a backgruond color layered on top, then a heading.
• The feature is displayed in a portrait for mobile devices and a landscape for larger devices.
• The hero image siwtches to a different image for larger devices, so as to better fit the aspect ratio.

  Mission intro and Features intro

• The mission intro uses CSS grid to rearrange the features according to the device size.
• On larger devices, the content below the heading is split into 2 columns, and the features intro is nested into the 2nd column.
• On smaller devices features intro uses CSS flexbox displays the apps in columns, whereas on larger devices they are rearranged as rows.

Call-to-action (also used on features page)

• The call to action uses CSS grid to create an appealing illusion of depth that the image is slightly overlapping the heading banner. The img file starts on an earlier grid-template-row: 1 / span 2 than the banner which starts on row 2.
• On larger device, the call-to-action splits into 2 columns, using grid-template-columns: 1.5fr 1fr to keep a 2:1 ratio between text and image.
• the text includes heading, paragraph and button. They use text-align: left or right alowing with @media queries to switch between left and right alignment.
• Three call-to-actions are displayed throughout the website.

Testimonials

• The testimonials use CSS grid to display 8 testimonials in a single column for mobile devices and a 2x4 grid for larger devices.
• Being a more ambitious use of CSS grid, various class names were used to utilise the rows, columns and assigned user in a clear and efficient manner. Example below.

  
  <img src="https://github.com/lmcrean/Hoverboard/raw/main/assets/media/david-martinez.png" alt="user image" class="user-image david-martinez grid-group-A tablet-image-on-left  tablet-row-1 .laptop-grid-column-1 laptop-row-1-left">
  <p class="testimonial-text david-martinez grid-group-A tablet-image-on-left  tablet-row-1 laptop-row-1-left laptop-grid-column-2">"Hoverboard has significantly reduced our reliance on paper and improved organization within our school. The gallery views feature has made it easier for teachers to access and review student work, promoting efficient assessment. I'm impressed with the positive changes Hoverboard has brought to our institution."</p>
  <h3 class="testimonial-name david-martinez grid-group-A tablet-image-on-left  tablet-row-1 laptop-row-1-left laptop-grid-column-2">David Martinez</h3>
  <h4 class="testimonial-title david-martinez grid-group-A tablet-image-on-left  tablet-row-1 laptop-row-1-left laptop-grid-column-2">Headteacher, Maplewood Academy</h4>```

• On the 2x4 grid, the testimonials were divided into grid-group-A and grid-group-B classes as there was a more challenging rhythm of the page that couldn't simply copy the positioning from the column view.

Features page wireframe

*to view wireframe in more detail, ```right click > open image in new tab```*

Headings (also used on sign up page and thank you page)

• This was a lower priority feature in design and scale of code, serving to introduce the page and reinforce previous design themes.
• would usually switch between columns and rows.
• the features page would borrow display:flex code from the app icons on the home page, as a way of continuing the design motif.
• The sign up and thank you page would utilise the overlapping image effect similar to the call-to-action.

• Description of Features

• This was displayed as columns in mobile view.

• On larger devices this used a simple display: flex to display the icons in a row for mobile devices and a column for larger devices. HTML classes were able to easily switch up the column-order of image and text, to keep the reader engaged.

  @media screen and (min-width: 850px) {
  .img-text-wrapper {
  [...]
  flex-direction: row;
  }
  
  .img-text-wrapper-reverse {
  [...]
  flex-direction: row-reverse;
  }

  Sign-up page wireframe

  

to view wireframe in more detail, right click > open image in new tab