CIT (Web Development) Course Outline

Course Contents / Lesson Plan

Course Title: CIT ( Web Development )

Duration: 3 Months

 

Scheduled Weeks Module Title Days Learning Units Home Assignment
Motivational Lecture
Week 1 Course Introduction
Day 1 Job market
Course Applications
Introduction to World Wide Web
Website
Day 2 Web Pages
Different types of websites
 

Day 3

 Architecture of static and dynamic Webpages
Compare Static websites with

Dynamic websites
Introduction &

Front-End Development (Basics)

 Difference between Frontend & Backend Language

Install Chrome Browser Chrome Web Developer Tools
Day 4 Install VS Code Editor
What Is HTML?
HTML building blocks
Basic HTML Page Structure
Headings & Paragraphs
 

HTML Formatting
Day 5 HTML Attributes

 

 

Week 2    

 

Day 1

 Block Level Element vs Inline Element

HTML Tag vs. Element HTML Image & Link

 ●     Task 1 To

●     Task 17
 

 

 

 

 

 

 

 

HTML & CSS

  

Day 2

 HTML Table HTML Lists
Day 3 HTML Forms
 

Day 4

 HTML Layout Elements HTML Iframe

HTML Media Elements
 

Day 5

 What is CSS?

CSS Syntax Selector Types
Inclusion  

 

 

 

 

 

 

 

 

 

●     Task 18 To

●        Task 25
Week 3 CSS Rules Overriding
CSS Comments
Day 1 CSS Colors
CSS Backgrounds
CSS Borders
CSS &

Bootstrap

  

Day 2

 CSS Margins

CSS Padding
CSS Height/Width
CSS Lists
CSS Tables
Day 3 CSS Display
CSS Float
What Is Bootstrap?
Bootstrap Grid System
Day 4 Bootstrap Colors
Bootstrap Buttons

 

 

 

 

 

Day 5

 Bootstrap Navbar

Bootstrap Modal

Bootstrap Tables

Bootstrap Forms
Week 4  

 

 

 

 

 

 

 

JavaScript

  

Day 1

 What is JavaScript?

JavaScript Output Statements

JavaScript Variables

  

 

 

 

 

●     Task 26 To

●        Task 29
 

Day 2

 JavaScript Operators

Conditional Statements
 

Day 3

 Loop Types

●       for-loop

●       while loop

●       do While loop
Day 4 JavaScript Functions
Day 5 JavaScript Objects & Arrays
Week 5  

 

 

 

 

 

 

 

 

jQuery & PHP 

 

Day 1

 What Is jQuery?

jQuery Setup

jQuery Selectors

  

 

 

 

 

 

 

 

●                Task 30
 

Day 2

  

jQuery Events

jQuery Effects

 
 

 

 

Day 3

 Overview of PHP

Variables

Constants,

Output Statements
 

Day 4

 Operators
Decision Making
Day 5 Loop Types

 
Week 6  

 

 Day 1 Functions

 

 ●     Task 31 To

●     Task 34
Day 2 Arrays

 
Day 3 PHP Forms

 

 

 

Midterm Exam

 

 Day 4 Midterm Exam
Day 5 Misterm Exam

 
Week 7  

 

 

PHP & OOP

 

 

 

 

 

 

 

 

 

 Day 1 Object Oriented Programming
Class
Object,
Access Specifiers/ModifiersMember Variables		  

 

 

 

 

 

 

 

 

●     Task 35 To

●        Task 37
 

 

 

Day 2

 Static Variables
Member Functions
Inheritance
 

 

 

 

Day 3

 Parent class
Child Class
Constructors
Destructors
Polymorphism
Day 4 Function Overloading
Abstraction Encapsulation
Session
Day 5 Cookies
Databases Introduction
Database Types
Week 8  

 

 

 

PHP & SQL

  

Day 1

 What is a Query
SQL Basic Commands
MYSQL Joins.
Creating a database using PHP MY ADMIN.		  

 

 

 

●   Task 38
Day 2 DDL, DML & DRL operations in SQL

 
Day 3 DB Integration with PHP

 
Day 4 CRUD Operations using MYSQL & php
Day 5
Week 9 Laravel Day 1 Introduction to Laravel
Laravel Project Setup		  

 

●    Task 39
Day 2 Laravel Architecture Concepts
Day 3 Routing

 
Laravel Day 4 Blade Template

 
Day 5 Migrations

 

 

Week 10  

Laravel

 Day 1 Migrations  

 

 

●    Task 40
Day 2  

Relationships

 
Day 3 Relationships
Day 4 Security
Day 5 Security
Week 11  

 

 

Project

 Day 1 [Project 1] crud application
Day 2 [Project 1] crud application
Day 3 [Project 3] Gallery App
Day 4 Final Project (data crud + gallery combo)
Day 5 Final Project (data crud + gallery combo)
Week 12  

Project Evaluation &

Final Term Exam

 Day 1 Project Evaluation
Day 2 Project Evaluation
Day 3 Project Evaluation
Day 4 Project Evaluation
Day 5 Final Term Exam

 

 

Annexure-I: Tasks for Advance Web Application Development

 

Task no. Task Description Week
1 Using Heading, Paragraph, Line Break,and Horizontal Rule Tags Write an HTML code that displays all 6 headings with each

heading on new line having paragraphs and the end

  

