NCC KAUNGSINTHANT 00185277 DDW Assignment

Module Title : Designing and Developing a Website
Assignment Title : Rambling
Examination Cycle : Autumn 2020
Candidate Name : KAUNG SIN THANT
Candidate No : 00185277
Centre Name : KMD COMPUTER CENTRE (YANGON)
Submission Date : 30 July 2020
Important Notes :
 Please refer to the Assignment Presentation Requirements for advice on how to set out your
assignment. These can be found on the NCC Education Campus. Scroll down the left-hand side
of the screen until you reach Personal Support. Click on this, and then on Policies and Advice.
You will find the Assignment Presentation Requirements under the Advice section
 You must familiarise yourself with the NCC Education Academic Dishonesty and Plagiarism
Policy and ensure that you acknowledge all the sources which you use in your work. The policy
is available on Campus. Follow the instructions above, but click on Policies rather than Advice.
 You must complete the ‘Statement and Confirmation of Own Work’. The form is available on
the Policies section of Campus. Scroll down the left-hand side until you reach Personal Support.
Click on this and then click on Policies and Advice.
 Please make a note of the recommended word count. You could lose marks if you write
10%more or less than this.
 You must submit a paper copy and digital copy (on disk or similarly acceptable medium). Media
containing viruses, or media which cannot be run directly, will result in a fail grade being
awarded for this module.
 All electronic media will be checked for plagiarism.
Statement and Confirmation of Own Work
Programme/Qualification name: L4DC

All NCC Education assessed assignments submitted by students must have this
statement as the cover page or it will not be accepted for marking. Please ensure that
this statement is either firmly attached to the cover of the assignment or electronically
inserted into the front of the assignment.
Student declaration
I have read and understood NCC Education’s Policy on Academic Dishonesty and
Plagiarism.
I can confirm the following details.
Student ID/Registration number : 00185277
Name : KAUNG SIN THANT
Centre Name : KMD COMPUTER CENTRE (YANGON)
Module Name : Designing and developing a website
Module Leader : AYE AYE KYAW
Number of words : () words
I confirm that this is my own work and that I have not plagiarised any part of it. I have
also noted the assessment criteria and pass mark for assignments.
Due Date : 30-July-2020
Student Signature : Thant

Submission Date : 30-July-2020
Table of Contents
INTRODUCTION.............................................................................................................................................. 4
TASK 1 (HTML)................................................................................................................................................ 4
PAGES................................................................................................................................................................. 4
PAGE FOR DESKTOP SIZE IN GOOGLE CHROME....................................................................................4
PAGES FOR DESKTOP SIZE ON MICROSOFT EDGE..............................................................................13
PAGES FOR MOBILE VIEW......................................................................................................................... 16
TASK 2(CSS)....................................................................................................................................................... 32
TASK 3 (TEST THE WEBSITE AND WRITE A TEST REPORT)....................................................................................65
PROBLEMS WHILE TESTING AND RECOMMENDATION FOR FIXING THEM.................................................................................65

W3C VALIDATION TESTING...........................................................................................................................................65
TASK 4 (CRITICAL EVALUATION).............................................................................................................. 67
4.1TWO ACCESSIBILITY FEATURES......................................................................................................................67

