WEB TECHNOLOGIES

COURSE CODE: CN 4003

HARIKRISHNA KOYIPPILLY KARTHIKEYAN (STUDENT ID – 2402882)

Contents
1 TASK 1: CASE STUDY......................................................................................................................................................2
2 TASK 2: BACKGROUND RESEARCH.................................................................................................................................3
2.1 SUMMARY...........................................................................................................................................................13
3 TASK 3: WEB PLANNING...........................................................................................................................................15
3.1 COLOR SCHEME...................................................................................................................................................16
3.2 LOGIN PAGE.........................................................................................................................................................17
3.3 CONTACT PAGE....................................................................................................................................................18
NAVIGATIONAL DESIGN...................................................................................................................................................19
3.4 OVERVIEW...........................................................................................................................................................21
4 TASK 4- IMPLEMENTATION AND TESTING:...................................................................................................................23
4.1 HOMEPAGE..........................................................................................................................................................23
4.2 LOGIN PAGE AND SIGNUP PAGE..........................................................................................................................25
4.3 ABOUT PAGE........................................................................................................................................................27
4.4 SERVICE PAGE......................................................................................................................................................29
4.5 CONTACT PAGE....................................................................................................................................................31
5 TASK 5- EVALUATION AND REFLECTION.......................................................................................................................33
5.1 REVIEW................................................................................................................................................................33
5.2 SEARCH ENGINE OPTIMIZATION..........................................................................................................................34
5.3 ADVERTISING.......................................................................................................................................................35
6 APPENDIX.................................................................................................................................................................... 36
6.1 SCREENSHOT OF CODES:.....................................................................................................................................36
7 Reference....................................................................................................................................................................43
1 TASK 1: CASE STUDY

I am planning to build a website on vintage cameras as part of my project. On my

behalf of it I have come up with a mind-blowing idea that help every person, especially
photographers like it. The idea I am researching on some types antique cameras such
as film cameras, contax ax, and many more, its spare parts from 90s , 80s and to
connect with owners of that cameras as well as private museums from all over the
world, to know that whether they are interested in repairing their vintage cameras and
spares parts . As well as I need to connect some of the old local camera repair man
further, after collecting all the information’s I can place it in my website with full details
of antique cameras and about repairing it with professionals.

Then I will advertise this website in every social media platform such as by paying
content creators, public figures with 50 pence for visiting website and 99 pence as user
register in the website. It’s to inform everyone active in the social media platforms that
there is world’s best vintage camera repairing with low fees going to happened and
every single person can register for free. There will be many benefits for customers
such as free delivery for premium members as well as camera owners deciding what
specific modification can be done.

After all of that I am going to start repairing all vintage cameras and their parts at a
specific festival. Everyone who registered for this small event will get a notification on
their mobile before 6 hours, in that time they can participate at the low rate repairing
workshop it’s to put the details of customers vintage camera and problem about it and
our employer collects, repairs and deliver back to your address for just 10.99 pounds
and free for premium customers which increase customers to website.

Later on when they deliver your camera the money will be automatically deducted from
bank customer bank account and I will get 50% of the money and repair man will get
the rest 50% or 25% and repaired vintage camera delivered within 3 days of super-fast
delivery which is free around the world. After the event is over, I will make it as website
which repairs of vintage camera that are artificially made and original vintage camera
all over the world with many benefits for our users.
2 TASK 2: BACKGROUND RESEARCH
WEBSITE DESIGN USABILITY FEATURES REQUIREMENTS

SENDEAN CAMERAS - On the home - This website - This website has - There are some
have many uses a function which requirements for
page, we can see starting with the makes the this website. to
background color fonts and all the webpage attract begin with images
black, grey and paragraph, customers. Such of the websites are
white. There is also headings are as list of products used from other
a picture of black written in white and its details in websites…so the
camera which background, So professional as images are
attracts the user.
that its highlighted, well as simple copyright.
There is also a
logo at left
hence its easily way.
designed with visible and
colors. readable.

- I would like to -There is a page

