NATIONAL COLLEGE OF BUSINESS

ADMINISTRATION & ECONOMICS

Sub-Campus, Multan

Final Year Project Report

on
Development of “Eduford” Website

Submitted By: Muhammad Shahzaib Mushtaq (122030509)

Supervised By: Mr. Umair Bashir

BACHELOR
IN
COMPUTER SCIENCE
February-2025
 NATIONAL COLLEGE OF BUSINESS
ADMINISTRATION & ECONOMICS
Sub-Campus, Multan

Development of “Eduford” Website

BY

Muhammad Shahzaib Mushtaq

__________________________________________________________________________

A project submitted to the Department of Computer Science, in

partial fulfillment of the requirements for the Degree of

BACHELOR
IN
COMPUTER SCIENCE

Project Defense Committee:

____________________________
Chairman

____________________________
Member

____________________________
Member

_________________________________
Pro-Rector
National College of Business
Administration & Economics,
Multan Sub Campus

ii
In the name of ALLAH,
The Most Beneficent,
The Most Merciful,
 AUTHOR’S DECLARATION
I, Muhammad Shahzaib Mushtaq S/O Muhammad Mushtaq Karim, hereby, declare that this work
titled “Development of “Eduford” Website” submitted in partial fulfillment of the Degree of
Bachelor in Computer Science at NCBA&E Multan Sub-campus is of my own investigation.
Data, results, ideas, analyses, software and conclusions are my own efforts and if adapted then the
sources have been acknowledged properly.

I also submit that this project work has not been submitted for obtaining similar degree
from any other university/college.

______________________

Muhammad Shahzaib Mushtaq

iii
National College of Business Administration & Economics Multan
Sub Campus

Northern Bypass Near WAPDA Town Phase-II Multan

COURSE COMPLETION CERTIFICATE

Ref. No. R&D/Multan/PD- Dated: ____________

It is certified that courses requirement of Mr. Muhammad Shahzaib Mushtaq Registration

No. 122030509 for the program Bachelor in Computer Science has been completed and
his current CGPA is 3.27.

Dr. M. Asim Rajwana Prof. Dr. Tariq Mahmood Ansari, FRSC

Deputy Director Research Pro-Rector

Copy to:

1. The Rector, NCBA&E Lahore

2. The Director, NCBA&E Multan Campus.
3. Notification file.

iv
 PROJECT COMPLEITION CERTIFICATE

It is certified that the project work contained in this thesis entitled “Development of
“Eduford” Website” has been carried out and completed by Muhammad Shahzaib Mushtaq
under my supervision during his BSCS Degree program.

Mr. Umair Bashir

(Supervisor)

v
 Dedicated

to

My Family and Teachers

vi
 ACKNOWLEDGEMENT
I am thankful to Almighty Allah and SWT Who gave me strength to complete my work

and blessed me in whole life. I dedicate this humble effort to my Prophet Muhammad (PBUH)

who is a torch of knowledge and wisdom for the whole mankind. I would like to express my

gratitude to my worthy Supervisor Mr. Umair Bashir, for sharing his ideas and interests with me

about my project. His contribution boosted my confidence and helped me in finishing my study in

time.

I am thankful to my parents and all family members for their love, support and

encouragement to seek knowledge.

I am much obliged by the nice cooperation of Dr. Muhammad Asim Rajwana. His support and
encouragement helped me all the way through this work. I would also like to thank faculty
members and administrative officers of NCBA&E Multan sub campus who cooperated with me in
order to make this project successful, I also want to show my gratefulness to all the participants
who spared their precious time in answering my questionnaires.

Muhammad Shahzaib Mushtaq

vii
 TABLE OF CONTENTS
Contents Page. No.

Title Page
Project Approval Form ii
Author’s Declaration iii
Course Completion Certificate iv
Project Completion Certificate (By Supervisor) v
Dedication vi
Acknowledgments vii
Table of Contents viii
List of Figures x
Abstract xi

Chapter 1: Introduction 1
1.1 Introduction 1
1.2 Aim of the Project 1
1.3 Objective 1

Chapter 2: Literature Review 2

2.1 Literature Search 2
2.2 Introduction 2
2.3 Web Designing 2
2.4 Types of Website Design 3
2.4.1 Static Website Design 3
2.4.2 Dynamic Website Design 4
2.4.3 Liquid Website Design 4
2.4.4 Responsive Website Design 4
2.4.5 Adaptive Website Design 5
2.4.6 Single Page Website Design 5
2.5 Principles for Good Website Design 5
2.6 Kinds of Websites 6
2.6.1 Blog Website 6
2.6.2 E-Commerce Website 6
2.6.3 Informational Website 7
2.6.4 Business Website 7
2.6.5 Membership Website 7
2.6.6 Educational Website 7
2.7 Informational Website 7
2.8 Misconception about Informational Website 8

viii
2.9 Features of Informational Website 9
2.10 Informational Website Examples 9
2.11 Advantages of Website 10

Chapter 3: Methodology 12
3.1 HTML 12
3.2 HTML Uses 12
3.3 CSS 13
3.4 CSS Uses 13
3.5 Visual Studio Code 14
3.6 Visual Studio Code Features 14
3.7 Flow Chat of Webpage 15

Chapter 4: Implementation 16
4.1 “Eduford” Overview 16

Chapter 5: Conclusion 19
5.1 Conclusion 19
References 20
Appendix-I Source Code 22
Appendix-II Plagiarism Report of R&D 33

ix
 LIST OF FIGURES

Table No. Title Page No.

2.1 Types of Website Design 03

2.2 Good Website Design Principles 05

2.3 Kinds of Website 06