4.2 THE ADVANTAGES AND DISADVANTAGES OF USING AT LEAST TWO DIFFERENT TYPES OF MULTIMEDIA FILE
FORMATS............................................................................................................................................................... 68
4.3ADVANTAGE AND DISADVANTAGES OF USING USER-CENTERED WEB DESIGN...............................................68
4.4ADVANTAGE AND DISADVANTAGES OF DEDICATED WEB HOSTING.................................................................69
4.5HOW THE WEBSITE IS DESIGNED TO SUPPORT MOBILE USERS......................................................................69
4.6RECOMMENDED IMPROVEMENTS FOR FURTHER DEVELOPMENT OF WEBSITE...............................................70
REFERENCES...................................................................................................................................................... 71
Introduction
Task 1 (HTML)
Following figures and descriptions are just giving easy access to the confirmation of all
the criteria met.
Pages
Page for desktop size in google Chrome.
1. HOME PAGE
Figure 1 home-page-1
Figure 2 Home-page-2
This page is home page of a LK Rambling clubs. It show the information about rambling club
and there is a Include Call to Action (CTA) to register to make register.
2. Blog Page
Figure 3 Bolg-page1
Figure 4 Blog-page2
The blog is sharing stories and experiences about what makes LK’s journey. And there are read
more button on each blog. It also have CTA button to the register tab to make registration.
Figure 5 Sampleblog-firstpage
Figure 6 Sampleblog-lastpage
If you want to read blog, clicks read more. If click on read more, this take another page where is
a blog.
3. Register Page
Figure 7 Register-only_one_page
Figure (8)
In register page there is a registration form to register a new member of LK rambling and
walking club. There is no CTA button.
4. About Page
Figure 9 About-page-1
Figure 10 About-page-2
In about page, it show the milestones of LK club and information about LK club. There also have
CTA button to make registration.
5. Q&A Page
Figure 11 Q&A-page1
Figure 12 Q&A-page-2
In Q&A page there also CTA button to make register for new member, with popular questions
and answers for the LK club.
6. Booking Page
Figure 13 Booking-page-1
Figure 14 Booking-page-2
In booking page, customer can contact LK club to make a walk clicking contact button. And
there also have CTA button for register page. There is a search bar to search program.
7.Current Program Page

Figure 15 Current-page-1
Figure 16 Current-page-2
The current page show the current information of the club and visitor can view current activity
and Up- coming program. There also have CTA button for register page. And Subscribe
Newsletter form and other website link are also show in current program page.
Pages for desktop size on Microsoft edge
1. Home page
Figure 17 home-page-Microsoft
2. Blog page
Figure 18 blog-page-Microsoft
3. Register page
Figure 19 register-page-Microsoft
4. About page
Figure 20 about-page-Microsoft
5. Q&A page
Figure 21 Q&A-page-Microsoft
6. Book online page
Figure 22 bookonline-page-Microsoft
7. Current program page

Figure 23 current-page-Microsoft
Pages for Mobile view
1. Home page
Figure 24 Home-page-MobileView-page-1
Figure 25 Home-page-MobileView-page-2
In mobile view, top navigation is minimized and show in center, welcome text and CTA button
locate left side below the navigation.
2. Blog page
Figure 26 Blog-page-MobileView-page-1
Figure 27Blog-page-MobileView-page-2
In mobile view of the blog page, top navigation is aligned left and display full side of the screen.
Below the navigation welcome text and CTA and blog column button are show full size.
Figure 28 Sample-Blog-page-MobileView
In sample blog also use full size navigation and blog and its photo are resize for adaptive screen
size.
3. Register page
Figure 29 Register-page-MobileView-page-1
Figure 30 Register-page-MobileView-page-2
Register page also use full size navigation and registration form resize for adaptive screen size.
4. About page
Figure 31 About-page-MobileView-page-1
Figure 32 About-page-MobileView-page-2
In about page, top navigation is minimized and show in center, welcome text and CTA button
locate left side below the navigation like home page and about us section is resize for adaptive
screen size.
5. Q&A page
Figure 33 Q&A-page-MobileView-page-1
Figure 34 Q&A-page-MobileView-page-2
In mobile of Q&A page also use like home page and about page. And question section are
resizes for adaptive screen size.
6. Book online page

Figure 35 BookOnline-page-MobileView-page-1
The mobile view of book online page is different from other page. The welcome text and CTA
button are located above the navigation bar and navigation bar are minimizer and located in
center. The information about book column are show full size column one by one.
7. Current program page

