Skip to content
This repository was archived by the owner on Aug 17, 2024. It is now read-only.

Commit 28296ef

Browse files
committed
reduce homework, describe flipped classroom
1 parent 98f0861 commit 28296ef

File tree

2 files changed

+39
-43
lines changed

2 files changed

+39
-43
lines changed

docs/js-core-2/week-3/homework.md

Lines changed: 8 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -4,48 +4,13 @@ title: Coursework
44
sidebar_label: Coursework
55
---
66

7-
<!--
8-
## 1) Review Solutions for Last Weeks Coursework
7+
## 0) Flipped Classroom Practice (3h)
98

10-
Before starting this week, be sure to review the solutions for last weeks coursework
9+
1. Fork and clone https://github.com/CodeYourFuture/JavaScript-Core-2-Classwork-Week3 and complete the tasks in 1-exercises/exercise.js (the videos in the playlist will help you break down into steps)
1110

12-
https://github.com/CodeYourFuture/JavaScript-Core-2-Coursework-Week1-Solution
11+
2. Revisit your [CYF Blocks](https://blocks.codeyourfuture.io) exercises and projects. Examine the generated code and compare with what you have just learned. Bring any questions to class.
1312

14-
Make sure you work out what you don't understand and spend some time considering how the code works.
15-
16-
In each of the folders you'll find a `solutions.md` file that will explain more of the solution to you. You should read each of them.
17-
18-
**Note**: This is a private repository. Please speak to your Teacher, Buddy or Class Coordinator to get access. You should ask them to invite your whole class.
19-
20-
-->
21-
22-
## 1) Complete this online course (4 hours)
23-
24-
You should complete the following sections from this online tutorial:
25-
26-
- Get ready to make your webpages interactive
27-
- JS and the DOM
28-
- DOM access methods
29-
- DOM modification
30-
- DOM events
31-
32-
https://www.khanacademy.org/computing/computer-programming/html-css-js
33-
34-
## 2) Study these DOM materials (1 hour)
35-
36-
### Readings
37-
38-
- MDN - Introduction to the DOM
39-
- https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction
40-
- Eloquent JavaScript - The Document Object Model
41-
- https://eloquentjavascript.net/14_dom.html
42-
43-
### Watch
44-
45-
- Coding Train - HTML/CSS/DOM
46-
- https://thecodingtrain.com/Tutorials/8-html-css-dom/
47-
48-
## 3) JavaScript Challenges (3 hours) 🔑
13+
## 1) JavaScript Challenges (3 hours) 🔑
4914

5015
Here are a set of exercise that will help you to solidify your knowledge of JavaScript.
5116

@@ -55,15 +20,15 @@ https://github.com/CodeYourFuture/JavaScript-Core-2-Coursework-Week3
5520

5621
Before you start, **make sure you fork the repository** to your Github account.
5722

58-
## 4) JavaScript Projects (8 hours)
23+
## 2) JavaScript Projects (8 hours)
5924

6025
Next, in the same repository complete all of the exercises in the "Project" folder.
6126

6227
https://github.com/CodeYourFuture/JavaScript-Core-2-Coursework-Week3
6328

6429
If you finish all of those, spend some time
6530

66-
## 5) Give feedback on your colleague's coursework (1 hour)
31+
## 3) Give feedback on your colleague's coursework (1 hour)
6732

6833
Use what you learned in this lesson to give feedback to other trainees who have submitted their coursework.
6934

@@ -85,15 +50,15 @@ Remember, you should use the Code Style Guide to help you
8550

8651
https://syllabus.codeyourfuture.io/guides/code-style-guide
8752

88-
## 6) CodeWars (1 hour)
53+
## 4) CodeWars (1 hour)
8954

9055
https://docs.codeyourfuture.io/course-processes/running-the-course/codewars#codeyourfuture-collections
9156

9257
Every week you need to complete at least three kata. Spend at least 20 minutes, three times a week, on your kata workout.
9358

9459
Find the Collection for JS-2 Week 2 on the CodeYourFuture account: https://www.codewars.com/users/CodeYourFuture/authored_collections
9560

96-
## 7) (Stretch) Extra Challenges
61+
## 5) (Stretch) Extra Challenges
9762

9863
Have you completed all of the above homework?
9964

docs/js-core-2/week-3/mentors.md

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,37 @@ We highly recommend joining the relevant Slack Channel for this module. In this
1616

1717
For general Syllabus feedback and help you can post in [cyf-syllabus](https://codeyourfuture.slack.com/archives/C012UUW69S8)
1818

19+
## Flipped classroom recap/Q&A
20+
21+
The flipped classroom practice should have trainees
22+
23+
- Revisit the DOM in the context of JavaScript programming
24+
- Run JavaScript from the browser (include a script in an html document with a script tag)
25+
- Use `querySelector` and `querySelectorAll`
26+
- `getElementById` is avoided except where relevant for CYF Blocks (out of desire not to overwhelm + querying classnames is more common)
27+
- css queries for elements, class names, ids are revisited
28+
- Iterate over the nodeList returned by `querySelectorAll` using for of
29+
- `[...nodeList].map` is described in case trainees want to use all array methods
30+
- Modify an element's attributes
31+
- `.innerText`
32+
- `.style.fontSize` (not preferred)
33+
- `.classList.add` (preferred)
34+
- Add a click event listener to an element
35+
- some handwaving about `event.preventDefault()`
36+
- Create new elements
37+
- `document.createElement`
38+
- `elem.appendChild`
39+
40+
Some questions/prompts that may be useful
41+
42+
- What do we need to do to run JavaScript from an html page?
43+
- What is the DOM?
44+
- How can we access and modify the DOM in JavaScript?
45+
- Why do we prefer adding class names rather than directly modifying styles?
46+
- What is an event?
47+
- What is an event listener/handler?
48+
- How are the callback functions in array methods/event listeners similar/different?
49+
1950
## Presentations
2051

2152
- [JS 2 Week 3 - 2023 - London](https://docs.google.com/presentation/d/1SmA3dXyxhRUHRLpKBhbptYF04V6xIoYXbKtfnU0WEEg/edit?usp=sharing)

0 commit comments

Comments
 (0)