ASSIGNMENT

Client-Side Customization of Web Pages

BY PAN THU
LEVEL – 3 BATCH – 11
 PAN THU (LEVEL – 3 BATCH – 11)

Contents
P1 - How HTML files access CSS &.................................................................................................. 2
M1 - Assessing different implementation styles of CSS ............................................................... 2
P2 - The features of the box model for CSS .................................................................................... 7
P3 – The fundamentals of a scripting language ............................................................................. 8
M2 - How a scripting language can improve functionality ........................................................ 11
D1 – How web pages using scripts are implemented in different browsers ........................... 13
P4 – Designing a Web Page using Wire Frame Tools ................................................................. 15
M3 - Good practice in the design and implementation of web pages. ..................................... 17
P6 – Testing and Documenting the Webpages ............................................................................. 19
D2 - Evaluating the web pages and discussing improvements ................................................. 31
Reference Websites ........................................................................................................................... 40

1|Page
 PAN THU (LEVEL – 3 BATCH – 11)

P1 - How HTML files access CSS &

M1 - Assessing different implementation styles of CSS

What is HTML?
HTML (stands for Hypertext Markup Language) is a computer language that
makes up most web pages and online applications. A markup language is a set of
markings that inform web servers of the style and structure of a document,
whereas a hypertext is a text that is used to reference other texts.
Files with the.html or.htm extension are HTML documents. Internet users
can examine the content of an HTML file by reading the file in a web browser and
rendering it.

How HTML works

HTML elements are a set of tags and attributes that are present in every
HTML page. The building components of a web page are HTML elements. While an
attribute describes an element's properties, a tag instructs the web browser where
an element starts and stops.
An element is made up of three major aspects:
Opening tag – used to state where an element starts to take effect. The tag is
wrapped with opening and closing angle brackets.
Content – this is the output that other users see.
Closing tag – the same as the opening tag, but with a forward slash before the
element name.
The combination of these three parts will create an HTML element.
The attribute of an HTML element, which consists of two parts (an attribute
name and an attribute value), is another essential part. The name defines the
extra details a user wants to include, while the attribute value provides more
details.

What is CSS?
CSS is what’s called a Cascading Style Sheet language, and is used to stylize
elements written in a markup language such as HTML. It separates the website's
visual design from its content.

2|Page
 PAN THU (LEVEL – 3 BATCH – 11)

HTML and CSS are intimately related to one another. They support each
other because HTML is a markup language (the basis of a website) and CSS
emphasizes style (all of the aesthetics of a website). Although CSS is not entirely
necessary, you probably wouldn't want to visit a site that solely uses HTML
because it would appear quite basic.

How CSS works

CSS has a straightforward English-based syntax that is based on a set of
rules. HTML was never meant to use style elements, just the markup of the page.
Its sole purpose was to describe the content.
The CSS syntax is rather straightforward. It has a declaration block and a
selector. You select an element and then declare what you want to do with it.
However, there are rules you must remember. The HTML element you want to
style is indicated by the selector. One or more declarations are contained in the
declaration block and are separated by semicolons. Each declaration includes a
CSS property name and a value, separated by a colon. A CSS declaration always
ends with a semicolon, and declaration blocks are surrounded by curly braces.

How HTML access CSS

Together, HTML and CSS are used to create webpages. HTML should only
be used for a website's structure because it informs browsers of which sections
are headings and which sections are content. CSS is used to style webpages and
tells the browser how HTML elements should look (for example the font size and
color) and where they should be positioned on the webpage.
There are 3 main ways of linking CSS to HTML:
Inline
Internal
External

Inline Style
A CSS implementation style called inline style is used in the HTML section
of the code. This implementation style is stated in the code's tags, however it can
be used with any type of code. This style must be entered manually by the
developer into the HTML section of the code because it cannot be created using

3|Page
 PAN THU (LEVEL – 3 BATCH – 11)