Figure 37 Current-page-MobileView-page-1
The mobile view of Book Online page is like other page, homepage about page and Q&A page.
Task 2(CSS)
All the external CSS file was linked to their related page giving better performance and
speed when the website loads. Mobile friendly block design is included such as the navigation
bar displays horizontally on large screens and vertically on small screens. The active button
and search bar are include.
The CSS of Home Page
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.Home_BG {
background: url(Home.jpg) no-repeat center;
background-size: cover;
height: 700px;
position: relative;
}
.hello-text {
style:font-size:50px;
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #F8F8FF;
}
.walk_quotes {
color: #6699cc;
}
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
.column {
float: left;
width: 33.3%;
margin-bottom: 16px;
padding: 0 8px;
}
.card {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
margin: 8px;
}
.about-section {
padding: 50px;
font-family: font-family: Arial, Helvetica, sans-serif;
font-style: oblique;
text-align: center;
background-color: white;
color: #1f3d5c;
}
.bLah_blah {
padding: 50px;
color: #1f3d5c;
}
.container {
padding: 0 16px;
}
.container::after, .row::after {
content: "";
clear: both;
display: table;
}
.title {
color: grey;
}
.button {
background-color: #00BFFF;
border: none;
color: white;
padding: 16px 32px;
text-align: center;
font-size: 16px;
margin: 4px 2px;
opacity: 0.6;
transition: 0.3s;
display: inline-block;
text-decoration: none;
cursor: pointer;
border-radius: 30px;
}
.button:hover {opacity: 1}
@media screen and (max-width: 650px) {
.column {
width: 100%;
display: block;
}
.Home_BG {
padding: 100px;
width: auto;
.hello-text {
float: none;
display: block;
text-align: left;
width: 100%;
margin-top: 200px;
padding: 14px;
}
}
The CSS of Blog Page
html {
}
}
.Home_BG {
background-color: #4682B4
}
.intro-section{
margin-left: 250px;
float: left;
width:70%;
font-size: 20px;
border: 20px #125DA9;
padding: 50px;
font-family: "Times New Roman", Times, serif;
font-style: bold;
color: #708090;
}
.blog-section {
margin: 50px;
float: left;
width: 95%;
padding: 50px;
font-style: bold;
color: #1f3d5c;
}
.button1 {
background-color: #4CAF50; /* Green */
border: none;
color: white;
padding: 16px 32px;
text-align: center;
font-size: 16px;
margin: 4px 2px;
transition-duration: 0.4s;
cursor: pointer;
}
.button4 {
color: black;
border: 2px solid #e7e7e7;
float: left;
margin-left: 415px;
}
.button4:hover {background-color: #e7e7e7;}
.column {
float: left;
width: 33.3%;
padding: 0 8px;
}
.card {
box-shadow: 2px 4px 8px 0 rgba(0, 0, 0, 0.2);
margin: 8px;
background-color: #FFE4E1;
}
.about-section {
padding: 50px;
text-align: center;
background-color: #474e5d;
color: white;
}
.container {
padding: 0 16px;
}
content: "";
clear: both;
display: table;
}
.title {
color: grey;
}
.button {
border-radius: 4px;
background-color: #6A5ACD;
border: none;
color: #FFFFFF;
text-align: center;
font-size: 20px;
padding: 20px;
width: 200px;
transition: all 0.5s;
cursor: pointer;
margin: 5px;
}
.button span {
cursor: pointer;
position: relative;
transition: 0.5s;
}
.button span:after {
content: '\00bb';
position: absolute;
opacity: 0;
top: 0;
right: -20px;
transition: 0.5s;
}
.button:hover span {
padding-right: 25px;
}
.button:hover span:after {
opacity: 1;
right: 0;
}

