INDUSTRIAL TRAINING REPORT

on

WEB DEVELOPMENT
at

CodeDesk
submitted in partial
fulfilment
for the award of the Degree of
Bachelor of Technology
in Computer Science & Engineering

Submitted To: Submitted By: Mr.

Pawan Sen Rahul Garg
Associate Professor & HOD Roll No.21EAICS122

Department of Computer Science & Engineering Arya Institute of

Engineering & Technology, Jaipur Rajasthan Technical
University, Kota (2023-24)

i
 Candidate’s Declaration
I hereby declare that the work, which is being presented in the Industrial Training
report, entitled “Web Development” in partial fulfilment for the award of Degree
of “Bachelor of Technology” in Department of Computer Science & Engineering
with Specialization in Computer Engineering and submitted to the Department
of Computer Science & Engineering, Arya Institute of Engineering &
Technology, under the Guidance of Mr. Pawan Sen , HOD , Department of
Computer Science & Engineering.

Rahul Garg

B. Tech. Student, Department of Computer Science & Engineering

Roll No.: 21EAICS122
Arya Institute of Engineering & Technology, Kukas(SP-40) , Jaipur

(Mr. Pawan Sen)

Associate Professor & HOD, Department of Computer Science & Engineering Arya

Institute of Engineering & Technology, Kukas(SP-40) , Jaipur

ii
 Acknowledgement

“There are times when silence speaks so much more loudly than words of praise
to only as good as be little person, whose words do not express, but only put a
veneer over true feelings, which are of gratitude at this point of time.”

“Presentation, inspiration and motivation have always played a key role in the
success of any venture.”

I pay my deep sense of gratitude to Mr. Pawan Sen, Head of Department, Arya
institute of engineering and technology, Kukas, Jaipur to encourage me to the
highest peak and to provide me the opportunity to prepare the project. I am
immensely obliged to my friends for their elevating inspiration, encouraging
guidance and kind supervision in the completion of my project.

I feel to acknowledge my indebtedness a deep sense of gratitude to my guide Mr.

Satish Alaria, Training Coordinator, Arya institute of engineering and technology.

Last, but not the least, my parents are also an important inspiration for me and
also like to thank all those who directly or indirectly helped me throughout my
work. So, with due regards, I express my gratitude to them.

Rahul Garg

iii
Certificate

iv
 TABLE OF CONTENTS

Candidate’s Declaration ii

Acknowledgement iii

Certificate iv

Table of Contents vi
Abstract 1

Chapter 1: INTRODUCTION 2

1.1 Frontend Development 2

1.2 Backend Development 4

1.3 Database 4

Chapter 2: TECHNOLOGIES 5-21

Chapter 3: CONCLUSION 22

23
Chapter 4: RECOMMENDATION
24-27

v
Chapter 5: PROJECT : PG LIFE
28-30
Chapter 6: WORKING OF WEBSITE
31-32
Chapter 7: E-Commerce Website(Frontend)
33

REFERENCES

vi
 ABSTRACT

In this modern world, we all are attracted to learning various technologies. So in

this paper, we work and find out such top technology which used in the corporate
world. So you will be familiar with the flow of these modern web technologies.
Keywords: Back-End, Database, Digital Marketing, Domain and Hosting,
FrontEnd, Full-Stack Development, Git and Github, Google Analytics, Heroku,
Linux, MERN stack, Netlify, VPS, etc.

1
 Chapter 1
INTRODUCTION

Web development refers to the creating, building, and maintaining of websites.

It includes aspects such as web design, web publishing, web programming, and
database management. It is the creation of an application that works over the
internet i.e. websites.

The word Web Development is made up of two words, that is:

Web: It refers to websites, web pages or anything that works over the

internet.

Development: It refers to building the application from scratch.

Web Development can be classified into two ways:

Frontend Development

Backend Development

1.1 FRONT-END DEVELOPMENT

Front-end development is nothing but creating user interfaces for the website. It
is learning UI with the help of HTML CSS, JavaScript. So we create a
userfriendly interface.
The client-side of the website is an e-commerce store that always runs in any
browser or over the internet. The frontend tech stack is a collection of loosely
defined tools that developers use to create the front end.
A. HTML (HyperText Markup Language) and CSS
It is one of the standard mark-up languages for creating a web page. It describes
the structure of web pages. It consists of a series of elements. These elements tell
the browser how to display the content and this element represents by tags.
It is a language which use to style the hypertext created by HTML. For example
style the color, background, font, spacing, etc.

