Learning Objectives
5 objectives- Understand the fundamental concepts and structure of HTML and CSS for building web pages.
- Develop skills in responsive web design to create adaptable and mobile-friendly websites.
- Gain proficiency in JavaScript programming basics and DOM manipulation for interactive web experiences.
- Learn version control using Git to manage and collaborate on web development projects effectively.
- Familiarize with essential web development tools, accessibility principles, and front-end frameworks.
Content Outline
PreviewUnit 883: Foundations of Modern Web Development
1. Introduction to HTML
1.1 Overview of HTML
- What is HTML?
- Role of HTML in web development
1.2 Structure of HTML Documents
- Basic HTML document structure (
<!DOCTYPE html>,<html>,<head>,<body>) - Understanding elements, tags, and attributes
1.3 Common HTML Elements
- Headings (
<h1>to<h6>) - Paragraphs (
<p>) - Lists (ordered
<ol>, unordered<ul>, and list items<li>) - Links (
<a href>) - Images (
<img src alt>)
2. Introduction to CSS
2.1 What is CSS?
- Purpose and benefits of CSS
- How CSS integrates with HTML
2.2 CSS Syntax
- Selectors, properties, and values
- Inline, internal, and external CSS
2.3 Styling HTML Elements
- Colors, fonts, text formatting
- Box model: margins, borders, padding
- Positioning: static, relative, absolute, fixed
3. Responsive Web Design
3.1 Principles of Responsive Design
- Why responsiveness matters
- Mobile-first approach
3.2 Media Queries
- Syntax and usage
- Applying different styles for various screen sizes
3.3 Flexible Grids and Fluid Layouts
- Percentage widths
- CSS Grid and Flexbox basics
4. Introduction to JavaScript
4.1 JavaScript Overview
- Role of JavaScript in web development
- Embedding JavaScript in HTML
4.2 Basic Programming Concepts
- Variables and data types
- Operators and expressions
- Control structures (if-else, switch, loops)
4.3 Functions
- Function declaration and invocation
- Parameters and return values
4.4 Event Handling
- Introduction to events
- Common event types (click, input, load)
- Attaching event listeners
5. DOM Manipulation
5.1 Understanding the DOM
- What is the Document Object Model?
- Node types and tree structure
5.2 Accessing Elements
- Methods:
getElementById,getElementsByClassName,querySelector
5.3 Modifying Elements
- Changing content (
innerHTML,textContent) - Changing attributes and styles
5.4 Handling User Interactions
- Responding to events dynamically
- Creating interactive elements
6. Introduction to Version Control (Git)
6.1 Version Control Concepts
- Importance of version control
- Basic terminology: repository, commit, branch
6.2 Using Git
- Initializing repositories
- Adding and committing changes
- Branching and merging basics
6.3 Collaboration Using Git
- Remote repositories (GitHub, GitLab)
- Pull, push, and clone operations
7. Web Development Tools and Environment Setup
7.1 Text Editors and IDEs
- Popular editors (VS Code, Sublime Text)
- Features and extensions
7.2 Browsers and Developer Tools
- Inspecting elements
- Debugging JavaScript
7.3 Local Development Environment
- Setting up local servers (e.g., Live Server)
- File structure best practices
8. Web Accessibility and Best Practices
8.1 Importance of Accessibility
- Understanding diverse user needs
- Legal and ethical considerations
8.2 WCAG Guidelines Overview
- Perceivable, Operable, Understandable, Robust (POUR)
8.3 Implementing Accessibility
- Semantic HTML
- ARIA roles and attributes
- Keyboard navigation
8.4 SEO and Usability
- Basic SEO principles
- Optimizing page load and readability
9. Introduction to Front-End Frameworks
9.1 Overview of Front-End Frameworks
- Purpose and benefits
9.2 Bootstrap
- Grid system and responsive utilities
- Common components (buttons, navbars, modals)
9.3 React Basics
- Components and JSX
- State and props overview
- Creating simple interactive UI
Unlock the full outline
Get the complete content outline, learning outcomes and assessment methods for Introduction To Web Development.
KSh 20 one-off, or included with a plan
Learning Outcomes
Unlock the outline above to see learning outcomes.
Assessment Methods
Unlock the outline above to see assessment methods.