|
| 1 | +--- |
| 2 | +title: Hack Brexit open source accelerator overview |
| 3 | +--- |
| 4 | +# Introduction - Overview |
| 5 | + |
| 6 | +### What will we learn |
| 7 | + |
| 8 | +* How websites are made |
| 9 | + |
| 10 | +* How to put up your own webpage |
| 11 | + |
| 12 | +* Basic skills and tools that will be useful for any coding you do |
| 13 | + |
| 14 | +We hope you will become curious about how the Internet works and will look at websites in a different way. |
| 15 | + |
| 16 | +### How courses will be run |
| 17 | + |
| 18 | +The hardest thing about learning to program is knowing **where** to start and **what** to learn. |
| 19 | + |
| 20 | +The course **aims** to provide a basic overview of the technologies used, along with the tools and resources to discover more. |
| 21 | + |
| 22 | +The **focus** of this course is learning the basics of how and why things work and to provide the basis to build upon in future courses. We will **not** be able to cover everything in great depth or comprehensive detail. |
| 23 | + |
| 24 | +Sessions will be as **hands-on and practical** as possible. Each week there will be a number of tasks to do in between the sessions to reinforce what you have learnt. |
| 25 | + |
| 26 | +It’s up to you whether you do the tasks or not, but the more you put in the more you will get out! If you’re ever in doubt, [Google it](http://lmgtfy.com/?q=how+do+i+use+google%3F), check [StackOverflow](http://lmgtfy.com/?q=how+do+i+use+stackoverflow), ask the person beside you, or ask one of us! |
| 27 | + |
| 28 | +**Now, let’s check that you’ve installed all the right software and signed up for GitHub and the Student Developer Pack!** |
| 29 | + |
| 30 | +**Note:** |
| 31 | + |
| 32 | +**DEMOS will be in blue with a salmon background -**** Like this.**** - Please show them to do this as you talk through it.** |
| 33 | + |
| 34 | +**STUDENT TASKS will be in red with a pale-blue highlighted background -**** ****Like this.** |
| 35 | + |
| 36 | +# Introduction - Session by Session Course Overview |
| 37 | + |
| 38 | +### Pre-course Preparation: Welcome |
| 39 | + |
| 40 | +* Welcome to web dev & Code First: Girls community |
| 41 | +* Basic intro to web languages with mention of HTML, CSS, JS (jQuery) & how they are related (i.e. web pages & web servers) |
| 42 | +* Not expected to understand the syntax, but we will demonstrate what each language does to a web page |
| 43 | +* Introduction to the tech community, resources & how to study, developer news |
| 44 | +* Open-source, collaboration (GitHub), stack overflow, w3 schools for online references |
| 45 | +* How can i quickly get help? how can i meet other developers? |
| 46 | +* what can these skills prepare me for? where do I go after this course? |
| 47 | +* To Do 1: Create a github account, sign up for GitHub Student Developer pack |
| 48 | +* To Do 2: installing software: Chrome, GitHub Desktop Client (https://desktop.github.com/), Atom / Sublime Text |
| 49 | +* To Do 3: GA Dash 1 |
| 50 | + |
| 51 | +### Session 1: Getting going + HTML |
| 52 | +* software installation troubleshooting (10 minutes) |
| 53 | +* Intro to webpages & web servers (10-15 mins) |
| 54 | +* Creating a HTML page (15 mins) |
| 55 | +* HTML syntax - use a demo to talk through it (10-15 mins) |
| 56 | +* Homework: Internet video, GA Dash 2, create your own website locally, read something on CSS |
| 57 | + |
| 58 | +### Session 2: CSS |
| 59 | +* Mention using CSS in <head> tags, but get them to use CSS in a separate file. |
| 60 | +* CSS, Selectors and Attributes, Stylesheets |
| 61 | +* Competition: Explain competition criteria, ask everyone to form teams by week 3 and brainstorm ideas - collaborate on Fb/Slack. |
| 62 | +* Homework: GA Dash 3, Why do software developers collaborate, and what tools are available for them to do so easily? |
| 63 | + |
| 64 | + |
| 65 | +### Session 3: GitHub & the Command Line |
| 66 | +* How to use GitHub - what is version control? & Q&A (basic concepts, commits, pulls, forks, etc) (10 mins) |
| 67 | +* GitHub Pages (https://pages.github.com/), hosting your website (+ talking about competition) (10 mins) |
| 68 | +* Mention other things available on GitHub (https://education.github.com/pack for students), GitHub Gist |
| 69 | +* Introduction to the Command Line - live demo / exercises with students |
| 70 | +* Competition: Spend 10 mins at the end of the session ask the participants to get into their teams. Find teams for those who do not yet have a team. Write down names of teams and ideas. Explain competition criteria again to students (outlined below) |
| 71 | + |
| 72 | + |
| 73 | + |
| 74 | +### Session 4: Recap & basic development concepts + Course competition |
| 75 | +* Recap HTML & CSS, webservers & URL (10-15 mins) |
| 76 | +* Introduction to frameworks & libraries (in CSS & JS later) |
| 77 | +* What is an API? How is it different from a Framework? |
| 78 | +* Course competition: Start working on your websites! Create the project repository & add HTML & CSS files. Encourage groups to meet up outside class to work on the project |
| 79 | + |
| 80 | + |
| 81 | +### Session 5: Bootstrap |
| 82 | +* Using Twitter Bootstrap to improve presentation of webpages |
| 83 | +* Homework: make your website responsive |
| 84 | + |
| 85 | + |
| 86 | +### Session 6: JavaScript & jQuery |
| 87 | +* Basic JS + resources for JS |
| 88 | +* jQuery: what? - talk about how it’s different from JavaScript |
| 89 | +manipulating CSS with jQuery + AJAX(?) |
| 90 | + |
| 91 | +### Session 7: Plugins, website metrics, hosting & Working on projects |
| 92 | +* Metrics: Google Analytics, Google Forms |
| 93 | +* CloudFlare, domain names & CNAME |
| 94 | +* (Optional): External APIs - Twitter, Facebook - ? |
| 95 | +* Work on group projects for the CF:G Competition |
| 96 | + |
| 97 | +### Session 8: Course Competition: Presenting final projects |
| 98 | +* Spend the first 30 minutes finalising project websites. |
| 99 | +* Spend at least 1 hour on group presentations (5-10 mins/group). |
| 100 | +* Instructors to choose a winner and announce it at the end of the session. |
| 101 | + |
| 102 | + |
| 103 | +### Competition Guidelines |
| 104 | + |
| 105 | +The CF:G competition is a chance for students to put into practice the skills learnt on the course. Students can work individually or in groups of 2-3 to create a landing page for a website. Aim to form teams by Week 3. |
| 106 | + |
| 107 | +The criteria for the competition are here: |
| 108 | +* A visually appealing design - good use of CSS and HTML elements, Twitter Bootstrap |
| 109 | +* Good formatting |
| 110 | +* Code split into the appropriate files |
| 111 | +* Files indented properly |
| 112 | +* A live website (Github page, Heroku or own domain) |
| 113 | +* Extras e.g: |
| 114 | +* A contact form (for example name and email) |
| 115 | +* Social buttons |
| 116 | +* Widgets |
| 117 | +* As many different HTML elements you can manage |
| 118 | +* Interactive elements (like forms) on the website don’t need to be functional, but should be present if they need to be for the visual aspect of the design. |
| 119 | +* (optional) Good organisation |
| 120 | +* Version control using GitHub |
| 121 | +* Sensible commit messages |
| 122 | + |
| 123 | +Some of the winning entries from last term's competition can be found here. |
| 124 | +There'll be prizes of Amazon vouchers for the winning team and a chance to be pitched alongside the winning entries from courses around the U.K. for a grand prize. |
0 commit comments