GCC – Girls Can Code

Coding and Web Development Training Detailed Lesson Plan

Prepared by: GCC Technical Supervisor Liza Popalzai

 Coding and Web Development Training Detailed Lesson Plan

Course Topic Overview:

The Web Designing and Development course is for the schools’ 12th classes’ students who want to develop the skills necessary in website design.
In this course, you will build upon your basic Web authoring skills to learn the essentials and best practices of Web design, including design tools
and technologies.
Learning Outcome:

At the end of this module the students will be able to:

 Design secure and localized Web applications using technologies and the tools listed in the curriculum
 Connect Web applications to databases
 Design Web Applications
 Learn to develop dynamic web applications
 Learn to design static web applications
 Learn to design with CSS/ CSS3 and its most popular framework Bootstrap.
 Learn to work in JavaScript and its libraries (jQuery, ajax, react)
 Design and manipulate databases using MySQL
 Develop Web applications using PHP
 Develop web applications using WordPress

Method:

 All lessons include one hour of instruction and one hour of practice each day unless otherwise note

2
Prepared by: GCC Technical Supervisor Liza Popalzai
 Coding and Web Development Training Detailed Lesson Plan

Computer Literacy and Web Development Concept Course

Duration: 15 days

Objectives:

 Familiarity with operating system

 Windows environment management
 Understand fundamentals to easily work and be prepared for the professional coding lessons
 Learn how to create email account, create, send and receive emails
 Understand about online storage, learn how to have online storage account, share and store files and folders
 Familiar with WordPress
 Able to design and develop web applications easily via WordPress

Assignment:

1. Writing a hello world program in notepad and sublime and seeing the result in different browsers
2. Creating a website in WordPress

Test:

1. Pre-test
2. Post-test

3
Prepared by: GCC Technical Supervisor Liza Popalzai
 Coding and Web Development Training Detailed Lesson Plan

First Week Topic Contents Covered

 Pre-Test of the Computer Literacy Course
 Describe the Web Development Course (What is coding and web development?)
Introduction to Course  What are you going to study in entire course? What will you be able to do at the end of this course?
Day 1
& Computer Literacy  What are the work opportunities? What will be you called, your title/position?
Pre-Test  Some popular and famous websites Demo
 What is website? Internet, WWW, HTTP and HTML
 Operating System
Operating System,  What are Hardware and Software?
Hardware & Software  Open Source software
Day 2  Cross-platform
Compiler & Interpreter,  How programs are executed (Compiler and interpreter concepts)
Client & Server.  What is Client/Server?
 The Request/Response Procedure
 Concept of Software Engineering and Software Development
Software Development  Good Software Definition and Software Process
Day 3 and Website vs Web  Website vs Web Application
Application  Frontend and Backend concepts
 Framework, Library concepts
 What is Email?
Email Account  Create Email Account
Day 4  Send/Receive emails
(Gmail)
 Copy/view/attach attachment.
 What is online storage?
 Create Google Drive account
Online storage (Google
Day 5  Sharing and storing files and folder in Google Drive
Drive, Dropbox)
 Explaining Dropbox
 Sharing and storing files and folder in Dropbox

4
Prepared by: GCC Technical Supervisor Liza Popalzai
 Coding and Web Development Training Detailed Lesson Plan

 File/Folder creation, Save, Copy, Cut, Delete, Shift + Delete, Properly shutdown computer
 File Properties (File size, File type)
 Icon
Operating System Basic  Folder order/path – one folder within other and so on
Day 6
and fundamental tasks  USB/Flash Use (Format, Eject, Copy files)
 How to scan a file? How to deal with shortcut data (?, *, . , or search itself)
 Keyboard Familiarity (Space, Enter, Backspace, Delete, Shift + keys, Control, Arrow Keys, Caps lock,
Tab, Escape, Insert)

Second Week Topic Contents Covered

 What is editor?
 What is sublime? How to work with? Shortcuts in sublime (Find, Replace, Select all, Save, Save as, Copy,
Cut, New file, Open)
Editor (Sublime),  What is browser? browser (Chrome, Firefox, Opera) – updated versions
Day 1 Browser, and  Browser Options: Address bar, URL, New Tab, New Window, Open File, Zoom, Bookmark, Save Page
Assignment as, View Background Image, Inspect Element, View Page Source.
 Links indication, upload/download
 Assignment: Writing a hello world program in notepad and sublime and seeing the result in different
browsers
 WordPress Introduction
 CMS definition
