├── programmes
├── fac-intro
│ ├── README.md
│ ├── Week-2
│ │ └── README.md
│ ├── Week-3
│ │ └── README.md
│ ├── Week-4
│ │ └── README.md
│ └── Week-1
│ │ └── README.md
├── README.md
└── CANDI
│ └── README.md
├── workshops
├── dom-manipulation
│ ├── index.html
│ ├── main.css
│ └── README.md
├── README.md
├── intro-to-coding
│ └── README.md
├── codewars-intro
│ └── README.md
└── github-pages
│ └── README.md
├── LICENSE
├── .gitignore
└── README.md
/programmes/fac-intro/README.md:
--------------------------------------------------------------------------------
1 | # FAC Short Course :sunflower:
2 |
3 | A 4-week, part-time evening course, aimed at equipping new FAC applicants with the skills they need to start tackling the pre-requisites.
4 |
5 | One two-hour session per week, with an expectation of approx. 2 hours of work to do between sessions.
6 |
7 | - [**Week 1**](./Week-1): HTML
8 | - [**Week 2**](./Week-2): CSS
9 | - [**Week 3**](./Week-3): JavaScript
10 | - [**Week 4**](./Week-4): Codewars
11 |
--------------------------------------------------------------------------------
/programmes/README.md:
--------------------------------------------------------------------------------
1 | # Programmes
2 |
3 | ## [FAC Intro](./fac-intro)
4 |
5 | 4-week structured programme to introduce potential applicants to the various areas of our pre-reqs. Introduces the group to paired programming, HTML, CSS and JavaScript, using freeCodeCamp and Codewars.
6 |
7 | ## [CANDI Access Programme](./CANDI)
8 |
9 | Programme delivered to a group of BTEC computing students at City and Islington College. Starts at absolute beginner level of web development and builds up to completing a simple version of a To Do app using HTML / CSS / JavaScript. Provides a structure to progress through most of the freeCodeCamp parts of the FAC pre-reqs.
10 |
--------------------------------------------------------------------------------
/workshops/dom-manipulation/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Page Title
7 |
8 |
9 |
10 |
11 |
12 |
👉 DOM Manipulation 👈
13 |
14 |
15 | I am a square
16 | I am a triangle
17 | I have infinite sides ∞
18 | I am red
19 |
20 |
21 |
--------------------------------------------------------------------------------
/workshops/README.md:
--------------------------------------------------------------------------------
1 | # Workshops
2 |
3 | ## [Introducing DOM Manipulation](./dom-manipulation)
4 |
5 | A (roughly 2 hour) workshop to introduce DOM manipulation to prospective applicants. This is designed to support applicants to develop the knowledge and skills needed to complete the image carousel pre-req. Includes resources.
6 |
7 | Author: @arrested-developer
8 |
9 | ## [Introducing Github Pages](./github-pages)
10 |
11 | A workshop to introduce Git, Github and Github Pages to prospective applicants. Designed to support applicants to upload and set up their application one-page website.
12 |
13 | Author: @arrested-developer
14 |
15 | ## [Getting Started on Codewars](./codewars-intro)
16 |
17 | A short walkthrough on getting started with Codewars. Most of the session will revolve around participants pair programming on katas.
18 |
19 | Author: @charlielafosse
20 |
21 | ## [Introduction to Coding](./intro-to-coding)
22 |
23 | A 2-hour session, introducing HTML (and maybe a bit of CSS) for complete beginners.
24 |
25 | Author: @charlielafosse
26 |
27 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2019 Founders and Coders
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # Logs
2 | logs
3 | *.log
4 | npm-debug.log*
5 | yarn-debug.log*
6 | yarn-error.log*
7 |
8 | # Runtime data
9 | pids
10 | *.pid
11 | *.seed
12 | *.pid.lock
13 |
14 | # Directory for instrumented libs generated by jscoverage/JSCover
15 | lib-cov
16 |
17 | # Coverage directory used by tools like istanbul
18 | coverage
19 |
20 | # nyc test coverage
21 | .nyc_output
22 |
23 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
24 | .grunt
25 |
26 | # Bower dependency directory (https://bower.io/)
27 | bower_components
28 |
29 | # node-waf configuration
30 | .lock-wscript
31 |
32 | # Compiled binary addons (https://nodejs.org/api/addons.html)
33 | build/Release
34 |
35 | # Dependency directories
36 | node_modules/
37 | jspm_packages/
38 |
39 | # TypeScript v1 declaration files
40 | typings/
41 |
42 | # Optional npm cache directory
43 | .npm
44 |
45 | # Optional eslint cache
46 | .eslintcache
47 |
48 | # Optional REPL history
49 | .node_repl_history
50 |
51 | # Output of 'npm pack'
52 | *.tgz
53 |
54 | # Yarn Integrity file
55 | .yarn-integrity
56 |
57 | # dotenv environment variables file
58 | .env
59 |
60 | # next.js build output
61 | .next
62 |
63 | # DS_Store
64 |
65 | .DS_Store
66 |
--------------------------------------------------------------------------------
/workshops/intro-to-coding/README.md:
--------------------------------------------------------------------------------
1 | # Intro to Coding workshop :sunflower:
2 |
3 | A 2-hour session, introducing HTML (and maybe a bit of CSS). As taught by @yvonne-liu and @charlielafosse at [UP](https://up.org.uk/) in April 2019.
4 |
5 | ## Structure:
6 |
7 | #### Intro to web pages + HTML
8 | - [Slides here](https://hackmd.io/6OCETj9zTEGnRpdSULkGgQ)
9 |
10 | #### Teach HTML basics
11 | - Signup to Codepen
12 | - Slow codealong on how to make HTML elements (opening and closing tags)
13 |
14 | #### freeCodeCamp
15 | - [Introduction to Basic HTML and HTML5](https://learn.freecodecamp.org/responsive-web-design/basic-html-and-html5)
16 | - Work through first 3 or 4 exercises together
17 | - Try and get at least as far as 'Link to External Pages with Anchor Elements'
18 |
19 | #### Inspect/Dev tools fun
20 | - Delete Google doodle
21 | - Add own HTML elements!
22 |
23 | #### Slides on HTML + CSS + JS
24 | - Back to the [ slides](https://hackmd.io/6OCETj9zTEGnRpdSULkGgQ)
25 | - Final slide is intro to HTML challenge
26 |
27 | #### HTML challenge: Make own tribute page
28 | - Back on codepen
29 | - Show students the user stories for their page (slides above)
30 | - Show this dashing [example](https://codepen.io/charlielafosse/pen/qvMrmw?editors=1000)
31 | - Could add fun extras at the end if time? Add a tiny bit of CSS and JS (i.e make `p` elements blue, unleash an `alert()`)
32 |
--------------------------------------------------------------------------------
/workshops/dom-manipulation/main.css:
--------------------------------------------------------------------------------
1 | header {
2 | height: 100px;
3 | background: black;
4 | color: white;
5 | padding: 4px;
6 | }
7 |
8 | h1 {
9 | font-family: 'Helvetica', 'Arial', sans-serif;
10 | font-size: 64px;
11 | text-align: center;
12 | margin: 0;
13 | }
14 |
15 | main {
16 | display: flex;
17 | flex-direction: row;
18 | flex-wrap: wrap;
19 | width: 100vw;
20 | height: 100vh;
21 | justify-content: space-evenly;
22 | align-items: space-evenly;
23 | }
24 |
25 | section {
26 | width: 40vw;
27 | height: 40vh;
28 | margin: 16px;
29 | display: flex;
30 | justify-content: center;
31 | align-items: center;
32 | }
33 |
34 | #square {
35 | width: 40vw;
36 | height: 40vw;
37 | }
38 |
39 | #circle {
40 | width: 40vw;
41 | height: 40vw;
42 | border-radius: 20vw;
43 | }
44 |
45 | #rectangle {
46 | width: 40vmax;
47 | height: 20vmax;
48 | margin-top: 64px;
49 | }
50 |
51 | #triangle {
52 | width: 0;
53 | height: 0;
54 | border-left: 40vmin solid transparent;
55 | border-right: 40vmin solid transparent;
56 | border-bottom: 60vmin solid pink;
57 | border-top: none;
58 | padding-top: 30vmin;
59 | }
60 |
61 | .yellow {
62 | background: yellow;
63 | }
64 |
65 | .red {
66 | background: red;
67 | }
68 |
69 | .blue {
70 | background: blue;
71 | color: white;
72 | }
73 |
74 | .bigBorders {
75 | border: 15px solid black;
76 | }
77 |
--------------------------------------------------------------------------------
/programmes/fac-intro/Week-2/README.md:
--------------------------------------------------------------------------------
1 | # Week 2 Structure :hatched_chick:
2 |
3 | **_Before session starts:_**
4 |
5 | - _Take attendance_
6 | - _Check for social media permissions (let participants know that we'll be taking photos of the session and using them on social media - if they wpuld not like us to use their picture on social media, then they should find a moment to let a mentor know)_
7 |
8 | **HTML Recap** :pencil:
9 |
10 | - [HTML Demo here](https://codepen.io/charlielafosse/pen/pGVZQb)
11 | - Look at tribute page example, quiz students on HTML elements before inspecting
12 |
13 | **Pair Programming Week 2** :two_women_holding_hands:
14 |
15 | - Quick recap of last week's PP pointers
16 | - This week: [Hackmd slides here](https://hackmd.io/XmbOEh1ZSyuezb-G5l7TaQ)
17 |
18 | **Work through freeCodeCamp CSS** :palm_tree:
19 |
20 | - Pair up!
21 |
22 | **Inspect and discuss CSS on tribute page** :mag:
23 |
24 | - [Demo here](https://codepen.io/charlielafosse/pen/PVeEON)
25 | - Try to pick out and discuss the CSS that they've covered in freeCodeCamp...
26 |
27 | **Student-led code-along** :fire:
28 |
29 | - Starting with an HTML skeleton, make design requests (i.e 'I want a blue header'), and ask students to provide the CSS rules
30 |
31 | **Dev Tools 2: CSS** :hammer:
32 |
33 | - Leading on from last week, get students to mess about in the dev tools - change CSS of Facebook, Google etc.
34 | - Perhaps show altered pages and ask them to recreate?
35 |
36 | **Add CSS to tribute pages** :swimmer:
37 |
38 | - Pair up!
39 |
40 | **Homework** :apple:
41 |
42 | - Finish **'Basic CSS'** section of FCC
43 | - Continue tinkering with CSS of **tribute page** (and don't forget to **share the url of your Codepen** with your partner)
44 |
--------------------------------------------------------------------------------
/programmes/fac-intro/Week-3/README.md:
--------------------------------------------------------------------------------
1 | # Week 3 structure :information_desk_person:
2 |
3 | **_Before session starts:_**
4 |
5 | - _Take attendance_
6 | - _Check for social media permissions (let participants know that we'll be taking photos of the session and using them on social media - if they would not like us to use their picture on social media, then they should find a moment to let a mentor know)_
7 |
8 | **Intro** :wave:
9 |
10 | - [What the heck is JavaScript anyway?](https://hackmd.io/9vIkK0DYRe-_AqLpU9wA_g) hackmd slides
11 |
12 | **Console Codealong** :eyes:
13 |
14 | - Demo writing JS in the console
15 | - `alert()` might be a good place to start
16 | - Demo `console.log` and declaring `var`s too
17 |
18 | **freeCodeCamp** :tent:
19 |
20 | - 'Basic JavaScript' section
21 |
22 | - Pair up
23 |
24 | **Introduce JavaScript functions** :dizzy:
25 |
26 | - [Slides here](https://hackmd.io/R-qlj2BfTYCkWr3_KbXYEA)
27 |
28 | **Repl.it** :book:
29 |
30 | - How to use
31 | - JavaScript codealong. Demonstrate:
32 |
33 | 1. Function structure
34 |
35 | 2. A function without arguments
36 |
37 | 3. A function with arguments
38 |
39 | **Mob programme** :family:
40 |
41 | - Tackle as a group [the first FCC challenges on functions](https://learn.freecodecamp.org/javascript-algorithms-and-data-structures/basic-javascript/write-reusable-javascript-with-functions)
42 |
43 | **JS Challenges** :turtle:
44 |
45 | - [Slides here](https://hackmd.io/445IJxgQQ1S-inNrt7fndw)
46 | - Pair up and work on challenges! (If any pairs finish challenges, continue working on FCC)
47 |
48 | **Homework**:apple:
49 |
50 | - Continue working on freeCodeCamp **'Basic JavaScript'** :rocket:
51 | - If finished with that (very long!) section, 'Basic Data Structures' and 'Basic Algorithm Scripting' would be the next ones to tackle
52 |
--------------------------------------------------------------------------------
/programmes/fac-intro/Week-4/README.md:
--------------------------------------------------------------------------------
1 | # Week 4 Structure :muscle:
2 |
3 | **_Before session starts:_**
4 |
5 | - _Take attendance_
6 | - _Check for social media permissions (let participants know that we'll be taking photos of the session and using them on social media - if they wpuld not like us to use their picture on social media, then they should find a moment to let a mentor know)_
7 |
8 | **Recap last week** :turtle:
9 |
10 | - In particular recap **functions**
11 | - Perhaps discuss people's solutions to [last week's JS challenges](https://hackmd.io/445IJxgQQ1S-inNrt7fndw)
12 |
13 | **freeCodeCamp** :tent:
14 |
15 | - Pair work
16 | - Ideally, participants will be familiar with data types, `if` statements and `for` loops by this stage - but no worries if not
17 | - If anyone's already finished with 'Basic JavaScript', recommend them to help others. Or, they could work on 'Basic Data Structures' or 'Basic Algorithm Scripting' if they're paired with someone at the same level
18 |
19 | **Codewars** :fist:
20 |
21 | - Intro and signup
22 | - [Codewars tips and jargon busting](http://facresources.com/slides/codewars-intro.html#/) slides
23 |
24 | **Mob programme an 8kyu kata** :family:
25 |
26 | - Suggestions:
27 | - https://www.codewars.com/collections/training-js-series-for-javascript-beginner-myjinxin2015
28 | - https://www.codewars.com/kata/convert-a-number-to-a-string
29 | - https://www.codewars.com/kata/string-repeat
30 |
31 | **Kata session** :ocean:
32 |
33 | - Keep working on 8kyu katas
34 | - Try and have people working in groups, with a mentor each?
35 | - Then, if people in a group feel like they're ready, can pair up and split off and work on kata without a mentor overseeing
36 | - Similarly, if people feel they're adrift, they can move back to freeCodeCamp and get comfortable with the JS :smile:
37 |
38 | **Homework**: Continue the pre-reqs! :rocket:
39 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # fac-access
2 | Sessions for supporting potential applicants before or during pre-reqs
3 |
4 | 
5 |
6 | ## How to use
7 |
8 | This is a repository of materials that have been used or trialled to support potential applicants **before the point of application**. The aim is to help support a more diverse pool of applicants to reach the application stage.
9 |
10 | ### Workshops
11 | The [workshops](workshops) folder contains sessions designed to be led during a meetup, however some may also be suitable for applicants to go through independently. These are stand-alone workshops and each one can be used independently of another.
12 |
13 | ### Programmes
14 | The [programmes](programmes) folder contains grouped programmes of content, structured to be delivered to the same group over a period of time. The first of these is to build a simple To Do app, and was trialled with students at City and Islington College.
15 |
16 | ## Contributing
17 |
18 | Contributions are welcomed - any materials that have been used to support people in their journey towards being coders can be added to this repo. Materials should be **for beginners only** i.e. suitable for the level of coders up to the end of the FAC pre-requisites.
19 |
20 | Please design workshops and programmes for this repo as facilitated sessions. It may be helpful to include specific questions that will check the participants have understood each section.
21 |
22 | Workshops and programmes should be added in a folder of their own, containing (as far as possible) all resources necessary to deliver the content. If you think it necessary, please include notes about delivering the session.
23 |
24 | Add a link and description to [workshops](workshops) or [programmes](programmes) so your resource can be found.
25 |
26 | To add new content to this repo, please create a PR and assign it to @arrested-developer or the current course facilitator to be merged.
27 |
--------------------------------------------------------------------------------
/workshops/codewars-intro/README.md:
--------------------------------------------------------------------------------
1 | # Getting Started on Codewars :muscle:
2 |
3 | A workshop/meetup specifically geared towards helping applicants with tackling Codewars.
4 |
5 | _There may well be participants who haven't started tackling 'Basic JavaScript', 'Basic Data Structures' or 'Basic Algorithm Scripting' on freeCodeCamp (or who haven't even started writing JS yet). It'll still be worth them following the walkthrough and the slides, but probably encourage them to start with the aforementioned fCC sections before actually trying to solve kata, as they may feel out of their depth._
6 |
7 | _For something easier than 'Basic Algorithm Scripting' that will get participants used to writing functions, perhaps give [these JavaScript challenges](https://hackmd.io/445IJxgQQ1S-inNrt7fndw) a try._
8 |
9 | ### Intro to Codewars :hatching_chick:
10 | - [Here are the slides](https://facresources.com/slides/codewars-intro.html#/)
11 | - [Here's the nicer newer version](https://facresources.com/slides/codewars-intro.html#/)
12 | - I'd recommend jumping to signup :point_down: after the 'What's Kyu?' slide
13 |
14 | ### Signup :clipboard:
15 | - Worth walking through the signup process on the board, and letting participants follow on their laptops
16 | - Solve signup problem together
17 |
18 | ## Choosing Kata :sparkles:
19 | - [Slide](https://facresources.com/slides/codewars-intro.html#/4)
20 | - Walkthrough filtering kata by `most completed` and `most popular` etc. Also show how to filter by `kyu` and `language`
21 | - Explain the stats of a kata, like `satisfaction rating`
22 |
23 | ### Mob programme an 8kyu kata :family:
24 | - Make sure to walkthrough and explain the different parts of the training window, like `Instructions` and `Output`
25 | - Suggestions:
26 | - https://www.codewars.com/collections/training-js-series-for-javascript-beginner-myjinxin2015
27 | - https://www.codewars.com/kata/convert-a-number-to-a-string
28 | - https://www.codewars.com/kata/string-repeat
29 |
30 | ### Kata session :ocean:
31 |
32 | - Keep working on 8kyu katas
33 | - Try and have people working in table groups, with a mentor each?
34 | - Then, if people in a group feel like they're ready, can pair up and split off and work on kata without a mentor overseeing
35 | - Similarly, if people feel they're adrift, they can move back to freeCodeCamp and get comfortable with the JS :smile:
36 |
--------------------------------------------------------------------------------
/programmes/fac-intro/Week-1/README.md:
--------------------------------------------------------------------------------
1 | # Week 1: Toolkit and HTML :seedling:
2 |
3 | **_Before session starts:_**
4 | - Make sure that short course Gitter room is open, and that attendees have joined.
5 | - Pass around attendance sheet.
6 | - Check for social media permissions (let participants know that we'll be taking photos of the session and using them on social media - if they would not like us to use their picture on social media, then they should find a moment to let a mentor know).
7 | - Attendees should've received an email with instructions to sign up for Github, Gitter, freeCodeCamp and Codepen, but it's good to still double check with people as they arrive (there should be a slide with details that you can display as people come in).
8 |
9 | ### [Link for slide deck](http://facresources.com/slides/short-course-week1.html#/)
10 |
11 | There are speaker notes, where necessary, in the slide deck - you'll just need to hit `s` to access them. They're also pasted below in italics.
12 |
13 | ### Course structure with suggested timings:
14 |
15 | (These have been left fairly flexible, as each group is different!)
16 |
17 | - #### Welcome to FAC + intro to the short course (10mins)
18 | - _While people are arriving, make sure they're signed up for Github, Gitter, freeCodeCamp and Codepen. Also pass round the attendance sheet._
19 |
20 | - #### Intro to web development (5-10mins)
21 |
22 | - #### How to use freeCodeCamp (5mins)
23 | - _Give a quick guide around freeCodeCamp - explain the layout of the challenge window, the different sections, and how to complete a challenge. Perhaps 'mob programme' the first challenge of 'Basic HTML and HTML5' together, before letting students carry on with the challenges by themselves for 20-30mins._
24 |
25 | - #### Work on freeCodeCamp (20-30mins)
26 |
27 | - #### Using Dev Tools (5-10mins)
28 | - _Show students how to inspect a webpage, and how to use the dev tools for seeing the HTML under the hood. It can then be fun to delete the HTML for the Google logo, or to mess around and do some editing._
29 |
30 | - #### Intro to Pair Programming (5mins)
31 | - _Explain that we'll be covering other pair programming methods in the coming weeks._
32 |
33 | - #### Intro to Codepen (5mins)
34 | - _Run through how to use Codepen - including how to fork someone else's pen. Show this basic example pen, if need be: https://codepen.io/charlielafosse/pen/pGVZQb_
35 |
36 | - #### Project Work (30-45mins)
37 | - _You might want to let pairs spread out and sit elsewhere if the classroom is cramped. Try to stop them at 8.25 so you have time to wrap up._
38 | - _Check one last time that you've got everyone's attendance (there may have been latecomers)._
39 |
40 |
--------------------------------------------------------------------------------
/programmes/CANDI/README.md:
--------------------------------------------------------------------------------
1 | # City and Islington Access Course
2 |
3 | ## Overview
4 |
5 | This is roughly the course that was delivered with the first group of students at CANDI. We worked with BTEC Computing students, so they already had some strong concepts, and had done most of their coding with Python.
6 |
7 | The students were keen to create an app, so we worked on creating a relatively simple To Do list app, using HTML, CSS and Javascript.
8 |
9 | NB: This programme may need to be adapted a fair bit if used with a group with less experience of coding - In particular the JS concepts such as array manipulation were picked up very fast as they could link them with their learning about lists in Python.
10 |
11 | ## Weekly Outline
12 |
13 | ### Week 1 - HTML
14 |
15 | ### Intro (20 mins)
16 |
17 | - Introduce students to Github and get them signed up.
18 | - Introduce students to Gitter and explain that we'll use it to support each other and share our progress
19 | - Introduce students to freeCodeCamp
20 | - Share the Tribute Page challenge and some good quality examples, and explain that we'll work on building our skills to make our own
21 |
22 | #### Part 1
23 |
24 | - 20mins working individually on freeCodeCamp
25 | - 20mins pairing and supporting each other on freeCodeCamp
26 |
27 | #### Part 2
28 |
29 | - 40mins start to make a tribute page in HTML in pairs
30 | - 20mins share links on Gitter and discuss progress as a group
31 |
32 | #### Homework
33 |
34 | - Finish the basic HTML section on fCC by next week
35 |
36 | ### Week 2 - CSS
37 |
38 | #### Part 1
39 |
40 | - 40mins working individually on freeCodeCamp Basic CSS
41 | - 20mins pairing to support each other
42 |
43 | #### Part 2
44 |
45 | - 40mins to work on tribute page, adding styling
46 | - 20mins to share progress and discuss what we'd like to add
47 |
48 | #### Homework
49 |
50 | - Finish the basic CSS section on fCC by next week
51 |
52 | ### Week 3 - Responsive Design
53 |
54 | #### Part 1
55 |
56 | - 40mins working individually on freeCodeCamp Responsive Web Design and Flexbox
57 | - 20mins pairing to support each other
58 |
59 | #### Part 2
60 |
61 | - 40mins to work on tribute page, adding styling, making responsive
62 | - 20mins to share final outcome and discuss what we'd like to add if we had more time
63 |
64 | #### Homework
65 |
66 | - Finish the Responsive Web Design and Flexbox sections on fCC by next week
67 | - Put finishing touches on tribute page if desired
68 |
69 | ### Week 4 - Javascript
70 |
71 | #### Part 1
72 |
73 | - Introduce To Do list app challenge
74 | - 40mins working individually on freeCodeCamp Basic Javascript
75 | - 20mins pairing to support each other
76 |
77 | #### Part 2
78 |
79 | - 40mins to research JS array methods and compare with Python lists
80 | - 20mins to discuss how you would use array methods to organise a to-do list
81 |
82 | #### Homework
83 |
84 | - Finish the basic JS section by next week
85 |
86 | ### Week 5 - Design Heuristics and Prototyping
87 |
88 | #### Part 1
89 |
90 | - 20mins introduction to design heuristics (using [design burst 1](https://github.com/foundersandcoders/design-bursts))
91 | - 20mins research existing products/ design patterns
92 | - 20mins discuss how existing products meet design heuristics
93 |
94 | #### Part 2
95 |
96 | - 20mins introduce Figma
97 | - 40mins work in pairs to create 1-page prototype
98 |
99 | #### Homework
100 |
101 | - Finish 1-page prototype
102 |
103 | ### Week 6 - Build to-do app in HTML/CSS
104 |
105 | #### Part 1
106 |
107 | - introduce reset.css or normalise.css, demo an HTML layout for the app
108 | - 40mins in pairs to create layout using semantic HTML / CSS
109 | - 20mins share progress and discuss
110 |
111 | #### Part 2
112 |
113 | - 40mins in pairs to add CSS and styling
114 | - 20mins share progress and set targets for homework
115 |
116 | #### Homework
117 |
118 | - Finish HTML/CSS layout
119 |
120 | ### Week 7 - DOM manipulation
121 |
122 | #### Part 1
123 |
124 | - go through [DOM manipulation workshop](../../workshops/dom-manipulation)
125 |
126 | #### Part 2
127 |
128 | - demo how to use DOM manipulation to make the to-do page interactive (link up the form and submit button to add items into the UL, give each one a button to mark it as done and a button to delete it)
129 | - 40 mins in pairs to add JS to the HTML/CSS to-do apps
130 |
131 | #### Homework
132 |
133 | - Continue basic JS on fCC
134 |
135 | ### Week 8 - Managing State
136 |
137 | #### Part 1
138 |
139 | - introduce the idea of keeping state in JS and rendering it into the DOM
140 | - demo using an array of to-do items, using objects with title and status
141 | - discuss what functions will be needed to manipulate the list
142 | - add a to-do item
143 | - remove a to-do item
144 | - toggle an item as done / not done
145 | - sort the list by status (done / not done)
146 | - students in pairs to write the necessary JS functions to manipulate the array
147 |
148 | #### Part 2
149 |
150 | - discuss how to link the logic with the DOM
151 | - students in pairs to write a render function that puts the state into the page
152 | - 20mins share and discuss
153 |
--------------------------------------------------------------------------------
/workshops/dom-manipulation/README.md:
--------------------------------------------------------------------------------
1 | # introducing-dom-manipulation
2 |
3 | An intro to DOM manipulation with vanilla JS
4 | Author: @arrested-developer
5 |
6 | 
7 |
8 | ## Tutorial
9 |
10 | ### Step 1 - The DOM
11 |
12 | Open the index.html page from this repo, you can find it [here](https://arrested-developer.github.io/introducing-dom-manipulation/)
13 |
14 | Open the dev tools JavaScript console in your browser -- In Chrome you can press Command+Option+J (Mac) or Control+Shift+J (PC)
15 |
16 | First, type into your console
17 |
18 | ```
19 | console.log(document)
20 | ```
21 |
22 | What you see here is a representation of the DOM - the **D**ocument **O**bject **M**odel
23 |
24 | If we type
25 |
26 | ```
27 | typeof document
28 | ```
29 |
30 | We should see that it is an object. The DOM is how JavaScript interacts with a web page, using a JavaScript object that initially represents the structure of the HTML page.
31 |
32 | > Note: On Chrome, you'll see the DOM represented in the console as something that looks very much like an HTML document. In Firefox it may look more like a JS object. If you type `document.` you should see a long list of properties and methods of the DOM
33 |
34 | ### Step 2 - Selecting elements
35 |
36 | If you look at the HTML source of the page, you'll see that each shape is a `section` with its own unique id.
37 |
38 | We can select these elements of the page in a few different ways:
39 |
40 | `document.getElementById('square')` should get you the square section. It returns just one element (every element _should_ have a unique ID, so there should only ever be one thing to return)
41 |
42 | `document.querySelector('#square')` will also get you the square section. querySelector takes any CSS selector and queries the contents of the DOM. It returns **one** result.
43 |
44 | `document.querySelectorAll('.red')` will get you _both_ the elements with the class `red`. They will come back as a NodeList. This looks very similar to an array, but you won't be able to use array methods on it such as `map` and `reduce`. You can access each item using an index, e.g. `myNodeList[0]`, and you can iterate over it using a `for` loop or using `forEach()`.
45 |
46 | [NodeList on MDN](https://developer.mozilla.org/en-US/docs/Web/API/NodeList)
47 |
48 | - How would you select the section with the id of circle?
49 | - What is returned by `document.querySelectorAll('#square')` ?
50 | - What is returned by `document.querySelector('.red')` ?
51 |
52 | ### Step 3 - Changing text content
53 |
54 | Although they appear in the Chrome console visually as HTML elements, DOM nodes are JavaScript objects, with many properties and methods.
55 |
56 | [What is a Node?](https://www.w3schools.com/js/js_htmldom_navigation.asp)
57 |
58 | The `innerText` property of a node contains whatever text is inside the HTML element.
59 |
60 | e.g. `
this is the innerText of this paragraph element
`
61 |
62 | We can use `document.getElementById('square').innerText` to get the text inside of the square.
63 |
64 | To change it, we just use `=` to assign a new value:
65 |
66 | `document.getElementById('square').innerText = 'I love right angles'` will change the text inside the element on the page. Take a look! 👀
67 |
68 | - How could you change the text inside the triangle?
69 | - How could you assign the text inside the circle to a variable? Could you use this variable to change the text too?
70 |
71 | ### Step 4 - Adding and removing classes
72 |
73 | Let's start by assigning the circle to a variable
74 | `var circle = document.querySelector('#circle')`
75 |
76 | Now we can use methods on the object `circle` to add and remove classes.
77 |
78 | To remove the `blue` class from the section, we can write:
79 | `circle.classList.remove('blue')`
80 |
81 | Take a peek and see how it looks.
82 |
83 | To add the yellow class, we can write:
84 | `circle.classList.add('yellow')`
85 |
86 | - What now would be returned by `document.querySelectorAll('.yellow')` ?
87 | - What happens if you add the yellow class before removing the blue class? Why? _Hint: CSS_
88 | - How would you change the rectangle to appear blue by adding and removing classes?
89 |
90 | ## Step 5 - Add event listeners
91 |
92 | To further embed the fun of JavaScript interactivity into the DOM, we can add event listeners to elements. There are many different events you can listen for, but some of the most often used are `click`, `onmouseover`, `onload`. They all happen at different times, you can read more [here](https://www.w3schools.com/js/js_htmldom_eventlistener.asp)
93 |
94 | We're going to add a click event listener to the rectangle.
95 |
96 | Start by creating a variable to store the rectangle DOM node.
97 |
98 | Next we're going to make a new function that changes the class of the target that is clicked on:
99 |
100 | ```
101 | function changeClass(event) {
102 | event.target.classList.toggle('bigBorders');
103 | }
104 | ```
105 |
106 | [The event object - MDN](https://developer.mozilla.org/en-US/docs/Web/API/Event)
107 |
108 | Now we're going to add our new function to an event listener by typing:
109 |
110 | `rectangle.addEventListener('click', changeClass)`
111 |
112 | ## Step 6 - Directly changing CSS properties
113 |
114 | [CSS properties in JavaScript](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Properties_Reference) are often written slightly differently than in CSS.
115 |
116 | To change the left margin of an element we can use:
117 |
118 | ```
119 | var circle = document.querySelector("#circle");
120 | circle.style.marginLeft = "20px";
121 | ```
122 |
123 | Have a read through the above link, then try to target specific elements in the DOM and change their properties. Get creative! 🎨
124 |
125 | ## More Resources
126 |
127 | - [Google: 'Get Started with DevTools console'](https://developers.google.com/web/tools/chrome-devtools/console/get-started)
128 | - [Google: 'DevTools for Beginners - the DOM'](https://developers.google.com/web/tools/chrome-devtools/beginners/html)
129 | - [Call Me Nick - DOM Manipulation Basics](https://web.archive.org/web/20170718105716/https://callmenick.com/post/basics-javascript-dom-manipulation) (archived version) will cover a lot of the basics.
130 | - [MDN article on "Manipulating Documents"](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents) - useful for some further reading, if you'd like
131 | - [Appspot's DOM Tutorials: Exercises 1,2 & 3 only](https://dom-tutorials.appspot.com/static/index.html) will help put that into practice.
132 | - Bonus videos:
133 | - [Live coding intro to the DOM, with JS examples](https://www.youtube.com/watch?v=eaLKqoB9Fu0)
134 |
--------------------------------------------------------------------------------
/workshops/github-pages/README.md:
--------------------------------------------------------------------------------
1 | # introducing-github-pages
2 |
3 | A light overview of Github, what it is and why we use it.
4 | Author: @arrested-developer
5 |
6 | ## Git
7 |
8 | Git is version-tracking software. Coders use Git to track their projects because it allows them to go back through the changes made as they add to their code.
9 |
10 | Git is like a save button for your project that allows you to "undo" your changes and go back through all of your previous saves.
11 |
12 | This has two **huge** benefits:
13 |
14 | - When you notice a [bug](https://www.atlasobscura.com/places/grace-hoppers-bug) and can't work out where it came from, you can revert back to previous versions of your code and trace where the bug first began, and which lines of code changed when it did.
15 | - You can add new features to your code and make changes as you like, safe in the knowledge that if everything breaks you can easily jump back to a previous "saved" version where you knew your code was reliable and trustworthy.
16 |
17 | _Note: We don't expect you to be using Git to track your projects while completing the pre-reqs, although if you do want to try it out you might find it very useful! You don't need to have Git installed on your computer in order to publish on Github Pages. - [How to install Git](https://git-scm.com/book/en/v2/Getting-Started-Installing-Git)_
18 |
19 | ## Some terminology
20 |
21 | Git and Github use some specific terminology. You may need to know:
22 |
23 | - **Repository (or repo)** - A folder that Git is tracking changes in
24 | - **Commit** - "save" or update the state of your repository
25 | - **Clone** - copy the contents of a repo to your own computer
26 | - **Fork** - make a new copy of someone else's repository
27 | - **Branch** - A **branch** of a repository is like a separate copy of the project that can be changed without changing the original files. Used so that multiple members of a team can work on the same project without interfering with each other's work.
28 | - **Master** - on most projects, **Master** is the "main" or "original" branch
29 | - **Merge** - when new code is written on a branch, it must then be **merged** back into Master to add the new changes to the project.
30 |
31 | ## Github
32 |
33 | Github is a social network, built around Git. We asked you to set up a Github account when you started the pre-requisites, and we'll be looking at your Github account to see your personal website.
34 |
35 | Github allows users to:
36 |
37 | - See each other's repositories
38 | - Collaborate on a repository
39 | - Comment on your own and other people's code
40 | - Publish their repositories as web pages
41 |
42 | We're going to look in more detail at that last one - **publishing a repository as a web page**
43 |
44 | ## Publishing to Github Pages
45 |
46 | ### Intro
47 |
48 | By default, your repositories can be seen by other users. They can see the files in a repo, and they can look at every line of your code, but they can't _run_ or _execute_ the code. We asked you to work on a website for the pre-requisites, and we want to be able to see it running in a web browser.
49 |
50 | Thankfully there is a way to do this. **Github Pages** allows your repository to be accessed not only by looking at your Github profile, but also by navigating to a slightly different address in your web browser that allows you to load the files directly. We're going to walk through creating a simple website on Github Pages.
51 |
52 | ### Walkthrough
53 |
54 | #### Create a new repository on Github
55 |
56 | - Go to www.github.com and make sure you are logged in.
57 | - Click on the avatar at the top-right and select "Your Repositories"
58 | - Click "New" and fill in a name and description for your new repo
59 | 
60 | - It's not essential, but it's a good idea to tick the "Initialize this repository with a README" checkbox - this will allow you to clone the repo to your computer if you choose to later.
61 | - Free Github accounts only allow public repositories, and this will work fine for what we're doing.
62 |
63 |
64 | Questions:
65 |
66 |
What is a repository?
67 |
What are some advantages of using one?
68 |
69 |
70 |
71 | #### Create an index.html for your website
72 |
73 | Start with an empty folder for this website.
74 |
75 | The first thing you'll need to do is create an HTML page. Use your chosen code editor to create a basic HTML template, making sure there is some content in there that the user will see.
76 |
77 | e.g.
78 |
79 | ```
80 |
81 |
82 | My Github Page
83 |
84 |
85 |
Hello, world!
86 |
87 | ```
88 |
89 | Save this file in your project folder as `index.html`
90 |
91 | ### Upload index.html to your repository
92 |
93 | On github.com, navigate to your repositories and click on the one you just created. You should see something like this:
94 |
95 | 
96 |
97 | Click the "Upload files" button and you'll see the upload screen:
98 |
99 | 
100 |
101 | - Drag your `index.html` file from your computer into the box.
102 | - Add a description about the changes you want to make - in this case a good message would be "Add index.html"
103 | - You can add an extended description if you like, but this isn't really necessary unless your one-line description isn't clear enough.
104 | - As you're working on your own, you can commit your changes directly to the `master` branch.
105 | - Click "Commit changes" to make this change to your repository
106 |
107 | ### Check that index.html is in your repo
108 |
109 | Once the file has uploaded, you should be taken back to your repository page. The new file should be listed.
110 |
111 | 
112 |
113 | You can see the commit message that you wrote when you added the file. This can help you to see when the file was last changed.
114 |
115 |
116 | Questions:
117 |
118 |
What is a commit?
119 |
Why does README.md have a different commit message?
120 |
121 |
122 |
123 | ### Enable Github Pages
124 |
125 | Make sure you're viewing your repository on Github.
126 |
127 | - Click the "Settings" button
128 |
129 | You should see a section on Github Pages that looks something like this:
130 |
131 | 
132 |
133 | - Click the dropdown to select the `master` branch of your repository and click save
134 |
135 | 
136 |
137 | **Note: You don't need to choose a theme - for your personal website we specify that you should not use one**
138 |
139 | Once the settings have saved, you'll see the URL for your published website. Click on it and check that your page looks as expected.
140 |
141 | ### Well done! You published to Github Pages!
142 |
143 | ### Next Steps
144 |
145 | - You can add more files to your site, using the file upload box as before
146 | - Try adding CSS and Javascript to your page and including them in your index.html
147 |
148 | ## Making your personal Github page
149 |
150 | Once you're confident with all the steps above, you can create your personal Github page, which will have an address starting with your username, like arrested-developer.github.io
151 |
152 | **What? You mean I'm not done yet?**
153 |
154 | Nope! But this walkthrough should help you with the knowledge you need to do this on your own.
155 |
156 | The only thing you need to do differently is to start by creating a repo, and **naming the repository the same as your github page _will be named_, i.e. your-username.github.io**
157 |
158 | If you've done this, then when you change the settings on your repo to set up Github Pages, it will give it the address of your personal page
159 |
160 |
161 | Questions:
162 |
163 |
What do you need to do differently to get your personal Github Pages address?