The purpose of this project is to make sure that everyone has a basic understanding of HTML elements. The reason I want everyone to write the code by hand is so that you gain a more intimate understanding of the code that dives deeper that simply using a pre-existing library.
This first project is meant to be easy and simple so that you can use this code as a base for the next two projects. In the next project, we will start replacing in-line style tags with proper CSS classes and ids. The last step is to use external libraries such as Bootstrap and jQuery.
The purpose of this project is to build on what we did in HTML Project #1. Now that everyone has a firm grasp of HTML coding and folder structure, we want to make use of External CSS files, class names, ids, and some basic scripting shortcuts. This second project will also introduce Javascript via jQuery so that we can start exploring some very basic Object Oriented Programming.
As with the first project, this second project is meant to be expanded upon later. In the third project, we will introduce the concept of servers, remote file management, and some basic PHP coding.
The purpose of this project is to build on what we did in HTML Project #2. Now that everyone has a firm grasp of front-end coding, we are going to start implementing some PHP to make our lives easier. Because PHP is server-side code, we are also going to be using FTP to upload files to a server in order for the PHP to be processed on a server. With PHP, we are also going to be exploring how to capture information from the front-end and process it server-side.
As with the first two projects, this third project is meant to be expanded upon later. In the forth project, we will introduce the concept of AJAX and Database (MySQL).
The purpose of this project is to build on what we did in PHP Project #1. Now that everyone has some idea of server-side coding, we are going to start interacting with the front-end via AJAX coding. We will also learn how to store, retrieve, and manipulate data in a database (MySQL). At this point, concepts about file structure, organization, and planning become extremely important.
As with the first three projects, this forth project is meant to be expanded upon later. In the fifth project, we will start building actual tools and functionality that you would find on real-world websites.
The purpose of this project is to take everything we have learned so far and build a full functional, interactive website (forum or social media site). The website will require (but will not be limited to) the following functionality: ability for a visitor to create a profile, ability for users to log in to their profile, ability to update their profiles, ability to create posts to share with others in the community.
While on the surface, the above requirements sound simple, you will find that the devil is in the details. As such, this final project will be a group effort (group sizes to be determined).
Additional functionality beyond the above will be presented as challenges depending on the ability of the class. As a bonus, groups will have the ability to "test" each other's sites. If a group is able to show a security vulnerability in another group's project, they will be awarded bonus marks (the victim group must make efforts to repair their security holes).
Because the purpose of this exercise is to understand how to create a fully functional project, no server-side frameworks will be allowed (front-end frameworks such as Bootstrap and jQuery will be allowed to make the site look aesthetically pleasing).