Task1

Single Page Applications (SPA) are web pages where the server transmits only a single HTML outline.
Content is then dynamicaly filled through the use of server calls and div sections.

For the first task of this lab you will create a basic framework to support this style of web page. Part B
of the lab will involve utilizing Angular toadd dynamic operation.

Setup

Web development strongly benefits from consistent and clean directory structure. This lab will take
the previous structure, one folder per checkpoint, and expand upon it. For each checkpoint in this
lab image, scripts and stylesheets should be in their own directories. This basic structure has been
provided within the web_dev directory.

All HTML content for these pages should be in an index.html page:

Folder Structure

• -->images
• -->scripts
• -->styles
• index.html

As with previous checkpoints the html page should contain relevant link, author and Meta tags.
Meta tags should include:

• content
• author
• keywords
• charset(UTF-8)
• viewport

Task Description

Using html tags and CSS create a close replica of the provided page:

Task2

Mini Project:Task Tracker Application

Objective:

Create a simple Task Tracker application using vanilla JavaScript, HTML, and CSS to perform
basic CRID operations on tasks.

Instructions:

1. Setup Project Environment
• Create a new directory for your project.
• Set up basic HTML, CSS, and JavaScript files.
2. Design the UI
• Create a simple and user-friendly interface with the following elements:
  • An input field to add new tasks.
  • A button to add the task.
  • A list to display all tasks.
  • Buttons to edit and delete tasks.
3. Implement CRUD Operations
• Implement the following functionalities:
  • Add Task: Add a new task to the list.
  • Display Task: Display all tasks in the list.
  • Update Task: Edit an existing task.
  • Delete Task: Remove a task from the list.
4. Test Application
• Test the application to ensure all CRUD operations work as expected.
5. Document Application
• Provide brief documentation of the application, including setup instructions and a
  description of the functionalities.

Deliverables:

• Source code of the project.
• Documentation of the application.
• Screenshots or a video demonstration of the application.

Task3

Task4

Task4:Create the HTML and CSS cod needed to display an ordered list with a specific set of CSS effects. You must use the sameinformation and styling as below.

Design Requirements:

• The type of symbol used for the nested list must be specified inline with correct CSS declaration.
• The italic styling used for the nested list should be specified inline with correct CSS declaration.
• HTML character entities must be used where appropriate.

Please Note:

• The list should be placed within the div already provided by the submission template.
• Use indentation within your code to improve its overall readability.

Task5

List of Vegetable

1. Carrot
2. Radish
3. Sweet Corn
   1. Fruit List
      1. Pomogranate
      2. Banana
      3. Pears

Task6