Menu
close
Apply Now
Contact
Parent Programme
Bachelor of Science in Computing (Level 7 NFQ)
MODULE NFQ
Level 6
MODULE CREDIT UNITS
ECTS: 10
MODULE TITLE
Front-end Web Development
Reference Code: M2.7
STAGE
Year 2
Semester 1
3.15 Hours per week

Front-end Web Development

Introduction to Front-end Web Development

This module equips leaners with the ability to understand the principles of web development and focuses on the ability of the learner to build basic front-end web solutions.

  • Principles of Front-end Web Development
  • Server versus Client-how a website works from server to user
  • Front-end Stack-HTML, CSS, JavaScript
  • Syntax and Semantics-what they are and their importance
  • Source Code Editors-Notepad++, Brackets, Atom
  • First index file-head, title, body
  • HTML elements, tags, attributes
  • HTML Text, structural markup (headings, subheadings, paragraphs), bold, italic, emphasis, semantic, markup.

Introduction to Web Page Authoring

  • Writing and saving files for web
  • How to structure a HTML page - Semantic and non-semantic tags, creating Text blocks, Lists, Tables, Links, Images etc.
  • HTML syntax – tags, attributes, and values
  • Meta-data and link structure in HTML
  • CSS syntax – selectors, declarations, properties, and values
  • Format and Style in CSS- using id and class, working with margins, padding, alignment, floating, positioning etc.
  • CSS Animation and media queries for dynamic and responsive design
  • Typography – Google fonts, colour, theory, font practices

Standards and Testing

  • Accessing web standards – Who sets the standards and what are they?
  • Assessing standards compliance – Validating and debugging code - Tools, Techniques, and Resources
  • User testing – Role of testing in the development process, practical application of criteria
  • UX/UI-design and experience

Javascript for Client-side interaction

  • Introduction to JavaScript – integrating JS with HTML
  • JS code structure – statements, variables, data types, naming conventions
  • JS Arithmetic – operands and operators, operator precedence, addition vs concatenation
  • The Document Object Model (DOM) – getting/ referencing elements using JavaScript
  • JS Functions and Events – adding event handlers, invoking functions, parameters and arguments
  • Working with arrays and objects – application and uses
  • JavaScript conditions and loops – for, while, do while, if else
  • HTML Canvas

Web Libraries and Frameworks

  • Choosing the right tools for your project
  • History of front-end frameworks
  • Working with grid-based design
  • Applying themes and templates
  • Adding library integration for dynamic websites
  • Awareness of cross-browser issues when using libraries

Integrating Server-side interaction

  • AJAX requests and responses
  • Data formats (XML, JSON, etc.)
  • Server-side scripting – Node.js
  • Internal Architecture of Node.js
  • Blocking code and non-blocking code models
  • Event-based server-side execution/ asynchronous execution
  • Server side process implementation and verification
  • Creating a HTTP server
  • Utilising database content

Minimum Intended Learning Outcomes (MIMLOs)

Upon successful completion of this module, the learner should be able to:
LO1
Access and explain current web standards.
LO2
Demonstrate an appropriate knowledge of the architecture of web applications and the underpinning internet technologies.
LO3
Employ an appropriate user testing process in the development of a website.
LO4
Apply client-side interaction to a website using a browser-supported scripting language.
LO5
Use server-side scripting to produce dynamic web pages.
LO6
Understand the role of a grid-based layout in designing responsive web pages.
LO7
Evaluate appropriate web libraries and frameworks for interactive web and app design.

Assessment

MIMLOs
Assessment
Percentage
2 ,3, 4
CA 1 – Practical Lab Work (In-class examination)
20%
2 ,3, 4
CA 2 – Practical Lab Work (In-class examination)
20%
1-7
CA 3 – Group Assignment – Practical Web App Project & presentation.
60%

Reassessment Opportunity

Where the combined marks of the assessment and examination do not reach the pass mark the learner will be required to repeat the element of assessment that they failed.

Reassessment materials will be published on Moodle after the Examination Board and will be aligned to the MIMLOs and learners will be capped at 40% unless there are personal mitigating circumstances.

Aims & Objectives

This module gives students a basis in front-end web development. Learners will acquire the knowledge and skills required to create a modern dynamic website and learn best-practice techniques for editing and publishing various media assets to the web.

This module will ensure learners meet the following objectives:

  • Understand the basic concepts of Rich Internet Applications (RIA).
  • Build awareness of web standards and related coding practices.
  • Design and produce a dynamic front-end web application.
  • Deploy a front-end web-application for cross-platform accessibility.
[TheChamp-Sharing]
APPLY NOW
Top