.column {
width: 100%;
display: block;
}
.intro-section {
display: block;
text-align: left;
margin: 0;
}
.button1 {
display: block;
text-align: left;
margin: 0;
}
}
The CSS of sample blog page
body {
margin: 0;
}
.Home_BG {
}
.blog1-section {
float: left;
width: 70%;
background-color: lightgrey;
padding: 50px;
margin: 170px;
font-style: bold;
color: #1f3d5c;
}
.author-section{
float: left;
width: 30%;
padding: 50px;
margin-left: 30px;
background-color: #F0F8FF;
}
.column {
width: 100%;
display: block;
}
.blog1-section {
float: none;
display: block;
text-align: left;
width: 100%;
margin: 0;
padding: 3px;
}
.photo {
max-width: 500px;
}
.jody {
width: 150px;
}
The CSS of Register page
body {
font-family: "Helvetica Neue", Helvetica, Arial;

padding-top: 20px;
}
.Home_BG {
background: url(register.jpg) no-repeat center;
height: 900px;
position: relative;
}
.hello-text {
text-align: center;
position: absolute;
top: 10%;
left: 50%;
color: #F8F8FF;
}
.button {
background-color: #4CAF50; /* Green */
border: none;
color: white;
padding: 16px 32px;
text-align: center;
font-size: 16px;
margin: 4px 2px;
transition-duration: 0.4s;
cursor: pointer;
}
.button1 {
color: black;
border: 2px solid #e7e7e7;
}
.button1:hover {background-color: #e7e7e7;}
.container {
width: 406px;
max-width: 406px;
margin: auto;
}
#signup {
padding: 0px 25px 25px;
background: #fff;
box-shadow:
0px 0px 0px 5px rgba( 255,255,255,0.4 ),
0px 4px 20px rgba( 0,0,0,0.33 );
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
display: table;
position: static;
}
#signup .header {
}
#signup .header h3 {
color: #333333;
font-size: 24px;
font-weight: bold;
margin-bottom: 5px;
}
#signup .header p {
color: #8f8f8f;
font-size: 14px;
font-weight: 300;
}
#signup .sep {
height: 1px;
background: #e8e8e8;
width: 406px;
margin: 0px -25px;
}
#signup .inputs {
margin-top: 25px;
}
#signup .inputs label {

color: #8f8f8f;
font-size: 12px;
font-weight: 300;
letter-spacing: 1px;
margin-bottom: 7px;
display: block;
}
input::-webkit-input-placeholder {
color: #b5b5b5;
}
input:-moz-placeholder {
color: #b5b5b5;
}
#signup .inputs input[type=username], input[type=password], input[type=confirmpassword]

{
background: #f5f5f5;
font-size: 0.8rem;
border-radius: 3px;
border: none;
padding: 13px 10px;
width: 330px;
box-shadow: inset 0px 2px 3px rgba( 0,0,0,0.1 );
clear: both;
}
#signup .inputs input[type=email]:focus, input[type=password]:focus {

background: #fff;
box-shadow: 0px 0px 0px 3px #fff38e, inset 0px 2px 3px rgba( 0,0,0,0.2 ), 0px 5px 5px
rgba( 0,0,0,0.15 );
outline: none;
}
#signup .inputs .checkboxy {

display: block;
position: static;
height: 25px;
margin-top: 10px;
clear: both;
}
#signup .inputs input[type=checkbox] {

float: left;
margin-right: 10px;
margin-top: 3px;
}
#signup .inputs label.terms {

float: left;
font-size: 14px;
font-style: italic;
}
#signup .inputs #submit {

