/template

Template for Directories and Readme

Primary LanguageShell

Website Title

mockup

Check out the other mockup:

  • ["PAGE NAME"](assets/images/README-images/mockup/ami-responsive-"PAGE NAME".png)
  • ["PAGE NAME"](assets/images/README-images/mockup/ami-responsive-"PAGE NAME".png)
  • ["PAGE NAME"](assets/images/README-images/mockup/ami-responsive-"PAGE NAME".png)
  • ["PAGE NAME"](assets/images/README-images/mockup/ami-responsive-"PAGE NAME".png)
  • ["PAGE NAME"](assets/images/README-images/mockup/ami-responsive-"PAGE NAME".png)

Visit the live Website : ["WEBSITE NAME"]("WEBSITE LINK").

SHORT DESCRIPTION AND DEFINITION OF THE WEBSITE STATUS AND GOALS

Table of Content :

Project

Project Goals

"WHAT IS THE GOAL OF THIS PROJECT ? ............."

Developer and Business Goals

  • "LIST OF THE GOALS
  • Develop a ...... website using ...... technologies * *
    • Using a User Centric Development approach (UCD).

User Goals

  • "FROM THE USER PERSPECTIVE, WHAT IS THERE GOALS WITH USING THE WEBSITE ? "
    • LEARNING ABOUT....
    • PLAYING ....
  • GENERAL OBJECTIVES
  • SPECIFIC OBJECTIVES
  • SEEING THIS AND THAT ....

🔙 Table of Content

UX

Audience Definition

"WHAT IS THE TARGETED AUDIENCE AND WHO ARE THEY ?"

The targeted audience for this website is looking for :

  • "DEFINITION OF THE TARGETED AUDIENCE BY ASSESSING THEIR NEEDS"
  • GENERAL GOALS
  • SPECIFIC GOALS

This website is the best way to answer their needs because :

  • It provides SOMETHING THAT ANSWER THEIR NEEDS
  • It provides USEFUL ...
  • It gives inspiration and motivation for ...
  • It provides ...
  • It gives information about ...

🔙 Table of Content

User Stories

  1. As a first time user, I want the website to be appealing.
  2. As a first time user, I want the navigation to be easy and intuitive.
  3. As a first time user, I want the content to be informative but not overwhelming.
  4. As a first time user, I want to understand immediately what is the website about without the need of looking for it.
  5. As a first time user, I want to be able to DO THIS ....
  6. As a returning user, I want to see THAT ....
  7. As a returning user, I want to check out the different social media links for inspiration and ideas.
  8. As a returning user, I want to get information ...

🔙 Table of Content

Design Choices

Fonts

Considering the targeted audience AND BUSINESS... GOALS , I CHOOSE THIS BEACAUSE ...

Icons

"CHECK AND DOUBLE CHECK THE LINKS..... ADD AND ADAPT THE CONTENT ...."

  • FontAwesome icons will be used for better user experience.
  • The logo and favicon are the same image for comfort and consistency and use the same color scheme as the website.

Colors

The color scheme of the website has been extracted from a picture using Adobe Color and swatches are said to be color blind safe by the same website using the accessibility tool.

color scheme

As well an "COLOR" is used for links. An "COLOR" is used for font color. They are distinctive and with a good contrast.

Images

"HOW AND WHAT IMAGES ARE USED AND FOR WHAT PURPOSES"

Styling and Feeling

"GENERAL AMD SPECIFIC FEEL OF THE WEBSITE"

🔙 Table of Content

Wireframes

"THEY CAN BE DONE AS WELL PER PAGES COMPARING THE LOOK OF THE PAGE ON DIFFERENT SCREENS AT ONCE."

Different Design

"IF THE LIVE WEBSITE IS DIFFERENT FROM THE WIREFRAMES" Some designs are different from the wireframes because of user experience compliance, accessibility, technical skills and time.

Site Map

"STRUCTURE OF THE WEBSITE IS DIFFERENT IN THIS AND THAT WAY BECAUSE ...."

footer

Home

PAGE NAME

PAGE NAME

  • ....

🔙 Table of Content

Features

Existing Features

Repeated Features

On all pages and devices there is ........

FEATURE DESCRIPTION OF THE FEATURE

FEATURE DESCRIPTION OF THE FEATURE

All pages feature .... SOMETHING FOR THIS PURPOSE ....

Home

DESCRIPTION OF THE FEATURE

PAGE NAME

DESCRIPTION OF THE FEATURE

PAGE NAME

DESCRIPTION OF THE FEATURE

🔙 Table of Content

Features to Implement in the Future Versions

PAGE NAME

FEATURES TO BE ADDED CHANGES TO BE DONE

PAGE NAME

FEATURES TO BE ADDED CHANGES TO BE DONE

Additional page

FEATURES TO BE ADDED

🔙 Table of Content

Technologies Used

Programing Languages

This project uses ...

Frameworks, Libraries and Programs

🔙 Table of Content

Deployment