the style builder. If this style is needed elsewhere, it will need to be created again
because it can only be used for that particular part of the web page where it has
been used. When utilized, the inline style takes priority over the external and
embedded CSS implementation styles.
Advantages of Inline styles are –
It can be used in testing of the webpage because it is only functional on the
implemented code and won’t affect the other codes.
It is very easy and fast to add and edit.
Developers can easily find out the errors because it is short.
It reduces webpage loading time because it doesn’t need any extra files.
Disadvantages of Inline styles are –
It is harder to maintain and more work for the developer, especially when it
comes to it being utilized within a big project.
It cannot be used to style pseudo-elements and classed.
It could override certain part of the element which was not meant to be styled

4|Page
 PAN THU (LEVEL – 3 BATCH – 11)

Internal Style
Another CSS implementation style, known as internal style, is essentially a
style that is written at the top of the code file. This internal style then styles all of
the tags included in the page where the internal style was included in. Internal
styles specify each and every style for the entire webpage at the head of the page.
Advantages of Internal style –
The styles only have to be declared once.
It can style the hover color unlike the Inline style.
The contents of the tags can be styled without the developer having to add the
style to each HTML element.
Disadvantages of Internal style –
It will take longer to load up compared to inline style.
Using this style will mean that this will have to be written on every page
created.

5|Page
 PAN THU (LEVEL – 3 BATCH – 11)

External Style
Similar to internal style sheets, external style sheets function similarly. The
number of CSS styles that need to be replicated is decreased because each
individual style will be applied to any HTML tags that it applies to. The rules,
however, are written in a separate.css file rather than in the header of the
webpages. With this approach, the developer can modify just one file to alter the
entire website. If the website contains multiple webpages, this works by making
use of the CSS style file.
Advantages of External Style –
Using external CSS enables the developer to have full control of the structure
of the page
It can be reused on other HTML files.
Much lesser loading time because of the smaller file size
Disadvantages of External Style –
The download time is much longer, this is because this type of CSS is in a
separate file which means that the browser will have to request access from
the web server to get the CSS file
It won’t appropriate for small projects.

6|Page
 PAN THU (LEVEL – 3 BATCH – 11)

P2 - The features of the box model for CSS

Each element in a document is displayed by the rendering engine of the

browser as a rectangular box in accordance with the fundamental box model of
CSS. These boxes' sizes, positions, and other characteristics (such color,
background, border size, etc.) are controlled by CSS.
The content, padding, border, and margin are the four components (or
areas) that make up each box and define them.

Content
The "actual" content of the element, such as text, an image, or a video
player, is located in the content area, which is surrounded by the content edge.
The content width (or content-box width) and the content height (or content-box
height) make up its measurements. It frequently features a background color or
picture.
The width, min-width, max-width, height, and min-height values allow the
content area's size to be specifically specified when the box-sizing property is set
to content-box (the default) and the element is a block element.

Padding
The padding extends the content area into the area enclosed by the padding
area, which is bounded by the padding edge. The padding-box height and width
make up its measurements.

7|Page
 PAN THU (LEVEL – 3 BATCH – 11)

The padding-top, padding-right, padding-bottom, padding-left, and

shorthand padding attributes all affect how thick the padding is.

Border
The padding area is extended to include the borders of the element by the
border area, which is bounded by the border edge. The border-box height and
width make up its measurements.
The border-width and shorthand border attributes control the border's
thickness. The width, min-width, max-width, height, and min-height properties
can be used to specifically determine the border area's size if the box-sizing
property is set to border-box. The border's outside edge is where the backdrop
(background-color or background-image) of a box extends (i.e. extends
underneath the border in z-ordering). With the background-clip CSS property, this
default behavior can be changed.

Margin
The border area is extended by the margin area, which is bounded by the
margin edge, to include a blank space intended to set the element apart from its
neighbors. The margin-box height and width make up its dimensions.
The margin-top, margin-right, margin-bottom, margin-left, and shorthand
margin attributes all affect how big the margin area is. Since margins are shared
between boxes when margin collapse happens, the margin area is not clearly
defined.