2.4 Example of Informational Website 09

3.1 Icon of Visual Studio Code 14

3.2 Main Parts of Visual Studio code 14

3.3 Flow Chat of Website 15

4.1 Opening Page of “Eduford” 16

4.2 Articles Page 16

4.3 Info about Website Articles 17

4.4 Article about Apple Tree on “Eduford” 17

4.5 Last Article on “Edufort” 18

x
 ABSTRACT
As technology develops, new approaches to education can be used to reach a wide range
of people. Web pages and online resources are the foundation of a unified approach being created
by educational institutions. When used effectively, this approach makes it possible to communicate
the material to a wider audience than traditional teaching methods. New study findings may now
be communicated across nations and continents thanks to the internet's growth.

According to web design literature, presenting the content in a way that appeals to all target groups
is the biggest challenge in creating successful web sites. Understanding how various groups obtain
information online is crucial for educating a range of populations. We used best practices for
creating a website that satisfies the majority of the demands of people with different learning styles,
based on educational studies on how people learn. Additionally, a well-designed website improves
user experience by making it easier for users to find what they need. With your audience, this
smooth exchange increases credibility and confidence.

This project's objective is to create an informative website using HTML and CSS with Visual
Studio Code. The website will be unique and highly optimized, and it will be beneficial for
providing information on plants. By using strategies for various learning styles, I was able to
transform the "Eduford" website's content into a useful plant education tool.

xi
 CHAPTER 1
INTRODUCTION
1.1 Introduction
In the modern era, the internet has become a vital component of life to satisfy all wants in
numerous fields. Businesses, academic institutions, schools, families, and so forth rely on the
internet to carry out their tasks. That demonstrates the significance of life with profound effects.
Websites are the best source of information on the internet. The Web's recent developments have
drastically altered our lives in a number of ways. These developments give people new means of
communicating globally and evaluating large volumes of data. The creation and upkeep of
websites requires a wide range of abilities and disciplines, including web design. Web graphic
design, interface design, authorship (both proprietary software and standardized code), user
experience design, and search engine optimization are some of the various subfields of web design.
This project's primary goal is to create an informative website. The purpose of this website is to
enlighten the public about plants and their surroundings and to use a particular medium to educate
a wide range of people on particular plant-related subjects. This website is the preferred medium
for their mass education plan.

1.2 Aim of the Project

The primary goal of this project was to build a website using HTML and CSS, starting from a
basic level and progressing to the most advanced level where we could make our site more user-
friendly than others. Given how quickly the digital world is expanding, it is becoming increasingly
crucial. Nowadays, everyone needs a website, whether it be for marketing, blogging, information
sharing, education, or any other purpose. Additionally, the created website, known as "Eduford,"
is utilized as an informational website throughout this project. Eduford's primary goal is to
empower novices and expand their knowledge by offering plant-related information.

1.3 Objective
The main purpose of this project is:
▪ Informational Website development by using HTML and CSS
▪ Get familiar with the Visual studio code
▪ Making the website into an effective informational tool

1
 CHAPTER 2
LITERATURE REVIEW
2.1 Literature Search
Typical causes for the literature studied include research papers, reports, and electronic
textbooks; in addition, I looked to a variety of websites and webpages.

2.2 Introduction
In an effort to increase their clientele and reach, the majority of physical businesses are now
attempting to establish an online presence. But with thousands of websites in every niche,
outperforming rivals and earning people's trust really requires more than just an online presence.
Having your website created to be both aesthetically beautiful and immersive while providing your
audience with exactly what they want is one of the finest ways to do this. Whether we work in
hotels, sports, news, business, medical, or education, web applications are an essential part of our
daily lives. Reaching out to the public and giving them regular updates and information is
becoming more and more important in a competitive environment that encourages global access
to services. The significance and advantages of informational websites are covered in this research.
An online platform created especially to provide learners of all ages with knowledge, instructional
materials, and resources is known as an informational website. Because they offer a wealth of
informational resources that accommodate various learning requirements and styles, these
websites have grown in popularity and value. Informational websites provide tools and resources
that make learning more accessible, interesting, and successful, whether for formal education,
professional growth, or personal enrichment. One of the key factors in the significance of a website
for a business is that people can access informational websites and use the services or receive
information. Potential clients can be positively impacted by a well-designed website. Conversions
and lead nurturing will both benefit from this. It is more important than helping website visitors
and providing a good user experience.

2.3 Web Designing

The process of organizing, creating, and putting into practice a plan to create a website that is both
useful and easy to use is known as web design. A crucial component of web design is user
experience. Websites offer a variety of tools that facilitate navigation. Web designers strive to
enhance each section of a website that consumers interact with in order to make it visually

2
appealing, navigable, and user-friendly. The quality of the website's design is determined by the
sum of these elements.

2.4 Types of Website Design

Every website begins with a unique, dependable, and practical design. Let's examine each kind of
web design and its characteristics to make the process of creating websites easier.

Static
Website
Design
Single
Dynamic
Page
Website
Website
Design
Types Design
of
Website
Adaptive Liquid
Website
Design Website
Design Design
Responsi
ve
Website
Design

Figure 2.1: Types of Website Design

2.4.1 Static Website Design

Static websites behave exactly how they appear to—steady and unchanging. It is one of the
simplest types of web design since it uses "fixed" or simple code. The design is the same on all
platforms because every component and size of the website has been altered. In other words, it
offers little to no chance for user involvement. Think of it as a printed flyer or brochure.
Static web designs are ideal for read-only websites such as portfolios, journals, online brochures,
and landing pages. Its purpose is to enlighten, not to sell goods or services. Static pages are also
the least expensive to create out of all the other types of web design. Its simple design and low-
maintenance structure result in significant time and cost savings during the creation process.
However, customers should expect restricted UI/UX features because of its simple design. If our
budget is tight and an informational website will do, static web design is the best choice.

