Dynamic Websites 15 Credit Project - Spring/Winter 2020

This assignment solution showcases a Dynamic Websites project, encompassing both front-end and back-end development. The student demonstrates proficiency in using video backgrounds, flexbox, and grid layouts for design. The back-end utilizes PHP and MySQL, including login attempt checks and form handling with cookies. The project emphasizes mobile-friendly design, focusing on low-sized media and optimized layouts. JavaScript is implemented for interactive elements, such as FAQ popups. The student reflects on challenges faced during development, including video auto-play issues, contact and FAQ form design, and login attempt implementation. The solution highlights the benefits of responsive layout and provides a detailed bibliography. The project covers various aspects of web development, providing valuable insights into building dynamic and user-friendly websites.

Running head: DYNAMIC WEBSITES
Dynamic Websites
Name of the Student
Name of the University
Author’s note

1DYNAMIC WEBSITES
Part 1:
There were many things to learn in this assignment. The project included extensive work
on both front end and back end. First thing that I learned is using a video as background. I set the
video on loop and turned auto play on. All the layouts are created using wither flexbox or gird
layout. Therefore, I had to learn how these layouts work and how to apply in a real world project.
I also learned about using MySQL within PHP backed language. In a section of PHP I have used
function to check login attempt. I had to learn about that. I gained more knowledge about how
forms work and how to use cookies in PHP while creating this project.
Part 2:
Two important things are to be remembered when creating a mobile friendly website,
these are low sized media and layout. As mobile devices has lesser screen sizes, utilizing the
most of space is very important. In addition, it was important to make sure every text and image
is visible. The navigation in this website can be enhanced by using a hamburger menu. The
images can be compressed to make sure website loads quickly in mobile phones. Most of phones
work on internet service provided by cellular companies. Internet speed is lesser than broadband
service. That is why reducing the load is essential in mobile responsive websites.
Part 3:
I found both the frontend and backend development challenging. Creating the video
banner was specially challenging in initial frontend works. The video was not auto playing
through it was configured properly. The next thing I felt challenging was designing the contact
form and faq form. As the requirement was to make the faq section pop up when contact is
submitted, the underlying concept was if customer did not find required information with faq

2DYNAMIC WEBSITES
then only form will be submitted. Next frontend challenge I faced was in creating the account
page. I was facing issues when applied same approach as contact page. The issues was I placed
both the update and change password containers within a single form. As only one form would
be submitted, the other one was empty and preventing the form to be submitted. In terms of
backend, I faced issues in implementing the login attempt process. I did not know about how to
apply cookies in PHP.
Part 4:
I chose responsive layout because it is very flexible. I could easily adjust the layout of the
website just by changing some code. I used css flex and gird layout to create the website.
Adaptive layout is not capable of handling these two layout properly.
Part 5:
In order to handle the faq popup, I used JavaScript. The JavaScript code made sure that
after I click on submit in contact form and faq model popups. Only if I click on No button then
only contact form will be submitted. If I mention I have found required information the contact
form will be resettled.

3DYNAMIC WEBSITES
Bibliography:
Alawar, M.W. and Naser, S.S.A., 2017. CSS-Tutor: An intelligent tutoring system for CSS and
HTML.
Budd, A., Bjorklund, E. and Bjorklund, E., 2016. CSS mastery. Berkeley: Apress.
Mardan, A., Mardan, A. and Corrigan, 2018. Full Stack JavaScript. Apress.
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.