This project was developed on GitPod Workspaces IDE (Integrated Development Environment) committed and pushed to my [Github Repository](https://github.com/Tom-Nagy/"REPO NAME") using GitPod Command Line Interface (CLI).

Live Deployment

To make this website accessible to the public, Walking Around has been deployed on GitHub Pages as follow :

  1. Log in to my GitHub account.
    • To create an account you need to sign up on GitHub.
  2. Go to my Repositories and select the repository corresponding : [WEBSITE NAME](https://github.com/Tom-Nagy/"REPO NAME").
  3. Navigate to Settings :

settings ===> TO BE ADJUSTED TO THE PROJECT SO THE RIGHT REPO NAME APPEARS ON THE IMAGE

  1. Scroll down to the GitHub Pages section.
  2. Click on the None dropdown menu and select the branch to publish : master.

selection of branch to publish

  1. Click on Save.
  2. The website is now deployed.

The link to the website is found in the GitHub Pages section of the repository settings.

website link ===> TO BE ADJUSTED TO THE PROJECT SO THE RIGHT REPO NAME APPEARS ON THE IMAGE

🔙 Table of Content

Local Deployment

Cloning

When a repository is created on GitHub, it is located on GitHub website ("remotely"). You can create a copy of the repository locally on your machine. This process is called : "Cloning a repository".
When cloning a repository you are actually copying all the data that the repository contains at that time to your machine.

To clone a repository, take the following steps :

  1. Create a GitHub account.
  2. Click on the Code dropdown button above the files list.
  3. There are three options available to clone the repository :
    • using HTTPS
    • using SSH key
    • using GitHub CLI

clone options ===> TO BE ADJUSTED TO THE PROJECT SO THE RIGHT REPO NAME APPEARS ON THE IMAGE

  1. Choose an option and copy the link given.
  2. Change the current working directory to the location where you want the cloned directory.
  3. Open your IDE and in the CLI type : git clone and paste the link copied on step 4.

$ git clone https://github.com/YOUR-USERNAME/YOUR-REPOSITORY

  1. Press Enter to create your local clone.

For further information please go to Cloning a repository.

Using GitPod

To Clone a repository Using GitPod, take the following steps :

  1. Create a GitHub account.
  2. Install the GitPod extension for Chrome or Add-on for Firefox.
  3. Navigate to the corresponding repository.
  4. Click ont the GitPod button on the top right of the files list.
  5. This will open a workspace on GitPod where you can work on the repository locally.

The very first time that you do this, you need to connect GitPod and GitHub together. You need to log in with GitHub and launch your workspace (As explain above). And then you need to authorize GitPod to be able to access your GitHub account. You agree to GitPod's terms and conditions, and then create a free account. Then, it will open the workspace for you. Quote from : "Creating a GitPod Workspace" on Code Institute Full Stack Software Development Programme, by Matt Rudge.

Using GitHub Desktop

An other option is available : GitHub Desktop. It consist of cloning a repository from GitHub to GitHub Desktop.
For full information about how to use this option, please visit GitHub Docs.

Forking

Forking a repository will copy it in your own repositories in GitHub.

A fork is a personal copy of another user's repository that lives on your account. Forks allow you to freely make changes to a project without affecting the original upstream repository. You can also open a pull request in the upstream repository and keep your fork synced with the latest changes since both repositories are still connected.

To Fork a repository take the following steps :

  1. Create a GitHub account.
  2. Navigate to the corresponding repository.
  3. Identify the fork button on the top right of the page and click on it.

forking ===> TO BE ADJUSTED TO THE PROJECT SO THE RIGHT REPO NAME APPEARS ON THE IMAGE

  1. Now you should find a copy of the repository in Your repositories.

🔙 Table of Content

Testing

Testing information are published in a separate file : TESTING.md

Bugs

Solved

Issue :
Solve :

Issue :
Solve :

Unsolved

Issue :

Issue :

🔙 Table of Content

Credit

Content :

"TO BE ADJUSTED AND COMPLETED"

W3schools
For general database on software development.

Hostinger Tutorials
Provided the link and explanation on how to install the favicon for the website.

George Dimitriadis
For text-shadow tricks used in css to make text more readable.

GeeksforGeeks
For tips on vertical alignment in CSS.

USERWAY
For explanation on best use of the required attribute.

SJ_OWOW
For vertical align code snippet used in css.

coder coder! For explanation and code snippet on overlay on background image used in css.

Media

Social Media links :

[Facebook](WEBSITE LINK)
[Instagram](WEBSITE LINK)
[Pinterest](WEBSITE LINK)

"SPECIFIC PAGE" links :

[NAME](WEBSITE LINK)
[NAME](WEBSITE LINK)

Images :

Some of the images used on the website are taken from a ...............

  • Pictures from Pexels:

    • For the "PROFILE"
      [Photo by ARTIST NAME](PICTURE LINK)
      [Photo by ARTIST NAME](PICTURE LINK)

    • For the "FEATURES"
      [Photo by ARTIST NAME](PICTURE LINK)
      [Photo by ARTIST NAME](PICTURE LINK)

    • For background image
      [Photo by ARTIST NAME](PICTURE LINK)
      [Photo by ARTIST NAME](PICTURE LINK)

Aknowledgements :

Special thanks to all Code Institute's team ("Teacher", Lecturers and Tutors) that are making me more knowledgeable and are making this happen.

Huge thank you to the Slack community, its all the members and all the leads and tutors for their help and support.

Thanks to my mentor .......MENTOR NAME for guiding me through this project.

🔙 Table of Content