Welcome to my first milestone project, Sikhism-Project.

Earlier this year I decided to take a leap of faith and enrolled in a Full Stack Development course, with the hopes of changing my career and becoming a programmer. Up to this point in my career, I have worked in multiple sectors, retail, and hospitality but have never managed to get myself anywhere.

The purpose of this project to show my learning and understanding of the modules and languages I have learned, to implement them into a project to showcase my skills in design and development. This project is a functional static-website, built mainly with HTML and CSS.

I will outline the steps I used to build the project and the philosophy used to plan the project, my sources of inspirations and my focus on user experience design.

Thank you for viewing my project and I sincerely hope you enjoy the project as much as I did design and develop it.

View live project here

A large part of inspiration behind the planning for this project came from Jason James Garretts’s, “The Elements of User-Experience”. By keeping the user in mind throughout the design and development of the project, it would be easier to make the user experience a positive one. For the user to have a positive emotional response throughout the project.

The planning of the project is broken into 5 planes,

• The Strategy Plane
• The Scope Plane
• The Structure Plane
• The Skeleton Plane
• The Surface Plane

The goal as a creator of my project is to act as an introduction to my faith, Sikhism.

Creator stories

Creator Goals

• As a creator, I want to make sure the project is easy to navigate.
• As a creator, due to the text-rich nature of the project, to make sure users never feel lost in the text going through the page.
• As a creator, I want the project to invoke a positive emotional response from users, potentially relating to learning something new or expanding on current knowledge.
• As a creator, I want to make sure all content on the page is relatable, from images to text and quotes, and avoid elements from feeling random or out of place.
• As a creator I want to avoid users from feeling overwhelmed by the amount of content, finding a way to structure content so users do not feel put off from the moment they land on a page.

Having established a strategy for what I would like for my users, the most important part was to start thinking from the perspective of the user and how a user would feel going through the project.

User stories

First-time visitor goals,

• As a first-time visitor, I want to easily understand the purpose of the project from the moment I get to the landing page.
• As a first-time visitor, I want to easily be able to navigate, can I get back to the home page quickly, when I reach the bottom of a page is there some way to move forward without scrolling back up.
• As a first-time visitor, I want everything I am reading to be reinforced or supported in some way, quotes, stories, or images.
• As a first-time visitor, I want to feel as though I am progressing through the page and not feel overwhelmed or lost.
• As a first-time visitor, I want the project to not become too exhausting to look at.
• As a first-time visitor, I want to be able to pick up from where I left off, can the structure of a page be in a way where I can simply just carry on if I took a break?

Returning visitor goals:

• As a returning visitor, I want to be able to get in contact with the creator or creators in some way, social links, or contact page.
• As a returning visitor, I want to be able to cite the information or find out where the source of the information came from.

From my user stories, I am better able to come up with a conceptual idea of what the project needs in terms of features, which features have more priority.

During my initial planning for the project, I was planning to make the project on Sikhs as a people of faith. So, I decided to some research, friends, acquaintances, and work colleagues to understand better which content was more important. I was naturally biased being Sikh and everything to me was more important, but I needed to understand the perspective of a user.

While doing my research I quickly noticed when asking, what would you like to know about Sikhs, a correlation on the feedback being received. I was assuming everyone knew about Sikhism without introducing Sikhism.

From the feedback, I was also able to gain an understanding of what I should include in my project from the first release. Common questions being asked while doing research was,

1. How did Sikhism originate, who started Sikhism?
2. Who is a Guru and what is a Gurdwara?
3. What are the pillars of the faith?
4. Why is Sikhism important to me?
5. What is “Langar”?

Based on the Strategy goals I can establish that trying to include everything I want, and what the users would like from the research was not going to be feasible from my initial release. The easiest way to approach this would be to start with a minimum viable product, that would answer the question that came up the most.

From there a phased approach would be most ideal, which allowed me to manage the workload and give me some room to build on any feedback I receive.

My plan for a phased release would be,

Phase 1 -

• A home page with a small introduction to the project and faith.
• A origins page.
• A philosophy/core foundations page.
• A contact us page.

Phase 2 -

• An expansion on Sikh Gurus.
• A page explaining “Langar”.
• A about me page