3
2.4.2 Dynamic Website Design
While static websites only permit a limited amount of interaction, dynamic websites are designed
with that purpose in mind. Users will be able to interact with the content and have a more
interesting experience as a result of this design. It's one of those websites that might use a little
more flexibility in its arrangement. Needless to say, this architecture calls for more adaptable code.
Think about JavaScript, PHP, or ASP. This will enable the site to present content in a different
way depending on the user and the platform on which they are viewing it.

A dynamic web design may be advantageous for websites with higher levels of user engagement.
Popular websites with this style include search engines, social networking sites, and e-commerce
sites. However, keep in mind that dynamic websites usually take longer to load than static ones.
Their frequently complex code structures are the cause of this. Implementing a more complex
design will need more work because it involves more site components.

2.4.3 Liquid Website Design

The behavior of a liquid design, or liquid web design, across a range of platform sizes. To
accommodate the screen size of the device, this kind of website design enlarges or resizes the
webpage and its elements. This is achieved through the use of moveable components, which allow
the website to fill the entire platform. The website can change its size as necessary because of the
percentages that are incorporated into its columns.
Since the primary goal of this design is to keep material accessible across all devices, it works well
for nearly any type of website. With this build, you can be sure that no content on your website
will be interrupted. However, it's important to keep in mind that liquid patterns may appear
excessively extended or distorted at times. Because the website alters the layout overall, the
content may seem odd when resized to a certain screen size.
2.4.4 Responsive Website Design
Of all the website design types, this one is the most flexible. Like a chameleon adapting to its
environment, a responsive website adapts to the browser, layout, and display. You can rely on this
setup to adapt and offer the greatest viewing experience whether you're using a desktop, laptop,
tablet, or smartphone. It appropriately fits the screen by scaling the images, wrapping the text, and
modifying the navigation in general, regardless of the screen size.

4
If one of your main objectives is to be seen on mobile devices, a responsive design is the best
choice. It offers a smooth experience for mobile users, especially those who frequently browse
blogs, tech websites, online shopping portals, and community websites.
2.4.5 Adaptive Website Design
Adaptive design is one of the web design methods where adaptability is essential. Similar to a
responsive website, this design adjusts the page layout based on the screen size.
Adaptive designs can be made more quickly and simply than responsive designs. However, this is
the disadvantage: It can appear that there are too many or too few white spaces on your website if
someone visits it with a screen size that is not one of the preset widths.
2.4.6 Single Page Website Design
As the name suggests, a single-page design reduces all of your website's content to a single page.
It offers your audience a clear-cut, easy-to-use experience. They might scroll down the page to
read more about your business or organization.
Single-page designs are ideal for comprehensive product sites, online resumes, and one-time
landing pages. You can make it however long you need, but be careful not to fill it to overflowing.
A one-dimensional experience with excessive scrolling may drive away users.
2.5 Principles for Good Website Design
If a website is not visually appealing and captivating, it will not be able to attract enough visitors
or business. A number of essential concepts required to create a successful website design are
depicted in Figure 2.2.

Keep it
Simple
Include Create a
Quality Proper
Visuals Layout

Focus on Principle
Use Color
User For Good
Wisely
Experience Website

Make
Choose the
Navigation
Right
Easy to
Fonts
Find
Optimize
for Mobile

Figure 2.2: Good Website Design Principles

5
2.6 Kinds of Websites
In addition to choosing the best website design from your options, we also need to choose the kind
of website that our business requires. The kind of websites that each business needs will vary
because each one is unique. A few of the main types of websites that can be created for the business
are listed in Figure 2.3.

Blogs
Websites

Ecommerce
websites

Informational
Website
Kinds of
Website
Business
websites

Membership
websites

Educational
Website

Figure 2.3: Kinds of Website

2.6.1 Blog Website

A blog is a kind of website where people share data, ideas, and opinions. It is a place where you
may express your thoughts and vision to the world. Originally used as journals, blogs are today
becoming one of the most important mass media platforms for breaking news. Google Blogger
and WordPress are two popular blogging systems where you may write posts. Anything from news
to food to vacation can be the subject of a blog. Web design layouts that are versatile and adaptive
are ideal for this type of website.
2.6.2 E-Commerce Website
This site functions as an online marketplace where people may buy and sell products. E-commerce
websites include online merchants like Amazon, Flipkart, and Olx. E-commerce has a lot of
potential to thrive in the modern world since people lead busy lifestyles. The best choices for
designing e-commerce websites are responsive and adaptive web designs.

6
2.6.3 Informational Website
Informational websites' primary goal is to give users relevant and engaging content. For instance,
it could be a news website or an online trade journal. Typically, these kinds of websites don't offer
products or services for sale. They can, however, make money by including affiliate links and
advertisements.

2.6.4 Business Website

Another type of website you might create is a company website. A typical website that offers
information about your company and the services you offer is called a business website. You might
still make a corporate website to showcase your products even if you don't sell them online. These
simple websites serve as a one-stop shop for information about your business. You can use this
type of website if it doesn't sell anything. A business website can employ any of the previously
stated web design styles, but you should choose the ones that will allow you to give your audience
the best experience possible.
2.6.5 Membership Website
The last type of website you can create is a membership website. On such a website, users can
access a paywall. Only members get access to your website, where they can peruse your products.
When using this type of website, you can choose between responsive and adaptable web design
layouts.
2.6.6 Educational Website
Examples of websites pertaining to education include those for tuition, schools, and colleges. The
new normal has changed the structure of educational institutions. The demand for educational
websites is rising as more and more people take classes online these days. Beyond what is taught
in schools and universities, people want to learn more.

