ITRACKB1: Web Systems and Technologies: Web Design

CHAPTER 5: Enrichment Exercise 5

Bonifacio,Alberto, Palmejar 11/12/21

BSInfoTech 2A

Modify your website by making it responsive. Submit

screenshots (with captions) of:

 your code that made your website responsive;

 display view of your web pages in various device sizes

such as tablet, phone and desktop computer

(100 pts)

Answer:

In home page, the code that made our website responsive is

setting the viewport because this code will make it displayed in
any devices like, computer, tablet, phone and many more devices.
This code is visible in the screen of the windows. We also code the
viewport in the navigation links in order to have a good look and
also in the process to order.

This is the home page of our proposal

We also use the viewport in the navigation bars and in the process
to order.
Viewport in the process to order.
We intended to insert the viewports in the navigation links also to
make it more responsive. Except from the viewport, we also
added a code that will make the website responsive in any type of
devices which is by inserting media queries that will based on the
devices capability. This media queries will help a lot in the
website to repair or make some things in the device more fixed
than before.
This media queries is used when the display of
the website is 1440px. The background color of
the footer and header will be change in pink if
the website is in the size of computer or laptop
size. We used min-width because the window
browser is more than 600 px.

The media queries in this, is when the website is

having a 840px which is the possible size of
tablet. This will be apply in it. Also in here, we
used a min-width because the browser is more
that 600px as well.

In our last media queries, this will be apply in a

mobile in a phone size. We insert the width of
90px, displaying block and the last is a font size
with 1.0em. The difference here is we used a
max width because the pixel is below 600px.

This screenshots is to display the web pages in various

device sizes such as tablet, phone and desktop computer.

The home page in the desktop computer:

Some of the navigation bars and process to order
navigation bar also in the display of desktop computer:
The second view is the size of tablet.

The home page of the website in the tablet size:

This is the tablet size of some navigation bars and the

process to order navigation bar:
The last one is the the size in phone

This is the homepage in phone size:

This is the phone size of some navigation bar and the
process to order navigation bar;
We intended to show some of the navigation bars because
they have a lot on it. But we promise that all of the output in
the navigation bar are all the same as the size of each
device.