- After scrolling
- The positioning of highlight about called pricing in
down, we can every links and the hyperlinks which it is not user-
see a yellow buttons is like the were directly friendly and
background normal websites so going to the cookies are coming
color with black it can be found certain page again and again
camera and a easily… without being although if you
quote written in - It provides to take redirecting to any reject it .. the
white, which survey of every other ad pages. website get
attracts the user to know their unloaded for a
users. needs as well as it moment.
loads with basic
information…

- We can see - First of all -Thus, the -

four headings websites has clear website is Firstly, I noticed
and each and easy to use optimized and that the website
heading has a navigation, with has rendered needs to show a
subcategory links to different everything within logo on the
within it, there is sections of the site. the page homepage.
also so many. correctly…
DAG CAMERAS
 -Every information
about the website
- In terms of is shown in the - There is also a - I would like to
design, the home page to search bar which highlight that the
website has a being easily is right side of the text or paragraphs
clean and directed to next site to allow users need to change
attractive home page without to quickly find font and size. So, it
page with a showing ads. specific can be visible to
simple layout. information and most people,
four navigation exceptionally aged
buttons. people.

- Overall, the
usability of a Dag - Moreover,
-There is cameras website -Accessible to websites need
heading of depends on the users with privacy and policy
website name at user's ability to find disabilities, to agree the legal
center in black the information including to requirements or its
color and they need quickly people using hard to trust that
paragraph and easily, and to screen readers website.
about the navigate the site and other
history of assistants.
camera written with ease. Technology.
in simple words.

-there is also a
wide range of
- The website is -Overall, the
things to
- when we scroll well optimized website need to be
experience in
down, we can and designed to repaired especially
website.
see the pictures mobile responsive refund policy to get
of the camera and load pages more users…
and their types fast with proper
as hyperlinks to rendering.
get more details
on certain page.

-The Website is
optimized for
-The website
various sizes and
- the website is allows users to
devices such as
easy to navigate provide feedback
laptops phone and
in each section on their
tablets with fast
as well as experience.
loading.
visually
KEH CAMERAS appealing.
 - Every
information’s are
shown in - It has a good - They need a
- This website is homepage and camera product perfect logo on the
designed in a some are shown listed and sorted page ...
stunning way as hyperlink with in the catalog.
with good instant rendering. There is also a
background search bar and
color with high filter button to
quality images make the site
in it. user friendly.

- I have read their

-The page is not privacy policy and
overloaded with full terms & conditions
of advanced -There is also a …it need to be
- The Design of information and is separate warranty explained more as
the KEH camera simple to use as policy made to all well as some
website provide normal user… products and can sentences should
an easy to use add several be included…
and intuitive comments about
online platform. the website.

- It provides the
best security to the - This website must
customers’ - There is also a be used in
- Every accounts and to blog in home accordance with all
Headings and sort everything page to introduce legislation and
paragraph texts their searching on the website to the standards,
are correct and website. users …there is including data
highlighted also a resource protection and
which make the section with consumer
users attract information and protection...
and spend time more…
in website.

- I would like to
highlight the used
background colors - Mainly, this
- Overall, the and fonts because website has a
design of site is it is more attractive good user
prioritized and and visible for interface to
good buttons in every aged person. increase the
square shape number of users
ADVANCE CAMERA and suits best to website.
 - Most of the
information is on
the homepage
itself and many - This website has
- This website more things are a navigation bar -this website needs
has a good described there. and search a non-copyright
visual images a So far, we will get engine optimized photo with high
with a white a idea about it. to get potential quality.
background users and has
color comply good layout.
with a simple
layout and
normal text
headings.

- They have also

mentioned contact - Even though it
information mainly, - It have the contains high-
easy to read easiest checkout quality photographs
-When we scroll information ... process which from other
down the home includes many websites, this
page, we can options such as website requires
see the pictures nfc scan and card copyright and
of vintage scanning. trademark
cameras regulations.
attached with a
good
description.

- Thus, there is lot

of things to
experience in this - All these things
website. make this website
-There is a also well-designed.
a form to fill out
on the home
page to get
notification
about their
updates in
normal colors
and size.

