Skip to content

nexto123/user-centric

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

15 Commits
 
 
 
 
 
 
 
 

Repository files navigation

User-Centric Project

A Code Institute Project. User-centric front-end design.

Getting Started

Some basic preparations to get started. A fairly good understanding of HTML5, CSS3 and BOOTSTRAP4. And you'd also need a modern web editor, like brackets or vscode.

The westfest usercentric project is a fiction website design inspired by the come back of the world-renowned music group after many years of separation. 
Westlife has been one of  my favourite music group  and this is one of the reasons 
I chose them as the theme for my project.

Prerequisites

Start by setting up your HTML template. Within the tag place your title and various to connect to your HTML. The bootstrap4 CSS cdn to be used will be placed in the head tags as well. It's important to place the script tags at the bottom of the page but right before the closing body tags.

Built With

Deployment

After committing to git with the appropriate messages, I'll now perform a git push to my GitHub Repo. To create a new repository;

  • first assign a repository name on github since thats what i'm using.
  • write a short description of the site to be uploaded.
  • You will either select to initialize your repository with a README.md file. (optional)
  • create your repository.
  • You will perform a git remote login
  • And finally, git push -u origin master.

Note: To go live, you must assign to github pages.

Testing

The app has been tested on these mobile devices; iPad, iPhone 6 and 7,iPhoneX and they resize very well. The font selected 'Lato' renders perfectly on most browsers, including Mozilla, safari and chrome, as am yet to test them on IE.9 and above. A lot of tweaking went into the bootstrap lightbox as they are present from the box with its own look, a bit of CSS was needed to get it to my desired taste.

Animate.js is a small javascript API used to create minimalist effects on elements. And so far it works perfectly in all the browsers tested except it looked a bit slow on Safari. Full test responses have can be found in the table below.

Audio player resizes correctly to all screens tested on and all buttons respond appropriately.

Tested Chrome Functions Speed
Animation Yes Yes Fast
Images Yes Yes Fast
Audio Yes Yes Fast
Video Yes Yes Fast
Text-Rendering Yes Yes Fast
Responsiveness excellent Yes Fast
Tested FireFox Functions Speed
Animation Yes Yes Fast
Images Yes Yes Fast
Audio Yes Yes Fast
Video Yes Yes moderate
Text-Rendering Yes Yes Fast
Responsiveness Good Yes Fast
Tested Safari Functions Speed
Animation Yes Yes slow
Images Yes Yes fast
Audio Yes Yes moderate
Video Yes Yes fast
Text-Rendering Yes Yes fast
Responsiveness Excellent Yes fast

Versioning

Git

Author

Ernest Bruce Brown

Media

Acknowledgments

  • Chris. Z

About

user-centric design- a code institute project work

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published