Course Overview

Course Description:Introduction to web development basics, including HTML, CSS, and introductory JavaScript.

Topics Covered:

• HTML (Hypertext Markup Language)
• CSS (Cascading Style Sheets)
• GitHub

Syllabus

Module 1: HTML & CSS

• Introduction to HTML
• Basic structure of an HTML document
• Common HTML tags and attributes
• Lists, tables, and forms
• Semantic HTML elements
• Introduction to CSS
• CSS syntax, selectors, and properties
• Inline, internal, and external CSS
• Box model, positioning, and layouts
• Responsive design with media queries
• CSS Flexbox and Grid
• Advanced CSS

LAB 1

• Animations and transitions
• CSS preprocessors (SASS/SCSS) introduction
• CSS frameworks (Bootstrap overview)

Module 2: JavaScript

• Introduction to JavaScript
• Basic syntax, data types, and operators
• Functions, loops, and conditional statements
• DOM manipulation and event handling
• Arrays, objects, and JSON
• ES6 features (let/const, arrow functions, template literals)
• Handling asynchronous operations (Promises, async/await)
• DOM traversal and manipulation
• Error handling and debugging
• Introduction to APIs and AJAX

LAB 2

• Build a dynamic to-do list application
• Implement add, delete, and update functionalities
• Store tasks in local storage

Module 3: PHP & SQL

• Introduction to PHP
• PHP syntax, variables, and control structures
• Working with forms and user input
• Sessions and cookies for state management
• Introduction to MySQL: Database design and creation
• CRUD operations (Create, Read, Update, Delete)
• PHP-MySQL integration using PDO/MySQL
• SQL joins, subqueries, and advanced queries
• User authentication system with hashed passwords

LAB 3

• Create a user registration and login system
• Include form validation, password hashing, and session management
• Develop a simple content management system (CMS)
• Implement CRUD operations for managing articles, categories, and users
• Ensure secure data handling and user authentication

Module 4: React

• Setting up a React project
• JSX syntax and components
• Props and state management
• React lifecycle methods and hooks
• Handling forms and user input

LAB 4

• Develop a simple e-commerce front-end
• Create product catalog with filtering and sorting
• Implement a shopping cart with state management

Module 5: GitHub

• Version control basics (Git commands and workflow)
• Creating and managing GitHub repositories

LAB 5

• Set up a Git repository and push to GitHub
• Practice branching, merging, and resolving conflicts
• Collaborate on a shared project using GitHub

Learning Outcome

• Create and style basic web pages
• Understand fundamental web development concepts
• Develop interactive pages with JavaScript
• Build backend systems using PHP & SQL
• Develop modern UI using React
• Use GitHub for version control and collaboration

Course Overview

Course Description:Intermediate web development skills, including advanced JavaScript, server-side programming, and database integration.

Topics Covered:

• HTML (Hypertext Markup Language)
• CSS (Cascading Style Sheets)
• GitHub
• JavaScript
• Bootstrap
• Hosting

Syllabus

Module 1: HTML (Hypertext Markup Language)

• Introducing HTML
• The Basic HTML Workflow
• The Paragraph Element
• Creating HTML Comments
• Creating Headings
• Working With HTML Lists
• The Em, Strong, B, and I Elements
• Nesting Elements
• Superscript and Subscript
• Inline Vs. Block Elements
• Creating Links
• Creating Images
• Creating Text Inputs and Buttons
• The Form Element
• Name and Placeholder Attributes
• Properly Labelling Form Controls
• Checkboxes, Textareas, and Range Inputs
• Selects and Radio Button Groupings
• Spans
• Divs
• Tables
• Semantic Markup
• Semantic Elements

Module 2: CSS (Cascading Style Sheets)

