This is a website dedicated to a famous scientist Nikola Tesla and it primarily aims to provide vital information about his life to all visitors, especially ones interested in history and science. This website has three pages: home, quotes and media, thus providing variety of possibilities for users to inform themselves about Nikola Tesla.
The deployed website can be viewed here. Nikola Tesla.
- As a user, I want to…
- be able to navigate the website easily.
- be able to get the most important information about Tesla's work and life.
- be able to understand why is Tesla so important for the history of science.
- be able to use variety of options to inform myself, from textual to audiovisual resources.
- As a site owner, I want…
- the information to be clear and informative.
- the information to be sufficiently various for all users.
- the website be simple to navigate.
- Project Purpose
- To provide the most important pieces of information about Nikola Tesla.
- To educate people about his importance in history of science.
- I wanted a simple, straightforward UX experience.
- I wanted my content to be clear for all users.
- A site that is visually appealing on most devices.
- Information about:
- Tesla's life and work.
- A clear layout is in place to ensure users can immediately find all the information.
- The navbar is clean and simple with distinguished spacing between each of elements, which allows for easy and simple navigation.
- The Home page is containing an introductory text and a timeline with most important information from Tesla's life.
- The Quotes page provides interesting Tesla's quotes which provide deeper understanding of him as a person and scientist.
- The Media page contains documentaries and videos about Tesla.
- At the bottom of all pages users can find newsletter subscription form requiring email input.
- In the Footer, users can find social media buttons.
Wireframes created with Balsamiq. The project was developed from initial wireframes and slight modifications were made during the development process to assure better usability.
Click on the below page names to see these wireframes:
- Colours
When considering the colour theme of this project the objective was to use black and white theme in accordance with the main subject of the website. Also, beige is used for certain elements, such as text, title and timeline boxes.
- Font Selection
Title font, "Bebas Neue", was chosen from Google Fonts, while there were two default fonts used across the website: Garamond (for headers) and Arial (for paragraphs).
- Navigation Bar
Featured on all three pages, the full responsive navigation bar includes links to the Home page, Quotes and Media page and is identical in each page to allow for easy navigation and consistent user experience.
- The home page image
Tesla's portrait photo is used at the home page.
- Home page
Home page is consisted of three main elements:
- Introduction text
A fully responsive texbox containing a short textual introduction into Tesla's life.
- Timeline
A center piece of the first page is this fully responsive timeline, which contains the most important events from Tesla's life.
- Newsletter box *(at the bottom across 3 pages)
This simple, effective and fully responsive newsletter box is located just before the footer. It is positioned in the same place across all 3 pages and allows for quick and easy newsletter subscription.
- Quotes page
- Image in the center
Tesla's portrait is in the top centre position of the page.
- Quotes
These quote boxes are positioned vertically across the centre of the page, fully responsive on smaller screen sizes.
- Media page
- Videos in containers (from Youtube)
These documentaries and other videos are embedded Youtube videos. They are positioned vertically across the centre of the page, in fully responsive containers.
(video containers snippet)
- Footer
The footer section includes links to visit potential social media pages. The links will open in a new tab to keep users on the page, while allowing easy navigation to share content.
- HTML
Passing the HTML from all templates and base into the W3C Markup Validator no errors have been found W3C validator. Code Validation results:
|Home Page |Quotes Page |Media Page|
- CSS
No errors were found when passing through the official W3C validator.
CSS validation results can be viewed here
- Desktop
Mozilla Firefox, Google Chrome, Microsoft Edge: everything is working good. Page loads and all of the page features are working.
- Mobile
Tested with Huawei P30, Samsung A52, Huawei P40 and iPhone 12. It is responsive as intended.
- Mozilla Dev Tools
Tested for available devices, webpage works well. It is responsive as intended.
Screenshots from a mobile phone device
- Errors
On the 3 pages, Wave showed 1 error that can be viewed here.
That error was fixed by adding the "aria-labelledby" attribute to the form, which helps the assistive technology, such as screen readers, to catalog the object, so that users can navigate between them.
The alerts for each page can be viewed on the links:
The second page has a different name in Github, instead of "quotes.html" it is named as "joinus.html". This happened due to change of plans and late realisation that the change will be permanent, so all changes made were already committed to "joinus.html".
I would like to add more content to media page, which could provide more audiovisual information, which would be possibly positioned in three columns across the page. Also, maybe I would like to add more graphical addons, such as some sketches in the background, which would also need to be not limiting responsiveness of the website itself. Moreover, maybe I would add an extra page with specific sections on Tesla's work, which could provide more details for technically more skilled visitors.
No known bugs for now.
The website was deployed to GitHub pages.
- The steps to deploy are as follows:
- In the GitHub repository, navigate to the Settings tab;
- From the source section drop-down menu, select the Master Branch;
- Once the master branch has been selected, the page will be automatically refreshed with a detailed ribbon display to indicate the successful deployment. The live link can be found here.
By forking the GitHub Repository you will be able to make a copy of the original repository on your own GitHub account allowing you to view and/or make changes without affecting the original repository by using the following steps:
- Log in to GitHub and locate the GitHub Repository
- At the top of the Repository (not top of page) just above the "Settings" Button on the menu, locate the "Fork" Button.
- You should now have a copy of the original repository in your GitHub account.
- Log in to GitHub and locate the GitHub Repository
- Under the repository name, click "Clone or download".
- To clone the repository using HTTPS, under "Clone with HTTPS", copy the link.
- Open Git Bash
- Change the current working directory to the location where you want the cloned directory to be made.
- Type
git clone, and then paste the URL you copied in Step 3.
$ git clone https://github.com/YOUR-USERNAME/YOUR-REPOSITORY
- Press Enter. Your local clone will be created.
All content was written using sources as:
- All pictures and images used in this project are from depositphotos and freepik.
- Youtube videos were used on media page. Pictures were treated (resized) with IrfanView app.
- Favicon generator – Used to create favicon used on website.
- W3 Schools - Used for variety of tutorials and deeper understanding of some important concepts related to both HTML and CSS.
- Online Tutorials Youtube channel - Used for timeline code adaptation.
- Web Cifar Youtube channel - Used for timeline code adaptation.
- "Love Running" footer code - Footer adapted from this code.
- To the Code Institute course material, as the basis of all my knowledge is from here.
- To the Slack community as I have used the different channels to find answers to problems!
- Stack Overflow as a valuable resource for solving a couple of issues.
- W3schools and Stack Overflow for general reference.
I would also like to thank to:
- My mentor Rahul, for his time, support and guidance throughout our video calls.
- My fiancée Maja, for all support and patience.