width: 100%;
margin-top: 20px;
padding: 15px 0;
color: #fff;
font-size: 14px;
font-weight: 500;
letter-spacing: 1px;
text-align: center;
background: -moz-linear-gradient(
top,
#b9c5dd 0%,
#a4b0cb);
background: -webkit-gradient(
linear, left top, left bottom,
from(#b9c5dd),
to(#a4b0cb));
border-radius: 5px;
border: 1px solid #737b8d;
-moz-box-shadow:
0px 5px 5px rgba(000,000,000,0.1),
inset 0px 1px 0px rgba(255,255,255,0.5);
-webkit-box-shadow:
0px 5px 5px rgba(000,000,000,0.1),
box-shadow:
0px 5px 5px rgba(000,000,000,0.1),
text-shadow:
0px 1px 3px rgba(000,000,000,0.3),
0px 0px 0px rgba(255,255,255,0);
display: table;
position: static;
clear: both;
}
#signup .inputs #submit:hover {

background: -moz-linear-gradient(
top,
#a4b0cb 0%,
#b9c5dd);
background: -webkit-gradient(
linear, left top, left bottom,
from(#a4b0cb),
to(#b9c5dd));
}

.column {
width: 100%;
display: block;
}
.Home_BG {
width: auto;
height: 1000px;
}
.hello-text {
float: none;
display: block;
text-align: left;
width: 100%;
margin-top: 300px;
padding: 14px;
}
}
The CSS of About page
body {
margin: 0;
}
.Home_BG {
background: url(about.jpg) no-repeat center;
height: 400px;
position: relative;
}
.hello-text {
text-align: center;
position: absolute;
top: 50%;
left: 50%;
color: #008B8B;
}
.button {
background-color: #FFF8DC;
border: none;
color: #006400;
padding: 16px 32px;
text-align: center;
font-size: 16px;
margin: 4px 2px;
opacity: 0.6;
transition: 0.3s;
cursor: pointer;
}
.section_1 {
float: left;
width: 90%;

padding: 50px;
margin: 40px;
font-style: bold;
color: #1f3d5c;
}
.LKR1 {
padding-left: 450px;
}
.LKR2 {
font-size: 40px;
padding-left: 90px;
font-style: bold;
color: #1f3d5c;
}

.column {
width: 100%;
display: block;
}
.Home_BG {
padding: 100px;
width: auto;
}
.LKR1 {
padding: 0;
}
.hello-text {
float: none;
display: block;
text-align: left;
width: 100%;
margin-top: 200px;
padding: 14px;
}
.section_1{
display: block;
text-align: left;
margin: 0;
padding: 30px;
}
}
The CSS of about page
body {
margin: 0;
}
.Home_BG {
background: url(about.jpg) no-repeat center;
height: 400px;
position: relative;
}
.hello-text {
text-align: center;
position: absolute;
top: 50%;
left: 50%;
color: #008B8B;
}
.button {
background-color: #FFF8DC;
border: none;
color: #006400;
padding: 16px 32px;
text-align: center;
font-size: 16px;
margin: 4px 2px;
opacity: 0.6;
transition: 0.3s;
cursor: pointer;
}
.section_1 {
float: left;
width: 90%;

padding: 50px;
margin: 40px;
font-style: bold;
color: #1f3d5c;
}
.LKR1 {
padding-left: 450px;
}
.LKR2 {
font-size: 40px;
padding-left: 90px;
font-style: bold;
color: #1f3d5c;
}

.column {
width: 100%;
display: block;
}
.Home_BG {
padding: 100px;
width: auto;
}
.LKR1 {
padding: 0;
}
.hello-text {
float: none;
display: block;
text-align: left;
width: 100%;
margin-top: 200px;
padding: 14px;
}
.section_1{
display: block;
text-align: left;
margin: 0;
padding: 30px;
}
}
The CSS of Q&A page
.Home_BG {
background: url(Q&A.jpg) no-repeat center;
height: 400px;
position: relative;
}
.hello-text {
text-align: center;
position: absolute;
top: 50%;
left: 50%;
color: #F8F8FF;
}
.button {
border: none;
color: white;
padding: 16px 32px;
text-align: center;
font-size: 16px;
margin: 4px 2px;
opacity: 0.6;
transition: 0.3s;
cursor: pointer;
}
.question { background-color: #B4D8FC;
}
.collapsible {
background-color: #3F747B;
color: white;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
}
.active, .collapsible:hover {
background-color: #555;
}
.content {
padding: 0 18px;
display: none;
overflow: hidden;
background-color: #f1f1f1;
}

.column {
width: 100%;
display: block;
}
.Home_BG {
padding: 100px;
width: auto;
.hello-text {
float: none;
display: block;
text-align: left;
width: 100%;
margin-top: 200px;
padding: 14px;
}
}
The CSS of Book Online page
body {
margin: 0;
.Home_BG {
background-color: #1B2631 ;
height: 250px;
position: relative;
}
.SignUP {
text-align: center;
position: absolute;
top: 50%;
left: 50%;
color: #F8F8FF;
}
html {
}
}
.column {
float: left;
width: 33.3%;
padding: 0 8px;
}
.card {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
margin: 8px;
}
.about-section {
padding: 50px;
text-align: center;
background-color: #474e5d;
color: white;
}
.container {
padding: 0 16px;
}
content: "";
clear: both;
display: table;
}
.title {
color: grey;
}
.button {
border: none;
outline: 0;
padding: 8px;
color: black;
background-color: #F0F8FF;
text-align: center;
cursor: pointer;
width: 100%;
}
.button:hover {
}
form.example input[type=text] {
padding: 5px;
font-size: 15px;
border: 1px solid grey;
float: left;
width: 30%;
background: #D3D3D3;
}
form.example button {
float: left;
width: 7%;
padding: 5px;
background: #2196F3;
color: white;
font-size: 15px;
border: 1px solid grey;
border-left: none;
cursor: pointer;
}
form.example button:hover {
background: #0b7dda;
}
form.example::after {
content: "";
clear: both;
display: table;
}
.column {
width: 100%;
display: block;
}
.Home_BG {
padding: 100px;
width: auto;
.SignUP {
float: none;
display: block;
text-align: left;
width: 100%;
padding: 14px;
padding-bottom: 200px;
}
}
The CSS of Current Page
body {
margin: 0;
}
.Home_BG {
background: url(current.jpg) no-repeat center;
height: 400px;
position: relative;
}
.hello-text {
font-size:20px;
text-align: center;
position: absolute;
top: 50%;
left: 50%;
color:#ff0000;
}
.walk_quotes {
color: white;
}
.button {
border: none;
border: none;
color: white;
padding: 4px 8px;
text-align: center;
font-size: 16px;
margin: 2px 1px;
opacity: 0.6;
transition: 0.3s;
cursor: pointer;
}
.button:hover {
background-color: #6a5acd;
color: black;
}
table, th, td {
border: 1px solid black;
border-collapse: collapse;
color: white;
}
th, td {
padding: 15px;
text-align: left;
}
#t01 {
width: 100%;
background-color: #8B0000;
}
#t02 {
width: 100%;
}
.table-section {
background-color: #8FBC8F;
position: relative;
}
form {
border: 3px solid #f1f1f1;
font-family: Arial;
}
.container {
padding: 20px;
background-color: #8FBC8F;
}
input[type=text], input[type=submit] {
width: 100%;
padding: 12px;
margin: 8px 0;
border: 1px solid #ccc;
}
input[type=checkbox] {
margin-top: 16px;
}
input[type=submit] {
background-color: #4CAF50;
color: white;
border: none;
}
input[type=submit]:hover {
opacity: 0.8;
}

