Module 3 Client-Side Web Development

Module title Client-Side Web Development

Module NFQ level (only if an NFQ level can be n/a
demonstrated)
Module number/reference BSCH-CSWD
Bachelor of Science (Honours) in
Parent programme(s)
Computing Science
Stage of parent programme Stage 1
Semester (semester1/semester2 if applicable) Semester 1 & 2
Module credit units (FET/HET/ECTS) ECTS
Module credit number of units 10
List the teaching and learning modes Direct, Blended
Entry requirements (statement of knowledge, skill Learners must have achieved programme
and competence) entry requirements.
Pre-requisite module titles None
Co-requisite module titles None
Is this a capstone module? (Yes or No) No
Qualified to as least a Bachelor of Science
Specification of the qualifications (academic,
(Honours) level in Computer Science or
pedagogical and professional/occupational) and
equivalent and with a Certificate in Training
experience required of staff (staff includes
and Education (30 ECTS at level 9 on the
workplace personnel who are responsible for
NFQ) or equivalent.with a Certificate in
learners such as apprentices, trainees and learners
Training and Education (30 ECTS at level 9
in clinical placements)
on the NFQ) or equivalent.
Maximum number of learners per centre (or 60
instance of the module)
Two Academic Semesters, 24 weeks
Duration of the module
teaching
Average (over the duration of the module) of the 3.5
contact hours per week
One class room with capacity for 60
Module-specific physical resources and support learners along with one computer lab with
required per centre (or instance of the module) capacity for 25 learners for each group of
25 learners

46
 Analysis of required learning effort
Minimum ratio
Hours
teacher / learner
Effort while in contact with staff
Classroom and demonstrations 1:60 24
Monitoring and small-group teaching 1:25 72
Other (specify)
Independent Learning
Directed e-learning
Independent Learning 64
Other hours (worksheets and assignments) 90
Work-based learning – learning effort
Total Effort 250

Allocation of marks (within the module)

Continuous Supervised Proctored practical Proctored written
Total
assessment project examination examination
Percentage
100% 100%
contribution

Module aims and objectives

This module introduces the learner to the fundamentals behind client-side web
development, both for desktop and mobile. They are introduced to the core concepts
behind how the web works (The Internet, HTTP, Markup Languages etc.) before
exploring the various Standards of client-side web development (HTML, CSS,
JavaScript). In addition to this, learners learn about web design principles and the
importance of user research and planning.

Learners are given practical experience of developing web sites using these
technologies, as well the processes behind researching and planning user-centred web
applications.

Minimum intended module learning outcomes

On successful completion of this module, the learner will be able to:
1. Explain in detail how the web works showing an advanced understanding of
the topic
2. Apply client-side web standards technologies (HTML, CSS, JavaScript) to an
advanced level
3. Explain the importance of research and pre-planning in designing and building
web applications
4. Design and build standards-compliant web sites with HTML, CSS and JavaScript
5. Illustrate the importance of usability and user-centred design in developing
web applications

47
Rationale for inclusion of the module in the programme and its contribution to the
overall MIPLOs
The world wide web is one of the dominant medium for communication and software
delivery today. As such knowledge of how it works and how to build modern web
sites and applications is a key skill in the 21st century for computer science
practitioners. Appendix 1 of the programme document maps MIPLOs to the modules
through which they are delivered.

Information provided to learners about the module

Learners receive a programme handbook to include module descriptor, module
learning outcomes (MIMLO), class plan, assignment briefs, assessment strategy and
reading materials.

Module content, organisation and structure

Web Architecture
• The Internet
• TCP-IP
• HTTP
• Mark-up Languages
• Server-Client Relationship
• Security
Web Application Development
• Web Standards
• HTML5
• CSS
• Client-Side Scripting
• JavaScript
• Mobile Applications
• Responsive Web Design
UI Design
• Usability
• Interface Design
• User Experience
• User-Centred Design
• Research
• User Analysis

48
 • Wire-framing
• Story-boarding
• Design Principles

Module teaching and learning (including formative assessment) strategy

The module is delivered through a combination of lectures, tutorials, and practical lab
sessions. The lectures cover the fundamental concepts behind the web, how it works,
and client-side web standards technology. In addition to this, lectures cover various
topics related to web design, including research, planning, and design. In tutorials and
practical lab sessions, learners practically apply web standards technologies through
a series of web development problems and assignments.

Assessment is a series of practical assignments of increasing complexity that cover the

core topics. The first is a simple HTML project to assess competency in that
fundamental technology. Then a short research project on how the web works will
assess the learner’s knowledge of the underpinning theoretical concepts, delivered as
a web site. The first semester ends with a self-Directed design project that combines
HTML, CSS and design and planning.