The "Informational" type of website was created for this project so the next topic would be about
the informational website in detail.
2.7 Informational Website
Information websites are online resources that offer trustworthy data and expertise on a range of
subjects. Knowledge bases, blogs, news portals, and other information websites are essential in
forming the online environment. Their significance goes well beyond the simple sharing of data.

7
These websites are useful resources for people looking for accurate and reliable information on a
variety of subjects.

The following are some primary causes:

Solving Issues and Retrieving Knowledge

75% of consumers have a more favorable opinion of a business if it offers self-service tools (such
as blogs or knowledge bases) that let them solve problems on their own. As a result, it is essential
to develop trustworthy information platforms that can educate your target audience about their
issues through available blog posts, frequently asked questions, manuals, and guidelines.

Authentic and High-Quality Content

Since over half of respondents to the 2023 Digital News Report expressed concern about
differentiating between fake and true news, trustworthy news and information are essential in this
digital age. Furthermore, the primary driver of online news subscriptions worldwide is the need
for access to higher-quality material. These results highlight how crucial it is to present reliable
information on internet platforms.

2.8 Misconception about Informational Website

There are various myths about information websites that frequently skew people's perceptions:

▪ Many people think it's simple to create and manage these websites. In actuality, though, they
take a great deal of time, energy, and skill to produce. To engage the correct audience, it's also
necessary to adhere to standards like security or SEO.
▪ A different misunderstanding is that information online is always reliable and accurate. In
actuality, these sites might have biases, mistakes, or out-of-date information. Additionally,
sources, authors, or editors may have an impact on the information, deceiving users.
▪ Individuals could believe that all information websites are the same. This is not at all the case.
The styles, audiences, contents, and aims of information websites vary widely. Additionally,
they provide features like ratings, comments, search capabilities, and recommendations. In
order to select the best website for their requirements, users need be aware of the goals and
scope of the one they are using.

8
2.9 Features of Informational Website
Below are some of the key characteristics of an informational website:

1. Easy navigation: You should create thoughtful categorization and tags in addition to a
convenient search function so that consumers can quickly and easily locate pertinent
information.
2. Expert material: Comprehensive analytical content that exhibits a degree of competence and
indicates the reliability of the author's viewpoint is necessary for informational websites.
3. Interactivity: In addition to sharing insightful content, informative websites ought to offer a
way for users to leave comments and participate in debates.
4. Easy subscription: Put the subscription form in a visible location to increase your user base.
Additionally, you can provide subscription incentives in the form of webinars, e-books, or
guides.

2.10 Informational Website Examples

Some of the most important examples of informational website are given below:

Blogs

News Portals
Example of Informational

Knowledge Bases
Website

Wiki Websites

Educational
Websites
Government
Websites
Research
Databases

Figure 2.4: Example of Informational Website

9
2.11 Advantages of Website
The following are a few benefits of the website:
▪ Boost the Effectiveness of Your Advertising
By including your website address on all of your advertising materials, you may increase your
visibility and entice people to visit your site first in order to find the information they need.
▪ Reduce the Cost of Printing and Distribution
A website can serve as an online catalog or brochure that you can update or modify at any moment.
You can make updates fast and for free if you use a content management system (CMS).
▪ Simple Access to New Clients
With just your web address or URL, you may get your current clients to recommend you to their
friends and family.
▪ Simple to Update and Use
Your website will always be current and up to date if it is properly managed. Updates, revisions,
and removals can be done with ease from any Internet-connected computer. You can stop paying
a coder each time you wish to add a product or update the date.
▪ Boost Your Productivity
Because all of this information is available on your website around-the-clock, a website boosts
your business's productivity by reducing the amount of time spent educating clients about your
goods or services.
▪ Educate Your Clients
You can provide free product and service advise on your website. Any time of day or night, this
information can be presented in a thoughtful and consistent manner.
▪ Increase Your Market Share
Businesses can overcome geographical limitations and become reachable from any location in the
world by a possible client with an Internet connection thanks to the Internet. Online sales are easier
and less expensive for both you and your clients.
▪ Increase Your Local Presence
Expand your physical store's local reach to include customers worldwide. You have all the
information visitors need to make an informed choice, and you are open for business around-the-
clock, every day of the year.

10
▪ Develop Your Credibility
Show that you are knowledgeable and skilled in your field to become or stay the expert. Write
articles and blog entries that inform and enlighten site visitors about your company and products.
▪ Enhance Customer Support
Online forms and automated responses can be used to process information requests instantly, day
or night.

11
 CHAPTER 3