Phase 3 -

• Interactive elements (I lack JavaScript knowledge)
• Web domain with a customer URL
• Light mode/Dark Mode toggle

Having a phased approach to the project allows users to feel surprised when a new version is deployed with extra elements and allows me time to collect feedback and better understand flaws with my initial design or development and to help me grow. Also allows me to implement new skills I have learned and build upon the initial design.

Knowing from the beginning that the project was going to be very text-rich, the biggest hurdle was going to be how to keep users interested and to not be put off by a lot of text. Sources for inspiration to overcome this came from my mentor Aaron Sinnott and websites that are very text rich with articles and stories.

I visit Polygon and PC Gamer a lot and enjoy reading articles, so looking at how they structured their pages. Using Figures/Images and Blockquotes floated to ether side gave the impression there was less to read while highlighting something important. Subheadings would also allow for text to be structured better while allowing me to add extra white space to give the reader breathing room.

Colours -

• Black
• Grey
• Golden Yellow
• White and off White

Black background to start with to make it more relaxing for users to read and make it less exhausting on their eyes. Also allowed for images to stand out and draw attention.

Typography –

• Roboto
• Dancing Script

I used Dancing Script to offer a contrast to the Roboto font, it also allowed the project to not look monotonous. Roboto is quite easy to read and is a more modern popular font.

Consistency with the Navigation Bar and Footer elements because they will be recurring elements. Smaller navigation in the footer, for the user, when they reach the bottom of the page, and an easy to navigate Navigation Bar at the top.

Social Media Links in the footer, with a simple hover effect the allow the user to see interaction but keep the colors subtle.

Consistent imagery throughout the project, not only to help condense the text but to also give the user something to view and feel as though they can take a breath. Images should be relatable to the content on the page and not feel forced or out of place.

The text will be consistent on all pages with a centered title, small centered summary, and finally the content of the page aligned to the left. So that the user feels familiar with the site as the progress down a page.

Responsive across all devices, to make images scale properly and do not end up pixelated, text is readable on all devices.

Below is a link to the initial draft of the wireframes I created for the project and an initial conceptual idea of how everything would be structured and how everything would respond on different devices.

Project-Sikhism Wireframes

I also typed up all my pages beforehand to help me to proofread the content and fix the grammatical error. It also allowed me to plan my text, structure my paragraphs, and condense text under subheadings.

There are some differences from the wireframes to the project,

• Home Page has a Jumbotron in the center, instead of the top left corner.
• All pages have a hero image that I felt stood and gave a positive emotional response, but different from the home page on take up less of the view height space so the user understands to scroll down.
• Aligned all images on the Philosophy page to the right, instead of right-left-right. It made the page a lot more aesthetically pleasing.
• The main image in the Origin page now is centered larger.
• The use of floats to help the paragraphs appear smaller, to give the impression progression was made faster on the page.
• A citations section at the bottom of the page because a lot of the text content was far better phrased on other sites.
• A send message button was added to the contact us page, which I somehow forgot to add in my initial draft.
• There is also a wireframe for the Langar page in the tablet wireframes that will also not be included in my phase 1 release.

There were some other smaller changes that I decided to go ahead with I just felt made the project more aesthetically pleasing.

I feel as though my growth as I have learned Front-Development has led to many of the changes listed above. Also, I considered feedback and my personal opinion on how the pages looked. Looking back, I definitely could have spent more time planning my approach, but this project was a huge learning experience for me, and I can use this as a platform to spend more time and effort designing future projects.

Features present across the project,

• Navbar – Responsive, toggles to a hamburger menu at a width of 576pixels. Coloured grey for inactive pages and colored white for the currently active page. The main logo on the left acts also as a link back to the home page.
• Footer – Another smaller navigation menu for the user who wishes to navigate to the pages from the bottom, rather than having to scroll up. Social media links always opening in a new tab to the relevant page.
• Large hero images to draw the user’s attention. All images are bright and colorful and used to add a humane feel across the project. The hero image on the landing page has a darker overlay to help the text stand out better.
• Dark background for users to feel less tired while reading, also helps images to stand out versus a white background.
• Contrast of fonts between header and proceeding text. Helps the pages as a whole look less monotonous, and the Dancing Script font really helps capture the user’s attention.
• Consistent images used throughout the project, again gives the project a humane feel and help to invoke emotions from the user and helps the user take a break from the text and help the paragraphs appear smaller. All images are relevant to the content.
• Real quotes used as floats or used to put an end to a topic, either highlighted from the paragraph content or used to supplement paragraph content. Also helps to make paragraphs appear smaller.

