12-Week Web Development Curriculum

This 12-week curriculum is designed to provide foundational knowledge and skills required for entry-level web development positions such as Front-End Developer, Back-End Developer, and Full-Stack Developer. The focus will be on HTML, CSS, JavaScript, back-end technologies, and databases, with a particular emphasis on foundational certifications that will help land employment in the field.  By the end of this course, learners will have a solid understanding of front-end and back-end web development, a portfolio of projects, and the foundational certifications required to land an entry-level web development job. This curriculum balances hands-on coding experience with the theory necessary for a well-rounded understanding of full-stack web development. Students will leave the program prepared to build both front-end and back-end web applications, and be ready to embark on real-world development tasks.

Weeks 1–4: Front-End Development

Week 1: Introduction to Web Development & HTML/CSS Basics

Objectives:

  • Understand the fundamentals of web development.
  • Learn HTML structure and semantic tags.
  • Gain proficiency in styling web pages with CSS.

Topics:

  • Introduction to the web development stack (front-end vs. back-end)
  • Overview of HTML: Structure, tags, attributes
  • Basic HTML5 tags: div, section, header, footer, article, etc.
  • CSS basics: Selectors, properties, and values
  • CSS Box Model: Margin, padding, border, content
  • Styling text, colors, and backgrounds
  • Layouts using Flexbox and Grid

Resources:

Lab Work:

  • Build a simple webpage using HTML and CSS
  • Create layouts using Flexbox and Grid
  • Style a basic landing page with text, images, and navigation

Week 2: Advanced CSS & Responsive Web Design

Objectives:

  • Learn advanced CSS techniques and media queries.
  • Build responsive web pages that adapt to various screen sizes.

Topics:

  • Advanced CSS properties: position, z-index, overflow, etc.
  • Responsive Web Design (RWD) with CSS Media Queries
  • Mobile-first design principles
  • Using CSS frameworks (Bootstrap or Tailwind CSS)
  • Introduction to CSS preprocessors (SASS/SCSS)

Resources:

  • CSS Tricks - Flexbox Guide
  • CSS Secrets by Lea Verou
  • Bootstrap Documentation

Lab Work:

  • Build a responsive webpage using media queries
  • Convert a fixed-width layout to a fluid, mobile-first layout
  • Practice with a CSS framework like Bootstrap or Tailwind CSS

Week 3: JavaScript Fundamentals

Objectives:

  • Understand core JavaScript concepts such as variables, loops, functions, and objects.
  • Learn how JavaScript interacts with HTML and CSS to create dynamic web pages.

Topics:

  • Introduction to JavaScript syntax, variables (let, const, var)
  • Data types: Strings, numbers, arrays, objects
  • Operators: Arithmetic, comparison, logical operators
  • Conditional statements (if/else)
  • Loops: for, while, forEach
  • Functions: Declaring functions, arguments, and return values
  • DOM Manipulation: Selecting elements, adding event listeners

Resources:

Lab Work:

  • Write JavaScript functions that modify the DOM (e.g., changing text content, updating styles)
  • Build interactive elements like a form validation or to-do list app
  • Practice using JavaScript to manipulate HTML and CSS dynamically

Week 4: Advanced JavaScript & Introduction to APIs with React

Objectives:

By the end of Week 4, students will:

1.    Have a deeper understanding of advanced JavaScript concepts, including asynchronous programming (using callbacks, promises, and async/await), destructuring, and JavaScript ES6+ features.

2.    Be introduced to APIs (Application Programming Interfaces) and how to interact with them using JavaScript, particularly focusing on making HTTP requests using the fetch() API.

3.    Gain an introduction to React, a powerful JavaScript framework for building user interfaces, by learning its core concepts such as JSX, components, state, and props.

4.    Learn how to integrate API data into a React application, retrieving information from an API and rendering it dynamically.

Topics Covered:

1.    Advanced JavaScript Concepts

○     Callback functions and handling asynchronous code

○     Promises and async/await for cleaner asynchronous flow

○     Destructuring (arrays and objects) and spread/rest operators

○     Error handling with try/catch

2.    Introduction to APIs

○     What is an API? Understanding RESTful APIs

○     How to make HTTP requests using fetch()

○     Handling JSON data and parsing

○     Dealing with CORS (Cross-Origin Resource Sharing)

3.    Introduction to React

○     What is React and why use it? (Component-based architecture)

○     JSX syntax and rendering UI components

○     Functional vs. Class components

○     State and Props in React

○     React component lifecycle basics

4.    Integrating APIs in React

○     Fetching data from an API in React (using fetch() and useEffect)

○     Displaying API data dynamically in React components

 

Weeks 5–8: Back-End Development with PHP & MySQL

Week 5: Introduction to PHP and Server-Side Development

Objectives:

  • Understand the role of PHP in web development.
  • Learn how to set up a local server environment for PHP development.

Topics:

  • Introduction to server-side programming
  • PHP syntax, variables, and data types
  • PHP superglobals: $_GET, $_POST, $_SESSION, $_COOKIE
  • Basic PHP functions and form handling
  • Setting up a local development environment using XAMPP or MAMP

Resources:

  • PHP Manual
  • PHP & MySQL: Server-side Web Development by Jon Duckett
  • W3Schools PHP Tutorial

Lab Work:

  • Set up a local server with XAMPP or MAMP
  • Write a PHP script to process form submissions
  • Display dynamic data using PHP (e.g., personalized greetings)

