/basic_tasks

Basic Tasks to learn HTML, CSS and JS.

Basic Tasks

A set of simple tasks to get started with learning HTML, CSS and JavaScript.

###General Practices and Instructions to follow:

  1. Each task needs to be under a separate directory, for example task 1 will be in a folder named "task_1", task 2 will be in "task_2", so on so forth. Keep the naming convention as shown.
  2. Each task will have 3 parts to it:
  • The first part is a sub task to create HTML only. This will be under a folder named "html_task".
  • The second part is a sub task to create styles for the existing html structure. This will be under a folder named "css_task".
  • The third part is a sub task to create JavaScript for the existing html and css. this will be under a folder named "js_task".
  1. At the end of each task request for a code review (Completion of a task and not individual sub tasks)
  2. Following is how each task folder structure should look like:
  • task_1 (Name the task as shown and not by the name of the task)
    • html_task (Will contain only your html task)
      • index.html
    • css_task (Will contain CSS task along with the HTML task from the previous sub-task)
      • index.html
      • css
        • main.css
    • js_task (Will contain JS tasks along with CSS and HTML tasks from the previous sub-task)
      • index.html
      • css
        • main.css
      • js
        • app.js
  1. And yes the code for each sub-task has to be re-done in the other sub-tasks. As the tasks mature and you are comfortable with all three of programming paradigms, this practice will be stopped. (No Copy Pasting Allowed of code or files:smile:)

###Task List (The tasks list will grow as time progresses, feel free to suggest any new ideas for tasks)

  1. Tasks 1 - Create a simple user registration form.
  • HTML Sub Task
    • Create simple form for user registration containing the following fields:
      • First Name
      • Last Name
      • Gender
      • Email ID
      • Password
      • Phone Number
      • Address
      • Personal Description
      • Terms and Conditions
      • Submit and Cancel/Clear
    • For the above HTML, apply styles
    • For the above HTML and CSS apply validation as follows:
      • Mandatory Fields
        • First Name
        • Last Name
        • Gender
        • Email ID
        • Password
        • Terms and Conditions
      • Valid Input checks
        • Name should not contain numbers
        • Email address validity
        • Password check