G-E2HZ7JKCY4

Web Engineering

Course Code: Maj/SE-317
Credit Hours: 3 (3+0)
Prerequisite: Software Engineering

Course Learning Outcomes (CLOs)

By the end of this course, students will be able to:

CLODescriptionDomainBT Level*
1Explain how web standards influence software development.C1
2Identify the constraints that the web imposes on developers.C2
3Design and develop a simple web application.C4
4Evaluate an existing web application against current web standards.C4

BT = Bloom’s Taxonomy, C = Cognitive domain, P = Psychomotor domain, A = Affective domain

Course Contents (16-Week Breakdown)

Week 1-2: Introduction to Web Development

  • Overview of Web Development Ecosystem
    • Understanding how websites work (Client-Server Model)
    • Roles of front-end, back-end, and full-stack developers
  • Development Tools and IDEs
    • Setting up Visual Studio Code and Browser DevTools
    • Version control basics with Git and GitHub
  • Introduction to HTML
    • Basic syntax and document structure (<!DOCTYPE html>, <html>, <head>, <body>)
    • Common tags: <p>, <h1>-<h6>, <a>, <img>, <div>, <span>
  • Practical Task:
    • Create a simple web page with headings, paragraphs, and links.

Week 3-4: Advanced HTML

  • Semantic HTML5 Elements
    • Using <header>, <footer>, <section>, <article>, <aside> for meaningful content structure
  • Forms and Input Handling
    • Input types: text, email, password, checkboxes, radio buttons, dropdowns
    • Form attributes: action, method, placeholder, required
    • Basics of form validation (pattern, maxlength, minlength)
  • Tables and Lists
    • Creating tables: <table>, <tr>, <td>, <th>, <thead>, <tbody>
    • Styling and structuring ordered, unordered, and nested lists (<ul>, <ol>, <li>)
  • Media Integration
    • Embedding images, audio, video, and iframes effectively
  • Practical Task:
    • Build a contact form with various input types and basic validation.

Week 5-6: Introduction to CSS

  • CSS Basics
    • Syntax, selectors (universal, class, ID, attribute)
    • CSS specificity and cascading rules
  • Styling Text and Fonts
    • Font families, sizes, line height, text alignment, Google Fonts integration
    • Color schemes (hex, RGB, HSL) and contrast accessibility
  • Box Model and Positioning
    • Margins, padding, borders, and content area
    • Positioning elements: static, relative, absolute, fixed, sticky
  • Practical Task:
    • Create a styled profile card using the box model and Google Fonts.

Week 7-8: Advanced CSS

  • Layout Techniques
    • Flexbox: properties (justify-content, align-items, flex-direction)
    • CSS Grid: defining rows and columns, grid areas, and responsive grids
  • Responsive Web Design
    • Media queries for different screen sizes (mobile-first approach)
    • Viewport units (vh, vw) and CSS units (rem, em)
  • CSS Animations and Transitions
    • Keyframes, animation properties, hover effects
  • Practical Task:
    • Redesign a given webpage to be fully responsive with grid and flexbox.

Week 9-10: Introduction to JavaScript

  • JavaScript Basics
    • Syntax, variables (var, let, const), data types (strings, numbers, booleans)
    • Operators: arithmetic, comparison, logical
  • Control Structures
    • Conditional statements (if, else if, else, switch)
    • Loops: for, while, do-while
  • Functions and Scope
    • Defining, invoking, parameters, return values
    • Scope: global vs local variables
  • Practical Task:
    • Create a calculator using JavaScript functions and operators.

Week 11-12: DOM Manipulation with JavaScript

  • Understanding the DOM
    • DOM tree, nodes, and traversal
  • Selecting and Manipulating Elements
    • Methods: getElementById, querySelector, querySelectorAll
    • Modifying content: .innerHTML, .textContent, .style
  • Event Handling
    • Event listeners (click, change, mouseover)
    • Event object and propagation (bubbling vs capturing)
  • Practical Task:
    • Build an interactive to-do list with DOM manipulation.

Week 13: Advanced JavaScript Concepts

  • Arrays and Objects
    • Creating and manipulating arrays (push, pop, map, filter, reduce)
    • Objects: key-value pairs, nested objects, object methods
  • Introduction to ES6 Features
    • Arrow functions, template literals, destructuring
    • Modules and import/export statements
  • Practical Task:
    • Create a dynamic shopping cart using arrays and objects.

Week 14: Building Interactive Websites

  • Form Validation using JavaScript
    • Real-time validation with regex patterns
    • Custom error messages and validation feedback
  • Interactive Features:
    • Image sliders/carousels with JavaScript
    • Dynamic content loading (AJAX basics)
  • Practical Task:
    • Build a multi-page portfolio website with interactive features.

Week 15: Final Project

  • Project Requirements:
    • Develop a fully functional website including:
      • Semantic HTML for structure
      • Advanced CSS for layout and styling
      • JavaScript for interactivity (form validation, event handling)
    • Integration of media (images, videos, iframes)
    • Responsive design for mobile and desktop views
  • Submission:
    • Source code with comments and project documentation.

Week 16: Project Presentations & Course Wrap-Up

  • Project Presentations:
    • Students present and demonstrate their projects.
    • Peer reviews and feedback.
  • Course Review:
    • Recap of key concepts and best practices in web development.
    • Discussion on next steps: frameworks (React, Angular, Vue) and backend integration (Node.js, databases).
  • Reflection:
    • Challenges faced, solutions applied, and learning takeaways.

Recommended Resources:

  • Books:
    • HTML & CSS: Design and Build Websites by Jon Duckett
    • JavaScript and JQuery: Interactive Front-End Development by Jon Duckett
  • Online Platforms:
    • MDN Web Docs, W3Schools, freeCodeCamp
  • Tools:
    • GitHub for version control, CodePen for live previews
Scroll to Top