• Contents
• ToDoList
  • UX
  • Site Purpose
  • Site Goal
  • Audience
  • Communication
  • Current User Goals
  • New User Goals

• Design
  • Colour Scheme
  • Typography
  • Imagery
• Features
  • Existing Features
  • Future Features
• Testing
  • Validator Testing
• Technologies Used
  • Main Languages Used
  • Frameworks, Libraries & Programs Used
• Deployment
• Credits
  • Content
  • Media

The ToDoList site is live, the link to which can be found HERE

Help you to organize your daily tasks.

The intent of the website is to introduce our audience to an app that keeps track of their daily tasks.

It is targeted at an audience of all ages.Those who want to become more disciplined.

With a clear & bold design, this app is easy to use and interact.

To add track their daily tasks and manage their time and energy.

To gain a good experience of organizing their daily tasks.

The colour palette was created with the thought to provide as much contrast as possible.

Merriweather was selected as font for the main heading and body. The colors have contrast and the content are easy to see.

The image which is used in header was downloaded from google.

Shows the date of the day you are opening it.

Allows you to input new task.

Allows you to check which tasks are completed or which ones are not completed.

A list of the tasks to be done.

Shows a task that is completed and you can either remove it or keep it.

• The feature to add the exact due time for a task.

The media queries were very challenging. It took a lot of trial & error in the Chrome Dev tool to adjust everything accordingly so that it would not display horribly when the page was to be resized. I faced problem figuring out the right rules for the form responsivity issue specialy for less than 500px wide screens. And it seems to still have problem. I got stuck on how to change the place of input element and select element when the screen gets smaller,then I figured out to use two form elements.

• Html files pass through the W3C validator with no issues found.
• CSS files pass through the Jigsaw validator with no issues found. -This is page's rating in Lighthouse
• JavaScript code passed through Jshint with no significant issues.
• Tested the site opens in Brave, Chrome & Safari without issues.
• All links open to external pages as intended.

• HTML5
• CSS3 -JavaScript

• Google Fonts
• Font Awesome - to add icons to the buttons and h1.
• GitPod - to creat my html files & styling sheet a script sheet before pushing the project to Github.
• GitHub - to store my repository for submission.
• Am I Responsive? - to ensure the project looked good across all devices.

The site was deployed to GitHub pages. The steps to deploy are as follows:

• In the GitHub repository, navigate to the Settings tab
• Go to the page section. From the source section drop-down menu, select the main Branch
• Once the main branch has been selected, the page will be automatically refreshed with a detailed ribbon display to indicate the successful deployment.
• The live link can be found HERE-->ToDoList

The base code of the project is taken from This tutorial in youtube.

The image in the header was downloaded from google.