2
CSS styles that content. Bootstrap is a useful framework for HTML and CSS
management.

B. JavaScript
It is one of the most popular programming languages. We can use JavaScript in
the frontend as well as in the backend. For time-saving and boost in
programming, there is some framework used by developer like jQuery, ReactJs,
etc. We create UI by Front-End Technology like Html and CSS but it is not
interactive. To create the interactive website we need JavaScript.
It is a programming language that allows you to make web pages interactive.
There are some Libraries available that help for faster and easier web
development; there are various JavaScript libraries (such as jQuery, React.js, and
Zepto.js) and frameworks (such as Angular, Vue, Node.js).
C. Front-end Framework
As we know that everyone wants quick and fast work so boost and save our
development time we use some framework. For example Bootstrap, Material-UI,
Angular JS and ReactJS, etc.
A database provides a place for your web application's data to be stored.
Databases are split into two types: relational and non-relational (the latter being
broken into multiple categories), each with its own set of advantages and
disadvantages.
1.Bootstrap: It is the most popular front-end framework and easy to use. It
is a free and open-source framework. Developer’s mainly used to styling
the web pages. Most of the developers use Bootstrap for CSS.
2.React.JS: There are so many JavaScript frameworks but we consider here
only React.JS because it is easy to use than other frameworks like
Angular.JS, Vue.js, etc. React.JS is managed by and developed by
Facebook Community.
3.Material-UI: It provides a library to React or in other words, we can say
that Frontend framework for React and help to React in Styling. Developers
don’t need to write a code from starting or scratch.

3
1.2 BACK-END DEVELOPMENT
It is also known as server-side development. It is works in the background and
the users don't aware of these contains. We can say it is behind-the-scene activity.
This happens or occurs when the user clicks or performs any action on a website
created by Frontend technology. It mainly focuses on databases, backend logic,
APIs, and Servers. It is called backend development. In the backend development,
we can use various programming languages for example JavaScript, python, PHP,
Ruby, etc., and its framework.

1.3. DATABASE
It is a collection of information or data in an organized manner. Data is generally
stored in a computer system. A database is typically controlled or managed by a
database management system (DBMS). This stored data is easily accessed,
managed, modified by the user. There are some most widely used database
software or DBMSs include MySQL, MongoDB, Microsoft SQL Server,
FileMaker Pro, Oracle Database, etc. But in our case, we mainly focus on SQL.
So we try to use this database. There are two types of databases one is relational
and another one is a non-relational database. A database provides a place for your
web application's data to be stored. Databases are split into two types: relational
and non-relational (the latter being broken into multiple categories), each with its
own set of advantages and disadvantages. The following are the most widely used
databases in web development: MySQL (relational), PostgreSQL (relational),
MongoDB (non-relational, document).

4
 Chapter 2
TECHNOLOGIES

Technologies that are used to develop A website are:

• HTML
• CSS
• Bootstrap.
• Scripting Technologies like PHP.
• Database using MySQL

Introduction to HTML
HTML Hypertext Markup Language (HTML) is the standard markup language
for creating web pages and web applications. With Cascading Style Sheets
(CSS) and JavaScript it forms a triad of cornerstone technologies for the World
Wide Web. Web browsers receive HTML documents from a webserver or from
local storage and render them into multimedia web pages. HTML describes the
structure of a web page semantically and originally included cues for the
appearance of the document.

HTML elements are the building blocks of HTML pages. With HTML
constructs, images and other objects, such as interactive forms, may be
embedded into the rendered page. It provides a means to create structured
documents by denoting structural semantics for text such as headings,
paragraphs, lists, links, quotes and other items.

HTML elements are delineated by tags, written using angle brackets. Tags such
as <img/> and <input/> introduce content into the page directly. Others such as
<p>..<p/> surround and provide information about document text and may
include other tags as sub-elements. Browsers do not display the HTML tags, but
use them to interpret the content of the page.

5
HTML can embed programs written in a scripting language such as JavaScript which
affect the behaviour and content of web pages. Inclusion of CSS defines the look and
layout of content. The World Wide Web Consortium (W3C), maintainer of both the
HTML and the CSS standards, has encouraged the use of CSS over explicit
presentational HTML since 1997.

