Aloysius Plus – Web Development &
Programming Syllabus
Purpose: To introduce recruits to web development, both frontend and backend
fundamentals, programming concepts, and beginner-friendly tools for building websites.
Chapter 1: Fundamentals of Web Development
1. What is Web Development?
• Creating websites and web applications for the internet or intranet.
• Types:
o Frontend Development: Everything users see and interact with (UI/UX).
o Backend Development: Server-side, databases, logic, authentication,
and APIs.
o Full-Stack Development: Combination of frontend and backend.
2. Core Concepts
• Web Pages vs. Web Applications: Static pages (HTML) vs. dynamic
applications (interactive, database-driven).
• Client vs. Server: Client = browser, Server = where the website lives.
• HTTP & HTTPS: Protocols for communication; HTTPS = secure version.
3. Web Development Tools
• Text Editors: VS Code, Sublime Text, Atom.
• Browsers & DevTools: Chrome, Firefox, Edge for testing and debugging.
• Version Control: Git & GitHub for tracking changes and collaboration.
4. Introduction to Web Hosting & Domains
• Domain Name: Website address (e.g., www.example.com).
• Hosting: Server space where website files are stored.
• Free Hosting options for practice: GitHub Pages, Netlify.
Chapter 2: Frontend Development (User-Facing Part)
1. HTML (HyperText Markup Language)
• Structure of a webpage: headings, paragraphs, lists, links, images, tables, forms.
• Semantic HTML: <header>, <footer>, <section> for better accessibility.
2. CSS (Cascading Style Sheets)
• Styling HTML elements: colors, fonts, spacing, layouts.
• Flexbox & Grid: Modern layout systems for responsive design.
• Animations & transitions for interactivity.
3. JavaScript (JS)
• Adds interactivity to webpages: buttons, forms, sliders, animations.
• DOM Manipulation: Changing HTML/CSS dynamically.
• Beginner-friendly examples: Alert boxes, changing content on click.
4. Responsive Design
• Mobile-first approach: Websites adapt to different screen sizes.
• Media queries in CSS.
• Testing in multiple devices or using browser tools.
5. Practical Exercises
• Build a simple personal webpage using HTML/CSS.
• Add basic JavaScript: button clicks, interactive image gallery.
• Test the webpage on desktop and mobile.
Chapter 3: Backend Development & Beginner Tools
1. Introduction to Backend
• Handles data, authentication, and server logic.
• Languages: Python, PHP, Node.js (JavaScript), or Ruby.
2. Databases
• Store and manage data: MySQL, SQLite, MongoDB.
• Basic concepts: tables, records, queries.
3. WordPress & No-Code Tools
• WordPress: Beginner-friendly platform to create websites without coding.
o Themes & Plugins for design and functionality.
o Visual Page Builders: Elementor, Divi, Gutenberg.
• Other Platforms: Wix, Squarespace for rapid prototyping.
• Practical Advice: Learn coding basics first, then use WordPress for fast
deployment.
4. Web Programming Practices
• Clean, readable code with comments.
• File organization: index.html, style.css, script.js.
• Testing & debugging: Browser console, validator tools.
5. Deployment Basics
• How to make a website live: FTP upload, GitHub Pages, Netlify.
• Security basics: strong passwords, HTTPS, regular updates.
6. Continuous Learning & Improvement
• Follow online tutorials: W3Schools, MDN Web Docs, freeCodeCamp.
• Join communities: Stack Overflow, Reddit, Discord web dev groups.
• Build small projects regularly: Portfolio site, blog, school event page.
Key Takeaways for Recruits
• Web development is a mix of creativity and logic.
• Start with HTML & CSS, then learn JavaScript, and optionally move to
backend.
• WordPress and similar tools are great for beginners but understanding
fundamentals is essential.
• Practice, experimentation, and real-world projects are the best ways to improve.
Suggested Practical Exercises
1. Build a personal portfolio page with a homepage, about section, and contact
form.
2. Use CSS Grid/Flexbox to make it responsive.
3. Add basic JavaScript interactivity: image carousel or button alert.
4. Try creating a WordPress site with a free theme and customize it.
5. Deploy the site online using free hosting (Netlify or GitHub Pages).