METHODOLOGY
The software and programming languages used to create the educational website "Eduford" are
covered in this chapter.
At first appearance, the coding language used to create web pages can seem extremely difficult.
Although assimilating all of this new information may seem overwhelming, you may make sense
of all these crucial parts of the puzzle by dissecting each of the various components involved. You
have most likely heard about HTML and CSS if you are considering creating a website. Any
webpage's foundation is partially formed by these two vital tools. But even though they are
frequently combined, they have quite diverse functions when it comes to web coding. The main
distinctions between HTML and CSS are found in their implementation, usability, functionality,
and structure, but ultimately, both are essential for understanding how the World Wide Web
functions. Let's examine HTML and CSS in detail, including their functions and learning methods.
3.1 HTML
Let's begin by defining the precise meaning of the acronym "HTML." Hyper Text Markup
Language is referred to as HTML. A markup language is a computer-understood language that is
primarily used to describe webpages and make the text you use more dynamic. Hypertext is
essentially a text within a text.
In a nutshell, it is the initial component used to create a webpage and was first developed in 1989
as the web's publishing language. You will probably come across a plethora of potentially
confusing concepts and phrases when you first start learning HTML. Elements, tags, and attributes
are the three primary ones.
The most recent "version" of HTML, HTML5, is becoming more and more popular in the
employment market. Generally speaking, it functions similarly to conventional HTML but is far
more dynamic and requires a lot less code to create amazing things.
3.2 HTML Uses
HTML is essentially used to create a webpage's main content and give it structure. Writing words
is the first step, after which you add tags or other components. This is then read by the web browser,
which fills your page with information by understanding the page's headline, any paragraphs, and
the beginning and ending of the page.

12
HTML is built on almost every webpage in the world and is compatible with all browsers. It can
be rather simple to understand and code, and there are no license requirements or costs. HTML is
the framework of a webpage, if we were to relate it to the human body.
3.3 CSS
Cascade Styling Sheets is referred to by the acronym CSS. To put it briefly, it is a sheet style
language, which is a language type that may be used to describe how a markup language is
presented, in this case, the movements of HTML. It successfully dictates how the user is presented
with the HTML-based building pieces.
Around 1996, CSS was initially developed to make sense of HTML and enhance the appearance
and feel of webpages. Writing CSS is necessary, just like writing any other language, and
understanding how to create CSS is a necessary ability for any web developer. The second
component of the two-part toolkit for creating webpages is CSS, which is simple to maintain.
Nowadays, a lot of organizations and businesses place a high value on web accessibility, and there
is intense rivalry to create the most well-designed and accessible webpage. You can learn how to
make accessible web pages by mastering some CSS-related software development principles.
3.4 CSS Uses
CSS is the skin that covers HTML, which is the body's bones. It is utilized for background color,
layout, styling, borders, and shadowing—all of the crucial design elements that give a website a
polished and intelligent appearance. By altering the layout and appearance of HTML elements,
CSS allows you to differentiate between presentation and content.
By translating how text appears on a webpage and what else goes on it to complement that content,
CSS has brought two major benefits to web design: presentation and ease of use. Although it is
commonly used with HTML, it may be used with any markup language that uses XML and is not
dependent on it.

13
3.5 Visual Studio Code
VS Code, often known as Visual Studio Code, is a free open-source text editor developed by
Microsoft. You can use Visual Studio Code on Linux, macOS, and Windows. VS Code has been
one of the most widely used development environment tools in recent years due to its extensive
capabilities, despite its relatively modest weight.

Figure 3.1: Icon of Visual Studio Code

3.6 Visual Studio Code Features
Java, C++, Python, CSS, Go, and Docker files are just a few of the many programming languages
that Visual Studio Code supports. Code linters, debuggers, and support for cloud and online
development are just a few of the extensions that may be added to Visual Studio Code. Compared
to other text editors, VS Code's user interface facilitates a great deal of interaction. VS Code is
separated into five primary areas to streamline the user experience:
▪ The activity bar

▪ The side bar

▪ Editor groups

▪ The panel
▪ The status bar

Figure 3.2: Main Parts of Visual Studio code

14
3.7 Flow Chat of Webpage
Following is the flowchart of working of the website.

Home Get Started

Apple Tree

Palm Tree

Start
Sheesham Tree

Chilgoza Tree

White Mangrove
Tree
Articles
Snake Plant

Desert Rose

Ghost Plant

Aloe vera

Shameplant

Figure 3.3: Flow Chat of Website

15
 CHAPTER 4
IMPLEMENTATION
By using Visual code software with the help of HTML and CSS the website for plant information
“Eduford” has been designed. In this chapter, the designed website features will be discus.
4.1 “Eduford” Overview
The Home page picture of “Eduford” has been shown in Figure 4.1.

Figure 4.1: Opening Page of “Eduford”

After clicking on get started the following will open that is shown in Fig. 4.2.

Figure 4.2: Articles Page

16
Next panel of the website show the info about Articles that are discussed on the website.

Figure 4.3: Info about Website Articles

In last, some picture of articles that discussed on website are shown below:

Figure 4.4: Article about Apple Tree on “Eduford”

17
 Figure 4.5: Last Article on “Edufort”
I only show the picture of two articles in this report. But on website 10 different articles about
different plants are discussed. And in future the informational articles might be increased.

18
 CHAPTER 5
CONCLUSION
5.1 Conclusion
Sixty-five percent of individuals would rather see something nicely designed than something
simple and straightforward if they had just ten minutes to read content. An attractive website is
only one aspect of good web design; other factors include user experience, ease of use and
navigation, and even search engine optimization. The significance of web design must be
understood in order to create a better website for the company. Although websites can serve a
variety of purposes, the one created for this project is utilized for informational purposes. Visibility
is a common objective of informational websites. In other words, having something available
online when a potential customer or client searches for it. Keeping an informational website current
is a crucial factor.
This project's primary goal is to teach me about web programming, and I succeeded in doing so
by utilizing the Visual Studio coding software to create a website using the HTML and CSS
languages. Giving the information in an efficient manner is the other goal. I created the plant
knowledge website "Eduford" after keeping these items in mind. There are just ten articles about
various plants on the website at the moment, but more may be added in the future.

19
 REFERENCES

[1] "Web Fx," 24 July 2023. [Online]. Available: https://www.webfx.com/web-design/learn/why-is-

web-design-important/. [Accessed 10 Jan 2025].