HTML markup consists of several key components, including those called tags
(and their attributes), character-based data types, character references and entity
references. HTML tags most commonly come in pairs like <h1> and <h1/> ,
although some represent empty elements and so are unpaired, for example
<img> .The first tag in such a pair is the start tag, and the second is the end tag
(they are also called opening tags and closing tags).
The following is an example of the classic Hello world program, a common test
employed for comparing programming languages, scripting languages and
markup languages. This example is made using 9 lines of code:

1) GENERAL SYNTAX OF HTML:

6
(The text between <html> and <html/> describes the web page, and the text
between <body> and <body/> is the visible page content. The markup text
"<title>" defines the browser page title.)

The Document Type Declaration <!DOCTYPE html> is for HTML5. If a

declaration is not included, various browsers will revert to "quirks mode" for
rendering.

7
 Introduction to CSS
CSS Cascading Style Sheets (CSS) is a style sheet language used for describing
the presentation of a document written in a markup language. Although most
often used to set the visual style of web pages and user interfaces written in
HTML and XHTML, the language can be applied to any XML document,
including plain XML, SVG and XUL, and is applicable to rendering in speech,
or on other media. Along with HTML and JavaScript, CSS is a cornerstone
technology used by most websites to create visually engaging webpages, user
interfaces for web applications, and user interfaces for many mobile
applications.
CSS is designed primarily to enable the separation of presentation and content,
including aspects such as the layout, colors, and fonts. This separation can
improve content accessibility, provide more flexibility and control in the
specification of presentation characteristics, enable multiple HTML pages to
share formatting by specifying the relevant CSS in a separate .css file, and
reduce complexity and repetition in the structural content.
Separation of formatting and content makes it possible to present the same
markup page in different styles for different rendering methods, such as
onscreen, in print, by voice (via speech-based browser or screen reader), and on
Braille-based tactile devices. It can also display the web page differently
depending on the screen size or viewing device. Readers can also specify a
different style sheet, such as a CSS file stored on their own computer, to
override the one the author specified.

8
 Changes to the graphic design of a document (or hundreds of documents) can
be applied quickly and easily, by editing a few lines in the CSS file they use,
rather than by changing markup in the documents.
The CSS specification describes a priority scheme to determine which style
rules apply if more than one rule matches against a particular element. In this
so-called cascade, priorities (or weights) are calculated and assigned to rules, so
that the results are predictable. The CSS specifications are maintained by the
World Wide Web Consortium (W3C). Internet media type (MIME type) text/css
is registered for use with CSS by RFC 2318 (March 1998). The W3C operates a
free CSS validation service for CSS documents.

1) TYPES OF CSS :
• Inline CSS: In this CSS is applied in between the tags. E.g.:

<tag style =”styling” > Hello World </tag>

• Internal CSS: In this the

css code is defined inside the style tag in the
head section of the HTML page. General Syntax:

• External CSS: In
this the CSS code is written on another page and is
linked to the HTML page. It is advantageous to use this type of styling
as we can use the same file to style various HTML pages. External CSS
uses the extension .css and is applied using the following syntax:

9
All the CSS style types are important but can be used in different situations.

Before using CSS in HTML page :

10
After using CSS in HTML page:

Introduction to BOOTSTRAP

Bootstrap is a free and open-source front-end web framework for designing

websites and web applications. It contains HTML- and CSS-based design
templates for typography, forms, buttons, navigation and other interface
components, as well as optional JavaScript extensions. Unlike many web
frameworks, it concerns itself with front-end development only.

Bootstrap is the second most-starred project on GitHub, with more than 107,000
stars and 48,000 forks.

11
Bootstrap, originally named Twitter Blueprint, was developed by Mark Otto and
Jacob Thornton at Twitter as a framework to encourage consistency across
internal tools. Before Bootstrap, various libraries were used for interface
development, which led to inconsistencies and a high maintenance burden.

Since 2.0, Bootstrap supports responsive web design. This means the layout of
web pages adjusts dynamically, taking into account the characteristics of the
device used (desktop, tablet, mobile phone).

Starting with version 3.0, Bootstrap adopted a mobile-first design philosophy,

emphasizing responsive design by default. The version 4.0 alpha release added
Sass and flexbox support.
1) INSTALLING AND LINKING BOOTSTRAP:

PHP

PHP is a server-side scripting language designed primarily for web

development but also used as a general-purpose programming language.
Originally created by Rasmus Lerdorf in 1994, the PHP reference
implementation is now produced by The PHP Development Team. PHP
originally stood for Personal Home Page, but it now stands for the recursive
acronym PHP: Hypertext Pre-processor.