- This website has

a blog section that - The homepage
provides useful features large, - When I checked
information’s about high-quality the terms and
CAMERA WORKS - This website vintage cameras, images that conditions they said
has a simple self-repair tips and showcase the that refund takes
layout with black so on. company’s up to 2 weeks
background services and which is not
color and white products. allowed or legal..
in text which is
easily readable.

- the main menu

 provides quick
access to key - The website has - Overall this
areas of the site, a section website has
such as repair dedicated to accessibility
- There are services, products, reviews of requirements and
images with a and contact different camera there are also two
good information equipment, required things to
description and . including do for this website
gives an idea cameras, lenses, and it meets rest ..
about that and accessories.
website on the
homepage itself.

- the website
appears to be well-
executed, with a - Overall, a - The website must
focus on providing camera work comply with data
a positive user website provides protection laws and
experience and information, regulations, such
- When come to highlighting the resources, and as the General
the second company's products to help Data Protection
page we can expertise. photography. Regulation
see the same (GDPR).
fonts and design
in homepage,
only change
was the
description was
detailed and bit
longer with
small fonts and
size.

- One of the
strengths of the - This website
Camera West fully optimized
website is its and every are
search and filtering sorted out
capabilities, which separately for
- The Camera allow users to better
West website quickly find the understand.
has a clean and products or
minimalist services they are
design with a interested in.
black and white
color scheme,
which gives it a
modern and
sophisticated
look
CAMERA WEST
- Another strength
of the website is its
checkout process, - All pages in this
which is website are
streamlined and rendered super-
easy to use. Users fast and images
- The website's can add items to are high quality.
 footer includes their cart and - Accessibility
links to checkout quickly features like alt
additional pages and securely. tags for photos,
such as "About video subtitles,
Us," "Contact and keyboard
Us," "Terms of navigation can
Service," as well help make the
as social media website more
links and a inclusive and
newsletter accessible to all
subscription users. - The website must
form. comply with
advertising and
marketing laws and
regulations,
including those
governing the use
of cookies, online
- This website is tracking, and email
easily readable - The website marketing.
and user friendly. features customer
testimonials,
which help to
build trust and
- Image on the credibility with
homepage potential
showcases a customers. - Need to provide
high-quality accessible content
image of a for users with
camera, which disabilities, such as
helps to alternative text for
establish the images, captions
company's for videos, and
focus on keyboard
camera repair navigation.
services.
- This website is
perfectly and sized - Users may
and all the fonts easily contact the
used are cool and firm thanks to the
help all aged website's
people to read presentation of its
- the design of information quickly. contact details, - This website
the C.R.I.S. including phone must obtain users'
Camera number, email consent to collect
Services address, and and process their
website is user- physical location. personal data and
friendly and must have clear
informative, with and transparent
a focus on policies in place
showcasing the regarding the use
company's of user data.
camera repair
services and
C.R.I.S CAMERA making it easy
for users to get - website has a
in touch. comprehensive - website features
FAQ section, customer
which answers testimonials,
common questions which help to
that users may build trust and
- This page has have about the credibility with
 a simple layout repair process, potential - the website needs
which attracts shipping, and customers. consumer
the user warranties protection laws,
which vary by
- Homepage is jurisdiction but
beautiful and generally require
simple finish businesses to
with red and provide clear and
white accurate
background information about
color. their products and
services as well as
pricing, tags.

- The website - There are many

provides detailed sections that are
information about sorted out and - This website
the different they have requires cam-spam
camera repair included a search act, which sets out
- Most of the services that the bar as well requirements for
texts are in company offers, website Is well commercial email
normal size with including optimized. messages.
black color as descriptions, prices
well as and so on.
headings.

- This website has - It must also

a good quality - This website has adhere to laws and
images and correct a component that rules governing the
information’s which offers frequent truth in advertising,
- The layout is is easily readable updates, business which provide for
simple and easy and visually visible. news, and the revelation of
with a clear insights into the relevant facts about
structured firm and its goods goods or services.
organized and services.
information with
perfect
matching fonts
and size.