P3 – The fundamentals of a scripting language

A tool for adding functionality to other software is a scripting language. PHP,

JavaScript, Python, and other programming languages use scripting languages.
Scripting languages are intended to be used to create simple tasks. One simple
example would be to enter a product name or number into a search bar to have
the website display goods that are related, like computers. Interactivity is now
utilized on most websites, and it is referred to as user side since the user

8|Page
 PAN THU (LEVEL – 3 BATCH – 11)

commands the computer to find the product they are looking for while the
computer displays the results.
Static websites are only used for displaying fixed information; if it is
changed, the designer must update the code and upload the modified webpage
again to the web server. These types of websites are an old outdated method and
are rarely used in modern design because they take a lot of time to create.
Instead, modern users prefer dynamic websites since they can be easily updated
and usually include scripting languages or databases.

Types of Script
Client-Side Script: Client-side scripting is the process of executing scripts on
the client device, typically inside of a browser, such as JavaScript. Because
JavaScript is widely supported, any type of script may be written in JavaScript
and run on the client side. In order to use other scripting languages, the user's
browser must support them.

Server-Side Script: In order to send dynamic content to webpages in response

to user activities, server-side scripts frequently run on the server rather than
the client. Since a variety of languages may be supported by the server, server-
side scripts are not required to be written in JavaScript.

JavaScript
Many of the features of a programming language are present in JavaScript,
which is referred to as a scripting language. JavaScript includes a wide range of
programming tools, including loops, if statements, functions, and procedures.
Without the ability to use functions and sub procedures, JavaScript cannot be used
effectively. JavaScript is a client-side scripting language that is frequently used on
Web pages to show messages, drop-down menus, and other user interface
components as well as for diverse user experiences and interactivity on the
website. Online forms are a common way for websites to collect user information,
and JavaScript can help check entries.

9|Page
 PAN THU (LEVEL – 3 BATCH – 11)

Features and Functions of JavaScript

Variable: A variable is a something where values can be assigned. It can be
declared using ‘Var’ to a word or a number.

If statement: Developer use this statement to execute some code only if a

specified condition is true.

If else statement: Developer use this statement to execute some code if the
condition is true and another code, if the condition is false.

Arithmetic Operator: Arithmetic operators are used to assign values to

JavaScript variables. The JavaScript arithmetic operator (=) is used to assign
the value of the right operand as the new value of the left operand.

Loop: A loop is a code which is executed over and over again until it fulfills a
preset criterion.

For Loop: As an example, for loop will be executed while count is less than or
equal to five. Once count equals six, the loop will be excited and go on the next
statement.

While Loop: The while loop are used to repeat a block of code as long as a
specified condition is true.

Do While Loop: The do while loop is a variant of the while loop. This loop will
execute the code once, before checking if the condition is true, then it will
repeat the loop as long as the condition is true.

10 | P a g e
 PAN THU (LEVEL – 3 BATCH – 11)

M2 - How a scripting language can improve functionality

Scripting languages are typically used by developers to enhance the

functionality of websites and are typically related with HTML content. In order to
maximize a website's overall usefulness, scripting languages like CSS, JavaScript,
and jQuery are typically incorporated throughout the development of the site. This
can improve the site's accessibility and readability. Due of this, I will be explaining
how a scripting language might enhance a website's functionality.

Confirming Choices and User Prompting

JavaScript can be used to ask a user whether they are sure they want to
take a certain action. A user may have accidentally clicked a button on the
webpage, the website can then ask the user if they are sure they want to do this
before carrying on with the action. This is helpful for any buttons that could delete
information from a database where, in the event that a user accidentally hit delete,
the information would be permanently deleted. JavaScript confirmation boxes
prevent a webpage from loading and progressing normally; this feature is helpful
in security situations like online banking. This is due to the fact that the user
cannot move further on the webpage without first interacting with the confirmation
prompt.