In the second semester there are two JavaScript based assignments. Finally, there is
a capstone group project that combines HTML, CSS & JavaScript, with planning, design,
and documentation.

Timetabling, learner effort and credit

The module is timetabled as one 2-hour lecture and one 1.5-hour lab per week.

The number of 10 ECTS credits assigned to this module is our assessment of the
amount of learner effort required. There are 48 hours of lecturers delivered over 24
weeks, with lectures taking place in a classroom. There are also 24 lab sessions over
the 24 weeks that take place in computer labs. The learner will need 76 hours of
independent effort to further develop the skills and knowledge gained through the
contact hours. An additional 90 hours are set aside for learners to work on
worksheets and assignments that must be completed for the module.

The team believes that 250 hours of learner effort are required by learners to achieve
the MIMLOs and justify the award of 10 ECTS credits at this stage of the programme.

Work-based learning and practice-placement

There is no work based learning or practice placement involved in the module.
E-learning

49
The college VLE is used to disseminate notes, advice, and online resources to support
the learners. The learners are also given access to Lynda.com as a resource for
reference.

Module physical resource requirements

Requirements are for a classroom for 60 learners equipped with a projector, and a 25-
seater computer lab for practical sessions with access to a development environment
(such as Notepad++) and a selection of web browsers (Chrome, Firefox, Edge).

Reading lists and other information resources

Recommended Text
Duckett, J. (2015) HTML & CSS: design and build websites. Indianapolis, Indianapolis:
John Wiley & Sons, Inc.
Mozilla (2018) Learn Web Development, MDN Web Docs. Available at:
https://developer.mozilla.org/en-US/docs/Learn 3

Secondary reading
Marcotte, E. and Robert, C. (2014) Responsive Web Design. New York: A Book Apart.

Specifications for module staffing requirements

For each instance of the module, one lecturer qualified to at least Bachelor of Science
(Honours) in Computer Science or equivalent, and with a Certificate in Training and
Education (30 ECTS at level 9 on the NFQ) or equivalent.with a Certificate in Training
and Education (30 ECTS at level 9 on the NFQ) or equivalent.. Industry experience
would be a benefit but is not a requirement.

Learners also benefit from the support of the programme Director, programme
administrator, learner representative and the Student Union and Counselling Service.

Module Assessment Strategy

The assignments constitute the overall grade achieved, and are based on each
individual learner’s work. The continuous assessments provide for ongoing feedback
to the learner and relates to the module curriculum.

3
Last accessed 26/07/2018

50
 No. Description MIMLOs Weighting
1 A simple 2-page HTML website. 2,4 5%
A report describing how the World Wide Web
2 1,2,3 15%
works, delivered as a website.
Research, plan, design and build a small website
3 2,3,4 20%
on a topic.
4 A small JavaScript project 2,4 10%
5 Larger JavaScript project 2,4 20%
Large group web design project. Research, plan,
6 design and build a mobile-friendly website for a 2,3,4,5 30%
client

All repeat work is capped at 40%.

Sample assessment materials

Note: All assignment briefs are subject to change in order to maintain current content.

51
Assignment 1 Title: Personal Profile Page

This is a short, simple assignment to get you building a basic webpage.

For this assignment you are to create a Personal Profile page.
This will be worked on in stages with each stage iterating from a previous stage.

Part One:

This page should feature (in this order)

A title with your name and student number.

A main heading with your name and student number
A sub heading with the words “Personal Profile Page”
A photo of yourself (resize it if it is too big, no bigger than 600 x 400)
A sub heading “About Me”
A paragraph about yourself
A quote you like (attributed in italics below)
A sub heading “5 Things About Me”
An unordered list of 5 facts about yourself
A sub heading “5 Favourite Films”
An ordered list of your 5 favourite films.
A sub heading “5 Favourite Websites”
An unordered list of your 5 favourite websites (They should be links)
At the bottom of the page, include the Griffith College logo (available on Moodle or
griffith.ie). This logo should be a link to the Griffith website.

Remember to check the page every so often with the HTML Validator.

Part Two:

Using the page from part one, use semantic / grouped elements to give the page
structure. You should include the following:
A <div> (with an ID of “page”) to group the entire page
A <header> for the general page headings
A <section> with an ID of bio for the photo and bio part.
A <section> each for each list with its heading.
A <footer>.

Assessment Criteria:

All components present

Standards compliant HTML used
Files presented/named correctly.

