PROJECT REPORT ON - BUSINESS BASED IT INSTITUTE LEARNING WEBSITE
A PROJECT WORK REPORT SUBMITTED IN PARTIAL FULFILMENT OF THE
REQUIRMENT
FOR THE AWARD OF THE DEGREE
ADVANCE DIPLOMA IN COMPUTER APPLICATIONS (SESSION 2022-2023)
DEPARTMENT OF CORRSPONDANCE STUDIES
PANJAB UNIVERSITY, CHANDIGARH
Submitted to:
Chairperson,
Department Of Correspondence Studies
Panjab University, Chandigarh
Submitted By:
Brij Mohan Sharma,
Enrollment No: 492251100015
Roll number: 55311
Class: ADCA Semester: 2nd, 2023
USOL, Panjab University
Chandigarh
PANJAB UNIVERSITY, CHANDIGARH
CERTIFICATE
This is to certify that the Project Report entitled "BUSINESS BASED IT
INSTITUTE LEARNING WEBSITE" submitted to University School of Open
Learning, Panjab University, Chandigarh in partial fulfilment of the requirements
for the degree of Advance Diploma in Computer Application (ADCA), 20222023 is a faithful record of bonafide project work carried out by Brij Mohan
Sharma, Roll No. 55311 under USOL direct supervision and no part of this thesis
has been submitted for any other degree or diploma at this or any other
University/Institute.
ACKOWLEDGEMENT
I am thankful to the chairperson and all the teachers of the Department of
Computer Applications at Panjab University in Chandigarh. Their continuous
support and encouragement have played a significant role in the successful
completion of this project.
Their guidance, inspiration, and constructive suggestions have been invaluable in
helping me prepare this project. I am grateful for their ceaseless cooperation,
which has crowned all my efforts with success.
Table of content
Sr.no
1.
Title
Introduction
Page no
5
2.
About the Project
6
3.
Requirements
7
4.
Hypertext markup language (HTML+Html 5)
8-26
5.
Cascading style sheet (CSS)
27-36
6.
Project Coding + Screenshots
37-54
7.
Php+ Database with Screenshots
55-57
8.
References
58
Introduction
Project Name
BUSINESS BASED IT INSTITUTE
LEARNING WEBSITE
Intro- My project is about the Skill based institute, a type of business website which is for the
users who are seeking to build up their IT skills like C++, Java, Python and Digital Marketing
etc. Such institutions websites are in trending. The website which is I have created is mainly
made up of HTML/HTML5, CSS, Php. This website has several pages like Home, about us,
contact us, Privacy policy etc. Below the home page there is various pages of course that user
can visit and, in each page, there is contact us button which leads the user to contact us page to
collect the information entered by user. For storing this I have used database SQL by which an
institution can capture the leads and contact them. Rest of the work will be of sales team to
close the students.
I have mainly focused on making the front end of website using mainly div tag. From the
concept of <div> menu and other items are created and for creativity have implemented the css
to make it look professional.
About the Project
This project is based on the modern-day IT training institutions. You might have seen various
websites nowadays online offering various it courses. How these websites are created using
the html, css and php I have tried to demonstrate using this project.
Project is mainly divided into two phases.
Front End: it is the main part with which user interact on screen. It is all designed by using
the html html5 css mainly.
Back End: this is the part which user don’t see but it actually is major and important part of
any website. In this I have connected the MySQL database and used php which is server side
scripting language to connect this database to front end and take data from there and store it
in the database.
Requirements
Sr
no.
1
2
3
4
5
Name
Description
Operating System
Ram
XAMPP
Code editor
Web Browser
32/64 bit, windows, mac, linux
2 GB
Running environment
Visual studio code editor
Chrome/Mozilla (for output)
Hypertext Markup language
 Html is known as hypertext markup language. It is used to create the web pages.
 It was developed by the Tim Berner lee in 1993.
 The first version of HTML was written by Tim Berners-Lee in 1993. Since then, there
have been many different versions of HTML. (“WebD2: A Brief History of HTML University of Washington”) The most widely used version throughout the 2000's was
HTML 4.01, which became an official standard in December 1999.
 Html describes a structure of a web page basically.
 Html have a series of elements also known as tags.
 Html instructs the browser how to display the content on a webpage.