PHP code may be embedded into HTML or HTML5 markup, or it can be

used in combination with various web template systems, web content
management systems and web frameworks. PHP code is usually processed
by a PHP interpreter implemented as a module in the web server or as a
Common Gateway Interface (CGI) executable. The web server software
combines the results of the interpreted and executed PHP code, which may

12
be any type of data, including images, with the generated web page. PHP
code may also be executed with a command-line interface (CLI) and can be
used to implement stand-alone graphical applications.

The standard PHP interpreter, powered by the Zend Engine, is free software
released under the PHP License. PHP has been widely ported and can be
deployed on most web servers on almost every operating system and
platform, free of charge.

The PHP language evolved without a written formal specification or standard

until 2014, leaving the canonical PHP interpreter as a de facto standard.
Since 2014 work has gone on to create a formal PHP specification.

1) INSTALLING PHP:

We have used Wamp to run the php files .

13
 Wamp-Server

WampServer refers to a solution stack for the Microsoft Windows operating

system, created by Romain Bourdon and consisting of the Apache web server,
OpenSSL for SSL support, MySQL database and PHP programming language .
Wamp is a free and open source cross platform web server solution stack
package developed by Apache Friends, consisting mainly of the Apache HTTP
Server, MariaDB database, and interpreters for scripts written in the PHP and
Perl programming languages.

It is a simple, lightweight Apache distribution that makes it extremely easy for

developers to create a local web server for testing and deployment purposes.
Everything needed to set up a web server – server application (Apache),
database (MariaDB), and scripting language (PHP) – is included in an
extractable file.

WAMP is also cross-platform, which means it works equally well on Linux,

Mac and Windows. Since most actual web server deployments use the same
components as WAMP, it makes transitioning from a local test server to a live
server extremely easy as well.

14
 1) FEATURES:

WAMP is regularly updated to the latest releases of Apache, MariaDB,

PHP and Perl. It also comes with a number of other modules including
OpenSSL, phpMyAdmin, MediaWiki, Joomla, WordPress and more.
Self-contained, multiple instances of WAMP can exist on a single
computer, and any given instance can be copied from one computer to
another. WAMP is offered in both a full and a standard version (Smaller
version).

2) USAGE :
Officially, WAMP's designers intended it for use only as a
development tool, to allow website designers and programmers to test their
work on their own computers without any access to the Internet. To make this as
easy as possible, many important security features are disabled by default.
WAMP has the ability to serve web pages on the World Wide Web. A special
tool is provided to password-protect the most important parts of the package.

WAMP also provides support for creating and manipulating databases in

MariaDB and SQLite among others. Once WAMP is installed, it is possible to
treat a localhost like a remote host by connecting using an FTP client. Using a
program like FileZilla has many advantages when installing a content
management system (CMS) like Joomla or WordPress. It is also possible to
connect to localhost via FTP with an HTML editor .

3) INSTALLATION :

Step 1: Download the WampServer installer by choosing among 32-bits and 64-
bits version depending on what Windows you are running. Also, see the required
configuration of all the components.
Example: WampServer 2.2D has Apache 2.2.21, Php 5.3.10, MySQLi 5.5.20,
XDebug 2.1.2, XDC 1.5, PhpMyAdmin 3.4.10.1, SQLBuddy 1.3.3 and web
Grind 1.0.

15
Step 2: Run the downloaded installer to initiate the setup. If the option of Run as
administrator is available, make use of it. Complete the setup by following all
wizard instructions until the end. WampServer will require around 200MB+
space on the disk you install it. It9s recommended to install WAMP on
C:/wampserver or C:/wamp, though not mandatory.

Step 3: Start WampServer by clicking the shortcut icon created on your desktop.
Again, use Run as administrator if available. The icon appears in Windows
Notification Area (right-bottom) turning from Red to Orange to Green. Red
denotes that the server is inactive/disabled. Orange indicates the
server is processing or starting up. Green indicates the server is active and
running.

To check whether WampServer is running correctly – open a browser and type

http://localhost

You should see a WampServer Homepage showing Server Configuration, Tools,

Your Projects, Your Virtual Hosts and Your Aliases .

16
4) CONFIGURATION:

Once WampServer is installed, it9s time to configure the server environment as

