Front-end Web Development

Back To Course

Next Module

Parent Programme

Bachelor of Science in Computing (Level 7 NFQ)

NFQ Level & Reference

Level 6 / Ref: M2.5

Duration

12 Weeks X 3 Hours each week

MODULE TITLE

Front-end Web Development

STAGE

Monule Credit Unit

ECTS: 5

Introduction to Front-end Web Development

The Front-end Web Development module will provide Learners with a solid foundation in modern HTML5/CSS3 front-end development. They will acquire the knowledge and skills to build, update, test, and deploy standards-based, visually attractive, responsive, and functional websites.

Indicative Syllabus Content

Introduction to Front-end Web Development

Principles of Front-end Web Development with HTML5 and CSS3
Working environment: Microsoft Visual Studio Code and extensions, web browser Developer Tools, hosting with GitHub Pages
HTML foundations: meta data, semantic and formatting tags, block versus inline tags, lists and bullets, tables, hyperlinks
CSS foundations: selectors, declarations, properties, and values

Web Page Layouts

The ‘box model’: margins, padding, borders, positioned elements, z-index overlays
Multi-column, flexbox-based grid layouts, negative spacing.
Responsive design with media queries and CSS custom properties.

Web Page Design

Working with colour models and palettes
Sourcing and adding copyright-free images, icons and videos
Typography – Google fonts
CSS Animation

Standards and Testing and performance

Accessing web standards – Who sets the standards and what are they?
W3C mark-up validation for HTM and CSS
Web Content Accessibility Guidelines (WCAG) 2.1
UX/UI-design and experience
User testing – Role of testing in the development process, practical application of criteria
Optimising HTML and CSS for fast loading, Google Page Speed Insights
SEO topics, Google Analytics, Google Search Console, Irish and EU privacy laws, sitemaps
Choosing third-party templates and frameworks

Minimum Intended Learning Outcomes (MIMLOs)

Upon successful completion of this module, the learner should be able to:

MIMLO1

Demonstrate an appropriate knowledge of the architecture of web applications, the underpinning internet technologies, and fundamental HTML and CSS syntax.

MIMLO2

Construct responsive, grid-based web designs employing colour theory, fonts and fluid typography, media queries, CSS animations, and CSS custom properties.

MIMLO3

Build six professional-quality web projects using standard-based frameworks and libraries, and copyright-free assets.

MIMLO4

Demonstrate proficiency in adhering to web standards, optimizing web performance, conducting user testing, and implementing SEO and legal compliance in web design.

MIMLO5

Build a unique, personalised portfolio showcase website that demonstrates technical proficiency, standards adherence, and individual creativity in content, design, and layout.

Assessment

MIMLOs

Assessment

Percentage

1, 2, 3, 4, 5

CA 1 – Practical Lab Work (In-class examination)

Total 100%

CA 2 – Practical Lab Work (In-class examination)

All Assessments

CA 3 – Personal Portfolio – Practical Web site Project

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 Meeting and will be aligned to the MIMLOs and learners will be capped at 40% unless there are personal mitigating circumstances.

Aims & Objectives

The objectives of this module will ensure learners:

Understand the basics of HTML5 and CSS3.
Work with images, video, fonts, icons, and animations.
Build six professional-quality websites using frameworks and copyright-free assets.
Track user visits and interactions with Google Analytics, and comply with Irish and EU privacy laws.
Create a four-page personal portfolio website for showcasing their work to future employers.

[TheChamp-Sharing]

Apply Now