Section: Unit 2: User interface design with HTML, CSS, and Bootstrap | MET9143: Programming for Educational Technology | University of Rwanda

Section outline

Introduction

Welcome to Unit 2. In this unit, you will learn the principles and techniques for designing and developing modern, responsive, and accessible web interfaces for eLearning applications. You will create interface wireframes, build well-structured HTML5 pages, apply CSS3 and Bootstrap 5 for responsive design, and evaluate your work against WCAG 2.1 accessibility standards. These skills will enable you to develop user-friendly web interfaces that provide an inclusive learning experience across different devices.

Intended learning outcomes

By the end of this lesson, learners will be able to:

Create wireframe designs for web-based eLearning interfaces using industry-standard design tools such as Figma, Adobe XD, or Canva.

Construct semantically correct and accessible HTML5 documents using modern structural elements and form controls.

Apply CSS3 properties and the Bootstrap 5 grid system to create responsive and professionally styled web interfaces.

Evaluate web interface designs against WCAG 2.1 Level AA accessibility criteria to determine required improvements.
- Select activity User interface design with html, CSS and bootstrap
  
  User interface design with html, CSS and bootstrap SCORM package
- Select activity QUIZ
  
  QUIZ H5P
- Select activity Forum Discussions
  
  Forum Discussions
  
  Due: Friday, 5 June 2026, 9:30 AM
  
  Before participating in this discussion, please ensure that you:
  
  Read the relevant Unit 2 learning materials
  
  Write 150–200 words for each discussion question.
  
  Use clear, professional, and respectful language throughout the discussion.
  
  After posting your initial response, read your classmates' contributions and reply to at least two classmates by asking a thoughtful question, providing constructive feedback, or adding relevant ideas.
  
  Avoid plagiarism by writing in your own words and acknowledging any sources used.
  
  1. UI/UX design principles such as clarity, consistency, feedback, accessibility, hierarchy, and simplicity help learners navigate an eLearning system effectively. Discuss three UI/UX design principles that you believe are most important when designing an eLearning platform. Explain why each principle is important and provide an example of how it improves the learner's experience.
  
  2. Students use different devices such as smartphones, tablets, and desktop computers to access online learning. Why is responsive web design important for educational websites? Explain how Bootstrap 5 helps developers create responsive interfaces and describe the challenges learners may face if a website is not responsive.
- Select activity Unit 2 reading notes
  
  Unit 2 reading notes File PDF
  
  360.4 KB