Web Design Project: Website Design, Development, and Evaluation

This document presents a web design project solution, detailing the development of a website. The project emphasizes the use of HTML, CSS, and JavaScript for creating a functional and visually appealing website. The student discusses the browser compatibility, resolution, and device considerations. The solution highlights the changes made from the initial wireframe to the final website, including modifications to the navigation bar, home page presentation, footer, and various sections like About, Education, Experience, Gallery, and Contact pages. CSS is extensively used for styling, with a focus on flexbox and grid layout for complex layout design. The document also includes a bibliography of relevant sources used in the project, referencing books and research papers on web development, JavaScript visualization, and responsive web design.

Running head: WEB DESIGN
Web Design
Name of the Student
Name of the University
Author’s Note:

1WEB DESIGN
The preferred browser for this website is Google Chrome. Any browser, other than
google chrome, that supports latest js and css features can run the website smoothly. Website
may not perform well in internet explorer because of some ES6 and CSS3 features has been
used. Best resolution to see the website is 1366px*768px. The website is not designed for mobile
devices. That is why the layout of the website will be very bad under 500px of screen width.
However, the website looks good in tablet devices that has higher screen width.
Changes Made at final website are as following.
i. The navigation bar placed logo and menu in different rows. In the final solution,
menu and logo are in same row. The distance between these two elements are
based on gap remaining in navigation bar.
ii. Home page did not present name in such way it could catch visitor’s eyes. In the
final website, name is in different color and font. Therefore, the name, Gyanil
Sunar, is the first thing visitor will see.
iii. Then normal paragraph was provide in wireframe. This paragraph has some
information about myself. In the final website, I have changed the description
presentation. I have used two images to illustrate what I do. Other information are
also available in normal format.
iv. In the footer, I have changed the background color to light green. I have used
three social media icons. Moreover, I added a copyright paragraph to make the
website look more professional.
v. In the about section, headings are horizontally aligned in middle of page and have
some margins between paragraph. But in final website I have aligned the headings

2WEB DESIGN
as well as paragraphs left of website. The margin is also reduced significantly.
The same formatting can be see for education and experience page.
vi. Gallery has two sections in the wireframe. In the wireframe, heading level has
been used for showing the category. In the final solution heading level 1 is used.
The wireframe had three images per row but in actual website I have used two
images per row. Each of these images are within a card. These cards has hover
shadow effect.
vii. The contact page in wireframe did not present a form. The actual website has a
well styled form and an image at right side of the form. This form collects user
input and then validate using JavaScript scripts.
Usage of CSS to meet the requirements can be seen in every page of this website. The
flex and grid styling properties has been used for creating the complex layout of this website1.
Flex is used for handling either row or column positioning of contents within website. The grid
layout is used to handle both row and column at same time. Flex box is used in heading,
navigation bar, menu, index page content, footer. The gird layout is used in gallery page.
1 Jaimez-González, Carlos, and Rodrigo Vargas-Rodríguez. "Editor web visual para HTML, CSS y
JavaScript de apoyo a la docencia." Virtualidad, Educación y Ciencia 8, no. 14 (2017): 136-152.

3WEB DESIGN
Bibliography:
Blanco-Míguez, Aitor, Florentino Fdez-Riverola, Borja Sánchez, and Anália Lourenço.
"BlasterJS: A novel interactive JavaScript visualisation component for BLAST alignment
results." PloS one 13, no. 10 (2018).
Jaimez-González, Carlos, and Rodrigo Vargas-Rodríguez. "Editor web visual para HTML, CSS
y JavaScript de apoyo a la docencia." Virtualidad, Educación y Ciencia 8, no. 14 (2017): 136-
152.
Mardan, A., Mardan, A. and Corrigan, 2018. Full Stack JavaScript. Apress.
Moyeen, M. A., GG Md Nawaz Ali, Peter Han Joo Chong, and Nazmul Islam. "An automatic
layout faults detection technique in responsive web pages considering JavaScript defined
dynamic layouts." In 2016 3rd International Conference on Electrical Engineering and
Information Communication Technology (ICEEICT), pp. 1-5. IEEE, 2016.