ITECH2003 Assignment 2: Developing a Personal Website

This assignment presents a student's comprehensive website development project for the ITECH2003 course. The project involved creating a personal website from scratch, based on a design document, while avoiding mistakes identified in a competitive analysis. The solution details changes made to the initial design, including the addition of an FAQ link in the footer, modifications to the website layout using absolute positioning for the aside section, and the adoption of a light background and dark text color scheme. The website incorporates modern web development techniques like flexbox and grid layouts for responsiveness. A new image slider was implemented in the gallery section, and the contact form includes an image. The assignment also includes CSS requirements for description modals and a bibliography of relevant resources.

Running head: WEBSITE DEVELOPMENT
Assignment 2: Website Development
Name of the Student
Name of the University
Author’s note:

1ASSIGNMENT 2: WEBSITE DEVELOPMENT
Preferred Browser and Screen Size:
The website is best suited with Mozilla Firefox. Two of the personal images has some
data attributes that is forcing chrome browser to rotate the images. In Firefox this issues cannot
be seen. The website is not designed for Safari. Other than this there are no issues in opening
website in chrome. As the website is built using Grid layout, the home and about pages does not
match in Firefox and Chrome.
Website will look best in screen size equal or greater than 1280px*800px. Any screen
size that has less than 800 of width does not show the website properly. The best user interface
experience ca be seen in 1366px*768px screen size. This decision is made because 35% of time,
websites are opened in this screen size.
Changes Made:
i. The first change made in the design is adding additional link in the footer. This
link is FAQ. This is done because user may need to visit FAQ page from
anywhere in the website.
ii. Second change is in the layout the website. As the design document at design
process indicated, aside section containing social media links will hold left side of
the website. In this modified version, the aside is made ‘absolute’ so that main
body can contain entire width of the website. The aside is positioned vertically in
middle and horizontally just slightly left to website beginning. This is done to
create a good website layout without worrying about aside’s position.

2ASSIGNMENT 2: WEBSITE DEVELOPMENT
iii. Third thing changed in the website is color combination. The initial design
document indicated use of vibrant colors. Instead, in the modified version, light
background and dark text combination has been used.
iv. Next change is in internal layout of website. The website now uses more powerful
and effective flex-box and grid layout approaches. This is because, in future
website may needed to be responsive. These two approaches provide very
efficient ways to convert the desktop suitable layout to mobile responsive layout
with fewer lines of code.
v. The next change is in the gallery section. In this section, a new image slider has
been implemented. If any of the images are clicked then these images appear in
bigger sizes and then slider activates. This is done to make the user interface
nicer.
vi. Next change can be seen in the contact form. The contact form has an image at
the right side. This is done to include a media in the form.
CSS Requirements:
The css requirements has been put into menu and recipe pages to show the description.
The description modal has fixed position property. Once, the see description is clicked,
description modal of same item openes because CSS adds a new class that has display as flex.
Once, close button is clicked the class is removed and display flex is converted into display none.

3ASSIGNMENT 2: WEBSITE DEVELOPMENT
Bibliography:
Jaimez-González, C. and Vargas-Rodríguez, R., 2017. Editor web visual para HTML, CSS y
JavaScript de apoyo a la docencia. Virtualidad, Educación y Ciencia, 8(14), pp.136-152.
Moyeen, M.A., Ali, G.M.N., Chong, P.H.J. and Islam, N., 2016, September. 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.