├── .gitignore ├── LICENSE ├── README.md ├── programmes ├── CANDI │ └── README.md ├── README.md └── fac-intro │ ├── README.md │ ├── Week-1 │ └── README.md │ ├── Week-2 │ └── README.md │ ├── Week-3 │ └── README.md │ └── Week-4 │ └── README.md └── workshops ├── README.md ├── codewars-intro └── README.md ├── dom-manipulation ├── README.md ├── index.html └── main.css ├── github-pages └── README.md └── intro-to-coding └── README.md /.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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # fac-access 2 | Sessions for supporting potential applicants before or during pre-reqs 3 | 4 | ![](https://media.giphy.com/media/132qeyvgJ2Al3i/giphy.gif) 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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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/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/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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 | ![](http://i.giphy.com/90F8aUepslB84.gif) 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/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/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 | -------------------------------------------------------------------------------- /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 | ![](https://i.imgur.com/zkjAJdK.png) 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 | 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 | ![](https://i.imgur.com/kG87TUl.png) 96 | 97 | Click the "Upload files" button and you'll see the upload screen: 98 | 99 | ![](https://i.imgur.com/ab19r35.png) 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 | ![](https://i.imgur.com/aw1NnBI.png) 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 | 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 | ![](https://i.imgur.com/8OJeZ3s.png) 132 | 133 | - Click the dropdown to select the `master` branch of your repository and click save 134 | 135 | ![](https://i.imgur.com/3hj0uhK.png) 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 | 165 |
166 | -------------------------------------------------------------------------------- /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 | --------------------------------------------------------------------------------