[2] "BrainFood Mkt," 11 June 22. [Online]. Available: https://brainfoodmkt.com/en/know-the-

advantages-and-disadvantages-of-a-website/. [Accessed 14 Jan 2025].

[3] K. Shahid, "HubSpot," 2024 sep 2. [Online]. Available: https://blog.hubspot.com/website/types-of-

websites. [Accessed 26 Dec 2025].

[4] Y. D. Wang, "Teaching web development in the web 2.0 era," in Proceedings of the 10th Conference
on Information Technology Education, SIGITE, USA, 2009.

[5] Y. W. &. D. R. Lia Astuti, "The Development of Web-Based Learning using Interactive Media for,"
Journal of Science Learning, vol. 3, p. 10, 2020.

[6] Yumpu, "Educational Website," 2022.

[7] M. T. Hasan, "Advantages of Website," 2020.

[8] L. Steelman, "WixBlog," 24 Sep 2024. [Online]. Available: https://www.wix.com/blog/website-

development?utm_source=google&utm_medium=cpc&utm_campaign=21355408302^163727046
216^search%20-
%20dsa&experiment_id=^^701645202448^&gad_source=1&gclid=EAIaIQobChMI86rDm-
W0iwMVbIKDBx31FBBgEAAYASAAEgIJw_D_BwE. [Accessed 23 Nov 2024].

[9] M. Jaimon, "Love My Online Marketing," 7 Feb 2023. [Online]. Available:

https://www.lovemyonlinemarketing.com/16-most-popular-types-of-websites-that-you-should-
know. [Accessed 12 Dec 2024].

[10] K. J. C. M. H. S. Mr. C. Mohan Sir, "WEBSITE DESIGNING USING HTML, CSS, JAVASCRIPT
& WORDPRESS," International Research Journal of Modernization in Engineering Technology
and Science , vol. 4, no. 3, p. 6, 2022.

[11] A. Singh, "Making a Website (Website Development)," SCRIBD, Kanpur, 2021.

20
[12] Sharan, "geeksforgeeks," 30 June 2021. [Online]. Available:
https://www.geeksforgeeks.org/different-types-of-websites/. [Accessed 5 Dec 2024].

[13] "BrainStation," 13 May 2023. [Online]. Available: https://brainstation.io/career-guides/what-is-

web-development. [Accessed 17 Nov 2024].

[14] J. Duckett, HTML & CSS: Design and Build Web Sites, Wiley, 2011.

[15] Donna, "BlueZenith," 5 Jan 2015. [Online]. Available: https://bluezenith.com/2012/11/web-design-

tips-for-informational-websites/. [Accessed 12 Jan 2025].

[16] A. Timarevska, "depositphotos," Oct 27 2023. [Online]. Available:

https://blog.depositphotos.com/types-of-websites.html. [Accessed 26 Dec 2024].

[17] "Brainminetech," 26 July 2019. [Online]. Available: https://www.brainminetech.com/blog/types-

educational-websites-benefits-educational-web-development/. [Accessed 27 Dec 2024].

[18] "Teknotrait," 2 Feb 2023. [Online]. Available: https://teknotrait.com/10-different-types-of-

websites/. [Accessed 22 Dec 2024].

21
 APPENDIX-I
SOURCE CODE
Index File Code

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Document</title>

<link rel="stylesheet" href="style.css">

</head>

<body>

<Section class="header">

<nav>

<a href="index.html"><img src="eduford_img/logo.png"></a>

<div class="nav-links">

<ul>

<li><a href="">Home</a></li>

<li><a href="Blogs.html">Articles</a></li>

</ul>

</div>

</nav>

<div class="text-box">

<h1>Plants and Trees in Pakistan</h1>

22
 <p>Pakistan is home to a rich variety of plants and trees that play a vital role in the
ecosystem. From the<br> majestic deodar (national tree) found in northern forests to the
drought-resistant neem and moringa in<br> the plains, these species provide shade, oxygen, and
medicinal value, supporting both biodiversity and livelihoods.

</p>

<a href="Blogs.html" class="hero-btn">Get Started</a>

</div>

</Section>

<!--------Artcles-------->

<Section class="articles">

<h1>Articles</h1>

<p>Here Some Articles on Plants and Trees of Pakistan</p>

<div class="row">

<div class="articles-col">

<h3>Apple Tree (Malus domestica)</h3>

<p>The common apple is a deciduous tree that produces edible fruit and belongs to the
rose family (Rosaceae). It originates from Central Asia and Afghanistan but is now cultivated
globally for its crisp and crunchy fruit, which can be consumed raw or incorporated into various
culinary dishes. Additionally, cider is a significant product derived from these fruits.</p>

</div>

<div class="articles-col">

<h3>Palm Tree (Phoenix roebelenii)</h3>

<p>This brief paper addresses the increasing interest among palm enthusiasts in the
elegant, clustering variety of Phoenix roebelenii O'Brien (Hoffman 1994). While the solitary

23
form of P. roebelenii, commonly referred to as the Pygmy Date Palm, is widely recognized and
cultivated by palm growers, the clustering, tall-stemmed variant remains largely unseen outside
of China. </p>

</div>

<div class="articles-col">

<h3>Sheesham Tree (Dalbergia sissoo)</h3>

<p>Sheesham furniture enjoys significant popularity in the Indian subcontinent.

However, many homeowners lack awareness regarding the characteristics of Sheesham wood.
To make a well-informed purchase decision regarding Sheesham furniture, it is essential to
understand its properties. This article will address the Different topics.</p>

</div>

<div class="articles-col">

<h3>Apple Tree (Malus domestica)</h3>

