A Code Institute Project. User-centric front-end design.
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.
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.
- HTML5
- CSS3
- bootstrap4
- Animate.js
- Hover CSS
- fontawesone
- bootsnipp
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.
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 |
Git
Ernest Bruce Brown
- Chris. Z