per your requirements.
Single left-click on the WampServer icon shows a menu – localhost,
phpMyAdmin, www directory, Apache, PHP, MySQL, web Grind, Start All
Services, Stop All Services, Restart All Services, and Put Online/Offline.
Activate the required Apache modules from Apache > Apache Modules (ticked
indicate enabled).

17
http.conf, Apache error log and Apache access log files are also available.
Enable all required PHP settings and extensions via PHP > PHP Settings and
PHP > PHP Extensions. It9s recommended for novice users to not modify the
php.ini file manually, instead operate it via the menu only. Logged PHP errors
can be found at PHP > PHP Error Log.
You can also access http://localhost/?phpinfo=1 and
http://localhost/phpmyadmin/ on your browser. phpMyAdmin is used to manage
MySQL databases and related operations.

SQL

SQL Originally based upon relational algebra and tuple relational calculus, SQL
consists of a data definition language, data manipulation language, and data

18
control language. The scope of SQL includes data insert, query, update and
delete, schema creation and modification, and data access control.

Although SQL is often described as, and to a great extent is, a declarative
language (4GL), it also includes procedural elements. SQL was one of the first
commercial languages for Edgar F. Codd's relational model, as described in his
influential 1970 paper, "A Relational Model of Data for Large Shared Data
Banks." Despite not entirely adhering to the relational model as described by
Codd, it became the most widely used database language. SQL became a
standard of the American National Standards Institute (ANSI) in 1986, and of
the International Organization for Standardization (ISO) in 1987. Since then, the
standard has been revised to include a larger set of features.

1) QUERIES:

The most common operation in SQL, the query, makes use of the
declarative SELECT statement. SELECT retrieves data from one or more
tables, or expressions. Standard SELECT statements have no persistent
effects on the database.

Some non-standard implementations of SELECT can have persistent

effects, such as the SELECT INTO syntax provided in some databases.
Queries allow the user to describe desired data, leaving the database
management system (DBMS) to carry out planning, optimizing, and
performing the physical operations necessary to produce that result as it
chooses.

19
A query includes a list of columns to include in the final result, normally
immediately following the SELECT keyword. An asterisk ("*") can be
used to specify that the query should return all columns of the queried
tables. SELECT is the most complex statement in SQL, with optional
keywords and clauses that include:

• The FROM clause, which indicates the table(s) to retrieve data

from. The FROM clause can include optional JOIN subclauses to specify
the rules for joining tables. The WHERE clause includes a comparison
predicate, which restricts the rows returned by the query. The WHERE
clause eliminates all rows from the result set where the comparison
predicate does not evaluate to True.

• The GROUP BY clause projects rows having common values into

a smaller set of rows. GROUP BY is often used in conjunction with SQL
aggregation functions or to eliminate duplicate rows from a result set. The
WHERE clause is applied before the GROUP BY clause.

20
• The HAVING clause includes a predicate used to filter rows
resulting from the GROUP BY clause. Because it acts on the results of
the GROUP BY clause, aggregation functions can be used in the
HAVING clause predicate.

• The ORDER BY clause identifies which column[s] to use to sort

the resulting data, and in which direction to sort them (ascending or
descending). Without an ORDER BY clause, the order of rows returned
by an SQL query is unde

21
 Chapter 3
CONCLUSION

After learn web development tools to create international standard

websites by our own. Following are the learning outcomes of the
industrial training on web development.

❖ Able to use the HTML programming language.

o Resolves written HTML codes. o Runs
the page designed using HTML codes.
❖ Be able to use CSS for styling the web pages.
❖ Able to modify Site Designs to look how we Want Them to Look.
❖ Discover how does web works really, what makes web sites work.
❖ Able to use Simple and impressive design techniques, from basics till
advanced to focus on goal oriented and user centric designs.
❖ Able to plan for website & actually build excellent web sites. ❖ Pro
level skills in SEO with keyword research and content strategy for our
website.
❖ Able to create web elements like buttons, banners & Bars and of
course complete UI designs.
❖ Able to create Forms and validations for our website.
❖ Setting up page layout, color schemes, contract, typography in the
designs.
❖ Writing valid and concise code for webpages.
❖ Best use of social media for revenue generation.
❖ Setting up a perfect landing page for business, clients and yourself.
❖ Publishes the site designed
❖ Be able to make changes on the Site.

Chapter 4
Recommendation/Suggestions

22
Internshala is doing well to provide internship to college students on their
choice on time period and field of interest. Their student partner program
is good to guide student from normal college student where there is huge
gap of information related to internships and training.