52
Assignment 2 Title: Web Report on How The Web Works.
Compile a 1000 word (maximum) report on web architecture and technology,
outlining how the web works and the various technologies and procedures involved
in the delivery of web-based content.

Potential Topics to Cover:

1. History of the web
2. How the internet works
3. How Web Pages Are Delivered (Servers/Browsers/DNS)
4. HTML
5. The Future

Delivery:
This report will be delivered as a web site.
The site should have 3 pages:

index.html
The main “home” page which contains the report. The report should have a table of
contents linking to each section, all presented in one page.
about.html

A page about yourself, including name, picture and a paragraph about yourself.
bibliography.html

A page listing the sources you used to compile the report.

The site should be suitably marked up with headings, subheadings, and internal
(anchor) links to relevant sections. Images should be embedded throughout (for
diagrams etc.). Use structural elements (<header>, <section>,<footer>). Have a
consistent navigation across all pages.
Include your name and student number both as the <title> and in the <header>.

Apply CSS styling to make it more readable (typography, column width).

In the footer, repeat your name, student number and a link to your email address.

Assessment Criteria:
Describing the architecture of the web
Understanding of underlying issues
Structure of report
Use of examples (with proper citation/links)
HTML/CSS/Page Design

53
Your report must cite at least 5 relevant references to texts or journal/web articles to
support the discussion. They must be hyperlinked in text. (For references to books
link to the Google Books page for the book). If there is no online reference use a
footnote to reference the source.

The purpose of this report is to summarise what you have learned from your research
on the topic.

Note: Plagiarism will be taken seriously and sanctions will be applied where students
copy material from each other or from other sources. If you are quoting someone
else’s words, you must use a <blockquote> element to indicate this.

If you use images, use a caption to supply copyright/citation information (including a

hyperlink to its source)

Assignment 3 Title: Plan, design and build a website.

For this assignment you are to plan, design and build a website using HTML and CSS.
There are 2 main deliverables:
• The finished site
• An evaluation document.

The website is to showcase the life/work of someone you consider a personal ‘hero’.
The site must feature:
• Details about the person’s life
• Details about their work / influence
• Details about why you chose them.
• Media concerning the person (images/audio/video)
• Links to other relevant websites
• Anything else you consider relevant

In addition to these your site should have:

• A ‘welcome’ / ‘home page’
• A personal bio / ‘about’ page about yourself

The site must feature at least 7 pages. What these pages are exactly is up to you.
The site must feature:
• An intuiative, usable interface (Navigation, page layout)
• A well organised site structure
• A suitable design with approriate visuals (colour, images, typography)
• The site’s design should reflect the subject material, and also be easy to use
and navigate.

54
Deliverables:
The site and all it’s contents (pages, images, CSS files) should be organised in a clear
manner and placed in a folder and zipped.

In this folder you should also include an analysis document.

This document should feature:

Description of site design (1/2 pages)

A description of the finished site, explaining the various decisions you made.
A site-map diagram (1 page)
A diagram of the pages on your site and how they are organised.
Wireframes (1/2 pages)
A rough wireframe of key page layouts.
Research (1 page)
Some links or screen shots of sites that have inspired you (can be subject related or
not)

The site must be built using self-written HTML5 Markup with CSS. (Validated and
commented)
The site should function normally the latest versions of Internet Explorer, Firefox,
Chrome and Safari.
All images must be properly optimized for the web.
Notes:
Content:
You may use sites such as Wikipedia or other online sources for your bio information.
This information must be properly referenced and linked.
You may use other people’s images for this site, however these too much be properly
referenced and attributed.

References, attribution and links must be placed in-text.

The design of the site must be your own. You cannot use templates or themes. You
may use certain design elements that have a public use license. In all cases you must
cite the license agreement (e.g. Creative Commons). All such elements must be run by
the lecturer first. The design must be your own, however. Plagiarism is not acceptable
and will be taken very seriously.

Whilst you may use client-side scripting such as JavaScript for certain elements I will
not be marking this nor taking it into consideration. The site should function with
JavaScript turned off.

55
Additionally the site must be built with HTML/CSS.

The maximum file size uploadable is 100MB. Your site and all imagery must be below
this amount.

I reserve the right to refuse selection of any particular person as your ‘hero’ subject
matter.

Learning Outcomes being assessed:

Understand and demonstrate the importance of research and pre-planning in
designing and building web applications

Design and build standards-compliant web sites with HTML, CSS.

Assessment Criteria:
Research and planning
You have undergone a procedure of research and pre-planning.
Usability

You have considered your sites users and usability principles and these have informed
your decisions.

Design / Concept
You have employed design principles to make your site usable and aesthetically
pleasing, and this design is suitable to your subject matter. The design of your site
must be consistent with the content.

