Edit Content
Click on the Edit Content button to edit/add the content.

Web Development PRO – HTML, CSS, Bootstrap, JavaScript & jQuery (2 Months)

$0.00

Duration & Schedule:
2 Months (16 Classes) — 2 Classes per Week (Saturday & Sunday)

Course Overview:
This course is the foundation of modern web development. Students will start with HTML to structure
content, use CSS & Bootstrap to style and design, and then add interactivity with JavaScript and
jQuery.

Every module comes with mini-projects to practice, and by the end, each student will publish a live
portfolio website and multiple interactive apps. This course is perfect for GB youth who want to
quickly start freelancing, build professional portfolios, or help local businesses go digital.

Detailed Curriculum Module 1: Getting Started with the Web
  • How websites work: client, server, browser explained simply.
  • Frontend vs Backend: real-world examples.
  • Setting up VS Code and your first HTML project.
  • Practical: “Hello World” webpage.
Module 2: HTML Fundamentals
  • Core tags: headings, paragraphs, images, and links.
  • Lists (ordered/unordered).
  • Forms with inputs, labels, and buttons.
  • Mini project: Personal Bio Page with profile, links, and form.
Module 3: Advanced HTML
  • Tables for structured data.
  • Embedding audio & video.
  • Semantic tags (header, nav, footer) and why they matter.
  • Accessibility basics (alt tags, labels).
  • Mini project: Blog Layout with media.
Module 4: CSS Fundamentals
  • Colors, fonts, backgrounds, borders.
  • Box model explained with margin, padding, border.
  • Inline vs external stylesheets.
  • Mini project: Styled Personal Page.
Module 5: CSS Layouts & Responsive Design
  • Flexbox for modern layouts.
  • CSS Grid basics.
  • Responsive design using media queries.
  • Mini project: Responsive Landing Page.
Module 6: Bootstrap Framework
  • Bootstrap setup & grid system.
  • Components: navbar, cards, modals, forms.
  • Responsive utilities.
  • Mini project: Bootstrap Portfolio Template.
Module 7: JavaScript Basics
  • Variables, data types, operators.
  • Functions, loops, and conditionals.
  • Console debugging.
  • Mini project: Calculator & Button Click Counter.
Module 8: DOM Manipulation
  • Selecting/changing HTML elements.
  • Handling events: click, hover, input.
  • Adding/removing elements dynamically.
  • Mini project: To-Do List App.
Module 9: Forms & Validation
  • Capturing input values with JS.
  • Email/password validation.
  • Inline alerts and error handling.
  • Mini project: Signup Form with Validation.
Module 10: Advanced JavaScript (ES6+)
  • let/const, arrow functions, template literals.
  • Async JS: promises, fetch, async/await.
  • Working with JSON.
  • Mini project: Quiz App (with JSON data).
Module 11: jQuery Essentials
  • jQuery selectors & methods.
  • Animations & effects.
  • Simplifying DOM manipulation.
  • Mini project: Image Slider/Gallery.
Module 12: Combining JS + jQuery
  • Building tabs, modals, and dropdowns with jQuery.
  • Plugins and libraries (sliders, datepickers).
  • Mini project: Product Showcase Page.
Module 13: Publishing Your Website
  • Hosting on GitHub Pages & Netlify.
  • Buying a domain in Pakistan (.pk, .com.pk).
  • Uploading files with FTP.
  • Mini task: publish your site live.
Final Project
  • A Complete Portfolio Website: – About page, projects, contact form (validated). – Interactive slider/gallery. – Responsive and hosted live. Outcomes & Career Opportunities
  • Build and publish real websites from scratch.
  • Create dynamic projects: to-do app, signup form, quiz app, slider.
  • Publish a portfolio site to show clients and employers.
  • Start freelancing by making business websites, landing pages, and interactive features.
  • Be ready for Full Stack PRO MAX (Laravel or MERN).
Career Pathways:
  • Freelance Web Developer (local & global).
  • Junior Frontend Developer.
  • Website Assistant for GB startups and shops.
  • A strong foundation for backend and mobile app development.