Features left to implement

• Once I have some understanding of JavaScript, I would like to implement it into this project to make it more interactive and less static.
• Have the form send an email to me so that I can receive the message sent, now the form acts as a placeholder or to show understanding.
• Some form of verification for users who do wish to send a message and click the send message button.
• Potentially have some of the images across the project be videos or Gifs. Again, it would help the site be less static and stand out more.
• A Light/Dark mode toggle. While collecting feedback, overall a lot of people preferred the project being dark and less straining on the eyes, especially because there is so much text to read. But I would still love to implement a light mode for anybody who prefers the option.
• Genuine Web domain and a custom URL. Would help the user experience seeing a more professional looking URL.

• HTML

  • Used as the basic building block for the project and to structure the content.

• CSS

  • Used to style all the web content across the project.

• Bootstrap

  • Used as the main framework to make the project responsive.

• jQuery

  • Used with Bootstrap to make the navbar responsive.

• JavaScript

  • Used for the bootstrap navbar for extending collapse plugin to implement responsive behavior

• Hover.css

  • Used on the social meadia icons in the footer when hovered over.

• Google Fonts

  • Used to obtain the fonts linked in the header, fonts used were Roboto and Dancing Script

• Font Awesome

  • Used to obtain the social media icons used in the footer.

• Google Developer Tools

  • Used as a primary method of fixing spacing issues, finding bugs, and testing responsiveness across the project.

• Github

  • Used to store code for the project after being pushed.

• Git

  • Used for version control by utilizing the Gitpod terminal to commit to Git and Push to GitHub.

• Gitpod

  • Used as the development enviroment.

• Balsamiq

  • Used to create the wireframes for the project.

• AutoPrefixer

  • Used to parse my CSS and ass vendor prefixes.

• Grammarly

  • Used to fix the thousands of grammar errors across the project.

Testing User stories from User Experience Design (UX) Section

User Story Testing

Further Testing

• The project was tested on the following browsers with success, Google Chrome, Microsoft Edge, Mozilla Firefox, and Opera.
• Project was manually tested on an iPhone 11 and a Samsung A70 with success.
• Google Chrome Developer tools were used throughout the project to help me to test the responsiveness across devices.
• Google Chrome Developer tools used to emulate devices,
  • Apple iPad
  • Apple iPad Pro
  • Microsoft Surface Duo
  • Motorola G4
  • Samsung Galaxy S5
  • Google Pixel 2/2 XL
  • Apple iPhone 5/SE
  • Apple iPhone 6/7/8
  • Apple iPhone 6/7/8 Plus
  • Apple iPhone X

I used the W3C Markup Validator and W3C CSS Validator to validate every page of the project to ensure there were no syntax errors in the project.

• W3C CSS Validator

  • W3C CSS Validator Results

• W3C Markup Validator

  • Home page Results
  • Origins page Results
  • Philosophy page Results
  • Contact Page Results

Known Bugs and Fixs

• Page titles were not updated in the head element of the HTML files.
  • Updated the head element for each file, so that the page title in tabs reflects the current page.
• Social Links in footer were not updated.
  • Removed the placeholdertext and replaced with correct link to social media link and checked it opens in a new tab.
• On very wide screen resolutions (21:9 Aspect ratio, 3440x1440), the description for the image was diplaying to the right of the image and not undeneath. Image of issue
  • Added display: block to the image CSS to have the image desciption correctly sit below the image.
• On Chrome Dev Tools, on mobile and tablet views, extra horizontal space was appearing the right, making the page appear wider.
  • Added overflow-x: hidden to the html and body in CSS, credit for this fix goes to Stackoverflow/questions when I looked up a fix for the issue.
• On 320px width devices, the jumbotron was appearing larger than the screen width. Image of issue
  • Added media query @media screen and (max-width: 320px) and reduced the font sizes as well as adding margin space to the top.