• Inline Styles
• Internal Styles
• External Styles: The Best Way To Write Styles
• Anatomy of CSS
• The Element Selector
• Working with background-color
• Understanding RGB Colors
• Hexadecimal Colors
• CSS Inheritance
• Changing Fonts with Font-Family
• Font-size, font-weight, and font-style
• Text Alignment
• Line-height, letter-spacing, and word-spacing
• Custom Fonts With Google Fonts
• Text-transform & text-decoration
• The ID Selector
• The Class Selector
• Styling Lists
• Introducing The Box Model
• Working With Borders
• Width, Height, and Percentages
• Adding Padding to Elements
• Working With Margins
• Box Shadows
• Common Layout Pattern

Module 3: JavaScript

• A Brief Introduction to JavaScript
• Linking a JavaScript File
• Values and Variables
• Data Types
• let, const and var
• Basic Operators
• Operator Precedence
• Equality Operators: == vs. ===
• Logical Operators
• The switch Statement
• The Conditional (Ternary) Operator
• Function Declarations vs. Expressions
• Arrow Functions
• Functions Calling Other Functions
• Introduction to Arrays
• Basic Array Operations (Methods)
• Introduction to Objects
• Dot vs. Bracket Notation
• Object Methods
• Introduction to Loops
• Iteration: The for Loop
• Looping Arrays, Breaking and Continuing
• Looping Backwards and Loops in Loops
• The while Loop
• Destructuring Arrays
• Destructuring Objects
• The Spread Operator (...)
• Short Circuiting (&& and ||)
• The Nullish Coalescing Operator (??)
• Looping Arrays: The for-of Loop
• Sets
• Maps: Fundamentals
• Maps: Iteration

Module 4: Introduction to Version Control

• Introduction to Git: Understanding Version Control
• The Essentials of Git: Why We Use It
• Step-By Step Git Installation
• Configuring Git for First-Time Use
• Understanding Local and Remote Repositories
• Initialize Git Repository with `git init`
• Create files in repository
• Check repository status with `git status`
• Stage changes with `git add`
• Commit changes with `git commit`
• Introduction to GitHub
• Creating a GitHub account
• Creating a remote repository
• Understanding `git pull`
• Understanding `git push`
• Understanding `git clone`

Module 5: React JS

• ReactJs - Introduction
• React Versions
• Features
• Benefits
• Applications
• React Architecture
• Workflow of a React application
• Creating a React Application
• Using CDN
• Using Create React App tool
• Files and Folders Structure
• JSX
• Expressions, Functions, Attributes
• React Components: Class and Function

Module 6: Node JS

• What is Node.js?
• Features of Node.js
• Creating Node.js Application
• Installing and Uninstalling Modules
• Event-Driven Programming
• EventEmitter Class
• Methods and Events

Module 7: Database Management System

• Introduction to Decomposition
• Normalization
• Lossless Decomposition
• Attribute Preserving Decomposition
• Functional Dependency Preserving Decomposition
• First Normal Form
• Second Normal Form
• Third Normal Form
• BCNF

Module 8: MySQL

• What is a Database?
• Installation
• Creating and Dropping Databases
• Tables and Data Types
• Creating and Dropping Tables
• Comments
• Data Insertion and Selection
• NOT NULL and DEFAULT

Module 9: Web Hosting

• Domain registration and DNS management
• Choosing a web hosting provider
• Uploading files via FTP or control panel
• Setting up email accounts
• Deploying a website to a hosting server

Learning Outcome

• Build dynamic web applications
• Integrate frontend and backend technologies

Course Overview

Course Description:Advanced web development techniques, including full-stack development, optimization, and deployment.

Topics Covered:

• HTML (Hypertext Markup Language)
• CSS (Cascading Style Sheets)
• GitHub
• JavaScript
• Bootstrap
• Hosting
• React
• Fullstack

Syllabus

Module 1: HTML (Hypertext Markup Language)

• Introducing HTML
• The Basic HTML Workflow
• The Paragraph Element
• Creating HTML Comments
• Creating Headings
• Working With HTML Lists
• The Em, Strong, B, and I Elements
• Nesting Elements
• Superscript and Subscript
• Inline Vs. Block Elements
• Creating Links
• Creating Images
• Creating Text Inputs and Buttons
• The Form Element
• Name and Placeholder Attributes
• Properly Labelling Form Controls
• Checkboxes, Textareas, and Range Inputs
• Selects and Radio Button Groupings
• Spans
• Divs
• Tables
• Semantic Markup
• Semantic Elements