.column {
width: 100%;
display: block;
}
.Home_BG {
padding: 100px;
width: auto;
}
.hello-text {
float: none;
display: block;
text-align: left;
width: 100%;
margin-top: 200px;
padding: 14px;
}
}
Task 3 (Test the Website and Write a Test Report)
Problems while testing and recommendation for fixing them
Difference between Google chrome and Microsoft edge
The font family are not same.
But no other problem is not found. The program run peacefully both Google chrome and
Microsoft edge.
W3C validation testing

Validation 1
The error is the ‘The character encoding was not declared’. Because encode undeclared
character.
Validation 2
The error is the “Unmappable byte sequence”.
Validation 3
The error is that “Element title must not be empty”. Because I forget to type in title.
Validation 4
The error is that “Bad value username for attribute type on element.
Validation 5
The error is that “Attribute placeholder is only allowed when the input type is email, number,
password, search, tel, text, url”.
Validation 6
The error is that “Bad value confirmpassword for attribute type on element input”.
Validation 7
The error is that “Attribute placeholder is only allowed when the input type is email, password,
search, tel, text, or url”.
Task 4 (Critical Evaluation)
4.1Two Accessibility features
All button are active
Before After
All CTA button are active on every page. When user’s pointer is hover on the button that
button will shaking, change colur, less opacity and user will know it is a buttom and this button
can able to click for the next page.
Active Header
The header of all page can click and it will take user to Home Page. It is easy
way to return home page and user will satisfied with this.
Figure 39 header
4.2 The advantages and disadvantages of using at least two different types
of multimedia file formats
Multimedia elements (such as audio or video) are stored in media files. Multimedia files have
different extensions such as .wav, .mp3, .mp4, .mpg, .wmv and .avi.
Advantages
 Greater Immersion
