A screenshot of the ELI website.

Website Development

Google Site for Tutorials

Our e-learning department at a university made a Google site of tutorials for teachers. When our institution made the change to online teaching, the website was expanded. It helped teachers to make the transition to online teaching and reduced individual questions to the e-learning department.

Each website section had buttons for easy navigation on mobile and computer.

Blackboard Course for Faculty

The original Google site for teachers was public to anyone on the internet, so there were limitations to the types of content we could share. To improve this, I established and maintained a Blackboard course for English teachers at a university and taught other managers how to edit parts relevant to them. It was only accessible to teachers and contained tutorials and other regulations, and links to resources.

Website built with Bootstrap

  • Brief Description: Renewed a language institute’s website using HTML and CSS and the bootstrap framework.
  • Role: Collaborated with all managers to get content approved and wrote the code in collaboration with the web developer.

Problem

  • Challenge: The website was externally embedded and hosted outside the country which was not allowed by the IT department. It had hundreds of outdated pages.
  • Objectives: Remove all unnecessary content, establish a process for managers to share required website content, write all code in required university system. All content in English and Arabic.

Context

  • Background: Code had to use bootstrap. I had little experience with coding but wanted a challenge.
  • Target Audience: Students, faculty and general public visiting the website.

Solution

Implementation

  • Process: I first created a site map giving each stakeholder a website section and approved it with management.
  • Then I established a spreadsheet to show a complete list of each page. I linked each row of the spreadsheet to Google docs which the managers would use to write their content in English and Arabic.
  • I worked with translators and managers using a highlighting system to show the stages that the text in each document was up to – different colours for if the text was in draft stage ready to be published or published.
  • The spreadsheet contained links to the HTML files all hosted on a shared Google Drive as a backup.
  • Images were also uploaded to the shared drive. I worked with managers to establish a system of forms for people to give permission to add their photos to the website.
  • In the end the spreadsheet contains links to the Google doc draft, the HTML backup files and the live website page.
  • Timeline: Took about 6 months while teaching most days to complete the project.

Results

  • Outcomes: An easy to navigate, up to date and mobile friendly site
  • Metrics: Positive feedback from management.

Reflection

  • Learnings: It’s great to push myself and volunteer for technical challenges as there are plenty of websites to help learn coding. I used lots of trial and error to learn what works well.
  • Future Improvements: If done again, I’d use the same system of combining a spreadsheet to view all pages and a google doc for people to write their content for each page. The website system didn’t allow Javascript but that’s an area I’d like to improve on.

Visuals

  • Images/Screenshots: