The primary goal of Luconia Geology Institution is to offer a diploma course in Petroleum Geology. The target audiences of Luconia Geology Institution are Pre-U student and experienced workers who wish to switch their career in the petroleum geology sector.
The webpage will show the selling points and advantages of taking this diploma course in terms of the user's future career pathway.
- Course that is focusing mainly on petroleum geology sector.
- A detailed description of the modules.
- The modules provided are easy to navigate with a click.
- Fascinating lectures and practical work.
- The contents are clearly arranged.
Luconia Geology Institution provides the essential courses that fulfil the players' need as in:
- Available modules outlines are easy to see when the user browses the website for the first time.
- The reasons for choosing Luconia Geology Institution are clearly shown on the home page.
- A detailed description of the modules provided are created on different web pages.
- Well-structured content created from programming that provides a user-friendly webpage of Luconia Geology Institution.
- A junior developer using HTML and CSS to showcase the coding skill and as a first portfolio.
- I want to know the main content and the purpose of the site trying to show.
- I want to know the modules outline easily with a glance without using much time searching them on the site.
- I want to know the details of each module offered by the site which can be shown clearly and in an orderly arrangement.
- I want to know the competitive level of the course as compare to the other sites so it is worth the cost.
- I want to locate the affiliated companies with which the institute is collaborated with.
- I want to see their posts on social media to assure credibility.
- I want the easiest way to contact the institute for further queries and sign up.
- Imagery
- The main background image on the home page is using a large image of an offshore rig. The idea of using this offshore rig picture is to catch user's attention. It gives a feeling of the relation between the course and the potential future employment environment.
- The modules backgrounds are set to be geology-related because those images are the real example of study cases which fit into each module respectively.
- Color Scheme
- The main colours used are dark cyan for the navigation bar and institute title, and teal blue colour for the bottom footer section.
- White colour is used for the title and text to give a contrast so it is easy for the user to read.
- Lightning yellow colour is used for the top navigation link when these links have hovered which present a great contrast to the navigation colour.
- Typography
- Oswald and Roboto font are the main font used throughout the whole website with Sans Serif as the fallback font in case the font is not being imported correctly to the site.
- Oswald and Roboto font looks good on a wide range of screens which are mobile, tablet, and desktop.
- Styling
- Each of the links/pages has the same navigation menu so the user can direct to the other main navigation sites when they are browsing particular links.
- Each of the links/pages has a background image to show consistency throughout the web pages.
- Each of the links/pages has the contact information and social media links so the user can acquire the information of the institute easily.
Balsamiq was used to create the following wireframes while planning the project and the Scope Plan section.
Each page consists of a responsive navigation bar sitting at the top page. The branding of the website is located on the top left, whereas the navigation links are situated on the top right. Each page consists of a footer with the contact and location details of the institute, together with the social media icons linking to each social media platform.
The navigation links comprise the home page, why us page, modules page, and sign up page. Each of this page features a specific main background image to match the information that the particular page is trying to show to the audience. Those images contain the upper half of the webpage.
Home
The Home page features the main background image of an offshore rig that contains the landing page. This idea is to give the audience a visual impact and relate this image to the course provided by the institute. All the navigation links are shown at the top-right position with a white font colour to give contrast to the cyan background colour. The title of the course is shown on the landing page which can be seen easily following by a brief description of the course structure. The navigation links are consistent across desktop, laptop, and tablet resolution, whereas a menu bar is shown in mobile resolution to fit the relatively small screen size. The affiliated company logos are shown as well and featured with links so the user can search for more information about the partner company by directing to a new page.
After the affiliated company logos are the modules section which the institute is offering. They are aligned side by side with the name of the modules attached. Each of the modules has a background image that is relating to the course. A link right below is named: "Read More" is shown so the user can direct to the module page with a click to explore the details of the course. Easy navigation is vital for the user so the navigation bar is fixed at the top, hence it is always shown when the user scrolls down the page.
Why Us
The Why Us page features the main image showing a group of students working together in a library with book racks behind them which indicates the study environment of the institute. The page consists of the three reasons for choosing the institute. Each reason section has a small image and a description. These reasons are to show to the user the advantages of choosing this institute in terms of learning, funding, and internship opportunity. In the mobile resolution, the images which are placed right beside the description are hidden to conserve the limited space on mobile screen size and shows only the important description to the user.
Modules
The modules link is shown as a dropdown in the navigation bar. Each of the modules is shown accordingly when the user clicks on the modules link. The three modules have their own webpage with a background image and the module title wrap within the image. The middle section of the page is the module detail. The user can get to know what are the learning outcomes and level up their competitiveness.
Apply Now
The Apply Now page features a contact form that requires the user to fill up their name, email, phone number, username, and password. The bottom of the form consists of a submit button named Register Now. The forms are aligned on top of each other in mobile resolution.
- Header Brand - Appears on every page. It allows all the users to spot it easily since it is placed at the top left of the webpage.
- Header Navigation Bar - Appears on every page. It allows all the users to navigate to different website's pages and their content easily.
- Hover - Appears on the navigation bar. The style of each link changes upon the user interaction as they hover their cursor over it or clicking on it.
- Footer Social Icons - Appears on every page. It allows all the users to browse the social media platform that the institute uses.
- Footer Contact Info - Appears on every page. It allows all the users to reach the institute via calling the number and email. The number and email are set as a link format so the users can click on it and it will direct them to either the phone calling interface or email interface.
- Why Us Page - Allows the users to know the pros of taking the course offer from the institute.
- Modules Page - Basin Analysis - This allows the users to understand what is basin analysis.
- Modules Page - Reservoir Engineer - This allows the users to understand what is reservoir engineer.
- Modules Page - Seismic Interpretation - Allows the users to understand what is seismic interpretation.
- Apply Now Page - Allows users to proceed with their first step of registration with the institute.
- Subscriber opt-in pop-up screen - Allows all new users to have an option to sign up for the email newsletter to receive any announcement from the institute.
- Add English proficiency testing to sign up form. Users will have to key in their IELTS score to check if they meet the minimum requirement.
- Academic calendar - Shows the timeline of in-class, field-work, and internship period.
- Feedback pop up form - Use to capture insights of the user experience.
- HTML and CSS programming languages are used in this project.
- The developer uses Gitpod for their integreted development environmet (IDE) which can be launched from Github to build the website.
- BoostrapCDN - Used to provide website's structure and makes the website to be responsive across different screen resolution. Furthermore, it provides icons from FontAwesome.
- Google Fonts - Roboto and Oswald font family were imported to style the website fonts.
- jQuery - For responsive navbar.
- Popper.js - For responsive navbar.
Testing documentation is created in TESTING.md file
This project is developed using Gitpod, committed to git, and pushed to GitHub via the build-in function in gitpod. The detailed steps are stated as below:
- Git add filename - This command was used to add selected files to the staging area before committing.
- Git commit -m commit message stating the updates - This command was used to commit changes to the local repository.
- Git push - This command is used to push all committed changes to Github repository and all the files are safe.
The steps to deploy the page to Github Pages from its GitHub repository are shown as below:
- Log in to Github.
- Choose kenweechin/luconia-geology-institute from the list of repository.
- Click on Setting on the right of the menu section near the top page.
- Navigate to the Pages in the left sidebar and click on it.
- Under GitHub Pages, use the Branch or None dropdown menu, then select Master Branch.
- Click on Save button on the right, and the website is now deployed.
- Follow this link to create an account if you don't have one yet.
- Make sure to use Chrome browser when you are working on Github and Gitpod.
- Subsequently, install the Gitpod Browser Extension and restart the Chrome browser after that.
- Once the installation is done, log in to your Gitpod and navigate to (Project Github Repository){https://github.com/kenweechin/luconia-geology-institute}.
- Click on the green colour "Gitpod" button located near the top right of the page. This will create a new gitpod workspace generated from github, and you are free to work on it locally.
- Navigate to the main page of the repository on Github.
- Click on the "Code" in green button.
- Click "Open with Github Dekstop" to clone and open the repository with Github Desktop.
- Follow the prompts in Github Dekstop to finish the clone.
- The text for the Basin Analysis module page was taken from Southampton University.
- The text for the Reservoir Engineer module page was taken from Curtin University.
- The text for the Seismic Interpretation module page was taken from Curtin University.
- Most of the photos used in this project were taken from Unsplash, the internet’s source of freely-usable images.
- The image with a sandstone formation in the Why Us page was taken by Ken Wee Chin during the field trip.
- I have the inspiration of creating this project from my past career background as a Petroleum Geologist, and the course I have taken from MSc in Petroleum Geoscience in University College Dublin, Ireland.
- Special thanks to my mentor, Mr Spencer for valuable suggestions on the project and the way to improve them.