Front-End Web Development
- Build semantic, well-structured pages using HTML5 elements and forms with validation.
- Create responsive layouts with Flexbox, CSS Grid and media queries that work in both LTR and RTL directions.
- Write JavaScript to manipulate the DOM, handle events and fetch data from REST APIs.
- Develop reusable React components with state, props and routing.
- Audit and fix accessibility issues against WCAG success criteria.
- Measure and improve page performance using browser developer tools and Lighthouse.
- HTML5 Foundations
- Semantic structure and landmarks
- Forms and input validation
- Metadata and SEO basics
- CSS and Layout
- Box model and selectors
- Flexbox and CSS Grid
- Responsive design and media queries
- Bilingual and Right-to-Left Interfaces
- dir attribute and logical CSS properties
- Arabic typography and fonts
- Mirroring layouts and icons
- JavaScript and the DOM
- Modern JavaScript syntax
- DOM manipulation and events
- Fetch API and asynchronous code
- Component-Based Development
- React components, props and state
- Hooks and side effects
- Routing and forms
- Quality, Performance and Workflow
- WCAG accessibility checks
- Performance optimisation and Lighthouse
- Git, npm and build tooling
الحصول على الكتيب
للحصول على كتيب بكامل محتويات الدورة برجاء ملء النموذج التالي ببياناتك الصحيحة

Program Professional Framework
Front-End Web Development
Program Overview
Government portals, banking apps and e-commerce sites in the Gulf are judged on speed, accessibility and a smooth bilingual experience. This practical programme builds modern front-end skills: semantic HTML5, CSS layout with Flexbox and Grid, responsive and right-to-left design for Arabic, JavaScript fundamentals and the DOM, asynchronous calls to APIs, component-based development with React, accessibility to WCAG guidelines, performance optimisation and professional workflow with Git, package managers and build tools.
Learning Outcomes
- ✓Build semantic, well-structured pages using HTML5 elements and forms with validation.
- ✓Create responsive layouts with Flexbox, CSS Grid and media queries that work in both LTR and RTL directions.
- ✓Write JavaScript to manipulate the DOM, handle events and fetch data from REST APIs.
- ✓Develop reusable React components with state, props and routing.
- ✓Audit and fix accessibility issues against WCAG success criteria.
- ✓Measure and improve page performance using browser developer tools and Lighthouse.
Target Audience
- Junior web developers
- Back-end developers moving into front-end work
- UI designers who want to build their own interfaces
- IT staff maintaining organisational websites and portals
Detailed Program Modules
01HTML5 Foundations
- Semantic structure and landmarks
- Forms and input validation
- Metadata and SEO basics
02CSS and Layout
- Box model and selectors
- Flexbox and CSS Grid
- Responsive design and media queries
03Bilingual and Right-to-Left Interfaces
- dir attribute and logical CSS properties
- Arabic typography and fonts
- Mirroring layouts and icons
04JavaScript and the DOM
- Modern JavaScript syntax
- DOM manipulation and events
- Fetch API and asynchronous code
05Component-Based Development
- React components, props and state
- Hooks and side effects
- Routing and forms
06Quality, Performance and Workflow
- WCAG accessibility checks
- Performance optimisation and Lighthouse
- Git, npm and build tooling
Training Methodology
Applied Project & Assessment
Applied Project
Participants build a responsive bilingual Arabic and English service portal front end in React that consumes a sample API, passes an accessibility audit and achieves agreed performance targets, delivered through a Git repository with documentation.
Assessment
Short diagnostic at the start, practical tasks linked to each learning outcome, and evaluation of the applied project against published criteria.
