WORLD EMOJI DAY

A guide to educate people about the different meanings of emojis for different cultures.

The live website can be found here 👉 Emojourney.

Table Of Contents

• Introduction
• UX
  • User Goals
  • User Expectations
  • Wireframes
• Features
  • Navigation Bar
  • Website Theme Logo
  • Guide
  • Team
• Technologies Used
  • Languages Used
  • Frameworks, Libraries & Programs Used
• Testing
  • Validator Testing
  • Manual Testing
• Deployment
  • GitHub Pages
  • Forking the GitHub Repository
  • Cloning the GitHub Repository
• Credits
  • Code
  • Content
  • Media
  • Other

Introduction

User Goals

1. I communicate with many people online, and want to make sure that my messages aren't being misunderstood
2. I want to learn some fun facts about emojis for world emoji day
3. I'm a traveller who wants to know facts about other countries before I go

User-Expectations

1. I expect to find content easily
2. I expect content to be laid out in an easy to access way
3. I expect to be able to find out new information in an interesting way
4. I expect the website to respond to changes in screen size.

Wireframes

Features

Navigaton bar

• The navigation bar contains links to all the other pages within the project, it is reposnsive to sizing and resizing for different screen sizes and resolutions.
• The Nav bar is also responsive in sjowing which page the user is currently on, this solves user expectation 1
• The nav bar links has aria labels for acessibility

Guide

• The guide utilizes java script functionality to allow the cards to flip and reveal more information, this solves user expectation 3
• The cards show the images of the emoji on the side, with alt tags allowing users to access the images even if they can't see them due to internet or disability issues, this solves expectation 2

Team

• The team page allows users to see the people behind the project, also providing links to our linkedin pages and github pages

Landing page

• The landing page provides an explaination into the project, as well as a button taking users to the guide

Features left to implement

Technologies used

Languages Used

• HTML
• CSS
• JavaScript

Frameworks

• Bootstrap5
• Google Fonts
• Font Awesome

Testing

Validator Testing

• HTML

  • No errors were found when passing throught official W3C Validator.

• CSS

  • No errors were returned when passing through the Jigsaw.

• JavaScript

  • No errors were returned when passing through the JSHint.

• Accessibility

  • I confirmed that the colours have enough contrast and fonts chosen are easy to read, and all links, icons and images have descriptive text for screen readers running it through Lighthouse in Chrome DevTools.

    • Desktop

    

    • Mobile

    

Deployment

Webapp deployed to GitHub Pages. The steps to deploy are as follows:

• On the project page, click on Settings
• Choose Pages on left menu
• In the source section, choose the branch that you would like to deploy (e.g. main)
• Click on the save button, and after a few seconds, you will have access to the URL of the deployed site.
• The live website can be found here 👉 Emojourney.

Forking

To access all the files in their repositories, the team participants forked Alissa's repositories from GitHub on the Fork button on the top right of the page and them on Create fork after the page refreshes.

Cloning

For those team members that choose code using a code editor, the cloning process was as a following:

• On the repository forked, click on Code and copy the URL.
• Open the terminal on the working folder and type the command git code https://github.com/alissatroiano/team-8.git and hit the key "Enter".

Credits

Research

• Rest of World
• Mashable
• Preply
• Local Concept

Code

• Codepen
• Design Shack

Media

• Emojis
• Landing Page image

Other

• The code was initialized using the Code Institute template
• The Wireframes used in this project were created using Balsamiq
• The website mockup used in the README and testing phases was done using Am I responsive