Adding multimedia elements to a web page makes it easier to attract viewers.
Video is the most popular multimedia supplement, but it also includes audio and
interactive content to capture the attention of viewers.
 Better Branding
It is difficult to present a brand image without the inclusion of audio or video.
Disadvantages
 Loading Times
When days are spent measuring a page with a slow dial-up modem, multimedia
content takes longer to load than static content.
 Compatibility
All browsers can display at least some subset of HTML. Multimedia elements not
widely supported.
(Anon., 2020)
4.3Advantage and Disadvantages of using user-centered web design

Advantages
 User feel ownership of the product

 There is less need to refurbish and incorporate products into the environment
 A more efficient and safer product
 More help for users expecting products
Disadvantages
 User-centric design is expensive

 It is difficult to turn some information into design
 Products take longer
 The product is expensive because it is so complex and specific to the public
(ENCORESARA, 2013 )
4.4Advantage and Disadvantages of dedicated web hosting
Dedicated hosting is an Internet hosting option that rents out a server stored in an organization
database or data center. It also has its advantages and disadvantages.
Advantages
 Protection from increasing DDoS attacks; Minimum data leakage and maximum
security. It has custom firewall that can help in implementing the access control
policy.
 You do not want to be frustrated if you cannot get the right pitch so invest
in a good capo.
 24/7 support
Disadvantages
 Do not have physical access to the server.
 The server is the property of the service provider; This means that all you own is
the data you store on the server.
 Compared to a shared hosting solution, it is not the best way to run a new
website.
(Anon., n.d.)
4.5How the website is designed to support mobile users
 Utilize White Space

When designing a website, it is a natural tendency to enter as much
information as possible. But fight the impulse. The white space not only gives a
cleaner and more sophisticated look, but also makes it easier for users to click
the button they want.
 Reduce the amount of text input
Many of us have trouble pressing small keys. Using down menus,
checklists and pre-populated fields as data entry where necessary. It minimizes
the difficulties when you type text on a smartphone.
 Plan Your Site Layout
Mobile web pages will be slower than traditional web pages. It is therefore
important to keep the numbers to a minimum. In addition, users will not be
patient to click deep pages on your site. Therefore, it is important to maintain the
site layout as quickly as possible.
(Turner, n.d.)
4.6Recommended improvements for further development of website
 Add a Value Proposition
A value proposition or mission statement tells your visitors what you are doing and
why. Put your value proposition on your homepage, if possible, in the headline. Add it to
your blog or info page. Tell us exactly what benefits your visitors can get if they hire you, buy
a product, subscribe to our newsletter, or read your blog.
 Website Navigation
o It helps users find what they want.
o It helps your search engine ranking
 Call to Action Text
The call-to-action (CTA) is huge. There are users on the site and they are
interested. The text on the button must start with a verb. Otherwise, it's just a button with
text, not a call to action.
You need to add more animations to your website to make your website look great and look
good. If you want your website to be accessible to people with disabilities, your website should
use better accessibility features like voice response and AI technology.
(GANT, n.d.)
References
Anon., 2019. Advantages and disadvantages of multimedia. [Online]
Available at: https://et101thv-multimedia.weebly.com/advantages-and-disadvantages.html
[Accessed 28 April 2019].
Anon., 2019. Introduction to Web Accessibility. [Online]

Available at: https://www.w3.org/WAI/fundamentals/accessibility-intro/
Anon., 2020. w3schools_html_media. [Online]

Available at: https://www.w3schools.com/html/html_media.asp
Anon., n.d. martwebhosting. [Online]

Available at: https://www.martwebhosting.com/advantages-and-disadvantages-of-dedicated-
hosting/
ENCORESARA, 2013 . summertimeinfodesign. [Online]

Available at: https://summertimeinfodesign.wordpress.com/2013/06/20/advantages-and-
disadvantages-of-user-centered-design/
[Accessed 24 June 2013].
Friend’, R. a., 2016. Advantages And Disadvantages Of Multimedia Elements Computer

