Full Stack Web Development – HTML5, CSS3, JS, Bootstrapping, PHP with MySQL

Module 1: Web Development Introduction

• Introduction
• What is Server? Discuss LAMP/WAMP/XAMP?
• Difference between global server and local server?
• Configuration of local server.
• Role of http over the network/Internet.
• Terminologies
  • Web client
  • Web server
  • Web browser
  • Webpage
  • Website
• Discuss Client server architecture.

Module 2: HTML

• HTML Basics
  • Understand the structure of an HTML page
  • Understanding HTML elements
  • Creating and saving the first web page
  • Defining the title on a webpage
  • Showing the icon on a webpage
  • Use of HTML attributes
  • Syntax to use attributes in HTML
  • Using background image
  • Defining marquee in HTML
  • Empty HTML element
  • Creating horizontal line

• Text and link on web page
  • Discussion on font formatting
  • Creating headings in HTML
  • Creating and styling paragraphs
  • Using different color coding
  • Comments in HTML
  • Linking webpages using hyperlink
  • Creating different types of hyperlink
  • Creating image on webpage

• HTML Tables and basic layout
  • Showing data in tabular form
  • Creating tabular data in different formats
  • Discussion on different properties of table and its impact
  • Formatting on table
  • Initial layout management of website using table
  • Discussion on div and span

• HTML Lists
  • Creating list on web page to show details of product
  • Creating different types of list
  • Properties of numbered list
  • Properties of bulleted list
  • Creating HTML description lists

• HTML Forms
  • Discussion on form
  • Attribute related to form
  • Method of posting form to server
  • Discussion on binary data posting
  • Creating textbox, checkbox, radio button etc. controls
  • Differentiation between checkbox, radio button and drop-down list
  • Discussion on taking long text from user like feedback, address etc.

Module 3: CSS

• CSS Basics
  • Introduction of CSS
  • Advantage of using CSS over HTML
  • Properties and their values in CSS
  • Ways to use CSS
  • Why external CSS
  • Comment in CSS

• Selectors in CSS
  • Discussion on selector
  • Different types of selector
  • Tag selector
  • Defining and using multi selector
  • Defining and using class selector
  • Multiple classes on particular tag
  • Defining and using id selector
  • Defining and using universal selector
  • Why universal selector
  • Defining and using attribute selector
  • Use and advantage of using pseudo-class
  • Defining nested selector
  • Discussion on pseudo element

• Text formatting using CSS
  • Defining the color and size of text
  • Discussion on different measurement units
  • Removing underline from hyperlinks
  • Use of text transformation
  • Creating text shadow

• Page formatting using CSS
  • Defining the background
  • Managing image in background
  • Managing layout of page using position
  • Differentiate absolute, relative and fixed layout
  • Defining margin and padding
  • Setting individual margin and padding on page
  • Create transparent box

• Table formatting using CSS
  • Defining separate and collapse border
  • Managing image in background
  • Generate different structures of table
  • Create table striped

• Border formatting using CSS
  • Defining border width
  • Defining individual border width
  • Defining different kinds of border style
  • Defining individual border style
  • Defining border color
  • Defining individual border color
  • Defining the radius of border

Module 4: JavaScript

• Introduction of JavaScript
• Basics of JavaScript
• Functions in JavaScript
• JavaScript event handling
• Objects in JavaScript
• Strings in JavaScript
• Numbers in JavaScript
• Arrays in JavaScript
• Error object in JavaScript
• Type conversion in JavaScript
• Form control in JavaScript

•  DOM
  • Introduction of DOM
  • Discuss DOM over JavaScript
  • Ways to access HTML elements using DOM
  • Accessing style using DOM
  • Add event listener using DOM
  • Add event handler to an element
  • Remove event listener
  • Create new HTML element using DOM
  • Remove HTML element using DOM
  • Discuss collection object

• Introduction to Ajax
  • Introduction to AJAX
  • Introduction to XMLHttpRequest object
  • Methods and properties of XMLHttpRequest
  • Implementation of AJAX techniques on webpages

Module 5 Responsive design using Bootstrap

• Introduction of bootstrap
  • Introduction of Bootstrap
  • Discussion of responsive websites
  • Discussion on different screen sizes
  • Difference between Bootstrap 3 and Bootstrap 4
  • Discussion on different containers and their limitations
  • Ways to use Bootstrap
  • Discussion on CDN over downloaded version

• Layout management in bootstrap
  •   Managing layout of webpage using bootstrap.
  •   Differentiate container and container-fluid class.
  •   Creating and manipulating sections in container.
  •   Generating responsive text on webpage.

