Dynamic Web Design with HTML, CSS & JS

Dynamic Web Design with HTML, CSS & JS

Student Devices
Pricing & Ordering Contact Us
This module provides a comprehensive introduction to dynamic web design using HTML, CSS, and JavaScript. Teachers should utilise a hands-on approach, guiding students through setting up their development environment, understanding how these languages interact, manipulating the DOM, and integrating external libraries and APIs. The module culminates in the creation of an interactive quiz game and a weather web app. The final week allows students to showcase their work, providing an opportunity for peer review and constructive feedback.
Read more

Explore the Course

Click any lesson with to preview it

Scripting and DOM Manipulation Quiz Challenge
Dynamic Form Validation with JavaScript Quiz Challenge
Integrating External Libraries and APIs Quiz Challenge
Interactive Quiz Game Quiz Challenge
Weather Web App Quiz Challenge
Web Showcase

Scripting and DOM Manipulation Quiz Challenge

Dynamic Form Validation with JavaScript Quiz Challenge

Integrating External Libraries and APIs Quiz Challenge

Interactive Quiz Game Quiz Challenge

Weather Web App Quiz Challenge

Web Showcase

What Students Will Learn

Learning Goals

  1. Master the interaction of HTML, CSS, and JavaScript to create dynamic web pages.
  2. Set up and effectively utilise web development tools including code editors, browser developer tools, and debugging consoles.
  3. Develop advanced scripting skills for DOM manipulation, including creating, deleting, and modifying HTML elements.
  4. Implement dynamic form validation with JavaScript, providing real-time feedback and validating various input types.
  5. Integrate external libraries and APIs into web development projects to enhance functionality and data dynamism.

Learning Outcomes

  1. Understand and apply the interaction between HTML, CSS, and JavaScript to create dynamic web pages.
  2. Set up and effectively use a web development environment, including code editors, browser developer tools, and debugging consoles.
  3. Manipulate the Document Object Model (DOM) using JavaScript, including creating, deleting, and modifying HTML elements based on certain conditions or inputs.
  4. Implement dynamic form validation using JavaScript, providing real-time feedback and validating different input types.
  5. Integrate external libraries such as jQuery and APIs to pull dynamic data into web pages.
  6. Create an interactive quiz game using HTML, CSS, and JavaScript, incorporating features such as timers, score trackers, and dynamic question loading.
  7. Develop a Weather Web App that fetches and displays real-time weather data based on a location, making it interactive and visually appealing.
  8. Present a web development project in a showcase, demonstrating mastery of HTML, CSS, and JavaScript.

What You'll Need

Student Devices

Students will need one of these devices. Students can share in groups of 2-3 if necessary.

Chromebook/Laptop/PC
Chromebook/Laptop/PC
iPad/Tablet
iPad/Tablet

Ready to bring this course to your school?

Get in touch to discuss pricing and ordering for your school.

Pricing & Ordering Contact Us
Back to 3rd Year courses
Ready to get started?
Pricing & Ordering Contact Us
🍪 Our website uses cookies to make your browsing experience better. By using our website you agree to our use of cookies. Learn more