User Centric Frontend Development Milestone Project - Code Institute

MAC|media Company website presents company services to prospective clients.
This website showcases five company services covering a range
of Information Technology areas. Custom built static front-end
site main navigation menu and structured layout accomplished 
via Bootstrap. Code written in HTML and styled with CSS. 
The contact.html page features a form, all data is sent to my email
using EmailJS and some JavaScript.

• As a customer I expect to see a systematic approach to display services offered with proof the service will handled by a professional.

• As a customer I expect to be able to submit a request for a service and have it sent online.

• Produce a modern minimalistic user-friendly website allowing the company to display services available to potential clients.

• For Customers, my goal was to simply present the company marketing in the landing page and provide a set list of services available separate from that allowing the customer to submit a request for a given service.

• Main navigation throughout web page
  • HomePage company overview
  • ServicesPage displays company services
  • ContactPage renders form to submit service requests via email

Dark color scheme accompanied by hints of a vibrant lime green were chosen to produce a sleek modern look and feel.

1. HTML
2. CSS
3. BootStrap
4. JavaScript

• Bootstrap

  • We use Bootstrap to give our project a simple, responsive layout

• JQuery

  • The project uses JQuery to simplify DOM manipulation.

• EmailJS

  • Contact page uses EmailJS to forward forms submitted for a service request.

The FullStack section of the landing page features a D3 chart that I acquired online and modified for use in my project. To separate this code from my own I rendered the charts in separate html pages and styled with embedded CSS and displayed in their own iFrames. FAVicon and iMessage image link were added to produce a professional look.

Future vision for this project would be to expand on the services section add more detailed information to services provided. Also create a dashboard and add pricing to the services. Finally I would create a social media presence for Company - { MAC|media } and launch a marketing campaign to acquire direct leads to potential clients or employers.

• ContactPage - allows customers to submit a service request, by filling out the contact form
• ContactPage Submit - submits all form details to me via email

Tested across multiple browsers Chrome, Safari, Internet Explorer and FireFox. Tested on multiple mobile devices iPhone 4, 5, 7, 11, iPad, Apple IOS and Android.

• All to ensure compatibility and responsiveness

  • Responsinator

• Html and css vialidated.

  • W3C HTML validated
  • W3C CSS validated

• The photos used in this site were obtained from Unsplash, The internet’s source of freely usable images. All rights reserved view License.
• Photos cropped and texted applied effects were also applied to keep the dark theme and overall structure and scope of the project.

Website hosted via GitHub pages, all commits too that repository will automatically update the deployed site on GitPages. To display in gitHub pages landing page must be named index.html. - LIVE website

clone https://github.com/MACmidiDEV/User-Centric-Frontend-Dev-Milestone-Project.git

To get this project up and running on your local machine open Terminal and paste the command git clone https://github.com/MACmidiDEV/User-Centric-Frontend-Dev-Milestone-Project.git into your terminal, when finished type git remote rm origin into your terminal. Or visit https://github.com/MACmidiDEV/User-Centric-Frontend-Dev-Milestone-Project to directly download the source code.

• The D3 charts from the landing page were creating by putting together pieces from the following resource of tutorials Learn D3.JS simply easy learning
• The redirection of submit button in ContactPage from Stackoverflow Make button act like hyperlink

• I acquired all web development skills via Code Institute