Redirecting Users
JavaScript can be used to redirect a user to another website or webpage.
For a variety of reasons, this can enhance a website's functionality. Firstly, if your
website is not responsive, you risk having two versions of it—one for desktop users
and one for mobile users. Then you could refer everyone accessing your website
via a phone to a version of the site that is optimized for mobile devices. Because
the user has a better experience than they would if they were to use the desktop
version on a mobile device, this increases the site's functionality. You might also
decide to modify your website's URL (E.g. moving from .co.uk to .com if you
became a global business). Then, you can redirect users to your new website using
JavaScript.

11 | P a g e
 PAN THU (LEVEL – 3 BATCH – 11)

Checking/Validating Inputs
You can also use scripting languages like JavaScript to determine whether
the data entered into a form is in a valid format. When compared to server side
validation, this provides a few benefits. Firstly the user gets a much quicker
response to any validation errors, this is because the browser is able to validate
inputs in real time whereas a server would need to collect the inputs from the
client machine, process these to make sure they are valid and then return a result
to the user. Because they are receiving form responses more quickly, users will
have a better user experience.
The owner of the website can also benefit from client side validation since
fewer invalid forms are sent to the server as errors are captured by the client
before submitting. Due to the server not having to receive and deliver this data,
bandwidth is saved (and thus money). The server must handle less data as a
result of fewer submissions of invalid forms, which is another benefit of fewer
submissions overall. This is because only valid information should be getting
through to the server. Users will benefit from this as the server will be able to
reply to requests more quickly.

Form Handling
JavaScript can be used to improve forms on websites. First, real-time
calculations can be performed using scripting languages. Users may find this to
be quite advantageous when, for instance, filling out an online order form. This is
so that the user can see how adding extras to their purchase will affect the price.
The cost of the order can be calculated as the user selects options for their order
and then given to the user.
If a user makes a mistake, they can easily restart a form again by using
JavaScript to rapidly reset it to its default state. The user is spared the time of
having to go through the process of deleting what they have entered. A form can
also be submitted using JavaScript to the action page. This means that after user
input has been verified, the form data may be sent to another file to do additional
tasks. The website now has more functionality because an additional action can
be started using JavaScript.

12 | P a g e
 PAN THU (LEVEL – 3 BATCH – 11)

Maintaining Cookies
Cookies can be created on a client's devices using scripting languages.
Cookies are little text files that a user stores on their device and can utilize for a
number of different things. The information kept in a cookie can then be retrieved
and used later using JavaScript. For instance, a multilingual website might ask
about the user's preferred language. The server can obtain the cookie and
translate the webpage automatically the next time the user visits the website by
storing this option in a cookie. This is a more functional solution for the user as it
means they don’t need to specify their language each time they use the website.
Additionally, cookies can be used to save any accessibility preferences that a user
has specified, such as high contrast color schemes or bigger letter sizes. This again
improves functionality because it makes it simpler for people to navigate the
website who use accessibility settings. This is due to the fact that accessibility
settings do not need to be configured every time a user accesses a website.

D1 – How web pages using scripts are implemented in

different browsers

When we examine how specific browsers support JavaScript and other

scripting languages, we must keep in mind that these developments did not occur
overnight. Browsers like Internet Explorer, Google Chrome, and Mozilla Firefox
have all been growing and improving alongside the web standard since the early
days of HTML and JavaScript, and they have all chosen different paths in terms of
design and functionality.
The way certain elements of JavaScript is displayed is not always going to
be the same for every browser, as every different browser would have their own
take on how to run the code which means that when running the code of different
browsers you would always get something looking different. Because of this, it is
usually a good idea to test your coding on all major browsers in order to get a
close match for each website so that users of various browsers will essentially
have the same experience.

13 | P a g e
 PAN THU (LEVEL – 3 BATCH – 11)

