Answers to Component 2 on Credit Task 3

Name: Ivan Go
Student ID: 101209251
Selected Website & Link: https://www.samsung.com/my/

1. Enhance the a one-page corporate site template/Webpage (wireframe) which you

have done in Pass Task 2:
 It should contain a minimum of 5 main parts namely: corporate banner/slider,
main product/service highlight, product/service features, company profile, and
footer.
 There must be a minimum of 10 individual boxes in your design.
 You need to provide additional wireframe for Mobile View (use col-xs-**).

Desktop View Wireframe:

1.1 Navigation Bar

2.1 Corporate Banner

3.1 Main Product Highlight 1 3.2 Main Product Highlight 2 3.3 Main Product Highlight 3

4.1.1.1Product Feature 1 4.2 Product Feature 3 4.3.1.1 Product Feature 4

4.1.1.2Product Feature 2 4.3.1.2 Product Feature 5
5.1 Product Feature 6 (Search bar)
6.1 Company Profile

7.1 Footer Banner

8.1 Footer Banner 8.2 Footer Banner 8.3 Footer Banner

9.1 Footer Banner

10.1 Footer Banner

Mobile View Wireframe:

1.1 Navigation Bar

2.1 Corporate Banner

3.1 Main Product Highlight 1

4.1 Main Product Highlight 2

5.1 Main Product Highlight 3

6.1 Product Feature 1 6.2 Product Feature 2

7.1 Product Feature 3

8.1 Product Feature 4 8.2 Product Feature 5

9.1 Product Feature 6 (Search Bar)

10.1 Corporate Profile

11.1 Footer Banner

12.1 Footer Banner

13.1 Footer Banner

14.1 Footer Banner

15.1 Footer Banner

16.1 Footer Banner

2. Webpage Development Checklist & Evidences.
You are required to demonstrate your competency of website/webpage development using Bootstraps and AngularJS effectively by applying
the concepts, topics and techniques learned in this unit.

Fulfill
I
Criteria ed Evidence
D
()
Effectively 
design and
develop the
1 webpage Develop webpage into different rows and column.
using
Bootstraps’s
Grid Layout
Enable menu 
toggle in
mobile view

Click the menu toggle to expand the navigation bar

 Effectively 
applies at
least two
other
Bootstraps
components
i.e. carousel /
jumbotron /
table /
3 accordion /
sliders/
glyphicons /
modal box /
etc…
Used carousel for the corporate banner

Used glyphicon for the icon at the navigation bar and some of the other href link
 Webpage is 
well rendered
in both mobile
and desktop
view

Above is desktop view

4

Above is mobile view

 Effective use 
of AngularJS’s
common
directive &
5 filters

Used filter to filter the search input

Others common directive like ng-data-model, ng-app, ng-controller
Effective use  I used controller to control the interaction between view and model
6 of AngularJS’s
controller
Effective use  I Used custom directive to store all the product images
of custom
filter and/or
custom
7 directive

Appropriately 
store
webpage
content/data
8 using array or
JSON object Used ng-repeat to display the footer data
and render to
the view with
proper data-
 binding
techniques

Store data into an array

Webpage  No error and warnings in HTML validation

must pass
HTML
validation
with no errors
and warnings
9

Webpage  No known problem, included the validation report

1 must comply
0 with WCAG
1.0 (Level A)
 with no
known
problem – use
Accessibility
Check
(achecker)

[Optional]
Webpage
must comply
with WCAG
2.0 (Level AA
1
with no
1
known
problem – use
Accessibility
Check
(achecker)
 Achieved 80% 
similarity
from the
selected
website

Above is the one I developed

1
2

Above is the original website

 Appropriate 
section for
acknowledge
1 Added disclaimer at the footer
ment and
3
reference to
the original
website.