APERTURE UK

- Much of the - There are many

 material is offered other features like
on the homepage navigation menu
itself, giving and so on.
consumers a
- This website general sense of
has a small the website and
homepage with the option to read
white reviews left by
background visitors who have
color and blue registered with it.
color for fonts - In order for people
and some with disabilities to
headings. access and utilize a
website, it must
primarily adhere to
the Web Content
Accessibility
Guidelines
(WCAG).
- websites load
- Moreover, this quickly, especially
website gives good on mobile
experience and the devices, as users
service they tend to have short
provide. attention times.
- There are lot
images in
homepage and
there is also a
hover effect.

- The text on a - The website is

website is easy to properly
read and optimized, and all - This website
understand. It is of its contents needs non
presented in a render quickly copyright photos as
legible font and and can quickly well as logo are
appropriate font adjust to multiple taken from other
- This website size, and there screen sizes and website and all
has displayed should be a good devices, including other contents are
every content in contrast between desktops, laptops, copied from other
simple font and the text and the and others. sites.
in normal layout. background.

NEWTONELLIS
 - This website
meets the rest all
requirements

- It needs to have a
- It is accessible to privacy policy on
all users, including your website that
those with explains how you
disabilities. This collect, use, and
means that the protect user data.
website should
- website has comply with
visually accessibility
appealing, with standards.
high-quality
images and
graphics that
enhance the
user
experience.

- When utilizing
photographs, text,
or other information
on your website,
you must make
sure that you are
not violating any
copyrights or
trademarks.

Midwest Camera Repair

- This website is - The website - If a website sells
designed in a - keyword research features high- items or services, it
normal way with is done in order to quality, must follow
white optimize the aesthetically consumer
background website for search pleasing protection
color and engines and boost photographs that regulations that
images its exposure. highlight the demand clear and
embedded in it. specifics of the accurate product
products and descriptions,
services while pricing, and refund
also showcasing procedures.
repair services
and equipment.

- I’d want to - Accessibility rules

- Most of the - This website has
and regulations,
texts are written a simple and cool emphasize that such as the
in normal font navigation menu this website has Americans with
and size with that allows visitors client impairments Act
black color …All to quickly find the testimonials, (ADA), may
this things are information they certificates, and mandate websites
grouped in right need. industry awards. to be accessible to
side of the individuals with
website. impairments.

- Potential - It has a visible

clients should and easy-to-find
be able to find contact area that - We can
all the offers the experience many
information they company's phone more in this
want on an number, email website.
attractive, user- address, and other
friendly website. information.
2.1 SUMMARY
Overall, there are many elements on this website that are similar across
the board, including typefaces, size, accessibility, and a host of other
elements. The majority of them focus on website design alone, while
some primarily focus on website optimization. In addition, I came across
two websites where the designers and search engine optimization
specialists concentrate on both aspects of website design and
optimization. They have so far attracted lots of visitors to their website.
Some websites take a long time to load, and most of their material and
graphics are copied from other websites, giving them copyright. The
homepage of some websites, however, has many hyperlinks that may be
followed for further information.
Additionally, some websites have simple functionality that is usable by all
ages, and I want to emphasize that even blind people can use the
website. Other features include a pleasing aesthetic appeal, user
friendliness, and mobile optimization. It responds quickly, has a solid
menu system, and features a search bar with filters and other choices.

Therefore, when we evaluate all of these websites, we find that just one
offers a good user experience, worthwhile content, trustworthy
functioning, rapid response, and is designed for both desktop and mobile
platforms.
3 TASK 3: WEB PLANNING
HOMEPAGE
it is navigation
menu with four
options, and I will
add some more
effects add.

I will put high quality

photos of camera
and small
description about it
as well as giving a
hyperlink.

It will allow the

page to move into
next page.

Here they can contact us through social

media platforms and links to follow for
our updates

That section is to add reviews and

experience of users from this
website.
3.1 COLOR SCHEME
HEADINGS 1
HEADINGS 2
HEADINGS 3
HEADINGS 4 COLOR SCHEME