As a student of their online training program I observed some drawbacks

in their working style –

1. They focus on more on increasing involvement of student without

providing them great facilities. Their student partner program designed in
such a way that they make more new registrations on their website.
Promotion of website is good but when it became only reason then things
not working well. They do not proper guide students. If they focus more
on quality improvement than only promotion, it will help students.
2. If they improve their online training program it will help student to
learn new skills. Their online training is costly than other MOOC like
Udemy and Coursera . If they provide training in optimum cost it will not
create any burden to students.
3. If they provide some ranking according to students resume and add
a separate section of different companies9 selection criteria information.
This will help student to find where they are standing and what skills
required for different companies.

These are just some suggestions which may help directly to Internshala
and indirectly to students.

Chapter 5
PROJECT: PG LIFE

Anyone can view Online Renting portal and available properties, but
every user must login by his/her Username and password in order to
purchase or rent properties. Unregistered members can register by

23
navigating to registration page. Only Admin will have access to modify
roles, by default developer can only be an “Admin”. Once user register
site, his default role will be “User”. This website is designed while
considering its responsiveness .

a) HOME PAGE:
The Home Screen will consist of screen were one can search for
properties in the city one wants to be and can Signup or Login .
Registered user can directly login by entering Email and Password .
New users can register through signup portal by entering their details
such as Full Name , Phone Number , Email , Password , Gender , etc.

Home Page

b) SIGNUP PAGE :

24
 Sign Up Page

c) LOGIN PAGE :

Login Page

d) PROPERTY NAVIGATING PAGE :

25
• Shows the list of all the PGs and their main features in the selected city,
in the form of beautiful cards.
• Filter bar, using which the PGs can be sorted according to rent and
rating, in ascending or descending order.
• User can see here which PG is being marked interested by how many
users, to know popularity.
• After logging in, user can mark any PG(s) as interested, from the list
itself, by clicking on the heart icon.
• The heart icon toggles style in terms of fill color, when alternatively
clicked to like or dislike the pg. Based upon click, interested user's
number remains updated dynamically.

Property Listing Page

e) PROPERTY DETAILS PAGE :

• In the property list page, if any user clicks on "View" button, that pg's
entire details is being displayed in the PG details page.
• Images of the selected PG is being viewed at top front as a beautiful
carousel.
• The page shows all the details such as amenities, testimonials, address of
the PG neatly.

26
 • User can see the selected PG is being marked interested by how many
users, to know popularity.
• After logging in, user can mark any PG(s) as interested, from the list
itself, by clicking on the heart icon.
• f. The heart icon toggles style in terms of fill color, when alternatively
clicked to like or dislike the pg. Based upon click, interested user's
number remains updated dynamically.

Property Details Page

Chapter 5

Working Of Website

a) index.php / Homepage:

This is the file which contains php and HTML code for the homepage
where Several bootstrap classes are used for designing purpose such as
breadcrumb , navbar , modal and footer , etc . This also contains liked css

27
 files of bootstrap , fontawesome and links for google fonts . All these css
links are included in a separate file named as ”head_links.php” , which is
later on included in head tag of “index.php” file .

head_links.php

index.php

b) property_detail.php / property page :

In this file all the server side php code is present with several SQL
queries.

28
 Property_details.php

c) property_details.php / JS styling file :

This file contains code for styling and showing response for intrested icon
highlighted .

d) Database :

For storing and processing data a query language is required and for that
SQL queries is used here in many files to access and modify data.A

29
 relational database is used which contains many tables like for amenities ,
properties , user details , etc.

amenities table

user details table

Chapter 6

E-Commerce Site (Frontend)

An E-commerce site’s frontend developed using HTML and pure CSS only and
making it fully responsive by using “#check” ID’s to implement fully functional

30
navbar for devices width less than 800 pixels Used flexbox , animation , CSS
selectors and several div properties .

Homepage

HomePage with toggled navbar

Listing products represented as cards using flexbox and making responsive
using flex-wrap property.

31
 Listed products

Website preview
(on devices with full width)

REFERENCES

• Geeks for Geeks https://www.geeksforgeeks.org/.

• Simplilearn https://www.simplilearn.com.

32
• Javapoint https://www.javatpoint.com/mern-stack.
• BocaSay https://www.bocasay.com/how-does-the-mern-stack-work/.
Nodejs https://nodejs.org/

33
34