Topics:

• Overview of web development
• The evolution of the web: past, present, and future
• Understanding the client-server model and HTTP/HTTPS protocols

Labs/Assignments:

• Setting up your development environment
• Installing a code editor and Git

Learning Outcome: Students will set up their tools and understand the basics of how the web functions.

Topics:

• Introduction to HTML5
• Understanding tags, elements, attributes, and document structure
• Creating semantic layouts with header, footer, navigation, and article elements

Labs/Assignments:

• Build a personal webpage using HTML

Learning Outcome: Students will create well-structured HTML documents and understand semantic markup.

Topics:

• CSS fundamentals: selectors, properties, and values
• Box model, positioning, and display properties
• Responsive design basics with media queries

Labs/Assignments:

• Style your personal webpage with external CSS

Learning Outcome: Students will design visually appealing web pages and understand responsive design principles.

Topics:

• Introduction to JavaScript basics: variables, data types, and operators
• Control structures: loops, conditionals, and functions
• DOM manipulation and event handling

Labs/Assignments:

• Add interactivity to your webpage (e.g., form validation or dynamic content)

Learning Outcome: Students will begin programming dynamic web interactions using JavaScript.

Topics:

• Deeper dive into functions, arrays, and objects
• Understanding ES6+ features (let/const, arrow functions, template literals)
• Introduction to popular libraries (e.g., jQuery) and frameworks

Labs/Assignments:

• Refactor your JavaScript code using modern ES6 syntax

Learning Outcome: Students will write more efficient, modern JavaScript code.

Topics:

• Mobile-first design principles
• Advanced CSS techniques: Flexbox and CSS Grid
• Cross-browser compatibility and performance optimization

Labs/Assignments:

• Create a responsive webpage layout using Flexbox or Grid

Learning Outcome: Students will be able to design websites that work seamlessly on multiple devices.

Topics:

• Overview of server-side programming and databases
• Introduction to Node.js and Express.js for building RESTful APIs
• Connecting to databases (SQL/NoSQL basics)

Labs/Assignments:

• Build a simple REST API and connect it to a database

Learning Outcome: Students will understand the basics of back-end development and how it integrates with the front end.

Topics:

• Introduction to Git and GitHub for version control
• Branching, merging, and collaborative workflows
• Basics of web hosting and deployment strategies (e.g., Netlify, Heroku)

Labs/Assignments:

• Deploy a simple web project using GitHub Pages or a cloud service

Learning Outcome: Students will learn essential version control and deployment practices.

Topics:

• Combining front-end and back-end knowledge
• Building and consuming APIs
• Data flow and integration challenges

Labs/Assignments:

• Begin a capstone project that requires integration of all learned skills

Learning Outcome: Students will apply full-stack development skills to create a complete web application.

Topics:

• Finalizing the capstone project
• Peer review sessions and debugging workshops
• Course review and next steps in web development

Labs/Assignments:

• Present your final project

Learning Outcome: Students will consolidate their learning by presenting a fully functional web application.