Background color

Color code #8D7B68

Primarily, I use a backdrop image, followed by a heading and

various font in a light brown color that go well with the image. I'm
also testing with some additional fonts for pages that provide more
information about the website. For tables, I'll add a green color, and
I'll also add extra CSS to give the website a more polished
appearance. I'm using a regular font for this paragraph that
contrasts with the webpage, such light blue or black.
3.2 LOGIN PAGE This is a Login form for my website
actually I plan to change the font,
color and size

In this login button I will add

some JavaScript to make it
more interactive

To ensure that readers can readily find this button, it is often

prominently displayed on a website's homepage or header.
Authenticating users and granting them access to services or
material that is not accessible to the general public are the two
purposes of a login button.
3.3 CONTACT PAGE NAVIGATION BAR
TYPE EMAIL

TYPE NAME TYPE NUMBER

Every website should have a contact page that enables users to get
in touch with the site's administrators or owners. A website's contact
page should make it simple for users to contact the team there with
any questions, comments, problems, or requests for assistance.
NAVIGATIONAL DESIGN
The navigational design of a report is crucial since it enhances the
reader's interaction with the material. Your report's usefulness,
accessibility, and capacity to effectively convey its message to its
target audience may all be improved by using a clear and easy
navigation system.
3.4 OVERVIEW
I'll use a regular building process to create a website that
eventually seems to be professionally designed. To improve
the page further, I aim to build it over the course of two days by
gathering and researching additional material, applying it, and
ensuring that each component functions as intended. Even
though I'm utilizing HTML and CSS frameworks, I'll alter each
layout, color, and size to get most of the impact provided by
CSS code for things like hover, transition, and more. It will be
much simpler to utilize and position each piece correctly even if
I am only a beginner in HTML and CSS. To develop an HTML
framework, I discovered that using CSS components is simple.
As part of web technologies, we utilize JavaScript to handle
multimedia, animate graphics, and perform other tasks in
addition to utilizing CSS to design the website and HTML to
create the framework. As of right now, I'll also be using
JavaScript on my website to provide users quick responses
and increase user interaction while also incorporating CSS to
provide some nice fonts and effects. When it comes to hosting
my website, I will use GitHub to host my website and service
provider.
I'll create a repository on GitHub, upload the files for your
website, then activate GitHub Pages in the repository settings
to launch your website. The only type of website that it can
host—static webpages, not dynamic websites, or web
applications—and it's simple to set up and gives customization
possibilities.
My vintage camera website, in general, offers a thorough
platform for photography lovers to discover and enjoy the world
 of old cameras, as well as options to purchase, sell, and
maintain this historical photographic equipment.

4 TASK 4- IMPLEMENTATION AND TESTING:

4.1 HOMEPAGE
I have created a basic homepage using html, JavaScript and CSS.
When we land on homepage there will be a popup first, after that its
quite normal one with heading of my page and navigation bar over
designed by CSS with many effects. My homepage includes a logo
of vintage camera which I made. The Page is Also optimized.

This visual user interface element shows a collection

of links or buttons that users may use to travel to
different areas of a website or application. It is often
This is a basic webpage to welcome situated at the top of the page. It has a nice contrast
everyone to my webpage styled using css when compared to the background image, which
draws the viewer to the website. As a result, it is quite
usable.
W3C HOMEPAGE REPORT
4.2 LOGIN PAGE AND SIGNUP PAGE
This is a login page which for users to login to my webpage. in this
we must fill the user’s data to get more information about the
website and its features.

This is a plane navigation bar styled using CSS

to make to more attractive to the user

This is a signup page for new users This is a login button which has used
which is same as login page but some JavaScript to make it more interactive
changes in font, color, size and so on with users.

This is a professional login and signup page made using JavaScript

to make it attractive for users visiting my webpage. After creating an
account, users may access the website by entering their username
and password.
W3C LOGIN PAGE REPORT
4.3 ABOUT PAGE
This is about a page which contains information about the
webpage. A well-written About page may also help the business
stand out from its rivals and provide visitors with a better
impression of it.