Science Essay. [Online]
Available at: https://www.ukessays.com/essays/computer-science/advantages-and-
disadvantages-of-multimedia-elements-computer-science-essay.php
GANT, A., n.d. orbitmedia. [Online]

Available at: https://www.orbitmedia.com/blog/ways-to-improve-your-website/
Gladkiy, S., 2018. User-Centered Design: Process and Benefits. [Online]

Available at: https://uxplanet.org/user-centered-design-process-and-benefits-fd9e431eb5a9
[Accessed 28 March 2020].
Lee, H., 2019. The Advantages of CSS in Web Design. [Online]

Available at: https://blog.catmedia.com/the-advantages-of-css-in-web-design
Mart, 2020. Advantages and Disadvantages of Using a Dedicated Hosting. [Online]

Available at: https://www.martwebhosting.com/advantages-and-disadvantages-of-dedicated-
hosting/
MDN, 2020. HTML: A good basis for accessibility. [Online]

Available at: https://developer.mozilla.org/en-US/docs/Learn/Accessibility/HTML
networksoultion, 2014. 5 Advantages of CSS Web Design. [Online]

Available at: http://www.networksolutions.com/education/css-web-design-advantages/
Turner, J., n.d. socialmediaexaminer. [Online]

Available at: https://www.socialmediaexaminer.com/9-tips-for-optimizing-your-website-for-
mobile-users/

NCC KAUNGSINTHANT 00185277 DDW Assignment

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

NCC KAUNGSINTHANT 00185277 DDW Assignment

Uploaded by

Copyright:

Available Formats

Module Title : Designing and Developing a Website

Assignment Title : Rambling

Examination Cycle : Autumn 2020

Candidate Name : KAUNG SIN THANT

Centre Name : KMD COMPUTER CENTRE (YANGON)

Submission Date : 30 July 2020

Programme/Qualification name: L4DC

I can confirm the following details.

Student ID/Registration number : 00185277

Name : KAUNG SIN THANT

Centre Name : KMD COMPUTER CENTRE (YANGON)

Module Name : Designing and developing a website

Module Leader : AYE AYE KYAW

Number of words : () words

Due Date : 30-July-2020

Student Signature : Thant

PAGE FOR DESKTOP SIZE IN GOOGLE CHROME....................................................................................4

PAGES FOR DESKTOP SIZE ON MICROSOFT EDGE..............................................................................13

PAGES FOR MOBILE VIEW......................................................................................................................... 16

TASK 3 (TEST THE WEBSITE AND WRITE A TEST REPORT)....................................................................................65

PROBLEMS WHILE TESTING AND RECOMMENDATION FOR FIXING THEM.................................................................................65

TASK 4 (CRITICAL EVALUATION).............................................................................................................. 67

4.1TWO ACCESSIBILITY FEATURES......................................................................................................................67

Page for desktop size in google Chrome.

7.Current Program Page

6. Book online page

7. Current program page

Pages for Mobile view

6. Book online page

7. Current program page

The CSS of Home Page

The CSS of Blog Page

.button4:hover {background-color: #e7e7e7;}

@media screen and (max-width: 650px) {

The CSS of sample blog page

The CSS of Register page

font-family: "Helvetica Neue", Helvetica, Arial;

.button1:hover {background-color: #e7e7e7;}

#signup .inputs label {

#signup .inputs input[type=username], input[type=password], input[type=confirmpassword]

#signup .inputs input[type=email]:focus, input[type=password]:focus {

#signup .inputs .checkboxy {

#signup .inputs input[type=checkbox] {

#signup .inputs label.terms {

#signup .inputs #submit {

#signup .inputs #submit:hover {

@media screen and (max-width: 650px) {

The CSS of About page

border: 20px #125DA9;

@media screen and (max-width: 650px) {

The CSS of about page

border: 20px #125DA9;

@media screen and (max-width: 650px) {

.question { background-color: #B4D8FC;

@media screen and (max-width: 650px) {

The CSS of Book Online page

The CSS of Current Page

@media screen and (max-width: 650px) {

Difference between Google chrome and Microsoft edge

The font family are not same.

W3C validation testing

The error is the “Unmappable byte sequence”.