Browser Detection
The browser detection code is the most prominent example of a section of
code that behaves differently based on the browser you are using. This is because
the string that it returns will differ depending on the browser you are using to run
the script in.
The following screenshots demonstrate how each browser handles (and
styles) the alert box differently. I could move the alert box around in Chrome and
Internet Explorer, but in Firefox, the webpage was grayed out and I was unable
to do so. It became considerably more obvious as a result.
To determine which JavaScript features a specific browser can handle, use
browser detection. For instance, some of the more outdated browsers, such
Firefox 3, do not support the most recent JavaScript features. Therefore, if this
browser check indicates that Firefox 3 is being used, a developer will be aware not
to attempt to use these features. This means that while the website is still
compatible with older browsers, newer browsers benefit from the extra features
offered by JavaScript.

14 | P a g e
 PAN THU (LEVEL – 3 BATCH – 11)

Object Detection
Using object detection is another way to determine which JavaScript
features are accessible in the current browser. This determines whether the object
required to execute a specific function is present. For instance, the JavaScript
random function depends on the Math class. Before attempting to use any code
that depends on the class, this piece of code will first check to see if it is present.
Since a feature might not work with all browsers, this approach of feature
detection is preferable to just looking for the name of the browser. Before using a
JavaScript function, you can use object detection and perform just one check. It
would take longer to perform and complete a check for each incompatible browser
if you used browser detection.

P4 – Designing a Web Page using Wire Frame Tools

The following are the screenshots for the pre-design of the Book Warehouse
website I created.

Home Page

15 | P a g e
 PAN THU (LEVEL – 3 BATCH – 11)

Product Page

Register Form Page

16 | P a g e
 PAN THU (LEVEL – 3 BATCH – 11)

Item Description Page

M3 - Good practice in the design and implementation of web

pages.

Clean Design
One of the most essential considerations when building a website is to
create a simple, eye-catching design. A good design is visually appealing, simple
to understand, and easy to navigate. Above all, visitors can concentrate on the
value of your brand and content with a clean design because they won't be
distracted by flashy visuals or dense amounts of text. Customers usually relate
the quality of a business or product with the appearance of its website. Therefore,
having a clean design is essential to offering a satisfying user experience that
motivates users to attract.

Functionality
When it comes to functionality, there are a few factors to consider. In other
words, does the website actually work as intended? There are any loading issues

17 | P a g e
 PAN THU (LEVEL – 3 BATCH – 11)

or broken links? Do the site's security measures meet the needs of your business?
In addition to these operational issues, it's crucial to think about the features of
your website from the perspective of the user. Are the parts on your website for
customer feedback, surveys, and contact forms functional? A customer may quit
your site due to one or more of these functional issues.

Navigation
If visitors find your website difficult to use and unclear, they might leave
and never come back. To increase the effectiveness and appeal of your site's
navigation, carefully analyze it from the perspective of a brand-new visitor. Keep
track of the navigational streams that make sense and those that don't. One
approach to make it simpler for people to browse your website is by include a site
map. Additionally, enhancing the functionality of your brand's online presence by
streamlining navigation and eliminating ineffective or unnecessary pages may
shorten loading times.

Compatibility with Multiple Browsers

The number of internet browsers is continually increasing as technology
advances. From Firefox and Safari to Internet Explorer and Chrome, keeping up
with them all is challenging. It's critical to ensure a website is accessible from a
number of browsers while developing it. Particularly, your website should function
properly across all popular browsers, even earlier versions. Failing to take this
step may exclude a large section of your customer base, which can be a costly
consequence for a growing business.

Commenting
The use of commenting is essential especially in the case that another
person is trying to understand the code that you have created. What it is means
by commenting is that in some particular area of the code, you used some steps
that is quite confusing. Then you can leave comments to explain that you’ve done.
By applying ctrl+/ to that sentences you can created comments. By that way,
comments can make programmers more easier to understand the codes and make
the code more error free.

18 | P a g e
 PAN THU (LEVEL – 3 BATCH – 11)

