Duration
Web Development Fundamentals: HTML, CSS, JavaScript & Data Visualization
5 days
Overview
This 5-day intensive course provides a comprehensive introduction to modern web development, focusing on HTML5, CSS3, and JavaScript (ES6 and above).
Participants will learn fundamental web technologies and best practices for building responsive, interactive web applications. The course will cover essential topics such as DOM manipulation, event handling, asynchronous programming, and modern UI frameworks. Additionally, students will explore advanced techniques, including Web Components, client-side storage, and data visualization using SVG, D3.js, and Three.js.
The final day will culminate in a project where students will apply their knowledge to build a fully functional web application.
Target Audience
This course is designed for beginners with little to no prior programming experience who want to gain a solid foundation in web development.
It is also suitable for individuals looking to enhance their understanding of modern web technologies and frameworks.
Learning Objectives
- Understand and apply core web development technologies, including HTML5, CSS3, and JavaScript (ES6 and above).
- Design and implement responsive web layouts using CSS Grid, Flexbox, and Media Queries.
- Utilize UI frameworks such as Bootstrap, Tailwind, and Material Design for efficient web development.
- Develop interactive web applications using JavaScript, including functions, event handling, and DOM manipulation.
- Work with asynchronous JavaScript using Promises, Async/Await, and the Fetch API.
- Store and retrieve client-side data using LocalStorage, SessionStorage, and IndexedDB.
- Build and manipulate vector graphics using SVG and data visualization with D3.js.
- Develop and render 3D objects using Three.js.
- Manage project dependencies and build scripts using NPM.
- Apply debugging strategies and performance optimizations in web applications.
- Develop a final project integrating learned concepts to create a functional, responsive, and interactive web application.
Day 1: HTML & CSS Fundamentals
- Languages:
- HTML5
- CSS3
- CSS Basics:
- CSS3 Grid and Flexbox for layout design.
- Grid properties: grid-template-rows, grid-template-columns, gap, justify-content.
- Flexbox properties: flex-direction, justify-content, align-items, flex-wrap.
- CSS3 Media Queries for responsive design.
- Breakpoints and mobile-first approach.
- Responsive images and typography.
- UI Frameworks:
- Bootstrap
- Grid system and utility classes.
- Responsive components and forms.
- Tailwind
- Utility-first CSS approach.
- Customization using Tailwind configuration.
- Font Awesome / Material Design
- Icon integration in web applications.
Day 2: JavaScript Basics
- Languages:
- JavaScript (ES6 and above)
- JSON
- JavaScript Fundamentals:
- Variables, data types, and operators.
- Control flow:
- Conditional statements (if/else, switch-case).
- Loops (for, while, do-while).
- Functions and event handling.
- Function declaration vs expression.
- Event listeners and delegation.
- Advanced JavaScript & Web Technologies:
- Classes & Modules: Object-oriented programming (OOP) principles using JavaScript classes.
- Constructor functions and prototypes.
- Module import/export system.
- Arrow Expressions: Concise function syntax.
- Implicit return and lexical this binding.
Day 3: Asynchronous JavaScript & APIs
- Advanced JavaScript & Web Technologies:
- Async/Await (Reactive Programming): Handling asynchronous operations such as API calls, timers, and promises.
- Understanding Promises and chaining.
- Error handling with try/catch blocks.
- Fetch API: Handle HTTP request responses, errors, and data processing.
- GET and POST requests.
- Handling JSON responses.
- Broadcast Channel API: UI data distribution.
- Cross-tab communication for web applications.
- Client Storage:
- Temporary storage for user data.
- LocalStorage vs SessionStorage.
- IndexedDB for complex storage.
Day 4: Web Components & Data Visualization
- Advanced JavaScript & Web Technologies:
- HTML Web Components: Modular web components for reusability.
- Shadow DOM and encapsulation.
- Creating and using custom elements.
- Visualization & Scripting Tools:
- SVG: For graph, image, and chart rendering.
- Basic SVG shapes (rectangles, circles, lines, paths).
- Styling SVG elements with CSS.
- D3.js: For drawing graphs & charts.
- Data binding and scales.
- Creating bar and line charts.
- Three.js: For drawing 3D objects.
- Basic scene setup with camera and renderer.
- Adding geometries and animations.
Day 5: Project & Build Tools
- Build Tools:
- NPM: For managing client libraries & build scripts.
- Installing and managing dependencies.
- Running build scripts and automating tasks.
- Final Project:
- Implementing concepts from HTML, CSS, JavaScript, and Web Components.
- Integrating Fetch API, Async/Await, and Client Storage.
- Using SVG, D3.js, and Three.js for data visualization.
- Responsive and interactive UI with Bootstrap and Tailwind CSS.
- Performance optimizations and debugging strategies.
- Sample Final Project: Interactive Data Dashboard
Participants will create an Interactive Data Dashboard, integrating various web technologies covered in the course. This project will allow users to fetch, display, and interact with real-time data using JavaScript, Web Components, and data visualization libraries.
The dashboard will include features like filtering, sorting, and graphical representations using D3.js. Additionally, students will implement client-side storage to save user preferences and ensure a seamless experience. By the end of the course, participants will have a fully functional and visually appealing web application ready for deployment.
Programme scope, delivery arrangements and suitability are confirmed during enquiry.