• Text in bootstrap
  • Discussion on size of different heading in bootstrap.
  • Generating lighter and secondary text in bootstrap.
  • Discussion on block quotes, description list, code snippets etc.
  • Different text formatting in bootstrap.
  • Generating contextual text color and background in bootstrap.

• Table in bootstrap
  • Showing records in tabular format with basic styling.
  • Showing striped style on bootstrap table.
  • Showing bordered table and also apply hover format.
  • Contextual classes on table.
  • Generating responsive web site.

•   Icons in bootstrap
  • Discussion on glyphicon.
  • Use of glyphicon over normal text.
  • Limitation of glyphicon.
  • Showing icons on form controls like user, lock etc.

• Pagination in bootstrap
  • Discuss pagination. Why it required.
  • Creating pagination with active link.
  • Showing pagination with different sizes.
  • Showing current page’s location within a navigational hierarchy.

• Modal in bootstrap
  • Understanding modal.
  • Create and open modal.
  • Different classes used for modal.
  • Defining the size of modal.
  • Showing login and registration page on modal.

•  Image in bootstrap
  • Creating responsive image.
  • Defining the rounded image.
  • Creating circle image.
  • Creating thumbnail image.
  • Image with caption.
  • Creating responsive video with scale to parent element.
  • Image with media class.
  • Defining alignment of media object.
  • Showing nested media object.

• Button in bootstrap
  • Generate different style of button.
  • Generate different size of button in bootstrap.
  • Mean of large button, small button and block level button.
  • Using different state of button in bootstrap.

• Button group in bootstrap
  • Generate different style of button.
  • Generate different size of button in bootstrap.
  • Mean of large button, small button and block level button.
  • Using different state of button in bootstrap.

• Progress bar in bootstrap
  • Creating progress bar in bootstrap.
  • Showing progress bar with label
  • Progress bar with different color.  
  • Create striped progress bar.
  • Create animated progress bar.
  • Create stacked progress bar.

• Alert message in bootstrap
  • Generating different types of alert message.
  • Generating different types of alert message as link.
  • Generating different type of alert message with close button.
  • Generating different type of alert message with animation.

• Badges and Spinner in bootstrap
  • What do you mean by badges?
  • Generating different types of badges.
  • Badges with contextual classes.
  • What do you mean by Spinner
  • Creating different size and types of Spinner

• Panel and collapsible panel in bootstrap
  • What do you mean by panel?
  • Panel with heading.
  • Panel with footer.
  • Create panel group.
  • Panel with contextual class.
  • Create basic collapsible.
  • Create collapsible panel.

• List group in bootstrap
  • Creating list group.
  • List group with badges.
  • Creating active list in list group.
  • Showing list group with link.
  • Showing disabled item in list group.
  • List group item with contextual classes.
  • List group with custom content.
  • List group in collapsible panel.

• Pager in bootstrap
  • Using pager class with list.
  • Aligning link in page.

• Menu and navigation bar in bootstrap
  • Creating menu as tab and pills.
  • Differentiating tab and pills.
  • Creating tabs as drop down menu.
  • Showing horizontal and vertical pills.
  • Creating pills with drop down menu.
  • Showing centered tabs and pills.
  • Creating toggleable tabs.
  • Creating dynamic tabs.
  • Creating toggleable pills.
  • Creating dynamic pills.
  • Creating navigation bar.
  • Defining inverted navigation bar.
  • Designing navigation bar with drop down menu.
  • Aligning menus in navigation bar.
  • Creating fixed navigation bar.
  • Create collapsing navigation bar in bootstrap.

• Form in bootstrap
  • Creating form.
  • Discussion on form control default setting.
  • Creating form with different layout.
  • Discussion on default layout of form.
  • Creating text box in bootstrap.
  • Taking long string in text area.
  • Checkbox and radio button in bootstrap.
  • Creating drop down list.
  • Grouping input control on form.
  • Creating static control on form.
  • Using state of control on form.
  • Showing text box in different size.
  • Showing help text with form controls.

• Carousel in bootstrap
  • What do you mean by carousel?
  • Creating carousel.
  • Discussion of different carousel classes.
  • Defining carousel with caption.

Module 6: PHP

• Introduction
  • Introduction to PHP
  • History of PHP
  • Why PHP?
  • Discuss web server, also discuss LAMP/WAMP/XAMP
  • Environment setup and its requirements
  • Discuss IP and port number
  • Discuss configuration related to service issues
  • Introduction of PHP interpreter
  • Execution of PHP script