<p>The common apple is a deciduous tree that produces edible fruit and belongs to the
rose family (Rosaceae). It originates from Central Asia and Afghanistan but is now cultivated
globally for its crisp and crunchy fruit, which can be consumed raw or incorporated into various
culinary dishes. Additionally, cider is a significant product derived from these fruits.</p>

</div>

</div>

<div class="row">

<div class="articles-col">

<h3>White Mangrove Tree (Avicennia marina)</h3>

<p>The white mangrove is one of four mangrove species in the mangrove community.
The other species are the red mangrove (Rhizophoria mangle), black mangrove (Avicennia
germinans), and buttonwood (Conocarpus erectus). Scientifically, they are distantly related and
are only grouped based on ecological function within the community.</p>

</div>

<div class="articles-col">

<h3>Chilgoza Tree (Pinus gerardiana)</h3>

24
 <p>Pinus gerardiana exhibits its striking silver flaking bark at the Cambridge University
Botanic Garden, reminiscent of its eastern counterpart, P. bungeana, commonly known as the
Chinese lacebark pine (February 2023). This species is exceptionally rare in cultivation and
represents one of the oldest specimens in the UK. Image credit: Jack Aldridge.</p>

</div>

<div class="articles-col">

<h3>Snake Plant (Dracaena trifasciata)</h3>

<p>Dracaena trifasciata, commonly referred to as the snake plant, is a widely appreciated

ornamental houseplant that belongs to the Asparagaceae family. This species is indigenous to the
tropical regions of West Africa, where it is recognized for its elongated, sword-shaped leaves
that exhibit a striking variegation of green and yellow hues.</p>

</div>

<div class="articles-col">

<h3>Desert Rose (Adenium obesum)</h3>

<p>Adenium obesum, widely recognized as the Desert Rose or Sabi Star, is an intriguing
and hardy plant that has garnered the interest of botanists, horticulturists, and researchers across
the globe.</p>

</div>

<div class="articles-col">

<h3>Ghost Plant (Graptopetalum paraguayense)</h3>

<p>The ghost plant is a compact evergreen succulent, classified as a perennial that

thrives as a garden plant in warmer climates, although it is more commonly cultivated as a potted
houseplant. This plant is recognized for its ability to enhance air quality and contribute to a
harmonious and positive atmosphere within a space.</p>

</div>

<div class="articles-col">

<h3>Aloe vera</h3>

<p><b>What is aloe vera?</b></p>

25
 <p>Aloe vera is a therapeutic plant that has been utilized for the treatment of numerous
health issues for millennia. It is generally considered safe to apply the gel directly from the plant,
or one may purchase it in a gel formulation. Products such as creams, gels, and ointments
derived from aloe vera contain the transparent gel extracted from its leaves and can be used
topically to address a variety of skin ailments.</p>

</div>

<div class="articles-col">

<h3>Shameplant or Touch Me Not Plant (Mimosa pudica)</h3>

<p><b>Can a plant learn? Drawing on recent and forthcoming research, Monica

Gagliano and Michael Marder suggest that we should be rethinking what intelligence
is.</b></p>

<p>As you stroll through the Royal Botanic Gardens in Kew, celebrated for its extensive
collection of living plants, you are likely to be captivated by its remarkable inhabitants.</p>

</div>

</div>

</Section>

<section class="footer">

<p>©️ 2024. All rights reserved by Malik Shazaib</p>

</section>

</body>

</html>

Blog Code

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Document</title>

26
 <link rel="stylesheet" href="style.css">

</head>

<body>

<Section class="header">

<nav>

<a href="index.html"><img src="eduford_img/logo.png"></a>

<div class="nav-links">

<ul>

<li><a href="index.html">Home</a></li>

<li><a href="">Articles</a></li>

</ul>

</div>

</nav>

<div class="text-box">

<h1>Some Articles</h1>

<p class="blog-text">Here some articles about plants and trees in Pakistan</p>

</div>

</Section>

<section id="blog-container">

<div class="blogs">

<div class="posts">

<img src="eduford_img/1.jpg">

<h3>Apple Tree (Malus domestica)</h3>

27
 <p>The common apple is a deciduous tree that produces edible fruit and belongs to the
rose family (Rosaceae). It originates from Central Asia and Afghanistan but is now cultivated
globally for its crisp and crunchy fruit, which can be consumed raw or incorporated into various
culinary dishes. Additionally, cider is a significant product derived from these fruits. Numerous
cultivars exist, each exhibiting variations in color, flavor, and recommended culinary
applications. Apples are typically straightforward to cultivate and can thrive in a range of soil
types. They prefer full sun to partial shade and require a consistent spraying regimen to mitigate
disease and pest issues.</p>

<a href="a">Read More</a>

</div>

<div class="posts">

<img src="eduford_img/2.png">

<h3>Pygmy Date Palm Tree (Phoenix roebelenii)</h3>

<p>This brief paper addresses the increasing interest among palm enthusiasts in the
elegant, clustering variety of Phoenix roebelenii O'Brien (Hoffman 1994). While the solitary
form of P. roebelenii, commonly referred to as the Pygmy Date Palm, is widely recognized and
cultivated by palm growers, the clustering, tall-stemmed variant remains largely unseen outside
of Indo-China. This document seeks to provide the reader with a historical overview of the
species, while also examining various facets of the palm's distribution, growth habits, ecology,
and conservation status. Historical Context of P. roebelenii The designation Phoenix roebelenii
can be traced back to 1889, when James O'Brien described a dwarf palm originating from Indo-
China. His publication included a concise description and illustration based solely on leaf
samples, lacking any mention of flowers or fruit. The palm was named in honor of the German
orchid collector, C. Roebelen, who had gathered specimens from Laos</p>

