Saic Institute of Management & Technology
Institute Code: 132227
Web Development Project Report
Submitted To,
Md. Nayeem Parvez
Department of Computer Science & Technology
Position: Instructor
_________
Submission Date: Signature
[1]
Declaration by Author
This is to declared that this report has been written by me. No part of
this report is plagiarized from other sources. All information included
from other sources have been duly acknowledged. I aver that any part of
the report is found to be plagiarized, I shall take full responsibility for it.
Tahmid Uddin
Roll: 656220
Session: 2021 – 2022
Semester: 6th
[2]
Abstract
It is usually a college project report. The main point of this report is to
show the presentation of what the students learned from the subject.
This report will present the details of what kind of project the students
have created from the web development project subject, how they have
created it, what problems they have faced while creating it and how they
have solved those problems.
In this project students I created a basic gaming website using HTML,
CSS & JavaScript. The website contains every detail which an ideal
website should have in it. It contains a homepage including many other
sub categories.
While creating this project I faced many circumstances like which idea I
should choose to this project finally I decided to create a gaming
website. There were also many other difficulties while creating this
project like environment setup, choosing a code editor, choosing a
method to code & code errors etc.
I somehow managed to overcome some of the difficulties alone & some
with the help of online guideline & resources.
By creating this project, I learnt how to create the basic structure of a
website using HTML, CSS & JavaScript. This experience will help me a
lot in future.
[3]
TABLE OF CONTENTS
CHAPTER NO. TITLE PAGE NO.
Abstract ………………………………………………. 2
Contents ……………………………………………… 3
Appendices …………………………………………… 23
5
1. Project Title. ……………………………………… 6 – 12
2. Project Details. ……………………………………
3. Steps of creating this project. …………………… 13 – 18
4. Project features. …………………………………………………. 19 – 20
5. Difficulties while creating this project. ………… 21
List of References. …………………………………... 22
[4]
Project Title
This is a web development project. In this project I created a gaming
website named “Game Zone”.
This the homepage of the website a created. It contains varies kind of
games.
[5]
Project Details
In this project I created a gaming website named “Game Zone” using
HTML, CSS & JavaScript.
In this website there are just 3 categories including the Home menu.
The Home menu will take you to the homepage section.
Below the home menu there is a Trending menu this menu will take you
to the trending games section. There you can explore the trending
games.
[6]
Right below the Trending section there is another section named New
games. In this section you can enjoy new games uploaded to the
website.
On the right of the top you see a Notification & a Download button.
[Notification Button]
[7]
[Download Button]
If you click on this menu option:
This interface will pop up to your screen:
[8]
And if you click on the Trending menu:
It will take you to the trending section:
[9]
N/B: You have to close the menu option to see the trending section
properly.
[10]
Then again if you click on New Games menu from the menu bar:
It will take you to the New Games Section:
[11]
N/B: You have to close the menu option to see the new game section properly.
At the very bottom of the website you can see a button named “Go Up”.
If you click on this button this will take you to the very top of the
website.
[12]
Steps of creating this project
To create this project, you must the steps below:
A personal computer.
Windows 10/11 operating system.
Download a code editor.
Set up an environment for code editor.
To create this project, you must use a personal computer whiles runs
with Windows 10/11 operating system.
[13]
The next step is to download a code editor.
In this project I personally used VS Code as my code editor. VS code is
a powerful & simplified code editor & it’s fully recommended.
The steps of downloading VS Code is below:
At first you have to make sure your desktop/laptop is connected to a
internet connection.
Open a web browser (I used Google Chrome you can use any kind of
[14]
web browser you like):
In the search box type “vs code download” & hit enter:
After you hit enter you will see this page:
[15]
After that click to the first website.
After entering in the website will have too click on the download button
for windows 10,11
[16]
After this you have to locate the file location & click on save
[Downloading the Code editor is complete]
[17]
After finishing downloading it you have to install the code editor & open
it.
After opening the code editor, you have to install some extensions on it
to write the code more easily. The list of the extensions is:
Auto Rename Tag.
Auto Close Tag.
Live Server.
Code Runner
Prettier.
JavaScript.
By using this extension, you can write your code more efficiently.
[18]
Project features
In this website you can enjoy many types of games.
It also shows you a preview of the game.
You can also read about the game & how to play it.
[19]
[Previews]
You can also read about the game & who to play it.
If you scroll down a bit more you will find the download section. From
there you can download the game according to your preferences.
[20]
Difficulties while creating this project
Because it’s a web development project that’s why you must use
an updated device & if you don’t have any you have t borrow it
from elsewhere which could be difficult to somebody.
The code of this project is huge so you have to take patients while
writing the code.
[21]
Sometimes the code doesn’t work so you have to check all the
lines which is too much time-consuming.
I don’t know how to write code in JavaScript so I faced many
difficulties while writing the code.
I also felt confused while choosing the games. I was confused
which to choose or not to.
Moreover, I have to write the HTML code twice separately one for
the basic structure & one for the downloading feature.
List of references
Some of the design ideas where inspired from online design
platforms.
Some of the codes where collected from YouTube.
The download feature is collected & customized from GitHub.
[22]
Appendices
We can also implement the download options on every game
section.
We can add more features on this website.
We can also add the details of game on every section.
[23]
We can also add contact details of the developer.
We can also add the search box on the front page.
There are some tactical issues we should fix them.
[24]