Diploma in Web Design and Development

About This Course

This is a practical, project-based full-stack development program designed to take beginners from zero to job-ready in 4 months. You will learn front-end development, back-end development, databases, UI frameworks, and deployment - ending with real-world full-stack projects.

By the end of this course, you will be able to:

  • Build responsive, modern websites
  • Create dynamic applications using JavaScript
  • Work with databases using MySQL
  • Develop back-end logic using PHP
  • Build complete full-stack applications (Admin Panel, E-commerce, Hotel system)
  • Deploy your projects online with custom domains

Who Can Join

  • Beginners interested in learning
  • Students from any educational background
  • After OL / After AL Students
  • HND Students
  • Undergraduate Students
  • Anyone passionate about this field

Career Pathway

  • Full-Stack Developer
  • Frontend Developer
  • Backend Developer
  • Junior Software Engineer
  • Web Developer
  • Freelancer / Entrepreneur

Professional Skills

Web designing
Web development
Database management
UI and UX Design
Git Collaboration
Deployment & Maintenance

Hands-on Project & Capstone Project

News Article Page / Travel Destination Page (HTML)
Product Landing Page & Consulting Web Page (HTML, CSS)
Loan Calculator (HTML, CSS, JavaScript)
AI Photo Editing App (HTML, CSS, Bootstrap, JavaScript)
Student management system (PHP)
Ecommerce project (Capstone Project)

Getting Started Full-Stack Development

10 Modules

Module 01 :    Introduction to Web Development
  • 1. Overview of Full-Stack Development
  • 2. front-end, back-end, and database
  • 3. Role of a developer & Career opportunities
  • 4. Web Basics
  • 5. How the internet works (Client–Server model)
  • 6. HTTP & HTTPS basics
  • 7. Domains, hosting, DNS
  • 8. Tools Setup
Module 02 :    HTML – From Basics to Advanced
  • 1. Introduction to HTML
  • 2. Basic Tags & Text
  • 3. Text Formatting
  • 4. Links & Navigation
  • 5. Images & Multimedia
  • 6. Lists & Tables
  • 7. Forms & User Input
  • 8. Layout & Containers
  • 9. Advanced HTML Features
  • 10. Accessibility & SEO
Module 03 :    CSS – From Basics to Advanced
  • 1. Introduction to CSS
  • 2. Selectors & Combinators
  • 3. Colors & Units
  • 4. Text & Fonts
  • 5. The Box Model
  • 6. Backgrounds
  • 7. Display & Positioning
  • 8. Flexbox (Modern Layout)
  • 9. CSS Grid (Advanced Layout)
  • 10. Transitions & Animations
  • 11. Responsive Design
  • 12. Advanced CSS Features
  • 13. ACSS Frameworks & Preprocessors
Module 04 :    UI Design & Github
  • 1. Introduction to Ui & UX
  • 2. Figma – From Basics to Advanced
  • 3. Github – From Basics to Advanced
Module 05 :    Bootstrap – From Basics to Advanced
  • 1. Introduction to Bootstrap
  • 2. Bootstrap Grid System
  • 3. Layout & Utilities
  • 4. Typography & Icons
  • 5. Bootstrap Components (UI Elements)
  • 6. Navigation & Menus
  • 7. Forms in Bootstrap
  • 8. Bootstrap Layout Helpers
  • 9. Bootstrap JavaScript Components ( Bootstrap JS + Popper.js)
  • 10.Bootstrap with Customisation
Module 06 :    JavaScript – From Basics to Advanced
  • 1. Introduction to JavaScript
  • 2. JavaScript Basics
  • 3. Control Structures
  • 4. Functions
  • 5. Arrays & Objects
  • 6. Strings & Numbers
  • 7. DOM Manipulation
  • 8. Events
  • 9. ES6+ Features
  • 10.Advanced JavaScript Concepts
  • 11.Object-Oriented JavaScript
  • 12.Browser APIs
Module 07 :    jQuery (AJX) – From Basics to Advanced
  • 1. Introduction to jQuery
  • 2. Advantages & disadvantages (today’s relevance vs Vanilla JS)
  • 3. jQuery AJAX
  • 4. Handling JSON data
  • 5. Error handling (.done(), .fail(), .always())
  • 6. jQuery Plugins
  • 7. Carousel-Using pre-built plugins
  • 8. Datepicker-Using pre-built plugins
  • 9. Modal-Using pre-built plugins
  • 10.Writing a simple custom plugin
Module 08 :    MySQL – From Basics to Advanced
  • 1. Introduction to Databases & MySQL
  • 2. Database & Tables
  • 3. CRUD Operations
  • 4. Filtering & Sorting
  • 5. SQL Functions
  • 6. Joins & Relationships
  • 7. Subqueries & Nested Queries
  • 8. Constraints & Indexing
Module 09 :    PHP – From Basics to Advanced
  • 1. Introduction to PHP
  • 2. PHP Basics
  • 3. Control Structures
  • 4. Functions in PHP
  • 5. Arrays in PHP
  • 6. Forms & User Input
  • 7. PHP with Server & Files
  • 8. Object-Oriented PHP (OOP)
  • 9. Error Handling & Debugging
  • 10.PHP & Databases (MySQL)
  • 11.PHP Security Essentials
  • 12.PHP Advanced Topics
Module 10 :    Deployment – Full-Stack Applications
  • 1. Introduction to Deployment
  • 2. Deployment for Front-End
  • 3. HTTPS (SSL)
  • 4. Deployment for Full-Stack Applications
  • 5. Securing APIs (CORS, authentication)
  • 6. Domain & DNS Configuration
  • 7. Registering a domain (Namecheap, GoDaddy, Google Domains)
  • 8. Pointing domain to hosting server (A record, CNAME)
  • 9. Configuring subdomains
  • 10.Setting up SSL with Let’s Encrypt
PDF DOWNLOAD FULL SYLLABUS
Hands-on
  • News Article Page / Travel Destination Page (HTML)
  • Product Landing Page & Consulting Web Page (HTML, CSS)
  • Loan Calculator (HTML, CSS, JavaScript)
  • AI Photo Editing App (HTML, CSS, Bootstrap, JavaScript)
  • Student management system (PHP)

Tools

Power BI Tools

Student Projects

Project 1

Project Alpha

Power BI dashboard for retail analytics.

Project 2

Project Beta

E-commerce sales analysis & insights.

Project 3

Project Gamma

Interactive data visualization dashboard.

Program Fees & Enrollment

Full Stack Web Development

  • ✔ Real-time Mentorship & Project Work
  • ✔ Lifetime Recording Full Access
  • ✔ Certificate & Placement Support
  • ✔ Lifetime Community Membership

Rs.40,000

Including all taxes & course materials

  • RS.40,000
  • Limited Offer
  • Subject Computing
  • Lessons 70 Lessons
  • Duration 4 Month
  • Classroom Hybrid
  • Language Tamil / Sinhala
Enroll Now