Git Product home page Git Product logo

user_centric_frontend's Introduction

Anthony Aneke's Code Institute Milestone Project 1

Introduction and Purpose

IP Attache is a user-centric frontend website that offers intellectual property services to clients in Life sciences, Engineering, Service industry and Electronics and computing for those inoventors and innovators looking to commercialize their idea to products. This website is a full-service intellectual property law company with the competence in patents, litigation, and design.

UX design

Leveraged CSS Bootstrap for mobile first user experience. responsive site. It also contains avaScript-based design templates for forms, typography, and other interface components. The UX process was an iterative method which I improved upon to ensure it was user-friendly to the audience of the website.

User story

As a user type, I want to performbe able to access IP Attache to view and order their services. Their services agnostics of their services provide the required due-dillegence patent our ideas and eventually commercialize them

Features

The "Homepage" page descirbes: an overview of the entire website. The "About Us" includes the vision and mission of the webite as well as the leadership profile. THe "Practice area" includes all the services of rhe website. The "Get in touch" page is for users tto contact IP Attache. The site map details the list of pages and different sectios onf the IP Attache website i.e. Business hours, contact details

Existing Features

IP Attache plans to scale this webite to include more features utilizing javascript to create interactive effects within web browsers.

Technologies Used

HTML5, CSS libraries/frameworks such as Bootstrap 4

Future technology

This project will use JQuaery library to simplify DOM manipulation for future projects.

Testing implementation

I set up a test environment (Light-weight http server) that served the webpages to be tested. I did static testing and visual inspection to make sure content was rendered as designed, I executed system testing to make sure use cases worked in accordance to design intent.
Essentially, I went through all user story and all functions passed.

Some manual test steps that were executed Go to the "About Us" page Try to click on the link and verify that you are navigated to the right page. This is a passed test.

Go to the "Get in touch" page Try to submit the form with your email address and verify you did not recieve any message. This is a passed test.

Go to the "Free consultation" page Try to click on it and verify that nothihg happens. This is a passed test.

Please note the Get in touch and Free consultation page will be function in the interactive front-end milestone project. I had a few bugs from the w3c validators, extra html tags (closing htmls (they did not have a matching opening html elemnt) that were not supposed to be there - This was fixed. Bugs were detected from Formatting Typos - This was fixed Bugs were detected from Broken images bugs and links - This was fixed Bugs were detected from broken hyperlinks - This was fixed Vimeo video from website template considered a bug - This was fixed.

Deployment implementation

I utilized Github pages service to make website available.

Deployment write-up

I copied my private repo (user_centric_frontend) into the akshaynorth.github.io public repo, resulting in making the ipattache website available through the Git hub pages

The publically available website link

https://akshaynorth.github.io

Different values for environment variables (Heroku Config Vars)? Different configuration files? Not Applicable Separate git branch? Not Applicable In addition, if it is not obvious, you should also describe how to run your code locally.

Navigation

It is my believe this website contains apposite navigation for users

Ease of use

It is my believe this website provides ease of use for its customers.

Information Architecture

It is my believe this website meets the standard structural and behavioral design criteria

Layout and Visual Impact:

Responsive Design โ€“ I tested the site response in multiple simulated devices (tablets and mobile) and the website responded by adjusting its layout to the simulated screen sizes. Image Presentation Colour scheme and typography

Software Development practices:

Directory Structure and File Naming โ€“ I went through systematic approach to develop a naming convention. After establishing this, I created html files for each website page as well as naming the pages to correspond to the top menu bar drop down.

Version control

Git was used for version control. I incrementally and iteratively staged, committed, and pushed new or modified all changes during the implementation of the website

Testing write-up

I tested all the links to make sure there was no broken links. Visual inspection was executed for typos and a proper display of html elements. System Test was executing to make sure dropdown pages were rendered in accordance to design intent.

Readme file

Confirmed

Code Template Credits

For the development of this milestone project 1 a website template was employed. The template contains a set of HTML, CSS (Bootstrap4), JavaScript files that can be altered as needed. The code was downloaded from the following website::

https://themewagon.com/

The site contains a collection of free and paid templates. For this assignent, I choosed the Legal Care webiste template. The chosen website template can be found at::

https://themewagon.com/themes/free-bootstrap-4-html5-responsive-law-firm-website-template-legalcare/

Reference

Duckduckgo. [Online]. [Accessed 24 April 2020]. Available from: https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse1.mm.bing.net%2Fth%3Fid%3DOIP.VXs7yc3entZz9seXUdAb6wHaE8%26pid%3DApi%26h%3D180%26p%3D0&f=1 Duckduckgo. [Online]. [Accessed 24 April 2020]. Available from: https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse1.mm.bing.net%2Fth%3Fid%3DOIP.0Jj2AjNdlabLl1KGojReXQEsDD%26pid%3DApi&f=1 Duckduckgo. [Online]. [Accessed 24 April 2020]. Available from: https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse1.mm.bing.net%2Fth%3Fid%3DOIP.7pMFk71bFo7VIeCvVmt8bQHaEy%26pid%3DApi&f=1 Duckduckgo. [Online]. [Accessed 24 April 2020]. Available from: https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse1.mm.bing.net%2Fth%3Fid%3DOIP.mAe3hKdXC-lclsHWYWPFlwHaCW%26pid%3DApi&f=1 Duckduckgo. [Online]. [Accessed 24 April 2020]. Available from: https://www.google.com/imgres?imgurl=https%3A%2F%2Fwww.bme.jhu.edu%2Fwp-content%2Fuploads%2F2017%2F02%2FData-Science-home-slider-990x340.jpg&imgrefurl=https%3A%2F%2Fwww.bme.jhu.edu%2F&tbnid=sM3M3CmBNARglM&vet=12ahUKEwji17H8xI_pAhWDON8KHdqRB38QMygKegUIARClAg..i&docid=rHlkEhmz_s8uFM&w=990&h=340&q=biomedical%20&ved=2ahUKEwji17H8xI_pAhWDON8KHdqRB38QMygKegUIARClAg IPwatchdog. [Online]. [Accessed 7 May April 2020]. Available from: https://www.ipwatchdog.com/2013/06/29/what-is-a-patent/id=42703/ Score. [Online]. [Accessed 7 May April 2020]. Available from: https://www.score.org/blog/patents-and-copyrights-everything-you-need-know

Acknowledgements

I received inspiration for this project from my earleir career role as a patent examiner.

user_centric_frontend's People

Contributors

akshaynorth avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.