basic
Demo
Technologies: HTML, CSS, Bootstrap
Concepts: - Basic HTML syntax
- CSS styling
- Bootstrap grid
Requirements: - Build a website using elements like h1-h6, p, br, a (with target='_blank'), img (with alt), ul/ol, li, hr, head, title, div, span, and embeds (YouTube and Google Maps). Ensure you have valid navigation between three pages.
Notes: Favicon Creation: Create a favicon using a generator and implement it on your website.
blog
Demo
Technologies: MYSQL, Boostrap
Concepts: - insert/select data
Requirements: -
You've been given a blog wireframe and asked to build a database driven website.
Create a folder in your projects/ folder and label it 'blog'.
The topic of the blog can be anything you want.
Build the webpage first using Bootstrap and Latin Filler as placeholder text.
After the page is done build a database table that holds the database articles. The table should have fields for: article id (auto incremented),Article Title, Date Created, Author, Blurb (article), Category, Tags, and Published (indicates if the articles should be live or not). Each article should not have Comments.
Select all the blog articles from the table and have them display on your webpage.
Notes: Focus on the process page on this assignment, it is a foundational part of building websites.
apple
Demo
Technologies: Bootstrap, CSS, HTML
Concepts: - Cloning?
Requirements: -
Duplicate the following webpage from the Apple.com website:
https://www.apple.com/macbook-pro/specs/
Use Bootstrap 3, CSS, and HTML
Use Font Awesome 4.7
Goal is for design, not functionality
The goal of this project is to get your Apple website to look exactly like the actual Apple webpage.
Bistro
Demo
Technologies: n/a
Concepts: - n/a
Requirements: - Create the homepage for our new client Bistros
Part A:
Layout should follow their wireframe (also called a PSD).
Use Bootstrap 4.
Create a folder on Opalstack called 'bistros' and put the home page and associated files in that folder.
Must render correctly on all devices: Phone, Tablet, Computer.
Part B:
Apply a fancy font to BISTROS, OUR CHEF, and REVIEWS using Google fonts. Fancy Fonts Tutorial | Google Fonts
Apply a background image to the web page. (CSS in lesson 13)
Apply a background image to the container with the ORDER ONLINE button. (CSS in lesson 13)
Apply a background color to the following containers: NAVBAR, MENUS, FOOTER. (CSS in lesson 13)
Use FontAwesome for the REVIEW STARS. (See my demo)
Part C: Create Menus and Ordering System.
Bistros Group Project
Work in groups of 2 or 3. Solo is ok.
Build a menu for each button BREAKFAST, LUNCH, AND DINNER.
User should be able to click on a button and be taken to that menu.
Menu items should be in a database table.
menu_item_id
enum('breakfast','lunch','dinner')
item_name (ie., Pancakes)
item_blurb (description of the food)
item_price
item_image (optional)
MENU PAGE
Display all items on each menu, for example the Breakfast Menu should look like this:
Breakfast Menu
Item Description Price Quantity
Pancakes Large stack of pancakes served with butter and syrup. $5.00
Waffles Belgian served with fresh fruit, butter, and syrup. $6.00
ORDER REVIEW PAGE
Display order (each item with price X how many ordered)
Display price total
Let the user select Pickup or Delivery
If they pick Delivery then the address form should slide in.
Check radio buttons to toggle between hiding and showing the DIV element:
Pickup
Delivery
ORDER PROCESS PAGE
Send an email to yourself with the new order
Send an email to the customer verifying order with one:
for pickup: Your order will be ready for pickup in 30 minutes.
for deliver: Your order will be delivered in 45 minutes.
Display a thanks for ordering message and display order, delivery method (pickup or delivery), with pricing.
Once your program is working copy the code to your version of Bistros and hook it up.
Part D: Add Orders to the Database and build an admin backend that can do the following:
Has a dashbord page that displays active orders and a graph that shows revenue to date.
Uses an admin template.
Has a user login
Allows admin to mark each order as completed
Allows admin to click on any order and see the details and edit or delete order items or customer info.
newsletter
Demo
Technologies: n/a
Concepts: - n/a
Requirements: - Newsletter Signup System: Build a newsletter folder with an index.php form for email collection. Validate email input, include an HTML email preference checkbox, and process submissions in process.php. Customize and send a newsletter email.
fashion
Demo
Technologies: n/a
Concepts: - n/a
Requirements: - Newsletter Signup System: Build a newsletter folder with an index.php form for email collection. Validate email input, include an HTML email preference checkbox, and process submissions in process.php. Customize and send a newsletter email.
myguests
Demo
Technologies: PHP, PHPMyadmin, SQL
Concepts: - Local Development Setup
- Database Operations (SELECT, INSERT, UPDATE, DELETE)
- PHP Form Processing
- Frontend-Backend Integration
Requirements: - Build full CRUD functionality for guest entries
- Use Bootstrap for layout and responsive design
- Implement user alerts for create, update, and delete actions
- Ensure data validation and sanitization
Notes: Focus on modular PHP structure. Reuse functions where possible. Test for empty form inputs and SQL injection risks.
hours
Demo
Technologies: n/a
Concepts: - n/a
Requirements: - Business Hours Highlighter: Highlight the current day's operating hours dynamically using PHP. Display 'We Are Currently Closed' in red if outside business hours.
Movies
Demo
Technologies: Javascript, cyberduck
Concepts: - Javascript Intro
- Event Listeners
- DOM manipulation
Requirements: - Create a 'movies' database table with movie_id, movie_title, movie_genre
Genre array: Action , Comedy , Kids and Family , Drama , Fantasy , Horror , Mystery, Romance, Thriller, Western. Use an array and foreach loop to create the dropdown.
Notes: Extra credit: add Delete and Update features.
planets
Demo
Technologies: n/a
Concepts: - n/a
Requirements: - Solar System Webpage: Create a webpage about planets in the solar system using data from Google. Store planet details in a database table, including fields like name, description, and orbital period. Dynamically display this data with links to Google Maps.
home
Demo
Technologies: n/a
Concepts: - n/a
Requirements: - Home Services Homepage: Build a responsive homepage for 'Home Bodies' based on a wireframe. The page should include 4 services (cleaning, closet organizing, laundry, handyman). Ensure compatibility with all devices.
Notes: You have just been hired by a Web Design and Development Company. On your first day they ask you to build a home page (index.html) from a wireframe. The company is a home-services business, called Home Bodies, that offers 4 services: cleaning, closet organizing, laundry, and handyman services. The page must be responsive and display correctly on all devices. View Wireframe.
100
Demo
Technologies: PHP
Concepts: - fopen
- loops
- arrays
- linking
- str_replace
Requirements: - Build a 100 page website starting from 1 and going all the way to 100!.
Create a folder named '100' and put your files in there. Upload to Opalstack
Each number should have it's own page.
The pages should be constructed by an index.php page that generates the 100 pages.
All pages should go into a new folder named 'pages'.
Each page should display the number and the result of the number multiplied by itself.
Each page should have a navigation to go to the other pages.
Notes: This is essentitaly the basis of our next assignment, STATES, so be sure to understand the logic behind this.
States
Demo
Technologies: PHP
Concepts: - same as 100
Requirements: - Build a 51 page website displaying all 50 States using an array of States.
The 51st page will be an index.php that displays all state flags with the name of the State underneath the flag. Each flag and name must link to its page.
Each State must have it's own page.
Each page must have a link back to the index page.
Each State page must display its State Flag.
Each page must link to its Wikipedia page.
Notes: Don't overcomplicate this, you have already completed this, this just looks a lil different.
Template
Demo
Technologies: PHP
Concepts: - Code optimization
Requirements: - Create a simple template for your previous 4 page website. This should include a footer, header, and nav.
Notes: Use some variables or slugs at the top of each page! Use this to further optimitze your coding experience.
clinic
Demo
Technologies: PHP
Concepts: - Form creation
- Form inputs
- Form labels
- Buttons
Requirements: - Whip up a clinic check-in system: Create a responsive patient check-in form for a clinic, optimized for tablets. Collect required fields like name, contact details, and demographics. Store data in a database and display a thank-you message after submission.
login
Demo
Technologies: CyberDuck
Concepts: - Authentification
- Authorization
- secure coding
Requirements: -
Generate an encrypted random password from registration
Send an email with username(email) and password
Create the following pages: login.php, loginprocess.php, dashboard.php, logout.php
login.php
create a login form for username and password with action='processlogin.php'
start sessions
if already logged in send to dashboard.php
error message above the form if login unsuccessful
loginprocess.php
start sessions
if username or password empty send back to login.php with the error message
otherwise encrypt password and check for match in database
if no match send back to login.php with the error message, destroy message SESSION variable
if match send to dashboard.php with success message
dashboard.php
display SUCCESS message
destroy SESSION variable for message
if not logged in send to login.php
provide a logout link/button
logout.php
destroy all sessions
redirect to login.php
Notes: Focus on storing data inside your database, this process will be key in completing this project.
college
Demo
Technologies: PHP
Concepts: - back end to front end capability
Requirements: - College Website: Build a responsive Bootstrap website for a college, including pages like Home, Registration, Login, and a Student Portal. Use PHP sessions and cookies for secure login, and email verification for user registration. Include a dashboard, course registration, and a bursar page for costs and payments.
membersonly
Demo
Technologies: Bootstrap
Concepts: - Password Encryption
- Password Storage
- Session Management
Requirements: - Membership System: Create a members only folder with a Bootstrap 5 template. Set up a users database table and implement pages for signup, login, dashboard, and logout. Use encrypted passwords, email verification, and session management for security.
capstone
Demo
Technologies: All encompasing material, all
Concepts: - Html
- Php
- Javascript
- React
- Wordpress
- Html
Requirements: - Create a multiple page project with a full front-end to back-end capability. Subject matter is anything ya want it, demonstrate knowledge and capabilites of all avaialable.