WordPress
Day 2  Installing and running WordPress
Introduction
 Accessing your WordPress site
 WordPress admin panel Explanation
 Understanding Posts (Creating Posts, Editing Posts, Formatting post with the content editor toolbar)
WordPress Posts,
 WordPress media elements
Day 3 Categories, Pages and
 Categories, Pages, Posts vs Pages
Comments
 Comments

5
Prepared by: GCC Technical Supervisor Liza Popalzai
 Coding and Web Development Training Detailed Lesson Plan

 What are themes and how do they work

Themes, Customizer,  Introducing the Customizer
Day 4
Menu and Widgets  Creating and customizing menus
 Using widgets
 What are plugins and how do they work
 Installing, activating, and upgrading plugins
Plugins, and WordPress  How WordPress handles users
Day 5
Users  Editing your user profile
 Understanding WordPress`s user roles and capabilities
 Adding and managing users
Day 6 Assignment  Designing a website using WordPress

Third Week Topic Contents Covered

 What is Website Performance Optimization?
Website Performance o Website Performance Optimization Techniques
Day 1 and Search Engine o Test website performance with different tools
Optimization  What is Search Engine Optimization?
o Search Engine Optimization Techniques
Computer Literacy
Day 2  Review of Computer Literacy Course Lessons from start till end
Course Lessons Review

Computer Literacy
Day 3  Post-Test of the Computer Literacy Course.
Course Post-test

6
Prepared by: GCC Technical Supervisor Liza Popalzai
 Coding and Web Development Training Detailed Lesson Plan

HTML Course
HTML is the standard markup language for creating Web pages.

Duration: 20 days

Objectives:

 Create web pages.

 Create the layout and structure of the web applications.

Assignment:

1. A complete form elements assignment.

2. Layout containing Multimedia.

Test:

1. Pre-test
2. Post-test

7
Prepared by: GCC Technical Supervisor Liza Popalzai
 Coding and Web Development Training Detailed Lesson Plan

Third Week Topic Contents Covered

 Pre-test of HTML course
 What is HTML?
 HTML History/Versions
 HTML Tags
Pre-Test of HTML,  HTML Document & Page structures
Day 4
Introduction to HTML  The <!DOCTYPE> Declaration
 Elements
 Type of Elements
 Nested Elements
 Use Lowercase Tags & Do Not Forget the End Tag
 Attributes
 Headings
Day 5 HTML Basics Elements
 Paragraphs (title & align Attribute)
 Images (Size & alt Attributes)
 style
o background-color
o color
Day 6 HTML Styles
o font-family
o font-size
 text-align

8
Prepared by: GCC Technical Supervisor Liza Popalzai
 Coding and Web Development Training Detailed Lesson Plan

Fourth Week Topic Contents Covered

 <pre> Element
 Line Break <br>
HTML Basic Elements,
Day 1  Horizontal Rules <hr>
Formatting & Comments
 Formatting: <b>, <i>, <mark>, <small>, <sub>, <sup>
 Comments
 Syntax - Links (Text, Image)
Day 2 HTML Links  Link colors
 The target attribute (_blank, _self)
 Colors
o Color Name, RGB Value (rgb, rgba), HEX Value
HTML Colors &
Day 3  Head
Head
o <title>, <style>, <link>, <script>, <meta>
o <meta> tags
 Defining a Table
 Border: border attribute /border-collapse
Day 4 HTML Tables  Colspan/rowspan
 Adding Caption
 Nested Tables
 What is list
 List types
Day 5 HTML Lists  1. Unordered List 2. Ordered List 3. Description Lists
o List Item Marker ( type attribute )/list-style-type/list-style-image
 Nested lists
 Block-level Elements
HTML Blocks and
Day 6  Inline-level Elements
Iframes
 What is Iframe for? - Set Height, Width & target for a link

9
Prepared by: GCC Technical Supervisor Liza Popalzai
 Coding and Web Development Training Detailed Lesson Plan

Fifth Week Topic Contents Covered

 What is Form? Form definition

 Form Elements
o <lable>
o <Input>
o <textarea>
HTML Form and o <button>
Day 1
Its Elements
 HTML5 Form Elements
o <fielset>
o <legend>
o <Select>
 <datalist>
 HTML Input Types
o Text, Password, Submit, Reset, Button
Day 2 HTML Input Types
 HTML5 Input Types
o Color, date, datetime-local, email, month, number, range, search, tel, time, url, week
 Input types - Radio, Checkbox
Day 3 HTML Input Attributes  HTML Input Attributes
o Value, readonly, disabled, size, maxlength
 HTML5 Input Attributes
Day 4 HTML5 Input Attributes o Autocomplete, Autofocus, min and max, step
 formnovalidate, novalidate, multiple, placeholder, required
 Complete form practice
Day 5 Complete form review
 A complete form elements assignment
 New HTML5 Elements
 Website Pages Layouts
HTML 5
Day 6  What are Semantic Elements
 New Semantic Elements
 Table/div

10
Prepared by: GCC Technical Supervisor Liza Popalzai
 Coding and Web Development Training Detailed Lesson Plan

Sixth Week Topic Contents Covered

 New Semantic Elements in HTML5
HTML5 Semantic o <header>, <nav>, <section>, <article>, <aside>, <footer>, <main>
Elements,
Day 1 o Difference between semantic elements and div
HTML Entities &
Symbols  What is HTML Entities?
 What is HTML Symbol Entities?
 HTML5 Video
 HTML5 Audio
 Audio and Video Attributes
o Autoplay
HTML5 Media
Day 2 o Loop
o Mute
o Poster
 Multimedia formats
 Video, Audio & Image
Day 3 Practical Session  Assignment for layout practice, designing a layout containing video and audio
HTML Course Complete
Day 4  Complete course review and problem solving
Review
Day 5 HTML Course Post-Test  Post-Test of the HTML Course

11
Prepared by: GCC Technical Supervisor Liza Popalzai
 Coding and Web Development Training Detailed Lesson Plan

CSS Course
CSS is used to define styles for your web pages, including the design, layout and variations in display for different devices and screen sizes.

Duration: 20 days

Objectives:

 Design web pages.

 Organize website content.
 Maintain website structure.

Assignment:

1. Design a web layout using float and clear attributes.

2. Practical Assignment in the class: A Web page featured with all the lessons covered
Test:

1. Pre-test
2. Post-test

Note: By end of this course students should be divided into groups for final project development and the titles of the projects should be
specified.

12
Prepared by: GCC Technical Supervisor Liza Popalzai
 Coding and Web Development Training Detailed Lesson Plan

Sixth Week Topic Contents Covered

 Pre-test of CSS Course
CSS Pre-Test,  What is CSS? Why Use CSS?
CSS Introduction  CSS Syntax
Day 6
and Basics  CSS Comments
Ways to use CSS  Three Ways to Insert CSS
o Inline style sheet, Internal style sheet, External style sheet

Seventh Week Topic Contents Covered

 CSS Selectors
Day 1 CSS Selectors o The element Selector, id Selector class Selector, Grouping Selectors, Descendant Selector,
Child Selector
 Background Image
o Repeat horizontally or vertically/ no-repeat
o Fixed position background
CSS
o Background-position and Background-size
Day 2 Backgrounds
o Shorthand property
And Height/Width
 CSS Height/Width
o Height/Width
o Max-Width/Min-width
 CSS Border Properties
o Border Style/Width/Color
Day 3 CSS Borders o Border Individual Sides
o Border Shorthand Property
o Rounded Borders: Specify each corner
 CSS Margin & Padding
CSS Margin and
Day 4 o Margin & Padding Individual Sides
Padding
o Shorthand Property
 Text Decoration & Transformation
Day 5 CSS Text  Text Indentation & Letter Spacing/Word Spacing
 Text Shadow/Box Shadow
13
Prepared by: GCC Technical Supervisor Liza Popalzai
 Coding and Web Development Training Detailed Lesson Plan

 Display property
o display:block and display:inline
Day 6 CSS Display
o display:inline-block
o display:none/visibility: hidden

Eighth Week Topic Contents Covered

 CSS Styling Links
Day 1 CSS Links o a:link, a:visited, a:hover, a:active
 The Float Property
CSS Layout (Float and
Day 2  The Clear Property
Clear)
 Web Layout Example using float property
 Assignment: Design a web layout using float and clear attributes
CSS Opacity/
 Opacity
Day 3 Transparency
o What is Opacity?/Opacity Property
& vendor prefix
 Webkit, moz,…
 The position Property
o position: static;
CSS Layout (The o position: relative;
Day 4
position Property) o position: fixed;
o position: absolute;
 Overlapping Elements
 CSS3 Web Fonts
Day 5 Web fonts o Downloadable fonts: @font-face rule
o Web Fonts online
 What is Animation?
 How to create an animation in CSS3 (@keyframes rule)
 Animation Properties
Day 6 CSS3 Animation
o Animation-name, Animation-duration and Animation-direction and
o Animation-delay, Animation-iteration-count and Animation-timing-function
o Animation Shorthand Property

14
Prepared by: GCC Technical Supervisor Liza Popalzai
 Coding and Web Development Training Detailed Lesson Plan

Ninth Week Topic Contents Covered

 CSS Images
 Rounded Images
 Thumbnail Images
 Responsive Images
Day 1 CSS3 Style Images  Center an Image
 Polaroid Images/Cards
 Image Filters
 Image Hover Overlay
 Responsive Image Gallery
 Flexbox Layout Module
Day 2 CSS Flexbox  Flexbox Elements
 Flex Container Properties (flex-direction, flex-wrap, flex-flow, justify-content, align-items, align-content)
Day 3 CSS Flexbox  The flex item properties (order, flex-grow, flex-shrink, flex-basis, flex, align-self)
Day 4 Assignment  A Web page featured with all the lessons covered so far
Day 5 Assignment  A Web page featured with all the lessons covered so far
CSS Course Complete
Day 6  Complete course review and problem solving
Review

Tenth Week Topic Contents Covered

Day 1 CSS Course Post-Test  Post-Test of the CSS Course

15
Prepared by: GCC Technical Supervisor Liza Popalzai
 Coding and Web Development Training Detailed Lesson Plan

Bootstrap Course
Bootstrap is the most popular HTML, CSS, and JavaScript framework for developing responsive, mobile-first web sites.

Duration: 18 days

Objectives:

 Easily design Responsive Web applications

 Ability to design, organize and maintain website structure and contents easily with framework.

Assignment:

1. A Practical Assignment in the class: A Web page featured with all the lessons covered

Test:
1. Pre-test
2. Post-test

Note: By end of this course students must start the project front design development.

16
Prepared by: GCC Technical Supervisor Liza Popalzai
 Coding and Web Development Training Detailed Lesson Plan

Tenth Week Topic Contents Covered

 Pre-test of Bootstrap Course
 What is Responsive Web Design?
Bootstrap Pre-test and
 RWD Implementation
Responsive Web Design
o Responsive Web Design - The Viewport
Day 2 (Bootstrap Framework)
 What is Bootstrap how to work with it? Containing folders
Introduction & Grid
 Grid Classes
System
 Grid System Rules & Structure (container, container-fluid, row, offset)
 Grid Options
 Headings
 Inline text elements (<small>, <mark>, <strong>,<em>,<u>)
 Alignment Classes (text-left, text-right, text-center, text-justify)
Day 3 Bootstrap Typography
 <address>
 <blockquote>
 Lists
 .table
Bootstrap Table &  .table-striped, .table-bordered, .table-hover
Day 4 Contextual Colors and  .active, .success, .warning, .danger, .info
Backgrounds  .text-primary, .text-success, .text-info, .text-warning, and .text-danger
 .bg-primary, .bg-success, .bg-info, .bg-warning, and .bg-danger
 Basic form
 .form-control, .form-group
Day 5 Bootstrap Form
 Inline form
 Horizontal form
 Button
o Button options, Button size, Active/disable
Bootstrap Button,
Day 6  Image
Images & Badges
o Responsive images, Image shapes
 Bages - .badge

17
Prepared by: GCC Technical Supervisor Liza Popalzai
 Coding and Web Development Training Detailed Lesson Plan

Eleventh Week Topic Contents Covered

 Thumbnails – default/custom thumbnail
Bootstrap Thumbnails, Panels
Day 1  Panels with heading/footer/content
& Jumbotron
 Jumbotron - .jumbotron
 Default navbar
Day 2 Bootstrap Navbar  Brand image/form
 Tabs, Pills
Day 3 Bootstrap Dropdown  Different examples with navbars
 Basic Collapsible
Day 4 Bootstrap Collapse  Collapsible Panel
 Accordion
 Creating Modal
Day 5 Bootstrap Modal
 Optional sizes
 Creating Carousel
Day 6 Bootstrap Carousel
 Adding captions to slides

Twelfth Week Topic Contents Covered

Day 1 Bootstrap Scrollspy  Creating a single page website with the scroll spy
 What is Icons?
Day 2 Icons
 How to add icons? (Font Awesome Icons/Bootstrap Icons)
Building a responsive website &  Building a responsive website with bootstrap by trainer
Day 3
Editing Templates  Download and edit templates
Day 4 Assignment  Building a responsive website with bootstrap with all the lessons covered so far
Day 5 Assignment  Building a responsive website with bootstrap with all the lessons covered so far
Day 6 Bootstrap Course Complete Review  Complete course review and problem solving

Thirteenth Week Topic Contents Covered

Day 1 Bootstrap Course Post-Test  Post-Test of the Bootstrap Course

18
Prepared by: GCC Technical Supervisor Liza Popalzai
 Coding and Web Development Training Detailed Lesson Plan

JavaScript Course
JavaScript is the programming language of HTML and the Web to program the behavior of web pages.

Duration: 34 days

Objectives:

 Design Interactive websites

 Understand asynchronous page updates
 Work with events and effects
 Get familiar with JavaScript libraries – jQuery, Ajax, and React

Assignment:

1. JavaScript Practical Assignment in the class: focused on Events, Validation and the out puts
2. JQuery Practical Assignment in the class: focused on Events, Validation and the out puts
3. Ajax Practical Assignment in the class: how a web page communicates with a web server asynchronously while user type a
character in an input field
4. React Practical Assignment in the class: Design a single page website

Test:
1. Pre-test
2. Post-test

19
Prepared by: GCC Technical Supervisor Liza Popalzai
 Coding and Web Development Training Detailed Lesson Plan

Thirteenth Week Topic Contents Covered

 Pre-test of JavaScript Course
 What is JavaScript?
o JavaScript can change HTML Content, Attributes and Styles (CSS).
o JavaScript can hide and show HTML Elements
JavaScript course Pre-Test o JavaScript Can Validate Data
Day 2 & JavaScript  The <script> Tag
Introduction/Syntax  JavaScript in <head> or <body>
 JavaScript in <head>
 JavaScript in <body>
 JavaScript Syntax (case sensitive, camel case, semicolon)
 JavaScript Comments
 External JavaScript and External JavaScript Advantages
 JavaScript Programs
 JavaScript Statements
Day 3 JavaScript Program  JavaScript Values
 JavaScript Variables
 JavaScript Identifiers
 JavaScript Keywords
 The Concept of Data Types
 JavaScript Types are Dynamic
 Strings
 Numbers
JavaScript Data Types  Booleans
Day 4
 Arrays
 Null
 Undefined
 Difference Between Undefined and Null
 The typeof Operator

20
Prepared by: GCC Technical Supervisor Liza Popalzai
 Coding and Web Development Training Detailed Lesson Plan

 JavaScript Operators
 JavaScript Arithmetic Operators
 JavaScript Assignment Operators
JavaScript
Day 5  JavaScript String Operators
Operators
 Adding Strings and Numbers
 JavaScript Comparison
 JavaScript Logical Operators
 JavaScript Display Possibilities
 Using window.alert()
JavaScript
Day 6  Using document.write()
Output
 Using innerHTML
 Using console.log()

Fourteenth Week Topic Contents Covered

 Function Declaration Syntax
JavaScript  Function Invocation/Function Return
Day 1
Functions  Function Parameters/Arguments
 Why Functions?
 Object concept (properties, methods)
 Object definition
Day 2 JavaScript Objects  Accessing objects properties and methods
 Object prototypes (creating prototypes)
 Adding properties and methods to an object
 Scope concept
JavaScript Scope &
Day 3  Local and Global JavaScript Variables
Conditional Statements
 Conditional Statement (if statement)
 Else, else if statements
Day 4 Conditional Statements
 Switch Statement (break and default keyboards)
 Loop Concept
Day 5 JavaScript Loop
 For loop definition

21
Prepared by: GCC Technical Supervisor Liza Popalzai
 Coding and Web Development Training Detailed Lesson Plan

 What is Events?
 HTML Events, Common HTML Events
Day 6 JavaScript Evens
 What can JavaScript Do?
 Examples

Fifteenth Week Topic Contents Covered

JavaScript Form Validation  Form Validation

Day 1
 Data Validation
Day 2 JavaScript Practical Session  Assignment – focused on Events, Validation and the out puts
 What is jQuery?
jQuery Introduction  How to use jQuery?
Day 3
and Selectors  jQuery Syntax
 jQuery Selectors (Element, ID, Class, This)
jQuery Events  jQuery Events (Click(), Dbclick(), Hover(), Focus())
Day 4
and Effects  jQuery Effects (Hide/Show, Fade, Slide)
jQuery CSS Classes  jQuery Classes (addClass(), removeClass(), toggleClass())
Day 5
and CSS()  css()
 Append()
jQuery Adding HTML  Perpend()
Day 6
Content  After()
 Before()

22
Prepared by: GCC Technical Supervisor Liza Popalzai
 Coding and Web Development Training Detailed Lesson Plan

Sixteenth Week Topic Contents Covered

Day 1 jQuery Practical Session  Assignment for practicing most of the jQuery effects
 Ajax introduction
Day 2 Ajax Introduction  How it works
 The XMLHttpRequest Object (Creation, Methods and Properties)
 Ajax send a request to a server
Day 3 Ajax – Request to a server  GET and POST requests
 Open method sections (url and asynchronous)
 Ajax PHP example: how a web page communicate with a web server while user type a
Day 4 Ajax Practical Session
character in an input field
 React Introduction
 React history
 Object Oriented Programing concept
Day 5 React Introduction
 Class and Property
 OOP main features
 React setup and installation
 React folder structure
 Modify react application
Day 6 React folder structure and ES6
 ES6 concept
 Classes, Methods in classes, Classes inheritance

23
Prepared by: GCC Technical Supervisor Liza Popalzai
 Coding and Web Development Training Detailed Lesson Plan

Seventeenth Week Topic Contents Covered

 Arrow Functions
Day 1 React ES6  This
 Variables
 React Render HTML
 React JSX
Day 2 React Render HTML and JSX
 (Expressions, Inserting a large block of HTML, on top level element, elements must be
closed)
 React Components
 Create a class component
 Create a function component
Day 3 React Components  Component constructor
 Props
 Components in components
 Components in files
 React Props
Day 4 React Props  Props in the constructor
 Creating, using, and changing the state object
 Lifecycle of components
 Mounting
Day 5 React Lifecycle
 Updating
 Unmounting
 React Events
 Adding Events
 Event handlers
Day 6 React Events
 Bind this
 Passing arguments
 React Event Object

24
Prepared by: GCC Technical Supervisor Liza Popalzai
 Coding and Web Development Training Detailed Lesson Plan

Eighteenth Week Topic Contents Covered

 React Forms
 Adding and handling forms
 Conditional rendering
 Submitting forms
Day 1 React Forms  Multiple input fields
 Validating form input
 Adding error messages
 Textarea
 Select
 Styling Reacting using CSS
 Inline styling
 JavaScript object
Day 2 Styling React using CSS
 CSS stylesheet
 CSS modules
 Making an Image gallery with React
Day 3 React Practical Session  Making a single page website
JavaScript Course Complete
Day 4  Complete course review and problem solving
Review
Day 5 JavaScript Course Post-Test  Post-Test of the JavaScript Course

25
Prepared by: GCC Technical Supervisor Liza Popalzai
 Coding and Web Development Training Detailed Lesson Plan

SQL Course
SQL is a standard language for storing, manipulating and retrieving data in databases.

Duration: 13 days

Objectives:

 Execute queries against a database

 Retrieve data from a database
 Insert records in a database
 Update records in a database
 Delete records from a database
 Create new databases
 Create new tables in a database
 Understand constraints

Assignment:

1. A Practical Assignment to Create Database, table, insert data in and select/show the data

Test:
1. Pre-test
2. Post-test

Note: By end of this course the projects front design development must be completed.

26
Prepared by: GCC Technical Supervisor Liza Popalzai
 Coding and Web Development Training Detailed Lesson Plan

Eighteenth Week Topic Contents Covered

 Pre-test of SQL Course
 What is SQL?
 What SQL can do?
Pre-test of SQL Course,
 What are Database and DBMS?
Day 6 Introduction to SQL &
Types of Database  What is Table?
 Types of Database (Hierarchical Database, Network Database, Relational Database, Object
Oriented Database)
 Database System

Nineteenth Week Topic Contents Covered

 What is key?
Day 1 Keys o Primary key, Foreign key, Composite key, Super key, Alternate, Unique,
Candidate key
 What is Relationship?
 What is cardinality?
 What are three common cardinal relationships?
o One-to-one
Day 2 Relationship, cardinality & ERD o One-to-many
o Many-to-many
 What is ERD?
 What is Entity?
 What is Attribute? (Types of Attributes)
 Virtual Server
 SQL Statement
 SHOW DB
SQL Syntax
 CREATE DB
Day 3 Steps of Creating a Database
 USE DB
and working with its data
 CREATE TABLE
 SHOW TABLES
 DESC
27
Prepared by: GCC Technical Supervisor Liza Popalzai
 Coding and Web Development Training Detailed Lesson Plan

 INSERT INTO
Steps of Creating a Database  SELECT
Day 4
and working with its data  DELETE
 DROP
Steps of Creating a Database  UPDATE
Day 5
and working with its data  ALTER (Add Column, Drop Column, Alter/Modify Column)
 Create DB, table, insert data in and select the data
Assignment  WHERE CLAUSE
Day 6
SQL WHERE CLAUSE  Operators in the WHERE Clause
 BETWEEN, LIKE

Twentieth Week Topic Contents Covered

 AND, OR, NOT
 ORDER BY
Day 1 SQL Order By and functions
 MIN and MAX
 COUNT, AVG, SUM
 Constraints Concept
 Creating Constraints
o Not Null
o Unique
Day 2 SQL Constraints o Primary Key
o Foreign Key
o Check
o Default
o Index
Day 3 PHP MyAdmin  Practical session of creating Database in PHP MyAdmin
Day 4 PHP MyAdmin  Practical session of creating Database in PHP MyAdmin
Day 5 SQL Course Complete Review  Complete course review and problem solving
Day 6 SQL Course Post-Test  Post-Test of the SQL Course

28
Prepared by: GCC Technical Supervisor Liza Popalzai
 Coding and Web Development Training Detailed Lesson Plan

PHP Course
PHP is a server scripting language, and a powerful tool for making dynamic and interactive Web pages.

Duration: 27 days

Objectives:

 Generate dynamic page content

 Collect form data
 Add, delete, modify data in your database

Assignment:

1. A Practical Assignment for making a complete dynamic website featured with crud, admin panel and a login page with
session set.

Test:
1. Pre-test
2. Post-test

Note: By end of this course projects dynamic development must be completed.

29
Prepared by: GCC Technical Supervisor Liza Popalzai
 Coding and Web Development Training Detailed Lesson Plan

Twenty-first Week Topic Contents Covered

 Pre-test of PHP Course
 What is php?
 Why php?
 What is a php file?/What can do php file ?
Pre-Test of PHP Course
Day 1  What is needed to start using PHP?
and PHP Introduction
 PHP syntax (Hello World example), File path
 PHP Variables
 PHP case sensitivity
 PHP comment
 The PHP echo Statement
Day 2 PHP echo/print
 The PHP print Statement
What are PHP Data Types?
Day 3 PHP Data Types
 String, Integer, Float, Boolean, Array, NULL, Resource
 Arithmetic operators
 Assignment operators
 Comparison operators
Day 4 PHP Operators
 Increment/Decrement operators
 Logical operators
 String operators
 What is array
 Create array in PHP
Day 5 PHP Array
 Types of array
o Indexed Arrays, Associative Arrays, Multidimensional Arrays
 PHP - Sort Functions for Arrays
o sort()
o rsort()
Day 6 PHP Sorting Arrays o asort()
o ksort()
o arsort()
o krsort()

30
Prepared by: GCC Technical Supervisor Liza Popalzai
 Coding and Web Development Training Detailed Lesson Plan

Twenty-second Week Topic Contents Covered

 What are condition statements
PHP Conditional
Day 1  if statement
Statements
 if… else statement
 What is loop?
Day 2 PHP Loops  while loop
 do…while loop
 for loop
Day 3 PHP Loops
 foreach loop
 How to include files?
 Include Statement
Day 4 PHP Include Files
 Required Statement
 Include vs. required
 PHP Form Handling
 $_GET
Day 5 PHP Form Handling  $_POST
 When to use GET?
 When to use POST
Day 6 PHP Database Connection  PHP Connect to MySQL - mysqli_connect();

Twenty-third Week Topic Contents Covered

Day 1 PHP Insert Data Into MySQL  Insert form data into MySQL using MySQLi
Day 2 PHP Insert Data Into MySQL  Insert form data into MySQL using MySQLi
Day 3 PHP Insert Data Into MySQL  Upload file into MySQL
 Select Data from MySQL using MySQLi in HTML table
Day 4 PHP Select Data From MySQL
 Limit data selection from MySQL
 Delete data from MySQL using MySQLi
Day 5 PHP Delete Data from MySQL
 Assignment on making a dynamic page.
Day 6 Assignment  Assignment on making a dynamic page.

31
Prepared by: GCC Technical Supervisor Liza Popalzai
 Coding and Web Development Training Detailed Lesson Plan

Twenty-fourth Week Topic Contents Covered

Day 1 PHP Update Data In MySQL  Update data in MySQL using MySQLi and HTML form
Day 2 PHP Update Data in MySQL  Update data in MySQL using MySQLi and HTML form
 What Sessions?
 Start a PHP Session
 Get PHP Session Variable Values
Day 3 PHP Sessions
 Modify a PHP Session Variable
 Destroy a PHP Session
 Session_unset() and Session_destroy()
Practical work on a
Day 4  Making a Complete Dynamic website review of the lessons
Complete Dynamic Website
Practical work on a
Day 5  Making a Complete Dynamic website review of the lessons
Complete Dynamic Website
Practical work on a
Day 6  Admin Panel
Complete Dynamic Website

Twenty-fifth Week Topic Contents Covered

Practical work on a
Day 1  Login page secured with session
Complete Dynamic Website
Practical work on a
Day 2  Making a Complete Dynamic website review of the lessons
Complete Dynamic Website
Day 3 PHP Course Post-Test  Post-Test of the PHP Course

32
Prepared by: GCC Technical Supervisor Liza Popalzai
 Coding and Web Development Training Detailed Lesson Plan

Project Development
Duration: 23 days

Objectives:

 Design a website – front: organize contents and layouts and apply styles
 Design Interactive websites – apply animations, events, validations and effects
 Develop the backend of the website – generate dynamic website content

Note: The final projects must be entirely ready for presentations and the projects reports must be completed. By end of the course Projects,
projects snapshots and projects detail report must be submitted.

33
Prepared by: GCC Technical Supervisor Liza Popalzai
 Coding and Web Development Training Detailed Lesson Plan

Twenty-fifth Week Topic Contents Covered

 Dividing Students into groups
 Brain Storming for the project title
Students Project
Day 4  Selecting the Projects titles
(Requirement)
 Layout Selection and selecting the Color and font for their projects
 Designing logo for the project
Day 5 Students Project (Front Design)  Work on the front design of the projects using HTML, CSS, JS and the Frameworks
Day 6 Students Project (Front Design)  Work on the front design of the projects using HTML, CSS, JS and the Frameworks

Twenty-sixth Week Topics Contents

Day 1 Students Project (Front Design)  Work on the front design of the projects using HTML, CSS, JS and the Frameworks
Day 2 Students Project (Front Design)  Work on the front design of the projects using HTML, CSS, JS and the Frameworks
Day 3 Students Project (Front Design)  Work on the front design of the projects using HTML, CSS, JS and the Frameworks
Day 4 Students Project (Front Design)  Work on the front design of the projects using HTML, CSS, JS and the Frameworks
Day 5 Students Project (Front Design)  Work on the front design of the projects using HTML, CSS, JS and the Frameworks
Day 6 Students Project (Front Design)  Work on the front design of the projects using HTML, CSS, JS and the Frameworks

Twenty-seventh Week Topics Contents

Students Project
Day 1  Work on the front design of the projects using HTML, CSS, JS and the Frameworks
(Front Design)
Students Project
Day 2  Work on the front design of the projects using HTML, CSS, JS and the Frameworks
(Front Design)
Students Project  Work on the Back End of the projects Using SQL and PHP
Day 3
(Back End)  Create Database, connect it to the front design for making a Dynamic Website featured with CRUD
Students Project  Work on the Back End of the projects Using SQL and PHP
Day 4
(Back End)  Create Database, connect it to the front design for making a Dynamic Website featured with CRUD
Students Project  Work on the Back End of the projects Using SQL and PHP
Day 5
(Back End)  Create Database, connect it to the front design for making a Dynamic Website featured with CRUD

34
Prepared by: GCC Technical Supervisor Liza Popalzai
 Coding and Web Development Training Detailed Lesson Plan

Students Project  Work on the Back End of the projects Using SQL and PHP
Day 6
(Back End)  Create Database, connect it to the front design for making a Dynamic Website featured with CRUD

Twenty-eighth Week Topics Contents

Students Project  Work on the Back End of the projects Using SQL and PHP
Day 1
(Back End)  Create Database, connect it to the front design for making a Dynamic Website featured with CRUD
Students Project  Work on the Back End of the projects Using SQL and PHP
Day 2
(Back End)  Create Database, connect it to the front design for making a Dynamic Website featured with CRUD
Students Project  Work on the Back End of the projects Using SQL and PHP
Day 3
(Back End)  Create Database, connect it to the front design for making a Dynamic Website featured with CRUD
Students Project  Work on the Back End of the projects Using SQL and PHP
Day 4
(Back End)  Create Database, connect it to the front design for making a Dynamic Website featured with CRUD
Students Project  Work on the Back End of the projects Using SQL and PHP
Day 5
(Back End)  Create Database, connect it to the front design for making a Dynamic Website featured with CRUD
Students Project  Work on the Back End of the projects Using SQL and PHP
Day 6
(Back End)  Create Database, connect it to the front design for making a Dynamic Website featured with CRUD

Twenty-ninth
Topics Contents
Week

Day 1 Project Presentation  Students Projects Presentation Practice

Day 2 Project Presentation  Students Projects Presentation Practice

35
Prepared by: GCC Technical Supervisor Liza Popalzai