Cammel Casing
Camel casing is the way of naming in programming. Most programmers use
camel casing to make it simpler and easier to read and comprehend the codes.
How camel casing is written is that the initial letter of each concatenated word is
capitalized, and the first letter of the identifier is lowercase. For examples,
tableLayout and imgStyle are the names that are written in camel casing. There
is no concerns or errors for the code since it is up to the user to use it or not. But
one thing that is for sure is that camel casing will make programming more easier.

Indentation
Indentation is a method of coding that programmers use to make the
structure of the codes more simpler and readability. The relationship between
control flow elements like selection statements or loops and the code inside and
outside of them is best represented by indentation. As indentation is automatically
performed in IDEs, it is not very difficult to follow this rule.

Color Coding
The same as indentation, IDEs will automatically color-code programs while
they are being developed. Green, which is used for comments, Blue which is used
for phrases like if else, loops, and functions and red which is used for user
input/output, are the most often used colors in IDEs like Visual Studio. By doing
so, the readers will understand the uses of the code and which part of the code
performs what function with just a glance.

P6 – Testing and Documenting the Webpages

Test Test Item Expected Output Actual Output Pass/Fail Notes

No.
1. Website logo Click the logo and it Click the logo and it Pass
goes to “index.html” goes to “index.html”
2. Home Click the home Click the home Pass
heading text heading text and it heading text and it
goes to “index.html” goes to “index.html”

19 | P a g e
 PAN THU (LEVEL – 3 BATCH – 11)

3. Product Click the product Click the home Pass

heading text heading text and it heading text and it
goes to goes to
“product(all).html” “product(all).html”
4. Register Click the register Click the register Pass
heading text heading text and it heading text and it
goes to goes to
“registerform.html” “registerform.html”
5. Item Click the item Click the item Fail Haven’t link
description description table and description table but the tables
table it goes to respective it doesn’t go with their
item description anywhere respective
page pages
6. Website Click the Email or Click the Email or Pass
Email and phone number and it phone number and it
phone goes to its respective goes to its respective
number platform platform
7. Facebook, Click the logo and it Click the logo and it Pass
Instagram, goes to its respective goes to its respective
Twitter logo website website
8. Category Click the category Click the category Pass
types types and its go to types and its go to
its respective pages its respective pages
9. Search bar Type in the search Type in the search Fail Haven’t add
and search bar and click search bar and click the JavaScript
button button to find the search button, but code to find
item can’t find the item the item
10. Sign up Click sign up button Click sign up button Fail Haven’t add
button and submit the but it doesn't submit JavaScript
user’s info the user’s info code to
submit
user’s info
11. Cancel button Click cancel button Click cancel button Fail Haven’t add
and remove user’s but it doesn’t remove JavaScript
info user’s info code to
remove
user’s info
12. Heading text On hover, heading On hover, heading Pass
links text links change text links change
color color

20 | P a g e
 PAN THU (LEVEL – 3 BATCH – 11)

13. Item On hover, item On hover, item Pass

description description tables description tables
tables change shape change shape
14. Buttons On hover, buttons On hover, buttons Pass
change shape and change shape and
color color
15. Extra images On click, the main On click, the main Fail Haven’t add
item description item description JavaScript
image change image does not code to
change perform
this task
16. Sign out On click, return to On click, doesn’t Fail Haven’t add
button the sign up state return to sign up JavaScript
state code to
perform
this task

21 | P a g e
 PAN THU (LEVEL – 3 BATCH – 11)

Screenshots
For Test No. 1

22 | P a g e
 PAN THU (LEVEL – 3 BATCH – 11)

For Test No.2

For Test No.3

23 | P a g e
 PAN THU (LEVEL – 3 BATCH – 11)

For Test No.4

24 | P a g e
 PAN THU (LEVEL – 3 BATCH – 11)

For Test No.5

For Test No.6

25 | P a g e
 PAN THU (LEVEL – 3 BATCH – 11)

For Test No.7

For Test No.8

26 | P a g e
 PAN THU (LEVEL – 3 BATCH – 11)

For Test No.9

For Test No.10

For Test No.11

27 | P a g e
 PAN THU (LEVEL – 3 BATCH – 11)

