For my Code Institute Portfolio Project 1, I have implemented a historical timeline website. This timeline highlights particular, historical key events and persons regarding the biblical teaching of the ONE GOD the Father and His Human Son, Jesus the Christ; from the time of Christ up to 2023.

The timeline highlights the opposition to such teaching and the perseverance of believers despite the opposition.

Visit the deployed site: Unitarian Christian Timeline

• Navigation

  • Featured at the top of each page, the logo Unitarian Christian Timeline acts as a link to the page with the period 1 - 431. This page is the Home Page.

  • What follows is the navigation bar which begins with links to the pages for the three timeline periods

    • 1 - 431
    • 1326 - 1612
    • 1662 - 2023

  • The other navigation links are to the right: Gallery and Contact Us

  • The navigation clearly tells the user the name of the website and indicates to the user which page the user is on by highlighting the current page with a shade of brown in contrast to the otherwise grey navigation bar

• The Header
  • Because of the length of the time period covered I chose to split up the timeline into three webpages representing three periods
  • Each page has a black coloured logo which acts as a link back to the First page i.e. the Home page
  • The current time period is highlighted in brown

• Timeline Entries

  • Each timeline entry consists of four parts
  1. A particular date or year
  2. Followed by a title
  3. A description of a particular event or person for that date/year
  4. An image related to the description, for example, a portrait of the person in question

• Three webpages for three periods

  • What follows is a look at each of the three pages of the timeline
  • The first page 1 - 431 is the Home Page. It therefore, has a hero image with cover text that gives a summary of the subject of the timeline.

• First page: 1 - 431

• Second page: 1326 - 1612

• Third page: 1662 - 2023

• The Gallery Page

  • The Gallery section uses the masonry design style to display pictures of Unitarian (One-God-believing) Meeting Houses in the UK
  • On desktops the pictures are shown in three columns, on tablets two columns, and on mobiles, one column.

• The Contact Us Form

  • The Contact Us section encourages users to get in contact if the user would like further information or have questions regarding the historical information shown on this website.
  • There is a form to collect details of the user's name and email address.
  • There is an optional message box as well for the user to enter any further information.

• Thank You Page

Once the user submits the form on the Contact Us page they will be redirected to this page thanking them. Thereby indicating to the user that the form was submitted correctly. After five seconds the user will be directed back to the Home page, that is, 1 - 431

• Social Media

  • Each page includes social media icons so that users can find the Timeline on Facebook, Twitter, YouTube and Instagram.

• Back To Top

  • Because of the height of the Timeline and the Gallery pages, I have implemented a Back To Top Button; so that when clicked, the user would be taken to the top of the page so that the user can access the navigation bar.

• From Google Fonts I used Nunito Sans

• I used Oswald for the logo and cover text

• I used Roboto for the headings h1 and h2

• Regarding Colours, I chose chiefly black on white

• However for the cover text and the highlight colour of the navigation bar I chose ##dd3300

• The navigation bar uses a grey colour #666

• I tested that the pages work in both Chrome and Firefox
• I confirmed that this project is responsive and functions correctly on all standard screen sizes using the browser's DevTools device toolbars.
• I confirmed that the navigation, header, Contact Us form and page contents are all readable and easy to understand.
• I have confirmed that the form works. That is, each mandatory field requires entries; the email field will only accept email addresses with the @ symbol.
• I have confirmed that the submit button works.

• When I deployed my project to GitHub Pages I discovered my project was broken, that is, the link to style.css did not work.

• Even though I was using relative links I still had to prefix it with a period . followed by a slash in order for it to work

• • That is, assets/ is not sufficient.

• Solution: link href="./assets/css/style.css"

• Had to remove the colour from the social media icons as it was leaving a grey rectangle on the page after an icon was selected

• These grey rectangles were only visible on mobiles and laptops; not on desktops!

• Solution: remove the colour

.social-networks i {
  font-size: 160%;
  margin: 1%;
  padding: 5%;

color: #3a3a3a;

}

• HTML
  • No errors were returned when tested using the official W3C Validator
• CSS
  • No errors were returned when tested using the official Jigsaw Validator
• Accessibility
  • I confirmed that the colours and fonts chosen are easy to read and accessible by running the website through Lighthouse in DevTools

No unfixed bugs

• This site was deployed to GitHub Pages. The steps to deploy are as follows:
  • In the GitHub repository, navigate to the Settings Tab
  • Then select Pages
  • Use main as the branch for Deploy from a branch

The live link can be found here - Unitarian Christian Timeline

• HTML5
• CSS

• Google Fonts - for the typography
• TinyJPG - for compressing the larger images
• Chrome and Firefox Developer Tools - for inspecting and testing the site
• GitHub - for hosting the site
• Gitpod - for editing the files
• GitPages - for the deployment of the site
• Font Awesome - used for the social media icons, the up arrow icon of the 'Back To Stop' button and the people icon on the Contact Us page

• I would like to improve the image rendering in that, all the images irrespective of their original size, all have the same height/width when shown in the timeline

• I would like to implement the Back To Top button using JavaScript as opposed to CSS

• I would like to implement a Search Bar so that as the user types a particular keyword the user is directed to its location in the webpage

• I would like to create a thank you page for the user to be redirected to once the user has completed the Contact Us form

The timeline I chose to use was adapted from the timeline designed by Samet Erpik.

The codepen for this timeline is at https://codepen.io/samerpik/pen/OVKyVZ

I followed this W3Schools tutorial in order to implement a Horizontal Navigation Bar

I went on to StackOverflow to find a suitable implementation of a Back-To-Top Button I chose the one designed by JakeFromSF as seen at JakeFromSF's button

However it failed the HTML Validator tests because it is bad practice to wrap a button within an a element
So I re-coded it accordingly without using a button.

<a href="#top" id="back-to-top">Back<br>To<br>Top</a>

• To the best of my knowledge, all images used are either Public Domain or pertain to an applicable Creative Commons (CC) licence.

• The pictures of the Unitarian Meeting Houses on the Gallery page are from the Unitarian Historical Society.

• Sirmium: The picture of "A scale model of Sirmium in Sremska Mitrovica, Serbia" is by Carole Raddato from FRANKFURT, Germany - Sirmium, Pannonia Inferior, Serbia, CC BY-SA 2.0.

• The Photo of a child reading the Bible is by Samantha Sophia on Unsplash

The biography of Robert Spears was written by Alan Ruston, courtesy of Unitarian Historical Society.

Many thanks to my mentor Derek McAuley for his help, suggestions and advice.