• PHP Basics
  • How to write PHP script
  • Displaying message using PHP
  • Saving and running first code
  • Difference between echo and print
  • Discuss comments in PHP
  • What do you mean by PHP identifier
  • Naming convention of identifier in PHP
  • Discussion on PHP variable type
  • Displaying output in various formats
  • Concatenation operator in PHP
  • String in single quotation and in double quotation
  • What is type juggling
  • Showing the type of variables
  • Creating and accessing constant in PHP
  • Difference between constant and variable
  • Demonstration and discussion on magic constant in PHP

• Operators in PHP
  • What do you mean by operator?
  • Types of operators
  • Discuss operators on the basis of number of operand

• Decision making
  • What do you mean by selection construct or decision-making construct
  • Explanation and demonstration of if-else, nested-if, and else-if ladder
  • Discuss and demonstrate switch-case

• Looping
  • What do you mean by loop?
  • Different looping statements in PHP
  • Demonstration of while, do-while, for, and foreach loop in PHP
  • Discuss break and continue statements with demonstration

• Array
  • What do you mean by array?
  • How PHP array is different from arrays in other languages
  • Discuss array functions
  • How many types of arrays are available in PHP
  • Discuss numerical array, associative array, and multidimensional array
  • Demonstrate sorting of array elements
  • Discuss other functions that manipulate or access array elements

• String
  • What is string?
  • How many ways to define a string in PHP
  • Differentiate implode and explode
  • Demonstration on converting plain text into cipher text
  • Finding the length of string
  • Converting string in different cases
  • Replacing string in PHP
  • Comparing strings
  • String repetition function and repetition operator
  • Discuss various string related functions

• Function
  • What do you mean by function?
  • Types of function
  • Creating user-defined function
  • Ways to create user-defined function
  • Local and global scope of variable
  • Role of default argument in PHP function
  • How to return multiple values from function
  • Creating variable function in PHP
  • Including and managing external static and dynamic resources
  • Demonstrating built-in functions

• Reusing Code in PHP
  • include statement
  • include_once statement
  • require statement
  • require_once statement

• File Handling
  • What is a file? Differentiate file with directory
  • Why file is required
  • Opening and closing file in PHP
  • Discuss different modes of opening a file
  • Writing a file using PHP
  • Reading files in PHP
  • Removing and renaming files in PHP
  • Copying file content in PHP
  • Opening a directory in PHP
  • Reading the content from a directory
  • Getting and changing directory
  • Creating and removing directory in PHP
  • File uploading using PHP
  • File downloading using PHP

• Form Handling
  • Discuss get and post method of form
  • Using $_GET[] and $_POST[] super global variable
  • Discuss use of $_REQUEST[]
  • Discussion on binary data posting
  • Action attribute of form tag
  • Demonstration of sending form data on PHP script
  • Discussion on $_PHP_SELF
  • Writing PHP script in same page
  • Validating control and showing error messages using PHP

• State management
  • What do you mean by state management?
  • Discuss HTTP as a stateless protocol
  • Discussion on request and response
  • What is query string? How we can use
  • Discuss the advantages and disadvantages of query string
  • Understanding session and cookie
  • Differentiate session and cookie
  • Demonstrate creation of session and how to remove it
  • Removing all created sessions in PHP
  • Advantages of using session in PHP
  • Discuss the role of session_start()
  • How to turn on session automatically
  • Discussion on default path and time of session
  • How to get current session id
  • Discuss maximum data size PHP session can hold
  • Demonstration of creating and removing session
  • Creating and removing cookies in PHP
  • Discussion of size of cookies
  • Types of cookies in PHP
  • Create login page with user credentials
  • Demonstration on securing login

• APIs in PHP
  •  API basics: what APIs
  •   Create a RESTful API
  •   Use of RESTful API
  •   Introduction to Postman.
  •   Create and send API requests using Postman
  •  Test APIs using Postman

Module 7: Database Programming in PHP using MySQL

• Database
  • Introduction of database
  • Advantage of using database over file-oriented approach
  • What do you mean by database
  • What do you mean by DBMS
  • Differentiate DBMS with RDBMS
  • Discuss terminologies used in RDBMS
  • What is SQL
  • What do you mean by DDL, DML, DQL statements
  • What do you mean by query

• CRUD operation
• Step to connect with database
• Differentiating MySQL with MySQLi
• Demonstration to connect with server
• Checking server connection
• Showing record of table using PHP script

Module 8: Project

• Hands-on project to apply the concepts learned.
• Full-stack application development from frontend to backend.