For Test No.12

For Test No.13

28 | P a g e
 PAN THU (LEVEL – 3 BATCH – 11)

For Test No.14

29 | P a g e
 PAN THU (LEVEL – 3 BATCH – 11)

For Test No.15

For Test No.16

30 | P a g e
 PAN THU (LEVEL – 3 BATCH – 11)

D2 - Evaluating the web pages and discussing improvements

The following are the improvements and changes I have made according to
the user feedback.

1. Linking item description pages with each item

I linked the item description pages of each item to their respective item
tables from Home page and Products page. So, every time user click on a item
table, it will lead to its respective item description page where user can see more
information about the item, add the item to cart or buy the item.

31 | P a g e
 PAN THU (LEVEL – 3 BATCH – 11)

2. Adding JavaScript for sign up button

I added JavaScript code to perform task for sign up button. Now, user can
fill the data and click sign up button. Then the user information form will appear
with the data user inputted.

32 | P a g e
 PAN THU (LEVEL – 3 BATCH – 11)

3. Making cancel button usable

I made cancel button to be able to use using HTML elements. After users
has inputted the data in the sign up form and they made a mistake and restart
the form, they can click cancel button to remove all the data instead of deleting
manually.

4. Adding JavaScript code for sign out button

I added JavaScript code to perform task for sign out button. Now that, after
users sign up and gets to the user information form, they can click sign out button
to return to the sign up form and sign up again.

33 | P a g e
 PAN THU (LEVEL – 3 BATCH – 11)

5. Adding JavaScript code to display extra item images

I added JavaScript code to display extra image in item description pages. If
user clicks on any of the available extra item image, the main item image will
change into the extra image user clicked.

34 | P a g e
 PAN THU (LEVEL – 3 BATCH – 11)

35 | P a g e
 PAN THU (LEVEL – 3 BATCH – 11)

6. Adding placeholder in EXP date in sign up form

I added placeholder in Exp date as mm/yy in sign up form so that users can
understand that their date must be in that order, month and year.

7. Making item name and price more visible

I changed the font and color of the item name and price so that it will be
more stand out and visible for the users.

36 | P a g e
 PAN THU (LEVEL – 3 BATCH – 11)

Good Points
The following are the good points of my website I created.

1. Can go to the item information page by clicking item table

If user want to see more information about item such as price, description
etc., they can click item table on every page and go to item description page.

37 | P a g e
 PAN THU (LEVEL – 3 BATCH – 11)

2. High Navigation
Users can go to any place as they like since there are too many links in all
of the pages.

3. Functioning Sign up and sign out button

User can sign up and sign out function with no problems.

38 | P a g e
 PAN THU (LEVEL – 3 BATCH – 11)

Bad Points
The following are the bad points of my website I created.

1. Not working buy and add to cart button

Unfortunately, buy button isn’t working because this not a real website
which sell goods. But I can make add to cart button works by adding some
JavaScript code.

2. Not working search bar and search button

The search button in product pages are not functional. And I don’t know
how to make it possible to function at my current level.

39 | P a g e
 PAN THU (LEVEL – 3 BATCH – 11)

Reference Websites

https://www.theserverside.com/definition/HTML-Hypertext-Markup-Language
https://skillcrush.com/blog/css/
https://www.hostinger.com/tutorials/website/how-to-link-a-stylesheet-css-file-to-your-html-file
https://developer.mozilla.org/en-
US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model
https://prezi.com/y9tcche-nqao/the-fundamentals-of-scripting-
language/#:~:text=Scripting%20languages%20like%20python%20and,user%20and%20computer
%20much%20shorter.&text=Operators%20are%20used%20to%20value,formula%20set%20by%
20the%20variables.
https://blog.hubspot.com/blog/tabid/6307/bid/30557/6-guidelines-for-exceptional-website-
design-and-usability.aspx
https://tillerdigital.com/blog/12-web-design-best-practices-for-2022/

40 | P a g e