<a href="a">Read More</a>

</div><div class="posts">

<img src="eduford_img/3.jpeg">

<h3>Sheesham Tree (Dalbergia sissoo)</h3>

<p>Sheesham furniture enjoys significant popularity in the Indian subcontinent.

However, many homeowners lack awareness regarding the characteristics of Sheesham wood.
To make a well-informed purchase decision regarding Sheesham furniture, it is essential to
understand its properties. This article will address the following topics: Definition of Sheesham
wood Advantages of Sheesham wood Comparison between Mango wood and Sheesham wood
Comparison between Teak wood and Sheesham wood.</p>

28
 <a href="a">Read More</a>

</div><div class="posts">

<img src="eduford_img/4.jpg">

<h3>Chilgoza Tree (Pinus gerardiana)</h3>

<p>Pinus gerardiana exhibits its striking silver flaking bark at the Cambridge University
Botanic Garden, reminiscent of its eastern counterpart, P. bungeana, commonly known as the
Chinese lacebark pine (February 2023). This species is exceptionally rare in cultivation and
represents one of the oldest specimens in the UK. Image credit: Jack Aldridge.</p>

<a href="a">Read More</a>

</div><div class="posts">

<img src="eduford_img/5.jpeg">

<h3>White Mangrove Tree (Avicennia marina)</h3>

<p>The white mangrove is one of four mangrove species in the mangrove community.
The other species are the red mangrove (Rhizophoria mangle), black mangrove (Avicennia
germinans), and buttonwood (Conocarpus erectus). Scientifically, they are distantly related and
are only grouped based on ecological function within the community.</p>

<a href="a">Read More</a>

</div><div class="posts">

<img src="eduford_img/6.jpeg">

<h3>White Mulberry Azadirachta indica</h3>

<p>White Mulberry (Morus alba) is a versatile tree originally native to China, widely
known for its role in silk production. Its broad, shiny green leaves are the primary food source
for silkworms, making it vital to the sericulture industry. The tree grows quickly and adapts well
to various climates and soils, which has contributed to its global spread.</p>

<a href="a">Read More</a>

</div><div class="posts">

<img src="eduford_img/6.jpeg">

<h3>Snake Plant (Dracaena trifasciata)</h3>

29
 <p>Dracaena trifasciata, commonly referred to as the snake plant, is a widely appreciated
ornamental houseplant that belongs to the Asparagaceae family. This species is indigenous to the
tropical regions of West Africa, where it is recognized for its elongated, sword-shaped leaves
that exhibit a striking variegation of green and yellow hues.</p>

<a href="a">Read More</a>

</div><div class="posts">

<img src="eduford_img/6.jpeg">

<h3>Desert Rose (Adenium obesum)</h3>

<p>Adenium obesum, widely recognized as the Desert Rose or Sabi Star, is an intriguing
and hardy plant that has garnered the interest of botanists, horticulturists, and researchers across
the globe. This succulent species, indigenous to the arid landscapes of Africa and the Arabian
Peninsula, has become popular not only for its stunning visual appeal but also for its potential
ecological importance, medicinal uses, and adaptability to various cultivation settings.</p>

<a href="a">Read More</a>

</div><div class="posts">

<img src="eduford_img/6.jpeg">

<h3>Ghost Plant (Graptopetalum paraguayense)</h3>

<p>The ghost plant is a compact evergreen succulent, classified as a perennial that

thrives as a garden plant in warmer climates, although it is more commonly cultivated as a potted
houseplant. This plant is recognized for its ability to enhance air quality and contribute to a
harmonious and positive atmosphere within a space.</p>

<a href="a">Read More</a>

</div><div class="posts">

<img src="eduford_img/6.jpeg">

<h3>Aloe vera</h3>

<p><b>What is aloe vera?</b></p>

<p>Aloe vera is a therapeutic plant that has been utilized for the treatment of numerous
health issues for millennia. It is generally considered safe to apply the gel directly from the plant,
or one may purchase it in a gel formulation. Products such as creams, gels, and ointments

30
derived from aloe vera contain the transparent gel extracted from its leaves and can be used
topically to address a variety of skin ailments.</p>

<a href="a">Read More</a>

</div><div class="posts">

<img src="eduford_img/6.jpeg">

<h3>Shameplant or Touch Me Not Plant (Mimosa pudica)</h3>

<p><b>Can a plant learn? Drawing on recent and forthcoming research, Monica

Gagliano and Michael Marder suggest that we should be rethinking what intelligence
is.</b></p>

<p>As you stroll through the Royal Botanic Gardens in Kew, celebrated for its extensive
collection of living plants, you are likely to be captivated by its remarkable inhabitants.</p>

<a href="a">Read More</a>

</div>

</div>

</div>

</div>

<div class="cate">

<h2>Articles</h2>

<hr>

<a href="a">Apple Tree (Malus domestica)</a>

<hr>

<a href="a">Palm Tree (Phoenix roebelenii)</a>

<hr>

<a href="a">Sheesham Tree (Dalbergia sissoo)</a>

<hr>

31
 <a href="a">Chilgoza Tree (Pinus gerardiana)</a>

<hr>

<a href="a">White Mangrove Tree (Avicennia marina)</a>

<hr>

<a href="a">White Mulberry Azadirachta indica</a>

<hr>

</div>

</section>

<section class="footer">

<p>©️ 2024. All rights reserved by Malik Shazaib</p>

</section>

</body>

</html>

32
 APPENDIX-II
PLAGIARISM REPORT

33