1. HTML DOCUMENT STRUCTURE
<html>
<head>
<title> here comes title </title>
</head>
<body>
</body>
</html>
This is the basic html document structure.
Lets now understand the tags and how to use them in the html document structure.
Basics tags
 <b> - is bold tag it used to bold the text
Here we used <b> tag lets now check output
Output:
Lets see other remaining tags now
 <u>- is underline tag, it will underline the text
 <i> it will change the text to italtic
Output:
Output shows text is underlined and in italic format as per the tags used
 <center>- it will make your text go in center of page
Output :
 Heading tags ( <h1> to <h6>
Actual code :

<h1> </h1>

<h2> </h2>

<h3> </h3>

<h4> </h4>

<h5> </h5>

<h6> </h6>
Output :
 <br>- break tag
 <p>- paragraph tag
 <hr>-horizontal rule tag
Lets see implementation of <br> tag firstly
Actual code:
Output: it basically break the line to next line
Now lets see <p> tag
Actual code:
Output: it gives paragraph
 <hr>- horizontal rule
Actual code:
Output:
It give this horizontal line below
 Image tag- <img>
This tag is used to display the image
This tag have various attributes such as width,height,alternative text etc
We will discuss firstly the basic tags then attributes
Actual code:
Output:
As you will see image is too big.
Now attributes will be used to set the right width and height of this image.
Attributes:
Width: is used to set the width of image in pixels
Height: is used to set the height of the image in pixels.
Output:
Now you will see when we used attribute of image tag , now its height
and width is correctly set.
Now we will be looking at some of list elements
List tag <li>
There are mainly two types of lists:
1. Ordered list

Unordered list
1. Ordered list <ol>
Actual code:
Output:

Unordered list <ul>
Actual code:
Output:
Now we will be looking at how to create table in html with the help of <table> tag
<table>
In this comes <th> tag for table heading
<tr> tag for table row
Lets see at code for clear understanding,
Output:
Html <form> elements :
Form: In a website most important tag is form tag. It allows your to create a form
Form have various input tags lets understand them one by one.
1. Text: or input type=”text”
It is used for creating such as name, its limit is 100 characters.
Code:
Output:
2. Textarea – it is used more like for address type and its text box is bigger and is not
limited to 100 characters just like the text.
3. <form>
4.
<label for="">Name</label>
5.
<input type="text">
6.
<br>
7.
<label for="">Address</label>
8.
<textarea name="" id="" cols="30" rows="10"></textarea>
9. </form>
Output:
3 radio: if only one option to be chosen, we use then radio option
<form>
<label for="">Name</label>
<input type="text">
<br>
<br>
<label for="">Address</label>
<textarea name="" id="" cols="30" rows="10"></textarea>
<br><br>
<label for="">Gender</label>
<input type="radio" name="Gen" value="male">Male
<input type="radio" name="Gen" value="female">Female
<br><br>
</form>
Output:
4, checkbox- if there are multiple options to be selected we use checkbox
Actual code:
<form>
<label for="">Name</label>
<input type="text">
<br>
<br>
<label for="">Address</label>
<textarea name="" id="" cols="30" rows="10"></textarea>
<br><br>
<label for="">Gender</label>
<input type="radio" name="Gen" value="male">Male
<input type="radio" name="Gen" value="female">Female
<br><br>
<label for="">Subjects</label>
<input type="checkbox" name="" id=""><label for="">maths</label>
<input type="checkbox" name="" id=""><label for="">chemistry</label>
<input type="checkbox" name="" id=""><label for="">phsycis</label>
<br><br>
</form>
Output :
5, Select and option- you might have seen a list for choosing country that is made by this
option
Actual code:
<select name=""
<option
<option
<option
<option
</select>
id="">
value="">--Country</option>
value="">india</option>
value="">usa</option>
value="">china</option>
Output :
6, email (html5)
<label for="">Email</label>
<input type="email">
</form>
Output :
7, password: anything written inside this text box will come in ******. Its for security
purposes.
<br><br>
<label for="">password</label>
<input type="password" name="" id="">
</form>
Output:
8, file
<br><br>
<label for="">upload file</label>
<input type="file" name="" id="">
</form>
Output:
9, submit- input type submit is used to submit the form
10. reset- input type reset will reset complete form
Actual code: submit and reset
<br><br>
<input type="submit">
<input type="reset" value="reset">
</form>
Output:
Cascading style sheet(css)
CSS- is known as cascading style sheet.
it is used basically to add styling to a web page.
There are 3 types of css
1. Inline css
2. Internal css
3. External css
Lets now look at how they are used in web pages
1. Inline css- is the one that is used inside the tags or elements. This is most useful when
there is a lot of css code and you are not getting the css property in external file you
can simply apply inline css to tags whose properties you want to change.
Example:
Actual code:
<html>
<head>
<title> here comes title </title>
</head>
<body>
<h1 style="color: red;">hello world</h1>
</tbody>
</table>
</ul>
</body>
</html>
Here we used inline css in <h1> tag
Output:
2. Internal css- this css is basically written inside the <style> tag which is placed in
<head> part of body.
This css is limited to only this web page or to specific block level in which it is
applied.
Actual code:
Output: here we used internal css
3. External Css- in this css a separate css file is created with the .css extension and is
linked in <head> part of a webpage by the <link> tag. It is reusable as many as time
as possible and is applicable to complete website u just have to link it on webpages
Actual code: we created a css file named file.css and in which created a class .h1
Here in code I called it
<html>
<head>
<title> here comes title </title>
<link rel="stylesheet" href="file.css">
</head>
<body>
<h1 class="h1">hello world</h1>
</tbody>
</table>
</ul>
</body>
</html>
Output:
Use of all 3 are same, but they are used as per priority.
Most commonly used is external css because it saves a lot of time and can be used multiple
times.
There are other several properties of css we will be using in our project, so lets see these
properties now:
Basic format is :
Selector{
Property: value;
}
CSS properties we will be using:
1. Width
2. Height
3. Background
4. Font-size
5. Font-family
6. Text-decoration
7. Text-transformation
8. Marin:
9. Padding:
10. Hover:
11. Border
12. Border-radius:
CSS text proparties:
Text alignment
Left-start
Right -end
Center
Justify
Text-decoration css
Underline
Overline
Line-through
None
Text-transform:
Uppercase
Lowercase
Capitalise
Font size:
Font-size: 10px;
Font-weight:
Lighter
Bold
Bolder
Font-style:
Font-style: italic
Font-Family (12-13 in html but many in google fonts so u can import)
https://fonts.google.com/
Choose style one not saas
Now after clicking on desired one you can import by two ways
1. Link
2. Import
We will use link always, copy the link and paste in head tag, net should be connected.
Now below link , css will be given as well
Use this in font-family and done
Box model: content spacing
a. Padding- //adthi hui spacing deni h sirf ek content say…
This is padding example
//Also used for (fulana) space bich m create krne k lie
Code for fulana k lie div ko we use both margin and padding
Padding can be used in all 4 directions
top
bottom
left
right
other ways of writing:
padding: 50px 0px;
here 50px is for both top and bottom and 0px is for both left and right.
If you want to assign different values
Padding: top,right,bottom,left (clock wise)
b. Margin- used between the two contents we use margin
//Space dene k lie margin mainly use hota h
//In dono k bich space dene k lie margin use hua hai.
Now if we use
Margin: 50px;
It will be applied on all four sides.
If u want to apply separately apply below one
Margin: top,right,bottom,left;
c. Border- used to see if we want to see territory even we can check by order.
border: 2px, solid/dashed, red;
Background: compiler decides on its own to use image or color if we use background:
1. Color based
background: red;
nowdays we use multicolor background
example:
<style>
Background: linear-gradient(direction,col1,col2)
Background: linear-gradient(to right,col1,col2)
Output: double colored
Background: linear-gradient(to left, col1,col2)
Output:
to top and to bottom don’t work in many browser so its not used these days.
2. Image based
background: url(“media/usol.png”);
now if image size is smaller, it will cover complete by coping same image to
body.
Now image repeatable so we will stop repeat.
Background-repeat: no-repeat; will stop repeating small image and only one
image will display
Now to increase the size
Background-size: 600px;
Background: cover; complete as cover it will appear
Now this image will not be fixed it will move with the scroll
So we will fix the background so content will move and background will not
Background-attachment: fixed;
Block level element break
Float: left or right;
Transition property (advanced version of hover)
Transition-property: width;
Transition-duration: 5s;
Img{
Width:200px;
Transition-property: width;
Transition-duration: 5s;
}
Img:hover{
Width:400px;
}
Now it will take 5s to reach 400px;
We can add height in this as well
Now it will take 2s for both height and width to reach 400px
Project coding (Front END)
Designing Home Page using HTML+CSS
Html code:
<html>
<head>
<title> Home Page </title>
<link rel="stylesheet" href="file.css">
</head>
<body bgcolor="black">
<div class="main">
<div class="row1">
<div class="rowc1">
<img src="IMGLOGO.png" alt="" width="100px" height="80px">
</div>
</div>
<div class="row2">
<div class="row2c1">Home</div>
<div class="row2c2"><a href="blog.html">Blog</a></div>
<div class="row2c3"><a href="about.html">About us</a></div>
<div class="row2c4"><a href="contact.html">Contact
us</a></div>
<div class="row2c5"><a href="privacy.html">Privacy
Policy</a></div>
</div>
<div class="row3">
<div class="r3c1">
<div class="c">Choose Your Courses</div>
<div class="c1"><a href="c++.html">C++</a></div>
<div class="c2"><a href="java.html">Java</a></div>
<div class="c3"><a href="python.html">Python</a></div>
<div class="c4"><a href="digitalmarketing.html">Digital
Marketing</a></div>
</div>
<div class="r3c2"><img src="batch.png" alt="" width="1194px"
height="200px"></div>
</div>
<div class="row4">
<div><center><b>Skill buldiging Courses</b></center></div>
</div>
<br><br>
<hr color="green">
<marquee>
<img src="skill.png" alt="" width="1000px" height="200px">
</marquee>
<hr color="green">
<br>
<div>
<div class="i1"><img src="ban1.png" alt="" width="450"
height="320px"></div>
<div class="i2"><img src="ban2.png" alt="" width="450px"
height="320px"></div>
<div class="i3"><img src="ban3.png" alt="" width="450px"
height="320px"></div>
</div>
<br><br>
<hr color="blue">
<br>
<hr color="blue">
<br>
<h2> Our Office Address</h2>
<hr>
<br>
<div>
<div>
<div class="pt">
<h3>SECTOR 14,DCS CHANDIGARH</h3>oin our institute for
building the new skills Today<br>
We have the facility in the tricity and our trainers are
teachers of department of coumputer science<br>
Pannjab Unviersity, Chandigarh. <br>
We provide various skill building courses like Python,
Java, C++,Digital marketing Etc <br>
We also provides the Job placement options as we have our
contacts in it companies, on completion of course you can <br>
prepare with us for interview and crack a high paying IT
job. <br>
<br>
<form action="contact.html">
<input type="submit" value="Contact Us">
</form>
</div>
<div class="ot"><iframe
src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d13713.861335406365!2
d76.768781!3d30.7615167!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x390fed87d77fa043%3
A0x145b5bccd016b9f1!2sDepartment%20of%20Computer%20Science%20and%20Application
s%2C%20Panjab%20University!5e0!3m2!1sen!2sin!4v1683027107432!5m2!1sen!2sin"
width="400" height="250" style="border:0;" allowfullscreen="" loading="lazy"
referrerpolicy="no-referrer-when-downgrade"></iframe></div>
</div>
</div>
<br>
<div>
<br>
</div></div>
<div class="down">
<marquee behavior="" direction="down">
<img src="placed.png" alt="" width="900px"
height="400px">
</marquee>
</div>
<br>
<footer class="foot">
<strong> Made with ❤️ by Brij
<br>
&copy; Bm IT Skill Building Website 2023
</footer>
</body>
</html>
CSS file for Home page code:
.main{
width: 1498px;
border: solid red 1px;
height: 1400px;
}
.row1{
width: 1500px;
background: orange;
}
.rowc1{
width: 1490px;
height: 80px;
float: left;
background: blueviolet;
padding-left: 8px;
padding-top: 2px;
padding-bottom: 2px;
}
.row2{
width: 1500px;
height: 50px;
color: white;
}
.row2c1{
width: 296px;
float: left;
border: 2px solid blue;
background: violet;
text-align: center;
height: 30px;
}
.row2c2{
width: 296px;
float: left;
border: 2px solid blue;
background: violet;
text-align: center;
height: 30px;
}
.row2c3{
width: 296px;
float: left;
border: 2px solid blue;
background:violet;
text-align: center;
height: 30px;
}
.row2c4{
width: 296px;
float: left;
border: 2px solid blue;
background: violet;
text-align: center;
height: 30px;
}
.row2c5{
width: 296px;
float: left;
border: 2px solid blue;
background: violet;
text-align: center;
height: 30px;
}
.row3{
width: 1500px;
}
.r3c1{
width: 298px;
border: 1px solid red;
float: left;
color: white;
background: url("img4.png");
height: 200px;
}
.r3c2{
width: 1194px;
float: left;
border: 1px solid red;
height: 200px;
}
.c{
border: 1px solid pink;
height: 38px;
text-align: center;
}
.c1{
border: 1px solid pink;
height: 38px;
text-align: center;
}
.c2{
border: 1px solid pink;
height: 38px;
text-align: center;
}
.c3{
border: 1px solid pink;
height: 38px;
text-align: center;
}
.c4{
border: 1px solid pink;
height: 38px;
text-align: center;
}
.row4{
width: 1466px;
background-color: blue;
color: white;
text-decoration: underline;
padding: 14px;
}
.i1{
width: 480px;
float: left;
margin-left: 15px;
}
.i2{
width: 498px;
float: left;
}
.i3{
width: 498px;
float: left;
}
.map{
padding-left: 50px;
margin-top: 50px;
}
.lo{
color: white;
text-align: center;
font-size: 24px;
font-weight: 600;
}
h2{
color: white;
text-align: center;
margin-top: 30px;
}
.pt{
color: white;
float: left;
text-align: center;
padding-left: 160px;
width: 900px;
border: solid green 2px;
height: 150px;
margin-bottom: 30px;
margin-left: 30px;
padding: 50px;
}
.ot{
width: 100px;
float: left;
padding-left: 50px;
}
.foot{
background-color: green;
color: white;
padding: 1em;
text-align: center;
}
.down{
padding-left: 300px;
}
SCREENSHOTS:
About us page coding( internal css with html):
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>About Us</title>
<style>
body {
font-family: Arial, sans-serif;
line-height: 1.5;
margin: 0;
padding: 0;
}
header {
background-color: #3f51b5;
color: #fff;
padding: 1em;
text-align: center;
}
header h1 {
margin: 0;
}
main {
margin: 2em auto;
max-width: 800px;
padding: 0 1em;
}
h2 {
color: #3f51b5;
font-size: 1.5em;
margin-bottom: 0.5em;
}
p {
margin-bottom: 1.5em;
}
.i1{
border: blue solid;
float: left;
padding: 2px;
}
.i2{
border: blue solid;
float: left;
margin-left: 25px;
padding: 2px;
}
.i3{
border: blue solid;
float: left;
margin-left: 25px;
padding: 2px;
}
footer {
background-color: #ccc;
color: #333;
padding: 1em;
text-align: center;
margin-top: 300px;
}
</style>
</head>
<body>
<header>
<h1>About Us Page</h1>
</header>
<main>
<h2>About Us</h2>
<div>
Welcome to Skill building Website, where we believe that everyone has
the potential to learn and grow in their careers.
We are a team of passionate educators and technology experts who are
dedicated to providing the highest quality training and education to
individuals of all skill levels.
</div>
<h2>Founded In</h2>
Our company is founded in May 2023. Our founder is Brij Mohan Sharma
<h2><center>Meet Our Team </center></h2>
<div>
<div class="i1"><img src="Brij.png" alt="" width="200px"
height="200px"></div>
<div class="i2"><img src="Brij.png" alt="" width="200px"
height="200px"></div>
<div class="i3"><img src="Brij.png" alt="" width="200px"
height="200px"></div>
</div>
</main>
<footer>
&copy; Bm It Skill Building Website 2023 . All rights reserved.
</footer>
</body>
</html>
Screenshot:
C++ course page with contact button
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>About Us</title>
<style>
body {
font-family: Arial, sans-serif;
line-height: 1.5;
margin: 0;
padding: 0;
}
header {
background-color: #3f51b5;
color: #fff;
padding: 1em;
text-align: center;
}
header h1 {
margin: 0;
}
main {
margin: 2em auto;
max-width: 800px;
padding: 0 1em;
}
h2 {
color: #3f51b5;
font-size: 1.5em;
margin-bottom: 0.5em;
}
p {
margin-bottom: 1.5em;
}
footer {
background-color: #ccc;
color: #333;
padding: 1em;
text-align: center;
}
</style>
</head>
<body>
<header>
<h1>c++</h1>
</header>
<main>
<h2>Contact us for c++ classes</h2>
<img src="c++.jpg" alt="" width="500px" height="250px"><br>
Learn C++
C++ is a popular programming language.
C++ is used to create computer programs, and is one of the most used
language in game development.
<form action="contact.html">
<input type="submit" value="Contact Us">
</form>
</main>
<footer>
&copy; Bm It Skill Building Website 2023 . All rights reserved.
</footer>
</body>
</html>
Screenshot:
Contact us page:
<html>
<head>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
}
.form {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin-top: 50px;
}
input[type="text"] {
padding: 10px;
border-radius: 5px;
border: none;
box-shadow: 0 2px 5px rgba(0,0,0,0.3);
margin-bottom: 20px;
}
input[type="submit"] {
padding: 10px 20px;
background-color: #3f51b5;
color: #fff;
border-radius: 5px;
border: none;
box-shadow: 0 2px 5px rgba(0,0,0,0.3);
cursor: pointer;
transition: all 0.3s ease-in-out;
}
input[type="submit"]:hover {
background-color: #1a237e;
}
label {
font-weight: bold;
margin-right: 10px;
}
h1 {
text-align: center;
}
</style>
</head>
<body>
<h1>Contact form</h1>
<div class="form">
<form method="POST" action="connect.php">
<label for="fname">First Name:</label>
<input type="text" name="fname" id="fname"><br>
<label for="lname">Last Name:</label>
<input type="text" name="lname" id="lname"><br>
<label for="email">Email:</label>
<input type="text" name="email" id="email"><br>
<label for=""> Message</label>
<textarea name="msg" id="" cols="30" rows="10"></textarea>
<br>
<input type="submit" name="submit" id="submit" value="Submit">
</form>
<footer>
&copy; Bm It Skill Building Website 2023 . All rights reserved.
</footer>
</div>
</body>
</html>
Screenshots:
Backend Coding + Creating and Connecting Database with form we created above
"How to connect an HTML form to a MySQL database in PHP." (“How to connect an HTML
form to a MySQL database in PHP”) (Educative, n.d.)
database creation
Click on database
I gave database name form and click create
After this
I gave table name selected 4 col as per requirement of form
Now we have to give datatype for each values which I have done and saved
Output:
Database created now, creating php connect file with code to link this to form
<?php
// getting all values from the HTML form
if(isset($_POST['submit']))
{
$fname = $_POST['fname'];
$lname = $_POST['lname'];
$email = $_POST['email'];
$msg= $_POST['msg'];
}
// database details
$host = "localhost";
$username = "root";
$password = "";
$dbname = "form";
// creating a connection
$con = mysqli_connect($host, $username, $password, $dbname);
// to ensure that the connection is made
if (!$con)
{
die("Connection failed!" . mysqli_connect_error());
}
// using sql to create a data entry query
$sql = "INSERT INTO formtable (fname, lname, email,msg ) VALUES ('$fname',
'$lname', '$email', '$msg')";
// send query to the database to add values and confirm if successful
$rs = mysqli_query($con, $sql);
if($rs)
{
echo "Entries added!";
}
// close connection
mysqli_close($con);
?>
Now form is connected to database.
Lets check by entering data.
I have inputted the data now lets save it.
Output:
References
WebD2: A Brief History of HTML - University of Washington,
https://www.washington.edu/accesscomputing/webd2/student/unit1/module3/html_history.ht
ml.
Educative. (n.d.). How to connect an HTML form to a MySQL database in PHP.
Educative: Interactive Courses for Software Developers.
https://www.educative.io/answers/how-to-connect-an-html-form-to-a-mysql-database-in-php
Other resourceshttps://www.w3schools.com/html/
https://www.w3schools.com/css/default.asp
https://www.w3schools.com/php/default.asp