This static website was made to provide information on Nikola Tesla as well as his personal life and inventions to interested third-party individuals. The language and layout of the site are aimed to be friendly and inviting regardless of the educational background of the interested individual or individuals.
The site contains a total of five sections including a contact section.
The target audience is individuals interested in Nikola Tesla - regardless of their geographic location and the website was made in English so that it would accommodate a larger audience.
This website is the first of five projects that needs to be completed in order to receive a diploma in Software Development from The Code Institute.
Requirements for the project are that the website has to be static and responsive using HTML5 and CSS3.
A live version of the project can be found here -
https://petragabud.github.io/NTCI/
This website is meant for:
-
Students of various ages (10-25+) interested in general facts about the subject (the website stands as an intro into Teslas life and career)
-
Professors or Teachers (in subjects of Science or History) who wish to present their students with a real-life example of a man who changed the world with his willpower and brilliant ideas
-
Tourists who are visiting the beautiful Republic of Croatia and want to know more about historical figures from that area
-
As a Member: I want to be able to see facts about Nikolas's life and work.
-
As a Member: I want to be able to use his quotes for my essays and papers or future school projects.
-
As a Member: I want to be able to contact the WebMaster.
-
As a new User: I want to learn more about the subject.
-
As a new User: I want to contribute with new content by messaging the info email and submitting my ideas on improving the site.
-
Find information regarding the subject (Nikola Tesla)
-
Contact local society with my ideas
A static responsive website that incorporates the technologies I have learned so far that contains some advanced functionality. The development process needs to be well documented through a version controls system such as GitHub.
Required technologies: HTML, CSS
This is my first project so I made multiple versions of it for esthetic and functionality testings - this submission is a culmination of all of those versions. There are parts of the projects which were influenced by various sources - they will be credited properly in this ReadME as well as the comments in the code.
This site was made as a single-page website that has been divided into multiple sections. I wanted the website to look like it has a flow and isn't difficult to use.
I chose to put a background picture as the only picture because I didn't want to slow down the loading times or mess up the functionality of the site.
The site has been divided into the following sections:
-
Home
-
Biography
-
Fun Facts
-
Famous Quotes
-
Contact
-
Thank You Page
Also, the navigation on top has been programmed as static so that the users could quickly go to the subject they are interested in without scrolling.
The Google Font Montserrat was chosen as the main font with a fallback of Sans-Serif. Font weight of 300 has been used on the website.
Image has been chosen in accordance with color and content. The purpose of the website is to give a friendly look and express quality. The image has been sized in order for the page to be load up quicker.
The History on Nikola Tesla website is a single-page website that consists of these sections:
-
Header
-
Navigation Menu
-
Home
-
Biography
-
Fun Facts
-
Famous Quotes
-
Contact Form and Email
-
Footer (with Social Media links and Copyright information)
-
Thank You Page (after submission of the contact form)
In order to make navigation easier between the sections, the navigation bar is fixed on top when the user scrolls thru the page.
-
The Header is text based and aligned to the Center of the page
-
The Navigation Menu is right under the Header and is aligned to the Center of the page
-
The Navigation Menus position is fixed and therefore it follows the user as the user scrolls down the page.
-
Menu items are anchored to sections on the website.
-
The home section consists of a title and a paragraph nested inside of a brown border-box.
-
The home section is a brief intro to some of the accomplishments of the subject.
- This section contains a Title and four paragraphs with facts about the individual's life and inventions.
-
The section contains a contact form and contact details for the Website admin.
-
It can be used for getting more information, giving an input or simply saying hello.
-
The Footer contains four social media links (Facebook, Twitter, YouTube, and Instagram) The code for the Footer is borrowed from the Love Running - Project.
-
The purpose of the Footer is to provide easy access for the User to the different social media platforms where the History has a presence.
The purpose of the Thank You page is to make sure that the users are aware that their message has been sent and that they will get their responces.
- A subscription area so that users can become members and receive updates on content.
Test of functionality and appearance of the website has been dealt with throughout all stages of the development phase.
The test has been conducted using Google Chrome, Mozilla Firefox, and Safari. Testing different devices and screen resolutions have been conducted using Google DevTools.
Listed are the main issues discovered. (I did not document the details of the mistakes I did during the development of the website but will use the final fixing stage as an example):
- On smaller screens, the border boxes became fixed and did not adjust to the size of the screen and content as needed
I changed the values from Pixels into em and percentages
- The Navigation and Social Media icons become (start overlapping) distorted on smaller screens
Added Margins and Padding to solve the problem
- I had a problem with HTML code vadiation - after identifying the problem (the h1 heading was in the head element instead of the body)
I relocated the h1 heading into the body and solved the problem
Apart from these issues, there have been several minor issues. The majority of these have been due to not putting the spaces, dashes, or other signs where necerassy.
In testing with the W3School Validator 0 issues popped up.
-
Lighthouse testing
I curently fixed all the bugs that the site had.
The development environment used for this project was GitPod in combination with JS Fiddle. To track the development stage and handle version control regular commits and pushes to GitHub has been conducted. The GitPod environment was created using a template provided by Code Institute.
The live version of the project is deployed on GitHub pages.
The procedure for deployment followed the "Creating your site" steps provided in GitHub Docs.
-
Log into GitHub.
-
Locate the GitHub Repository that shall be deployed live.
-
At the top of the repository, select Settings from the menu items.
-
Scroll down the Settings page to the ”GitHub Pages" section and click on the ”Check it out here!”
-
At the ”Source” section choose ”main” as Branch and root as folder and click ”Save”
-
The website will deploy and the pages refreshes to provide the live link to the project.
The live link can be found here - https://petragabud.github.io/NTCI/
The background image is from Wikipedia.
Parts of the code used are from talkerscode.com and w3schools.com
Facts (content) are from https://www.britannica.com/biography/Nikola-Tesla
Facts and quotes are from https://mocomi.com/nikola-tesla-biography/
- The image came from Wikipedia and I hosted it on Imgur after I resized it Cloud Convert
P.S. thanks to Pelikantapenten whom I've never met but used as a template for a ReadMe file.
Love Running Project - Code Institute