The Teaching and Learning Plan
So the plan is to have my teaching and learning plan uploaded here so that you’re able to see how I flow through the activities below. Once I get it published, a button will be available below for you to download it.
The Activities (I'll slowly build them all out)
- Building a Brand
- Students will select a colour scheme and use this to modify a basic Bootstrap Template
- Personal Portfolio
- Students create a personal portfolio website using HTML, CSS, and Bootstrap, integrating JavaScript for interactive elements
- Responsive Redesign
- Students take a non-responsive website and redesign it using Bootstrap to ensure it works on all devices
- CSS Challenge
- Students compete to recreate a complex design using only CSS, focusing on layout, colours and typography.
- JS Calculator
- Students build a simple calculator using HTML for structure, CSS for styling, and JavaScript for functionality.
- The Grid Game
- Students participate in a game where students use the Bootstrap grid system to arrage a set of elements into a specified layout as quickly as possible.
- Interactive Form Creation
- Students design a form with various input types using Bootstrap, then enhance its functionality with JavaScript (for example real time data validation
- Code Review
- Students review each other’s code and suggest improvements, focusing on clean code, optimisation and best practices.
- UI Critique Session
- Students review popular websites and applications, identifying their strengths and weaknesses in their user interfaces and experiences
- Persona Development
- Students create a detailed user persona and discuss how these personas would interact with a specific web application.
- Wireframe Workshop
- Students sketch wireframes for a series of proposed web applications, focusing on layout and user flow. Annotations required.
- Heuristic Evaluation
- Students apply Nielsen’s heuristics to evaluate the usability of a website or application and discuss improvements
- https://www.nngroup.com/articles/ten-usability-heuristics/
- Interactive Prototyping
- Students use Figma to create interactive prototypes and simulate user interactions
- User Journey Mapping
- Students analyse popular websites and create a user journey map for a task on a website, identifying pain points and opportunities for improvement.
- UI Trend Analysis
- Students research and present on current UI trends (e.g. Dark Mode, Minimalism) and discuss their impact on user experience.
- A/B Testing Simulation
- Students evaluate sets of AB Testing interfaces to analyse how different user interface components effect the user’s experience.
- Accessibility Audit
- Students install the web browser plugin for WAVE or Lighthouse to audit the accessibility of a website and identify areas for improvement.
- https://wave.webaim.org/
- Useability Principle Case Study
- Students analyse well known websites in terms of the five useability principles
- Accessibility Simulation
- Students experience web browsing with disability tools (using a screen reader) and discuss how this affects useability and the user experience.
- Design a Safe Interface
- Students develop wireframes for a user interface of a sensitive application (banking or healthcare) focusing on safety and user error prevention
- Learnability Challenge
- Students create a small web tool and have another student learn to use it without any instructions, assessing how intuitive it is.
- Utility Assessment
- Students compare the utility of two similar websites (e.g. two e-commerce websites) by analysing features, navigation and user satisfaction.
- Accessibility ‘Fixathon’
- Students compete in a challenge that gets them to fix the accessibility issues on a website using best practices (e.g. adding alt text, improving colour contrast ratios)
- Useability Benchmarking
- Students work together to come up with a set of benchmarks for useability and compare multiple websites against these benchmarks.
- Design Element Scavenger Hunt:
- Students find examples of each principle in existing websites and present their findings
- Mockup Redesign
- Students take a poorly designed mock up (wireframe) and redesign it to better adhere to the principles of visual communication
- Contrast Challenge
- Students evaluate two versions of the same webpage (one with poor colour contrast, one with good colour contrast) and disucss the impact on readability.
- Hierarchy Game
- Given a set of content, students arrage it in a way that best communicates visual hierarchy using size, colour and positioning.
- Alignment Workshop
- Students are provided witha disorganised layout and asked to realign elements to create a more visually appealing design.
- Repetition Exercise
- Students create a webpage or poster where repetition of elements (e.g. colour or shapes) is sued to create unity and consistency.
- Colour Scheme Exploration
- Students explore different colour scehems and discuss how colour contrast and harmony enhance or detract from the user experience
- Pseudocode Writing Practice
- Students write pseudocode for everyday tasks (e.g. Making a Sandwich) to practice logical sequencing
- Code to Pseudocode
- Students are presented with some code and asked to ‘translate’ the code into Pseudocode according the the requirements of the syllabus
- Pseudocode Peer Review
- Students are presented with a challenge to create a simple algorithm, peers review their work for clarity and accuracy
- Debugging Pseudocode
- Students are presented with flawed pseudocode and asked to identify the errors with annotations. Students are then required to make corrections to the errors.
- Pseudocode Flowcharts
- Students create flowcharts based on pseudocode to visually represent the logic and flow of an algorithm (links to DFDs)
- Pseudocode Annotations
- Students are assessed on their ability to interpret pseudocode by explaining the algorithm with annotations
- Real-World Problem Solving
- Students write pseudocode for real world problems such as sorting a list of names or finding the shortest path through a maze.
- Pseudocode Matching Game
- Students match given psuedocode statements with their corresponding code snippets or real-world tasks.
- System Breakdown Exercise
- Students break down a familiar system (like a school library system) into a data flow diagram (DFD).
- DFD for Web Applications
- Create a DFD for a basic web application, such as an online store, identifying data sources, flows, and storage.
- DFD Analysis
- Analyze an existing DFD for a popular application (e.g., Netflix) and discuss how data flows through the system.
- DFD Construction in Groups
- Collaboratively build a DFD for a complex process, like a customer order fulfillment system.
- DFD Interpretation Quiz
- Provide several DFDs and quiz students on their understanding of the processes and data flows depicted.
- DFD vs. Flowchart
- Compare and contrast a DFD with a flowchart of the same process, discussing the strengths and limitations of each.
- Data Flow Diagram Redesign
- Given an outdated DFD, students update and improve it based on modern data flow practices.
- Real-World DFD Creation
- Create a DFD for a process students encounter daily, such as the flow of information in a social media app.
- DFD Error Correction
- Present students with an incorrect DFD and have them identify and correct the mistakes.
- Algorithm Decomposition
- Students break down a complex algorithm into its fundamental parts (iteration, selection, etc.), and reassemble it.
- Conditional Logic Challenge
- Students write algorithms that rely heavily on branching (if/else statements) to solve a problem.
- Loop Exploration
- Students create various loops (for, while, do-while) and discuss their uses and differences in solving repetitive tasks.
- Modularization Workshop
- Students are taught how to break down a large problem into smaller, manageable modules and write algorithms for each.
- Interactive Flowcharts
- Students build flowcharts to represent different types of loops and branching in an algorithm, then convert them into code.
- Debugging Algorithm Errors
- Students are provided with algorithms with common logical errors related to loops or selection, and have students debug them.
- Algorithm Optimization
- Students are given a basic algorithm and asked to optimise it by refining the use of