This page shows a background with my name styled in CSS

and navigation bar on left side to make it more beautiful. I
had made this side look more professional.

When we scroll down we can see the introduction about me

and more about our service and facilities we provide to our
customers as well as I have give some common question
answers highlighted in green color.
W3C ABOUT PAGE
4.4 SERVICE PAGE
This page contains the main content of my webpage. A company's service
page may aid in highlighting its distinctive value offer and make it simple
for potential clients to comprehend the advantages of cooperating with
the company.

When we land to this page, This is a section for what all services we provide in lists
we can see normal and after that there is another section for clients where
navigation bar. I put my previous clients as well as it has good.
This section is to leave a message about your problem of the vintage camera with
your details. By offering a standardized method for sending enquiries and making
sure that all relevant information is included, they aid in streamlining
communication.
W3C SERVICE PAGE
4.5 CONTACT PAGE
This page provides a number of contact options, including an email
address, a phone number, a physical location, and a contact form.

This is a message button to

send our enquiry to team. This is a professional look contact page
made used CSS contact page is easy to
This is a background image to look navigate and that all contact methods
more beautiful with a contrast color. are clearly displayed and easy to use...
to make it easy for users to initiate
contact with the business.
W3C CONTACT PAGE REPORT
5 TASK 5- EVALUATION AND REFLECTION
5.1 REVIEW
Overall, I have made my website look more professional and The
content on the website was one of its strengths. The website
provided comprehensive details about each vintage camera,
including its history and specifications. The photographs of the
cameras were likewise great and showed the subtleties of every
camera.

Additionally, the layout of the website was user-friendly and visually

appealing. The format was efficient, making it simple to explore and
track down the ideal data. The site was likewise improved for cell
phones, which is fundamental for contacting a more extensive
crowd.
The website style was also clean and organized, making it user-
friendly and visually appealing. The website provided a simple
mechanism for clients to submit their cameras for repair, and the
information regarding repair services was easy to access. The
website has an appealing and intuitive appearance that is simple to
explore. Although it don’t have a consistent color scheme but it is
well optimized.
5.2 SEARCH ENGINE OPTIMIZATION
I had found that This website was built with the express intention of
incorporating and testing all of the major SEO methods.
The primary goal of this article was to discover whether search
engine optimization improves a website's ranking in search results,
resulting in increased visitors. This research question is backed by
testing and outcomes verification. The final section of our essay
summarizes the research findings and makes further
recommendations. (Zilincan, 2015).
5.3 ADVERTISING

We can also promote through social media and google ads with
targeting customers. There are also other ways such as social
marketing and publishing ads newspaper.
Customers utilizing brands is now of more interest than how they
select them. The writers concentrate on how advertising may most
effectively persuade customers to utilize a seasoned brand in a
novel circumstance.
They create a paradigm for schema congruency that combines
substitution-in-use research with comparison advertising. The
theory contends that while scenario comparison commercials have
no benefit over product comparison advertising in terms of
improving a person's capacity to remember the target brand in the
target situation, they do favorably alter user attitudes. The empirical
analysis conducted by the authors reveals rising brand usage. For
brand managers and researchers, the writers provide
recommendations in their conclusion.
Local exposure might be critical for small businesses who want to
grow their consumer base and have a solid local image. I want to
do so through a variety of means, including local advertising, local
search engine optimization (SEO), local events, and collaborations
with other local companies. (Wansink, 1996).
Businesses may increase their chances of being noticed by
potential customers seeking for products or services in their region
by enhancing their local exposure. Furthermore, it can aid in the
development of a loyal client base within the local community,
resulting in higher word-of-mouth referrals and repeat business.
6 APPENDIX
6.1 SCREENSHOT OF CODES:

HOMEPAGE
ABOUT PAGE
7 Reference
 Zilincan, J., 2015, September. Search engine optimization.
In CBU International Conference Proceedings (Vol. 3, pp.
506-510).

 Wansink, B. and Ray, M.L., 1996. Advertising strategies to

increase usage frequency. Journal of Marketing, 60(1),
pp.31-46.