Layout
The pages are consistent and usable, with clearly defined areas of content layed out
using HTML/CSS

Innovation
You have displayed independent learning and thought to help aid your design

Coding practice
Your mark-up is working, valid, well-organized, commented and clear. Your images are
optimized for the web. Proper separation of content and presentation. Modern web
design practices .

Attribution
You have attributed all material that is not your own.

56
Site Structure
The structure and names of your files/folders should be clear and meaningful.

Presentation
You have followed all presentation (file names / file types etc.) guidelines as stated in
this brief and in class.

57
Assignment 4 Title: Interactive JavaScript Quiz
For this assignment you are to build an interactive quiz on a topic of your choice using
HTML, CSS and JavaScript.

The quiz should contain the following:

(a) An introduction – inviting/challenging the user to test his/her knowledge on
your quiz and explain how to complete the quiz.
(b) The quiz itself - this should contain at least 5 questions on your chosen
subject and must use at least three methods of input (eg textbox, radio
button, select list/dropdown). The user should complete all questions then
submit his/her answers.
(c) Feedback - Once the user has submitted answers he/she should be given
feedback. You will need to keep a count of correct answers in order to
provide feedback. The feedback should only be displayed once the user has
submitted his/her answers. You can choose how to best to display the
feedback, eg number of correct questions, percentage of correct questions.
Your feedback may also contain imagery and text.

Further requirements:
The quiz should appear on one page called index.html.
Each question should have a question number and a title with the full question
displayed underneath.
Only one question should appear on the page at a time. For example you could use
previous/next links to display each question or could use an accordion to display each
question. Note the introduction should appear on the page at all times.
Make sure the user has filled in the necessary fields and warn them if they do not.
Validate all answers, for example if a textbox question requires an answer “3”, then
“3” or “three” should give a correct answer but not “33”.

The footer of your webpage should contain your name, student id and email address,
eg Quiz by: John Smith, 2989877, [email protected]

You can use vanilla JavaScript or a combination of jQuery and vanilla JavaScript for this
task. You may use jQuery UI widgets.

All work most be your own.

HTML and CSS should be validated by an online validator.

Marks will be awarded for:

Working code (HTML, CSS & JavaScript)
Good practice
Comments

58
Usability

Deliverables:
Use one HTML file (called index.html) and include this along with all other
files (your own JavaScript and CSS files and the jQuery files) in a folder
named "yourname_studentnumber_js" and zip it up and upload to Moodle.

Learning Outcomes Being Assessed:

Demonstrate an advanced knowledge of client-side web standards
technologies (HTML, CSS, JavaScript)
Design and build standards-compliant web sites with HTML, CSS and JavaScript.

59
Assignment 5: Group Project: Build a Website
As a group, you are to research, plan, design and build a responsive, rich website to
provide information on and promote one of the following:
(d) a club/society (eg could be gaa club, football club, chess club, music/dance
club)
(e) a business
(f) an area/town/village. The website may provide information to local people
and/or visitors.
(g) a subject of your choosing – this subject must be agreed in advance with the
lecturer and you must have written permission from the lecturer.
The features/content the site should be based on your own research and analysis but
should fulfil the main objective (to provide information on and promote) . The site
should contain a minimum of 8 pages including
1. A home page
2. An “about us” page
3. A “contact us” page – This should give various contact details. There should
also be a form for sending comments to the site. Validate to make sure all
fields are valid, and then preview the message for users. (It does not actually
have to send the email to any one.)
4. An about the developers page with the names, student numbers and
breakdown of the work carried out by each student.
Important Requirements:
The site must feature:
(a) An intuitive, usable interface (Navigation, page layout)
(b) A well organised site structure
(c) A suitable design with appropriate visuals (colour, images, typography)
(d) The site’s design should reflect the subject material, and also be easy to use
and navigate.
(e) Your site should include imagery. Imagery should be optimised for web. You
may use other people’s images for this site (eg creative commons), however
these must be properly referenced and attributed. References, attribution
and links must be placed in-text.
1. Responsive Design - the site should be optimised for desktop, tablets and
mobile viewers.
2. The site must be built using self-written HTML5 Markup with CSS and
JavaScript. (Validated and commented). Plagiarism is not acceptable and will
be taken very seriously. The site should function normally the latest versions
of Internet Explorer, Firefox, Chrome and Safari.

60
 3. The design of the site must be your own. You cannot use templates (eg
bootstrap) or themes. You may use certain design elements that have a
public use license. In all cases you must cite any license agreement (e.g.
Creative Commons). All such elements must be run by the lecturer first.
4. You may use sites such as Wikipedia or other online sources for your
information. This information must be properly referenced and linked.
5. If there is an existing website, your site must be completely new and original.

