CodeConnoisseur74 / cloud-connect-consultancy

CLOUD CONNECT CONSULTANCY

Link to Live Project

Table of Contents

• CLOUD CONNECT CONSULTANCY
  • Table of Contents
  • Introduction
  • Updates
  • UX
    • User Stories
  • Features
    • Dropdown Menu
    • Connect Button
    • Contact Form
    • Footer
    • Performance
    • Security
    • Features Left to Implement
    • Technologies Used
    • Languages Used
    • Frameworks, Libraries & Programs Used
  • Testing
    • W3S Jigsaw CSS Validator
    • JSHint Validation
  • Deployment
    • GitHub Pages
    • Forking the GitHub Repository
    • Cloning the GitHub Repository
  • Credits
    • Code
    • Content
    • Media
    • Other

Introduction

Cloud Connect Consultancy is a fictitious Consultancy Company that offers Cloud Computing, strategy and security services to small and medium sized businesses. The website includes brief descriptions on the company, the services they provide and contact information. A Contact form is also located at the bottom of the website with a "Connect Now" button near the top of the website.

The live project can be found here.

UX

User Stories

ID	As a...	I Want To Be Able To...	So That I Can...
01	As a potential business client	have access to short descriptions of services	can quickly make decisions on the services pertaining to my business needs
02	Business Banker	quick access to services and contact info	can easily partner with the consultancy company and refer my clients to the website
03	New Business Owner	easily access service info and contact information	can contact the consultancy company and ask questions about the services I may need.

Features

Dropdown Menu

• User can navigate to "About Us", "Services", "Contact" or back to "Home" sections.

Connect Button

• An esthetically pleasing "Connect Now" button to easily navigate to the contact form section of the website.

Services Cards

• An esthetically pleasing and interactive card carousel, each featuring a service.

Video

• A short video with Business slogan, short description and animated graphic autoplayed and looped to greet the user with quick info.

Contact Form

• A contact form to request more information about the services offered and/or to get in touch.

• Phone Numbers, Address and email contacts for both sales and service departments.

Footer

• Features the "Home", "About Us", "Services" and "Contact" for easy access to cruucial sections of the website for easy navigation.

• Copyright section that updates to the current year from the inception year.

Favicon

• Favicon which features the company logo.

Performance

Testing performace using Lighthouse within Google Chrome Developer Tools indicted high ratings for performance, accessibility, best practices and SEO.

Security

The security of the website was tested using the security section of Google Chrome Developer tools:

Testing

The W3C Markup Validator showed the following errors when validating the html code.

Update: Upon updating the index.html, the W3C Markup Validator indicated trailing slash errors and a missing attribute in the link element:

The following resource assisted in solving these issues:

HTML Video – How to Embed a Video Player with the HTML 5 Video Tag. freecodecamp.org

A link element with a "rel" attribute that contains the value "preload"must have an "as" attribute.Rocket Validator

The W3C HTML Validator showed no errors:

W3S Jigsaw CSS Validator

The W3S Jigsaw CSS Validator showed the following error when validating the CSS code:

The following resource assisted in solving the error:

CSS Rem: Understanding and Using rem Units

W3S CSS Validation returned with no errors:

JSHint Validation

The jsHint validator showed an undifined variable "Swiper" and an unused variable "swiper"

However, the Swiper JS Version 8 Documentation clearly illustrates that this is the correct code used to initialize the Swiper JS Version 8 library:

Swiper JS Version 8.4.6 Getting Started

Features Left to Implement

• Additional info about the services on the cards. Additional pages describing the services in detail.

Technologies Used

• VS Code

Code Editor

• GitHub

Code Repository and Deployment

• git

Version Control and Deployment

• Taskade

AI Tool

• Canva

Images

Languages Used

• HTML5

• CSS3

• JavaScript

Frameworks, Libraries & Programs Used

• Swiper JS Version 8 has been used for the Services Cards section.
• The W3C Markup Validator has been used to validate the html code.
• The W3C Jigsaw CSS Validator has been used to validate the CSS code.
• JShint has been used to validate the JavaScript code.

Deployment

GitHub Pages

The project was deployed to GitHub Pages. The following steps are used to deploy the site:

• Navigate to GitHub and locate and select the GitHub repository.
• Navigate to the settings tab and select the 'Pages' tab from the menu.
• Under 'Source' click the dropdown labelled 'None' and select the 'master' branch.
• Click save. The page will automatically refresh and the published site link can be found on the 'Pages' tab.
• The link can be found here - link to live site

Forking the GitHub Repository

The following steps can be used to fork the GitHub repository:

• On GitHub navigate to the main page of the repository.
• The 'Fork' button can be found on the top righthand side of the screen.
• Click the button to create a copy of the original repository.

Cloning the GitHub Repository

The following steps can be used to clone the GitHub repository:

• On GitHub navigate to the main page of the repository.
• Above the list of files select 'Code'.
• Three options are provided, HTTPS, SSH and GitHub CLI. Select the appropriate option and click the 'Copy' button next to the URL.
• Open Git Bash.
• Change the working directory to the location for the cloned directory.
• Type git clone and paste the copied URL.
• Press 'Enter' to create the clone.

Credits

• JSHint ES6 errors fix.How do I resolve these JSHINT ES6 errors

• A link element with a "rel" attribute that contains the value "preload"must have an "as" attribute.Rocket Validator

• A link element with a "rel" attribute that contains the value "preload"must have an "as" attribute.Rocket Validator

• Adding Google Fonts API.Get Started with the Google Fonts APII

• freecodecamp.org

Code

• 10 Mega Responsive Websiteswith HTML, CSS, and JavaScript

Content

• GStatic Icons and Font Styles.
• Google Fonts DM Serif Display

Media

• Canva Screen Images.

• favicon Favicon generator.

Other

• Ami I Responsive? Testing the Responsive design of the Website.

• The Responsinator