Week 6: Introduction to PHP Framework Laravel

Objectives:

By the end of Week 6, students will:

1.    Gain a foundational understanding of the Laravel PHP framework, including its architecture, features, and why it is commonly used for building web applications.

2.    Learn how to set up a basic Laravel project and understand the structure of a Laravel application (routes, controllers, views, models).

3.    Learn how to create basic CRUD (Create, Read, Update, Delete) operations in a Laravel application.

4.    Be introduced to Eloquent ORM, Laravel’s built-in database abstraction layer, and how to interact with databases efficiently.

5.    Understand routing in Laravel, including how to define routes and create dynamic URLs.

6.    Learn about Blade templating engine and how it integrates with views in Laravel for dynamic content rendering.

Topics Covered:

1.    Introduction to Laravel

○     What is Laravel? Overview of Laravel’s MVC (Model-View-Controller) architecture.

○     Key features of Laravel: Routing, Middleware, Blade templating, Artisan CLI, and Eloquent ORM.

2.    Setting Up a Laravel Project

○     Installing Laravel via Composer

○     Configuring a basic Laravel application

○     Directory structure in Laravel: routes, controllers, views, models, migrations, etc.

3.    Routing in Laravel

○     Introduction to routing in Laravel

○     Defining routes using web.php and api.php

○     Using Route parameters and route groups

4.    Controllers and Views in Laravel

○     Creating controllers using Artisan CLI

○     Linking controllers to routes

○     Understanding the Blade templating engine for dynamic views

○     Returning data from controllers to views

5.    Working with Databases using Eloquent ORM

○     Setting up a database connection in Laravel

○     Introduction to Eloquent ORM and how it interacts with databases

○     Performing CRUD operations with Eloquent: create(), update(), delete(), and find()

6.    CRUD Operations in Laravel

○     Building basic forms for creating, updating, and deleting data

○     Displaying data in views using Eloquent models

○     Validation of form input in Laravel

○     Using Laravel’s built-in validation mechanisms

 

Week 7: Introduction to MySQL and Database Integration

Objectives:

  • Learn how to interact with MySQL databases using PHP.
  • Understand how to create, read, update, and delete (CRUD) records in a database.

Topics:

  • Introduction to MySQL: Databases, tables, queries
  • Connecting PHP to MySQL using mysqli and PDO
  • Performing CRUD operations (Create, Read, Update, Delete)
  • Preparing SQL queries to prevent SQL injection attacks

Resources:

Lab Work:

  • Set up a MySQL database and connect it to a PHP script
  • Build a CRUD system to manage users (add, edit, delete)
  • Practice using prepared statements for secure database interaction

Week 8: Advanced PHP and Authentication

Objectives:

  • Learn how to implement authentication and authorization in PHP.
  • Understand more advanced PHP topics like file handling and email sending.

Topics:

  • User authentication: Login, logout, and password hashing (bcrypt)
  • Role-based access control (RBAC)
  • Sending emails from PHP (using PHPMailer)
  • File handling in PHP (uploading files, reading/writing files)

Resources:

Lab Work:

  • Build a user authentication system (register, login, logout)
  • Implement role-based access control for different user levels
  • Send a welcome email after successful user registration

Weeks 9–12: Capstone Projects

Week 9: Project Planning & Setup

Objectives:

  • Introduce students to the capstone project and guide them through the planning process.
  • Help students define project scope, features, and requirements.

Topics:

  • Choosing a project: E-commerce site, blog, social media platform, etc.
  • Defining project scope, user stories, and features
  • Setting up a version control system (Git/GitHub) for collaboration
  • Structuring the project: Frontend and backend setup

Resources:

  • GitHub Docs
  • Pro Git (book by Scott Chacon and Ben Straub)

Lab Work:

  • Define and create a detailed project plan
  • Set up a GitHub repository for version control
  • Initialize the project with basic front-end and back-end file structure

Week 10: Front-End Development for Capstone Projects

Objectives:

  • Implement the front-end design and functionality of the capstone project.
  • Use HTML, CSS, and JavaScript to create a dynamic user interface.

Topics:

  • Finalizing the front-end design and UI/UX
  • Implementing dynamic functionality with JavaScript (forms, animations, AJAX)
  • Ensuring responsiveness and mobile-friendliness

Resources:

  • HTML5 Up (Free HTML5 templates)
  • JavaScript: The Good Parts by Douglas Crockford

Lab Work:

  • Build interactive components (e.g., forms, modals, galleries)
  • Implement dynamic content loading via JavaScript (AJAX)

Week 11: Back-End Development for Capstone Projects

Objectives:

  • Implement back-end functionality using PHP and MySQL.
  • Integrate front-end with back-end systems to manage data.

Topics:

  • Building and integrating a database using MySQL for your project
  • User authentication and database CRUD operations
  • Securing your PHP application

Resources:

  • PHP and MySQL: Novice to Ninja by Tom Butler

Lab Work:

  • Implement database-driven features (e.g., user registration, post management)
  • Ensure security measures for your back-end (e.g., password hashing, prepared statements)

Week 12: Final Review & Project Presentation

Objectives:

  • Finalize capstone projects and prepare for presentation.
  • Conduct peer reviews and offer feedback on projects.

Topics:

  • Debugging and testing your project
  • Deploying your project to a live server
  • Preparing project documentation

Resources:

Lab Work:

  • Finalize, test, and deploy the capstone project
  • Present your project to the class, explaining the technologies used and demonstrating its functionality