This is a group project. All team members must meet regularly and work together.
Interim meetings should be called and all team members must be present. I will be
checking in with groups in labs. If I do not see people in labs, I will assume they are not
working, and their mark will be docked as such.

Deliverables:
There are two deliverables, an analysis document and a working website.

a) Analysis Document
The analysis document should be saved in PDF format. It should be named
sitedocument_studentid1_studentid2.pdf. It should feature:
(a) A cover sheet with the names and student numbers of the team members.
(b) Description of site design (2/3 pages) - A description of the finished site,
explaining the various decisions you made. Use screen shots with captions to
explain major design decisions.
(c) Research (1 page) - Some links or screen shots of sites that have inspired you
(can be subject related or not)
(d) A site-map diagram (1 page) - A diagram of the pages on your site and how
they are organised.
(e) Wireframes (1/2 pages) - A rough wireframe of key page layouts. You should
include wireframes for both full sized screens and a mobile screen.
(f) Review (1/2 pages) - A group statement reflecting on the work and process.

b) Working website
The website should be placed in a folder called website_studentid1_studentid2. The
site and all it’s contents (pages, images, CSS files, scripts) should be organised in a clear
manner.
The analysis document and the website folder should be placed in a folder named
CSWD_Ass5_Studentid1_studentid2 and zipped using the ZIP format. Do not rename
after zipping. Name it before zipping. Note: Only zip format will be accepted. Any

61
other format will be ignored. The maximum file size uploadable is 20MB. Your site
and all imagery must be below this amount.
Learning Outcomes being assessed:
• Demonstrate an advanced knowledge of client-side web standards
technologies (HTML, CSS, JavaScript)
• Understand and demonstrate the importance of research and pre-planning in
designing and building web applications
• Design and build standards-compliant web sites with HTML, CSS.
• Understand and demonstrate the importance of usability and user-centered
design in developing web applications.

Assessment Criteria:
(a) Research and planning - You have undergone a procedure of research and
pre-planning.
(b) Usability - You have considered your sites users and usability principles and
these have informed your decisions.
(c) Design / Concept - You have employed design principles to make your site
usable and aesthetically pleasing, and this design is suitable to your subject
matter. The design of your site must be consistent with the content.
(d) Layout - The pages are consistent and usable, with clearly defined areas of
content layed out using HTML/CSS
(e) Innovation - You have displayed independent learning and thought to help
aid your design
(f) Coding practice - Your mark-up is working, valid, well-organized, commented
and clear. Your images are optimized for the web. Proper separation of
content and presentation. Modern web design practices.
(g) Attribution - You have attributed all material that is not your own.
(h) Site Structure - The structure and names of your files/folders should be clear
and meaningful.
(i) Presentation - You have followed all presentation (file names / file types etc.)
guidelines as stated in this brief and in class.
(j) Group Work - You have worked together as a group successfully.

62
Assignment 6 Title: Group JavaScript Game
For this assignment you are to form a group of 2 to build a BattleShips game in
JavaScript.

The game should allow 2 players to play BattleShips. Both players will play on the same
screen, with the game alternating between grids.

When the game starts, the first player should be asked to place their ships. They need
to place:

Carrier (5 Blocks long)

Battleship (4 Blocks)
Cruiser (3)
Submarine (3)
Destroyer (2)

Then the second player places theirs.

After the ships have been positioned, the game proceeds in a series of rounds. In each
round, each player takes a turn to select a target square in the opponent's grid which
is to be shot at. The game will inform the player if they have hit or missed.

Hits and misses should be indicated visually on the grids. When a player is in control
of the game it should show them the opponent’s grid, with misses, hits and sunk ships
indicated visually.

When all of the squares of a ship have been hit, the ship is sunk. The game should
announce this. If all of a player's ships have been sunk, the game is over and their
opponent wins.

The game should be built using JavaScript, HTML and CSS, without libraries or
templates.

You can use colours, icons or graphics to indicate water, hits, misses etc.

All work most be your own.

HTML and CSS should be validated by an online validator.

Marks will be awarded for:

Working code (HTML, CSS & JavaScript)

63
Innovation
Good practice
Comments
Usability

Deliverables:
A folder with all required files inside. One HTML page should suffice for the site itself.

Learning Outcomes Being Assessed:

Demonstrate an advanced knowledge of client-side web standards
technologies (HTML, CSS, JavaScript)

Design and build standards-compliant web sites with HTML, CSS and JavaScript.

64