Week 2
of each paragraph; place a line (Horizontal Rule).
2 Use Comments and Include Tags in a single code. Make a webpage Comment.html having text “I am

Internal Text” with having commented text “I am
Comment” that will
not display in the webpage. Make another webpage
with
name IIncluded.html containing the text “I am
External Text” and
display its contents in Comment.html webpage.
3 Use Image Tag with attributes. Insert image in the webpage with height=30,

width=30 having 3 border size and when we bring
mouse on the image, it displays text “I am Image in
Webpage”.
4 Use of Hyperlink Use <A HREF> . . . </A> Tag with all attributes to
create a Local Link to any file.
Make second link which is used to link High Level
Directory. Make third link which is used to link any
Internet website.
Lastly make fourth link which contains an email
address and when user clicks the link, email editor
opens up.
5 Background image Make a webpage with image as a Background and
when we scroll this webpage, the image stays fix and
only the top of the webpage scrolls.

 

 

6 Make a complete html form Make the following Report Form (The Country Dropdown

List must contain 7 Countries in Ascending Order but when form is loaded, by default Pakistan is Selected.

 

 

Task No. Task Description Week

 

 

7 Buttons with images Make the Submit and Reset buttons in the form having pictures on it instead of simple text.

 

 

 

8 External Style Sheet Call an External Style Sheet in the webpage in which Font Size of the text must be 77 points Color of the text must be green and background of the webpage must be yellow.
9 Use of on Click Event Change the color of the text when it is clicked.
10 Use of on Mouse Over

Event

 When we bring the mouse on the image, the image changes its position.
11 Navigation bar using CSS Make two navigation bars with CSS using class and id attribute. One should be on the top of the page and the second should be displayed on left of the page in shape of

a column.
12 Forms Make a login and signup form on different pages that should be displayed in the center of the page using CSS

and html.
13 Dropdowns Make dropdowns with nested HTML tags and CSS.
14 Bootstrap based

columns

 Make different sizes of columns using bootstrap classes.
15 Forms using bootstrap Make a form using Bootstrap classes for buttons and

forms.
16 Progress Bar A progress bar for student’s skills in coding languages

using bootstrap.
17 Bootstrap based pages Make 3 pages of home page, admission form, and about

us page using bootstrap classes with navigation bars, headers, footers and forms.
18 Use Output Statement

of JavaScript

 Display your name on the screen using JavaScript. Week –3
19 Use of If…else Condition Use If…else statement of JavaScript to write a code to Display “Good Morning” or “Good Afternoon” according to

current Time.

 

 

20 Use of switch statement Use the switch statement to display “today is (whatever day it is)” according to the current day.
21 Use of for loop Use of loop to display a string of all the names of months

using JS functions and variables.
22 Alert message Make an alert message display on the screen if the user

clicks a button.
23 JavaScript calculator Make a JavaScript calculator that should answer addition, multiplication and subtraction question using JavaScript

variables.
24 Hide and show in jQuery Make a paragraph line and two buttons named “hide” and “show” using HTML and hide the paragraph if the button “hide” is clicked, and show the paragraph if the button “show” is clicked.
25 Slide down button Make a button that slides down some content when clicked using jQuery.
26 Use of Switch Statement Use the Switch statement of PHP to display the current day of the

week.

 Week-4
27 Loops to display numbers on screen Write a Program to display count, from 5 to 15 (as shown below) using following:

●       For Loop

●       While Loop

●       Do…while Loop
28 Use Output Statement

of PHP

 Display your name on the screen using PHP.
29 Use of If…else Conditi

on

 Use the If…else statement of PHP to write a code to Display “Good Morning” or “Good Afternoon” according to current time.
30 Using JQuery Create a web page that includes a button and a paragraph element. When the button is clicked, use jQuery to change the text of the paragraph to a predefined message. Week-5

 

 

31 Factorial of

Number

 Write a program to calculate factorial of a number using for

loop in PHP.

 Week-6
32 While Loop to display

the pattern

 Write a Program to create following pattern using while loop:

*

**

***

****

*****

******

*******

********
33 Do…while Loop to display the numbers Write a Program to display count, from 1 to 5 using PHP do…while loop as given below:

1

2

3

4

5
34 Using Array and for…each loop You need to write a program in PHP using for…each loop to remove specific elements by value from an array using PHP program.

Hint:

●        Take an array with list of month names.

●        Take a variable with the name of value to be deleted

 

 

 

Task

No.

 Task Description Week
35 Sort the Array Elements Write a function to sort an array Week-7
36 Find the case of string Write a PHP function that checks whether a string is all

lowercase.
37 Find String Length Write a PHP program to find the length of the string. Hint:

●       You have to use one variable.

●       You must use a built-in PHP String Function.

 

 

38 CRUD in PHP Create a PHP web application with CRUD functionality for managing user information, including fields for id, first name, last name, email, and phone number, enabling users to create, read, update, and delete

records stored in a MySQL database.

 Week-8
39 Laravel Task 1 Integrate a master template into a Laravel web application to ensure consistent layout and design across multiple pages, utilizing HTML, CSS, and JavaScript, extending the master template in individual views, and populating dynamic content sections with

data retrieved from the database or external sources.

 Week-9
40 Laravel Task 2 Create a Laravel web application that demonstrates one-to-one, one-to-many, one-to-many inverse, and polymorphic (one-to-many) relationships, allowing CRUD operations and proper data management for

each relationship type.

 Week-10

Quick Inquiry