Module 2: CSS (Cascading Style Sheets)

• Inline Styles
• Internal Styles
• External Styles
• Anatomy of CSS
• The Element Selector
• Working with background-color
• Understanding RGB Colors
• Hexadecimal Colors
• CSS Inheritance
• Changing Fonts with Font-Family
• Font-size, font-weight, and font-style
• Text Alignment
• Line-height, letter-spacing, and word-spacing
• Custom Fonts With Google Fonts
• Text-transform & Text-decoration
• The ID Selector
• The Class Selector
• Styling Lists
• Introducing The Box Model
• Working With Borders
• Width, Height, and Percentages
• Adding Padding to Elements
• Working With Margins
• Box Shadows
• Common Layout Pattern

Module 3: JavaScript

• A Brief Introduction to JavaScript
• Linking a JavaScript File
• Values and Variables
• Data Types
• let, const and var
• Basic Operators
• Operator Precedence
• Equality Operators: == vs. ===
• Logical Operators
• The switch Statement
• The Conditional (Ternary) Operator
• Function Declarations vs. Expressions
• Arrow Functions
• Functions Calling Other Functions
• Introduction to Arrays
• Basic Array Operations (Methods)
• Introduction to Objects
• Dot vs. Bracket Notation
• Object Methods
• Introduction to Loops
• Iteration: The for Loop
• Looping Arrays, Breaking and Continuing
• Looping Backwards and Loops in Loops
• The while Loop
• Destructuring Arrays
• Destructuring Objects
• The Spread Operator (...)
• Short Circuiting (&& and ||)
• The Nullish Coalescing Operator (??)
• Looping Arrays: The for-of Loop
• Sets
• Maps: Fundamentals
• Maps: Iteration

Module 4: Introduction to Version Control

• Introduction to Git
• Why Git is Used
• Installing Git
• Configuring Git
• Local vs Remote Repositories
• Initialize Repository (`git init`)
• Create Files
• Check Status (`git status`)
• Stage Changes (`git add`)
• Commit Changes (`git commit`)
• GitHub Introduction
• Create GitHub Repository
• `git pull`
• `git push`
• `git clone`

Module 5: React JS

• Introduction to React JS
• Features & Benefits
• React Architecture
• Creating React Application
• Using CDN or Create React App
• JSX
• Expressions & Attributes
• Components (Class & Function)

Module 6: Advanced Backend Development (Node.js + MongoDB)

• Node.js and NPM
• Node.js Installation
• Reading & Writing Files
• Asynchronous Programming
• Creating Web Server
• Routing
• Building an API
• MongoDB Installation
• Creating and Managing Databases
• Create / Update / Delete Documents
• Using MongoDB Compass
• MongoDB Atlas (Cloud)

Module 7: PHP

• What is PHP
• Variables & Data Types
• Echo and Print
• Operators
• Conditions and Loops
• Arrays and Functions
• Forms & Data Handling (`$_GET`, `$_POST`)
• Form Validation
• Regular Expressions

Module 8: Database Management System (DBMS)

• Normalization
• Lossless Decomposition
• Functional Dependency
• 1NF, 2NF, 3NF, BCNF

Module 9: MySQL

• Creating & Dropping Databases
• Tables & Data Types
• Insert, Update, Delete
• Primary Key, Auto Increment
• WHERE, ORDER BY, LIMIT
• String & Aggregate Functions
• Constraints & ALTER TABLE

Module 10: Web Hosting

• Domain & DNS
• Choosing Hosting
• Uploading Project
• Setting up Email
• Deploying Website

Learning Outcome

• Develop and deploy web applications
• Integrate frontend and backend technologies
• Manage databases & hosting environments