• W3C Markup Validator flagged up errors across all pages because of the way I was using comments to structure my code, using more than two hypens in a comment would flag the error. Image of issue
  • Instead of <!-------, I instead just used <!-- ====. It still allowed me to structure my code so that was easier to read but fixed the error too. Credit for this fix goes to the Stackoverflow/questions when I looked up a fix.
• Jumbotron appeared to large when the Home page wage was viewed on mobile devices in portrait mode. Image of issue
  • Adjusted the media query @media screen and (max-width: 320px) fix to @media screen and (max-width: 640px) to fix the issue.
  • After further testing with Chrome Dev tools I believe @media screen and (max-width: 752px) to be a better all round fix, applies the previous fix to the Iphone 6/7/8 models when viewed in portrait mode.

Github

This project is deployed using GitHub pages using the following process,

Deploying a GitHub Repository via GitHub Pages

1. In your Repository section, select the Repository you wish to deploy.
2. In the top horizontal Menu, locate and click the Settings link.
3. Inside the Setting page, around halfway down locate the GitHub Pages Section.
4. Under Source, select the None tab and change it to Master and click Save.
5. Finally once the page resets scroll back down to the GitHub Pages Section to see the following message "Your site is ready to be published at (Link to the GitHub Page Web Address)". It can take time for the link to open your project initially, so please don't be worried if it down not load immediately.

Forking the Github Repository

You can fork a GitHub Repository to make a copy of the original repository to view or make changes without it affecting the original repository.

1. Find the GitHub repository.
2. At the top of the page to the right, under your account, click the Fork button.
3. You will now have a copy of the repository in your GitHub account.

Making a Local Clone

1. Find the GitHub Repository.
2. Click the Code button
3. Copy the link shown.
4. In Gitpod, change the directory to the location you would like the cloned directory to be located.
5. Type git clone, and paste the link you copied in step 3.
6. Press Enter to have the local clone created.

Code

• Stackoverflow

  • Helping find to solution to the margin issue appearing on Chrome Dev tools.

• Matt Rudge, Code Institute

  • Navbar style.
  • Dark Overlay on the Home Page hero image.
  • Social Media icons layout in the footer.
  • Hover effect on the social media icons.
  • Form on the Contact Us page.

• Drew Ryan

  • Idea for the text shadow was taken from his video, to help the jumbotron text stand out on the hero image on the Home Page. Link to video

• Bootstrap

  • Bootstrap Library used throughout the project mainly to make site responsive using the Bootstrap Grid System.

Content

• Color Tool

  • Used to help find and select colors used throughout the project.

• Onelittleangel.com

  • Used to find quotes used on the Philosophy page.

• Learnreligions.com

  • Main source of information for the Origins Page.

• Beliefnet.com

  • Used for content inspiration throughout the project.

• Sikhiwiki.org

  • Used for content on the Origins page.

• Wikipedia

  • Used for content inspiration throughout the project.

• Gursikhs-hukam.blogspot.com

  • Used for content on the Philosophy page.

• Allaboutsikhs.com

  • Used for content on the Philosophy page.

Although none of the content used through the project was directly copied, a large part of the inspiration and vocabulary came from the websites listed above. This project would not be possible without help from the websites.

Media

• Pixabay

  • Used for images throughout the project.

• Unsplash

  • Used for images throughout the project.

Acknowledgements

• Polygon

  • A large inspiration behind the project on how effective the hero images on top of the pages can be and how to structure the text around floats and sub headings.

• PCGamer

  • How to structure the text across multiple devices and remain responsive was taken from how PCGamer structure their articles.

I would like to personally thank everybody who has gone through this very very long readme and joined me on my journey to become a programmer. I sincerely hope you enjoyed the project and have found it useful and knowledgeable. A large part of this project was done on my own, but I also had the help of my mentor Aaron Sinnott, who gave me ideas on how to structure the large amounts of text. Apologies for any issues with the language and vocabulary used during this project, English is not my first language but I can assure you I am proficient at the language.

I hope whoever you are and wherever you are, you are staying safe during this pandemic and you are well. May Waheguru bless us all. :)