Web Development with HTML, CSS, and JavaScript

Prerequisite

Basic computing skills (using computer, internet browsing, basic typing)

Course Description

Learn the fundamentals of web development by mastering HTML, CSS, and JavaScript. Build responsive websites from scratch and understand how the web works.

What you will learn

• - Structure web pages using HTML
• - Style websites with CSS
• - Make websites interactive with JavaScript
• - Build a complete basic website project

Course Outline

• Week 1 Introduction to Web Development and HTML

  • Introduction to the course, syllabus, and expectations.
  • Basics of web development and the role of HTML, CSS, and JavaScript.
  • Setting up the development environment (text editor, browser, etc.).
  • Introduction to HTML: Structure, elements, and tags.
  • Hands-on: Creating a simple HTML webpage.

• Week 2 More HTML elements, Semantic HTML, Version control with Git and GitHub

  • More HTML elements: headings, paragraphs, lists, links, images.
  • Semantic HTML: importance of using proper tags.
  • Introduction to version control with Git and GitHub.
  • Quiz 1: Assessing HTML knowledge.

• Week 3 CSS Fundamentals

  • Introduction to CSS: Styling basics, selectors, and properties.
  • Applying inline, internal, and external CSS.
  • Box model: understanding margins, borders, padding, and dimensions.

• Week 4 CSS continued: Fonts, colors, backgrounds, CSS layout

  • CSS continued: Fonts, colors, backgrounds.
  • CSS layout: positioning, floats, and display properties.
  • Introduction to Flexbox or CSS Grid for modern layout.

• Week 5 Responsive Web Design and CSS Frameworks

  • Importance of responsive design.
  • Media queries and viewport meta tag.
  • Introduction to mobile-first design.

• Week 6 CSS frameworks (e.g., Bootstrap)

  • CSS frameworks (e.g., Bootstrap): benefits and usage.
  • Creating responsive layouts using a CSS framework.
  • Assignment 1: Building a responsive webpage using a CSS framework.

• Week 7 JavaScript Basics

  • Introduction to JavaScript: history, role, and fundamentals.
  • Variables, data types, operators, and basic syntax.
  • Functions and control structures: if statements, loops.

• Week 8 JavaScript Basics Continued, DOM manipulation, Introduction to asynchronous programming

  • DOM manipulation: selecting and modifying elements.
  • Handling user interactions: events and event listeners.
  • Introduction to asynchronous programming: callbacks and promises.

• Week 9 Advanced JavaScript and Interactivity

  • More on functions: scope, closures, and ES6 features.
  • JavaScript objects and arrays.
  • Error handling and debugging techniques.

• Week 10 Introduction to AJAX and Fetch API, ES6+ features

  • Introduction to AJAX and Fetch API.
  • Introduction to ES6+ features: arrow functions, template literals, destructuring.
  • Quiz 2: Assessing CSS and JavaScript knowledge.

• Week 11 Project Development

  • Students work on a project that combines HTML, CSS, and JavaScript skills.
  • Project topic could involve creating an interactive webpage, form validation, or a simple game.
  • Weekly check-ins to monitor progress and provide guidance.

• Week 12 Finalization and Assessment

  • Finalizing the project and addressing any remaining issues.
  • Project presentations: students showcase their projects and explain their design choices.
  • Assignment 2: Reflective essay on the learning journey.
  • Course review, feedback collection, and discussion of potential next steps in web development.

Grading Criteria

Particulars	Marks (%)
Quizzes	20
Class Participation/ Attendance	15
Projects	25
Final Projects	40
Total	100