├── _lessons ├── 16_backend │ └── 15_backend.md ├── 20_backend │ └── 20_backend.md ├── 22_project │ └── 22_project.md ├── 23_project │ └── 23_project.md ├── 06_version-control-deployment │ ├── notes.md │ └── 06_version-control-deployment.md ├── 05_acceptance-criteria-roadmapping │ ├── notes.md │ └── 05_acceptance-criteria-roadmapping.md ├── 23_specification │ └── 23_specification.md ├── 04_navigation-prototyping │ ├── notes.md │ └── 04_navigation-prototyping.md ├── 19_backend │ └── 19_backend.md ├── 01_intro-to-agile │ ├── notes.md │ └── 01_intro-to-agile.md ├── 09_frontend │ ├── notes.md │ └── 09_frontend.md ├── 18_backend │ └── 18_backend.md ├── 21_backend │ └── 21_backend.md ├── 12_backend │ └── 12_backend.md ├── 10_frontend │ └── 10_frontend.md ├── 07_frontend │ └── 07_frontend.md ├── 15_backend │ └── 15_backend.md ├── 13_site-building-team │ └── 13_site-building-team.md ├── 02_user-stories │ ├── notes.md │ └── 02_user-stories.md ├── 08_frontend │ ├── notes.md │ └── 08_frontend.md ├── 11_backend │ └── 11_backend.md ├── 00_intro │ ├── 00_overview.md │ ├── template.md │ └── 00_intro.md ├── 03_user-driven-development │ ├── notes.md │ └── 03_user-driven-development.md ├── 14_hackathon │ └── hackathon.md ├── README.md └── xx_stash_holding-area-for-cut-content │ └── xx_stash.md ├── foundation ├── 05_build_drupal_site.md ├── 04_intro_to_drupal.md ├── 03_content_management_systems.md ├── 07_site_building.md ├── 06_management.md ├── 10_build_your_site.md ├── 09_contrib_modules.md ├── README.md ├── 02_html_basics.md ├── 01_introduction.md └── 08_themes.md ├── contributing.md ├── resources.md ├── _tests └── custom-user-block.md ├── roadmap.md ├── template.md ├── SUMMARY.md ├── tutorials └── open_drupal_vm.md ├── README.md └── _units └── README.md /_lessons/16_backend/15_backend.md: -------------------------------------------------------------------------------- 1 | @todo 2 | -------------------------------------------------------------------------------- /_lessons/20_backend/20_backend.md: -------------------------------------------------------------------------------- 1 | @todo 2 | -------------------------------------------------------------------------------- /_lessons/22_project/22_project.md: -------------------------------------------------------------------------------- 1 | @todo 2 | -------------------------------------------------------------------------------- /_lessons/23_project/23_project.md: -------------------------------------------------------------------------------- 1 | @todo 2 | -------------------------------------------------------------------------------- /_lessons/06_version-control-deployment/notes.md: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /_lessons/05_acceptance-criteria-roadmapping/notes.md: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /_lessons/23_specification/23_specification.md: -------------------------------------------------------------------------------- 1 | @todo 2 | -------------------------------------------------------------------------------- /_lessons/05_acceptance-criteria-roadmapping/05_acceptance-criteria-roadmapping.md: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /_lessons/04_navigation-prototyping/notes.md: -------------------------------------------------------------------------------- 1 | Create paper prototypes for key pages mapped to user journeys -------------------------------------------------------------------------------- /_lessons/19_backend/19_backend.md: -------------------------------------------------------------------------------- 1 | @todo 2 | 3 | https://newsignature.com/articles/the-magic-behind-drupals-render-elements 4 | -------------------------------------------------------------------------------- /foundation/05_build_drupal_site.md: -------------------------------------------------------------------------------- 1 | Build a Drupal site 2 | ------------------- 3 | 4 | @todo - See https://docs.google.com/document/d/1QKqFRMZCbGM0zUlwXVYmyFf0dPjux8z6oGdraydVlic/edit# 5 | -------------------------------------------------------------------------------- /foundation/04_intro_to_drupal.md: -------------------------------------------------------------------------------- 1 | Intro to Drupal 2 | --------------- 3 | 4 | @todo - see https://docs.google.com/document/d/1QKqFRMZCbGM0zUlwXVYmyFf0dPjux8z6oGdraydVlic/edit#heading=h.d1jsjkcco7a3 5 | -------------------------------------------------------------------------------- /_lessons/01_intro-to-agile/notes.md: -------------------------------------------------------------------------------- 1 | Aile Development & User Stories 2 | -------------------------------- 3 | 4 | PM Systems 5 | ---------- 6 | 7 | * Try a group exercise where everyone takes part in using the real-life scrum board. 8 | -------------------------------------------------------------------------------- /foundation/03_content_management_systems.md: -------------------------------------------------------------------------------- 1 | Content Management Systems 2 | -------------------------- 3 | 4 | @todo - See https://docs.google.com/document/d/1QKqFRMZCbGM0zUlwXVYmyFf0dPjux8z6oGdraydVlic/edit#heading=h.2dsbgme8tlw4 5 | -------------------------------------------------------------------------------- /_lessons/09_frontend/notes.md: -------------------------------------------------------------------------------- 1 | Frontend Development 2 | ==================== 3 | 4 | 1) JavaScript in Drupal 5 | ----------------------- 6 | 7 | a. First person to complete task talks through how they did it with the rest of the group (after the work is checked). 8 | -------------------------------------------------------------------------------- /_lessons/18_backend/18_backend.md: -------------------------------------------------------------------------------- 1 | Drupal APIs 2 | ----------- 3 | 4 | An overview of: 5 | 6 | * Doing things the right way 7 | * The Entity system (entities vs bundles vs instances vs fields vs nodes). 8 | * Form API 9 | * Field API 10 | * Image API 11 | -------------------------------------------------------------------------------- /_lessons/21_backend/21_backend.md: -------------------------------------------------------------------------------- 1 | Back End 2 | ======== 3 | 4 | This lesson is incomplete :( 5 | 6 | Help out by [adding to it](https://github.com/OpenDrupal/opendrupal/blob/master/contributing.md)! 7 | 8 | ### Ideas For This lesson 9 | 10 | * @todo 11 | -------------------------------------------------------------------------------- /foundation/07_site_building.md: -------------------------------------------------------------------------------- 1 | Site Building 2 | ------------- 3 | 4 | * The block system 5 | * Menus 6 | * Site building tips (e.g use shortcuts like contextual links) 7 | * Create a custom homepage 8 | 9 | @todo - see https://docs.google.com/document/d/1QKqFRMZCbGM0zUlwXVYmyFf0dPjux8z6oGdraydVlic/edit#heading=h.5uf5guh1xp4g 10 | -------------------------------------------------------------------------------- /_lessons/12_backend/12_backend.md: -------------------------------------------------------------------------------- 1 | Back End 2 | ======== 3 | 4 | This lesson is incomplete :( 5 | 6 | Help out by [adding to it](https://github.com/OpenDrupal/opendrupal/blob/master/contributing.md)! 7 | 8 | ### Ideas For This lesson 9 | 10 | * More module Development 11 | * Useful techniques for the upcoming hackathon 12 | * Integrating with third party APIs 13 | * Hacks for building things quickly 14 | -------------------------------------------------------------------------------- /foundation/06_management.md: -------------------------------------------------------------------------------- 1 | Drupal Configuration and Management 2 | ----------------------------------- 3 | 4 | See '6. Manage your site' 5 | Introduce and explain the concepts of: 6 | 7 | * The Drupal admin interface 8 | * Content / nodes 9 | * Users, roles & permissions 10 | * Taxonomy 11 | * Site settings 12 | 13 | @todo - See https://docs.google.com/document/d/1QKqFRMZCbGM0zUlwXVYmyFf0dPjux8z6oGdraydVlic/edit#heading=h.pqwmmsy3a9r 14 | -------------------------------------------------------------------------------- /foundation/10_build_your_site.md: -------------------------------------------------------------------------------- 1 | Build Your Site 2 | --------------- 3 | 4 | * Recap on the skills you've learnt, catch up and ensure you've completed all checkpoints. 5 | * Now populate your site with more content. Make sure you have at least 4 pages with menu links, a blog section and 4 blog posts. 6 | * *Stretch Checkpoint* Try adding some HTML directly into a page. 7 | * *Stretch Checkpoint* Try downloading the Webform module and creating a custom contact form. 8 | -------------------------------------------------------------------------------- /_lessons/10_frontend/10_frontend.md: -------------------------------------------------------------------------------- 1 | Frontend Development 2 | ==================== 3 | 4 | This lesson is incomplete :( 5 | 6 | Help out by [adding to it](https://github.com/OpenDrupal/opendrupal/blob/master/contributing.md)! 7 | 8 | ### Ideas For This lesson 9 | 10 | * Advanced JavaScript 11 | * JavaScript design patterns 12 | * Getting our theme to a complete state - recap across all front end work 13 | * Working with other JS libraries (e.g socket.io, react.js...) 14 | -------------------------------------------------------------------------------- /foundation/09_contrib_modules.md: -------------------------------------------------------------------------------- 1 | Contributed Modules 2 | ------------------- 3 | 4 | * The Drupal module ecosystem 5 | * Assessing contributed modules on drupal.org 6 | * Install and configure views 7 | 8 | @todo - See 9. Dynamic Pages & Homepage in https://docs.google.com/document/d/1QKqFRMZCbGM0zUlwXVYmyFf0dPjux8z6oGdraydVlic/edit#heading=h.5913ym5h8d0z 9 | 10 | * http://codekarate.com/daily-dose-of-drupal/drupal-views-module-creating-lists-content-your-drupal-site 11 | -------------------------------------------------------------------------------- /_lessons/07_frontend/07_frontend.md: -------------------------------------------------------------------------------- 1 | Responsive Web Design 2 | ===================== 3 | 4 | ### A. Responsive Web Design 5 | 6 | * Introduce RWD concepts. 7 | 8 | ### B. Mockups 9 | 10 | * __Do:__ Build a one page HTML & CSS / Sass mockup of a page you have wireframed. 11 | 12 | ### C. Styleguides (optional) 13 | 14 | ### Resources 15 | 16 | * http://caniuse.com/ 17 | * http://flexboxfroggy.com/ 18 | * https://medium.com/@Heydon/flexbox-grid-finesse-4d22b80bfee1#.q9322ds9e 19 | -------------------------------------------------------------------------------- /_lessons/15_backend/15_backend.md: -------------------------------------------------------------------------------- 1 | Back End 2 | ======== 3 | 4 | This lesson is incomplete :( 5 | 6 | Help out by [adding to it](https://github.com/OpenDrupal/opendrupal/blob/master/contributing.md)! 7 | 8 | ### Ideas For This lesson 9 | 10 | * What we learnt from the Hackathon - recap & solve any problems 11 | * Server configuraiton, vHosts & the hosts file 12 | * Deployment using the features module 13 | * Linux / Ubuntu server set-up 14 | * Vagrant 15 | * Docker? 16 | * http://www.smashingmagazine.com/2013/07/23/how-to-fix-the-web-obscure-back-end-techniques-and-terminal-secrets/ 17 | -------------------------------------------------------------------------------- /contributing.md: -------------------------------------------------------------------------------- 1 | Contributing 2 | ------------ 3 | 4 | The Open Drupal Curriculum is entirely open source! It's build by the community and your contribution is vital. 5 | 6 | * Any contributions are welcome! If it's a suggestion, a minor edit or helping write some content. 7 | * Look through the [issue queue](https://github.com/OpenDrupal/opendrupal/issues) for existing issues. 8 | * Read through the [learning module template](template.md) to see how to write or edit a learning module. 9 | * All edits should be made as pull requests. This can be done directly from the GitHub editing interface. 10 | -------------------------------------------------------------------------------- /_lessons/13_site-building-team/13_site-building-team.md: -------------------------------------------------------------------------------- 1 | Site Building & Team Processes 2 | ============================== 3 | 4 | This lesson is incomplete :( 5 | 6 | Help out by [adding to it](https://github.com/OpenDrupal/opendrupal/blob/master/contributing.md)! 7 | 8 | ### Ideas For This lesson 9 | 10 | * Focus on one of the following 'stacks' of modules: 11 | 1. Media & file related modules, e.g Media-2.x, transliteration, Media: YouTube. 12 | 2. Admin related modules, e.g admin menu, module filter, CKEditor, linkit + advanced administrative configuration, e.g workflow systems, 13 | 3. E-commerce & Drupal Commerce 14 | * Overview of different types of roles within a team. How to work together in 15 | a hackathon effectively. 16 | -------------------------------------------------------------------------------- /foundation/README.md: -------------------------------------------------------------------------------- 1 | Open Drupal: Foundation 2 | ----------------------- 3 | 4 | @todo - finish write introduction. 5 | 6 | A fast paced introduction to Drupal, giving participants a broad overview of the technology and ethos. Aims to inspire and motivate and also teach vital knowledge to enable starting in a placement. 7 | 8 | Delivered in around 10 days. 9 | 10 | __Part 1:__ 11 | 12 | 1. Introduction 13 | 2. HTML Basics 14 | 3. Content Management Systems 15 | 4. Intro to Drupal 16 | 5. Build a Drupal site 17 | 6. Drupal Content Management 18 | 7. Site Building 19 | 8. Themes 20 | 9. Contributed Modules 21 | 10. Build your site 22 | 23 | __Part 2:__ 24 | 25 | @todo - Complete this section: https://github.com/OpenDrupal/opendrupal/issues/12 26 | 27 | __Part 3:__ 28 | 29 | @todo - Complete this section: https://github.com/OpenDrupal/opendrupal/issues/14 30 | -------------------------------------------------------------------------------- /resources.md: -------------------------------------------------------------------------------- 1 | Drupal Learning Resources 2 | ------------------------- 3 | 4 | Drupal 7 5 | ======== 6 | 7 | ### Site Building 8 | 9 | * http://www.mediacurrent.com/blog/top-drupal-7-modules-final-edition 10 | * http://modulenotes.com/ 11 | 12 | Drupal 8 13 | ======== 14 | 15 | * https://github.com/hechoendrupal/drupal8-links/ 16 | * http://www.mediacurrent.com/blog/resource-guide-drupal-8 17 | 18 | Drupal Communities 19 | ================== 20 | 21 | * http://groups.drupal.org 22 | * http://www.reddit.com/r/drupal 23 | * https://plus.google.com/u/0/communities/111161359890617128846 24 | 25 | Toolchain Resources 26 | =================== 27 | 28 | * https://github.com/jlevy/the-art-of-command-line 29 | 30 | Web Resources 31 | ============= 32 | 33 | * https://www.webplatform.org/ 34 | 35 | Open Drupal Inspiration 36 | ======================= 37 | 38 | * https://www.drupal.org/node/1245650 39 | -------------------------------------------------------------------------------- /_lessons/02_user-stories/notes.md: -------------------------------------------------------------------------------- 1 | Project Setup & Intro to the Toolchain: Notes 2 | ============================================= 3 | 4 | Preparation 5 | ----------- 6 | 7 | * Print out Open Drupal VM passwords 8 | 9 | 1) Project Set Up 10 | ----------------- 11 | 12 | ### A. Decide on a Project 13 | 14 | * You'll be working on this project for the next year, so spend some time thinking of something you can get in to. 15 | * 1-2 hours 16 | * __Group discussion:__ on each project individually. 17 | 18 | ## B. Local Development Environment Setup 19 | 20 | * 1 hour 21 | 22 | 2) Command Line 23 | --------------- 24 | 25 | * 1 - 2 hours 26 | * __Group discussion:__ the command line, what is it? Why should we use it (it's quicker and more powerful)? 27 | * Run through exercises 28 | * Set up a fight on Shortcut Foo 29 | * __Quiz:__ common terminal commands (see http://cli.learncodethehardway.org/book/ex1.html#linux-mac-osx) 30 | 31 | 3) Drush 32 | -------- 33 | 34 | * 1 - 2 hours 35 | -------------------------------------------------------------------------------- /foundation/02_html_basics.md: -------------------------------------------------------------------------------- 1 | 2. HTML Basics 2 | -------------- 3 | 4 | *What’s in this module?* Dive straight in and build your first website, in the cloud. 5 | *Aim:* Have a one page HTML website about yourself online. 6 | 7 | ## A. What we’ll be doing 8 | 9 | * To get started, we’re going to build a website using HTML. 10 | * *Watch:* Freeformers Digital Mission Video: Get Started with HTML and JSBin. 11 | 12 | ## B. Get the site up 13 | 14 | * *Do:* Create a simple one page site using [JSBin](http://jsbin.com/). 15 | * *Checkpoint:* When you’ve completed this Digital Mission, you can share your JSBin URL. Add this URL to your progress spreadsheet. 16 | 17 | ## C. More advanced HTML 18 | 19 | * Read 'The basics' of [MDN: Learning The Web, HTML](https://developer.mozilla.org/en-US/Learn/HTML). 20 | * *Checkpoint:* Store any HTML files you create in in a folder named 'Foundation' in your web folder. 21 | 22 | ### Resources 23 | 24 | * [Mozilla Developer Network: HTML](https://developer.mozilla.org/en-US/docs/Web/HTML) 25 | * [Mozilla’s Webmaker](https://webmaker.org) - Mozilla have a platform similar to JSBin called Thimble, check out some of the makes for inspiration, and try remixing them to see the code 26 | * [UDemy: Learn HTML](https://blog.udemy.com/learn-html-learn-the-foundations-of-html/) 27 | -------------------------------------------------------------------------------- /_tests/custom-user-block.md: -------------------------------------------------------------------------------- 1 | ### Challenge Overview 2 | 3 | __Create a Drupal module which displays a block of users.__ 4 | 5 | Skills required: A knowledge of PHP, including [functions](http://php.net/manual/en/functions.user-defined.php), some basic [control structures](http://php.net/manual/en/language.control-structures.php) and an understanding of the Drupal database API (at a minimum how to use [Static queries](https://www.drupal.org/node/310072)) and how to programmatically display a block. 6 | 7 | ### The Challenge 8 | 9 | 1. Create a new Drupal module which displays a block. 10 | 2. Now create a separate PHP function that queries the database and returns the last 5 users to register on the website. 11 | 3. Call the custom function you've created to show the last 5 users in the block. 12 | 4. Add this to a region in the Drupal theme. 13 | 14 | ### The Test 15 | 16 | 1. Create two new users in the Drupal site and see that they appear in the block. 17 | 2. You'll be asked to talk through the code and show how you would modify it to show alternate information. 18 | 19 | 20 | ### The Rules 21 | 22 | * You can use Google as much as you like to find information. 23 | * You must start the module from scratch - you cannot copy & paste an entire previous module you've worked on. 24 | * You can copy & paste small code snippets you find in online documentation to use as a basis for your own code. 25 | -------------------------------------------------------------------------------- /foundation/01_introduction.md: -------------------------------------------------------------------------------- 1 | 1. Foundation: Introduction 2 | --------------------------- 3 | 4 | __What’s in this module?__ An introduction to the course and getting setup on correct systems. 5 | 6 | __Aim:__ Understand and feel comfortable with the course structure & methods, ask any questions you have. Access Google Drive and start logging on your progress spreadsheet. 7 | 8 | ## About this course 9 | 10 | * Over the next two weeks we’re going to build our own website which we’ll use as our portfolio and blog. 11 | * Explanation of the self-learning methods & introduction to Mentors 12 | * Explanation of the ‘Learning modules’. They are step-by-step instructions, some of which will be discussed as a group. * * Each modules has an aim, a set of instructions and some resources. 13 | * At the end of each day, we’ll write a blog post & update our progress spreadsheets 14 | 15 | ## Get set up on systems 16 | 17 | * Google Drive 18 | * Go to Google and [create a new Google Account](https://accounts.google.com/SignUp). 19 | * Login and go to Google Drive. 20 | * Create a folder in Google Drive using your full name as the name of the folder. 21 | * Share this folder with the facilitator. 22 | * Gain access a copy of the progress spreadsheet and add to your Google Drive folder. 23 | 24 | ### Resources 25 | 26 | * [How to use Google Drive](http://www.digitaltrends.com/computing/how-to-use-google-drive/). 27 | -------------------------------------------------------------------------------- /roadmap.md: -------------------------------------------------------------------------------- 1 | Roadmap 2 | ======= 3 | 4 | __Main aim:__ Free and open source training material by way of The Open Drupal Curriculum. 5 | 6 | __Secondary aims:__ Support local training programmes and provide tools to help training and learning Drupal. 7 | 8 | ## Goals 9 | 10 | *Immediate* 11 | 12 | * Complete version 1 of the curriculum (using markdown files in Github), which will be used for the UK Drupal Apprenticeship qualification and any other training that people want to use it for. 13 | * Restructure opendrupal.org, see [this issue](https://github.com/OpenDrupal/opendrupal/issues/26) 14 | 15 | *Future* 16 | 17 | * Build a frontend for the curriculum, to display the markdown files in a nicer way (probably using a static-site generator). 18 | * Integrate with Mozilla's Open Badges. 19 | 20 | Version 2 of the curriculum: 21 | 22 | * Include training for Drupal 8. 23 | * Decouple the curriculum from the training materials by writing more comprehensive aims & learning objectives. 24 | * Clearer instructions on implementing and contributing to The Open Drupal Curriculum. 25 | 26 | ## Ideas 27 | 28 | * Build an authentication system, allowing participants to check off areas they have completed. 29 | * Build a custom UI for editing files. 30 | * 'Switches' between learning materials (e.g switches between Drupalize.me, buildamodule.com or free videos). 31 | 32 | Lesson content ideas 33 | -------------------- 34 | 35 | * Google Analytics lesson 36 | * Drupal AJAX API & cTools AJAX 37 | -------------------------------------------------------------------------------- /foundation/08_themes.md: -------------------------------------------------------------------------------- 1 | ---- 2 | module-name: Download and configure a theme 3 | objectives: ['Understand the separation of the theme layer', 'Install new themes', 'Modify theme settings'] 4 | description: 'Understand how the theme layer is separate. Change the way your website looks by installing and configuring a new theme.' 5 | ---- 6 | 7 | Themes 8 | ------ 9 | 10 | ## Intro 11 | 12 | Drupal comes with a very ‘Drupally’ look out of the box, so if you want to give it a bit more of a unique look you can change the Theme. A theme in Drupal controls how the website looks, all of the content and the back-end settings of the website remains the same when you change your theme. There are some settings which you can change per-theme, such as the logo. 13 | 14 | ## The Drupal Theme Layer 15 | 16 | @todo - link to resources giving __simple__ explanation of the separation of the theme layer in Drupal. 17 | 18 | ## Change Your Theme 19 | 20 | Now we’re going to change our theme, there method we’re going to use is to download the theme .zip file and upload it straight into our Drupal site. 21 | 22 | * *Read:* Installing a theme in Drupal 7. 23 | * *Do:* Download and install a theme into your Drupal site. 24 | * **Hint** try the Bootstrap Business theme. 25 | 26 | ## Change Your Theme Settings 27 | 28 | * *Watch:* How theme settings work and how to upload a new logo 29 | * *Do:* Change your colour scheme. Go to Appearance -> [your theme name] ‘Settings’ and type changing the colour scheme. 30 | * *Do:* Create your own logo & upload it to your site, try using: 31 | * SquareSpace Logo generator 32 | * Hipster logo generator 33 | 34 | # Additional Resources 35 | 36 | * Drupal themes on drupal.org 37 | -------------------------------------------------------------------------------- /template.md: -------------------------------------------------------------------------------- 1 | Unit: Learning Module 2 | --------------------- 3 | 4 | __What's in this module?__ A one or two sentence overview of this module. 5 | 6 | __Aims:__ After someone has completed the sections of the module, what should they be able to do? 7 | 8 | ## A. Intro 9 | 10 | A learning module is a set of instructions and resources around a specific topic. If someone progresses through everything in a learning module, they should have gained some knowledge and practical experience around that subject. 11 | 12 | 1. Learning modules should be short and concise. 13 | 2. Any instructions which are lengthy should be separated out into a tutorial. 14 | 3. Learning module are written in the Markdown syntax in a consistent structure (like this file) 15 | 3. Resources and links should be 'swappable' so in the future we can update them easily or use alternative sets of resources. 16 | 4. A learning module may be gone through step by step directly by an individual, or referenced from a workshop a trainer puts together for a group. 17 | 18 | ## B. Keywords 19 | 20 | * __Read:__ The "Read" keyword signifies when someone should read through an article. 21 | * __Do:__ The "Do" keyword signifies when a participant should complete an exercise (written as one or two sentences), or a tutorial (something a bit longer, linked to). 22 | * __Watch:__ To "Watch" keyword signifies when there is a video to watch. If training is delivered as a group videos can be watched together. 23 | * __Checkpoint:__ The "Checkpoint" keyword signifies where someone should note down evidence of their learning. 24 | 25 | ## C. Summary (optional) 26 | 27 | * Some sections of learning module are optional, like this one. 28 | * It's important to try to write guidance on how to test or confirm that participants have achieved the aims. 29 | 30 | ## Resources 31 | 32 | * [Additional resources, as links]() 33 | -------------------------------------------------------------------------------- /_lessons/08_frontend/notes.md: -------------------------------------------------------------------------------- 1 | Notes 2 | ===== 3 | 4 | ## Intro 5 | 6 | * Recap previous two workshops 7 | * By this point everyone should be quick at setting up, so set a time limit 8 | on setting up development environments (everyone should take part). 9 | 10 | ## 1) CSS & Sass 11 | 12 | ### A. CSS 13 | 14 | * Don't worry about setting up Sass at this point, ask that everyone just uses 15 | plain CSS. Sass is always optional for new projects and new technologies will 16 | render it obsolete. 17 | * Recap on everyone's CSS guidelines. If they haven't written them get a basic 18 | one pager up on GitHub. 19 | * Make sure everyone has some designs or design ideas to use for styling their 20 | site. Encourage them to take the challenge of making their site look great. 21 | * For the exercise, there's no need to worry about using any of Sass's features. 22 | * Review all CSS, possibly peer-review. Refer back to guidelines. Discuss why 23 | it's important to write good CSS, what the benefits are. 24 | 25 | ### B. Sass 26 | 27 | * Now make sure everyone is set up with Sass - talk through this as a group and 28 | help each other out. 29 | * Make sure nobody overwrites their CSS now! 30 | * This is an open exercise, it can take plenty of time and be broken up with 31 | open discussions and peer-review throughout. 32 | 33 | ## 2) JavaScript & jQuery 34 | 35 | * The CodeAcademy courses should be a challenge to see who can complete them 36 | quickly. If they anyone is struggling they should finish in their own time and 37 | be thorough. 38 | * Have a discussion about JavaScript - ask what everyone want to know about it 39 | and discuss. 40 | * Talk about some exciting emerging technologies (e.g React.js, Web Components), 41 | do a demo of some of these. 42 | * If anyone completes the courses quickly they can go on to the optional task 43 | and experiment with these emerging technologies. 44 | -------------------------------------------------------------------------------- /_lessons/11_backend/11_backend.md: -------------------------------------------------------------------------------- 1 | Back End 2 | ======== 3 | 4 | 1) PHP 5 | ------ 6 | 7 | __What’s in this module?__ An introduction to PHP. 8 | 9 | __Aim:__ Understand and be able to use the PHP syntax, arrays and types, basic operators, variables, functions and basic control structures. 10 | 11 | ### A. PHP Intro 12 | 13 | * __Do:__ [CodeAcademy PHP](http://www.codecademy.com/tracks/php). Complete the full PHP track. 14 | * __Checkpoint:__ Record your progress. 15 | 16 | ### B. Build a Local PHP Application 17 | 18 | * __Watch:__ [Buildamodule.com PHP ](http://buildamodule.com/collection/php-programming-basics) up to the end of chapter 7. 19 | * __Do:__ Build a simple PHP application locally that allows a user to submit a form and does something with the input. 20 | * __Checkpoint:__ Save a .zip file of your application. 21 | 22 | ### Resources 23 | 24 | * [The PHP Manual](http://php.net/manual/en/index.php) 25 | * [Eli The Computer Guy](http://www.teachingtree.co/teachers/show?teacher_name=Eli+The+Computer+Guy) 26 | 27 | 2) Custom Module Development 28 | ---------------------------- 29 | 30 | *What’s in this module?* An introduction to custom module development in Drupal. 31 | 32 | *Aim:* Know the correct location and structure of a custom module. 33 | 34 | ### A. Introduction 35 | 36 | Sometimes we'll want to do something in Drupal which isn't possible or sensible through configuration or a contributed module. Drupal gives us a powerful framework to build our own custom modules. 37 | 38 | ### B. Build a simple module 39 | 40 | * __Read:__ [Creating your first Module in Drupal 7](https://www.packtpub.com/books/content/creating-your-first-module-drupal-7-module-development) 41 | * __Do:__ Build module locally that defines a block. 42 | 43 | ### Extra Resources 44 | 45 | * [Drupal coding standards](https://www.drupal.org/coding-standards) 46 | * [Drupal.org module developers guide](https://www.drupal.org/developing/modules) 47 | -------------------------------------------------------------------------------- /_lessons/09_frontend/09_frontend.md: -------------------------------------------------------------------------------- 1 | Frontend Development 2 | ==================== 3 | 4 | 1) JavaScript in Drupal 5 | ----------------------- 6 | 7 | Aims: 8 | 9 | ### A. Adding JavaScript to Drupal 10 | 11 | * __Read:__ [Drupal Behaviors Quick How To](http://www.amazeelabs.com/en/blog/drupal-behaviors-quick-how) 12 | * For a good example of adding JavaScript to Drupal see [Omega's starterkit .js file](http://cgit.drupalcode.org/omega/tree/omega/starterkits/default/js/%7b%7b%20THEME%20SANITIZED%20%7d%7d.behaviors.js) 13 | * __Do:__ Add a new custom behavior to your homepage that scrolls the window down when a user clicks a button at the top of the page. 14 | * __Do:__ Try adding some more custom behaviors to 15 | 16 | ### B. Passing data from Drupal to JavaScript via Drupal.settings (optional) 17 | 18 | * __Read:__ [The Drupal JavaScript API | Drupal.org](https://www.drupal.org/node/304258#drupal-settings) 19 | * __Do:__ Create a block with three tabs called 'Welcome', 'Latest News' and 'Highlights'. If the current user has the role 'new user' select the 'Highlights' tab by default, if they have the role 'returning user' and if they have neither role show the 'Welcome' tab. To do this you'll need to create a custom module that adds the current user's roles to Drupal.settings and you'll then need to create a custom JavaScript behavior to switch tabs depending on the user's role. You'll also need to create some dummy user's! 20 | 21 | ### C. Debugging JavaScript in Drupal (optional) 22 | 23 | * __Read:__ Read up on Chrome DevTools 24 | * __Read:__ [Understanding JavaScript Behaviors in Drupal](https://www.lullabot.com/articles/understanding-javascript-behaviors-in-drupal) 25 | * __Do:__ Put a breakpoint in Drupal's core Drupal.AttachBehaviors and step through 26 | the render chain. 27 | 28 | 2) AJAX in Drupal (Optional) 29 | ---------------------------- 30 | 31 | ### A. The AJAX API 32 | 33 | * @todo 34 | 35 | ### B. cTools AJAX API 36 | 37 | * @todo 38 | 39 | ### C. AJAX Forms 40 | 41 | * @todo 42 | -------------------------------------------------------------------------------- /SUMMARY.md: -------------------------------------------------------------------------------- 1 | # Summary 2 | 3 | * [Introduction](README.md) 4 | * [Foundation](foundation/README.md) 5 | * [Introduction](foundation/01_introduction.md) 6 | * [HTML Basics](foundation/02_html_basics.md) 7 | * [Content Management Systems](foundation/03_content_management_systems.md) 8 | * [Intro to Drupal](foundation/04_intro_to_drupal.md) 9 | * [Build a Drupal site](foundation/05_build_drupal_site.md) 10 | * [Drupal content management](foundation/06_management.md) 11 | * [Site building](foundation/07_site_building.md) 12 | * [Themes](foundation/08_themes.md) 13 | * [Contributed modules](foundation/09_contrib_modules.md) 14 | * [Build your site](foundation/10_build_your_site.md) 15 | * Lessons Part 1: Team & Project 16 | * [Introduction](_lessons/00_intro/00_intro.md) 17 | * [Intro to Agile](_lessons/01_intro-to-agile/01_intro-to-agile.md) 18 | * [User Stories](_lessons/02_user-stories/02_user-stories.md) 19 | * [User Driven Development](_lessons/03_user-driven-development/03_user-driven-development.md) 20 | * [Navigation & Prototyping](_lessons/04_navigation-prototyping/04_navigation-prototyping.md) 21 | * [Acceptance Criteria](_lessons/05_acceptance-criteria-roadmapping/05_acceptance-criteria-roadmapping.md) 22 | * Lessons Part 2: Advanced Site Building 23 | * Display (TODO) 24 | * Features & Configuration Management (TODO) 25 | * Rules & Workflow (TODO) 26 | * Lessons Part 3: Frontend 27 | * Responsive Web Design (Started: 07_frontend) 28 | * Front End Development and Drupal (Started xx_stash.md) 29 | * [CSS & Sass](_lessons/08_frontend/08_frontend.md) 30 | * jQuery & JavaScript in Drupal (Started: 08_frontend) 31 | * [Advanced Javascript](_lessons/09_frontend/09_frontend.md) 32 | * [Hackathon](_lessons/14_hackathon/14_hackathon.md) 33 | * Lessons Part 4: Backend 34 | * [PHP](_lessons/11_backend/11_backend.md) 35 | * Custom Modue Development (TODO) 36 | * Custom Modue Development (TODO) 37 | * Custom Modue Development (TODO) 38 | * Lessons Part 5: Full Stack & Project Completion 39 | * TBD 40 | * TBD 41 | * TBD 42 | -------------------------------------------------------------------------------- /_lessons/00_intro/00_overview.md: -------------------------------------------------------------------------------- 1 | Reworking into new structure 2 | 3 | Currently documented in [this Google Doc](https://docs.google.com/spreadsheets/d/1I-XXmKmRQHOLbXOF3X5iBAezX0hm8CqT5L_4tJRS_4Q/edit#gid=1641730653) once decided an over view can be added in here. As for now (Jan 2016) we have the first quarter mapped out with the following 6 training sessions: 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 |
Workshop TitleTopics coveredNotes
1Intro to AgileAgile theory and practice, iterative working, user stories and estimatesLearn about agile practice - why we work like this and how we work like this
2User Stories and PlanningBegin individual project, create simple personas and user storiesPresent project idea to the group for feedback, apply last sessions learnings on user stories and estimation to own project
3User Driven Development and DesignEmpathy mapping and user journeysDevelop personas further, understand how different users may interact with site and how this impacts design and development
4PrototypingPrototypoing methods, wireframes,Create paper prototypes for key pages
5Acceptance Criteria + RoadmappingMVP, sprints and iteritive developmentDefine MVP, set some phases or key stages of development
6Version Control and deploymentLocal development, Git, shared remote repos, Git FlowDiscuss and compare local development options and deployment; tutorials and workshops using Git in command line; intro to Git Flow
49 | 50 | 51 | -------------------------------------------------------------------------------- /_lessons/04_navigation-prototyping/04_navigation-prototyping.md: -------------------------------------------------------------------------------- 1 | Navigation & Prototyping 2 | ======================== 3 | 4 | Overview 5 | -------- 6 | ###Here is what we'll be covering: 7 | 8 | 1. Navigation and menus 9 | 2. Prototyping methods 10 | 3. Paper prototyping 11 | 12 | ###By the end of this lesson you will: 13 | * Understand more about the Drupal menu system and navigational elements 14 | * Have made eveidence based decisions about a suitable menu structure for your project 15 | * Have paper prototypes to steer page layout for key areas of your project 16 | 17 | 18 | Navigation 19 | ---------- 20 | Drupal menu system 21 | ###Group Discussion 22 | Types of navigation, what is it for why are there different ones, what gets used most - how do different people set up or prepare navigational elements. 23 | Modules: menu block, taxonomy menu 24 | 25 | ###Group Activity 26 | Card sorting - talk about the What main areas of your project site. Write them down on sticky notes and try to group them in different ways. 27 | 28 | ###Resources: 29 | * __Watch:__ [Video title](#) 30 | * __Read:__ [Article Title - Chapters 1,2 & 5](#) 31 | * __Do:__ 32 | Software and croud sourced sollutions 33 | 34 | Prototyping 35 | ----------- 36 | 37 | Different sorts of prototyping - in Drupal InVision, wireframes etc 38 | 39 | Paper Prototyping 40 | ----------------- 41 | Why do we use it ? how do we use it? 42 | 43 | ###Activity 44 | Make some paper prototypes of key pages of your project site 45 | 46 | ###Group Activity 47 | Peer review of paper prototypes - feedback and suggestions. 48 | 49 | To Do 50 | ----- 51 | ###Before next time: 52 | * __Watch:__ [Video title](#) 53 | * __Read:__ [Article Title - Chapters 1,2 & 5](#) 54 | * __Do:__ 55 | 56 | ###Before milestone [Date}: 57 | * __Watch:__ [Video title](#) 58 | * __Read:__ [Article Title - Chapters 1,2 & 5](#) 59 | * __Do:__ Write a blog post about navigation and the card sorting excersise 60 | * __Do:__ Complete some more paper prototypes for key pages and journeys of your project 61 | * __Do:__ Write a blog post about paper prototyping and include some images of your prototypes 62 | 63 | -------------------------------------------------------------------------------- /_lessons/03_user-driven-development/notes.md: -------------------------------------------------------------------------------- 1 | USER DRIVEN DEVELOPMENT 2 | ======================= 3 | 4 | Overview 5 | -------- 6 | ###Here is what we'll be covering: 7 | 8 | 1. 9 | 2. 10 | 3. 11 | 4. 12 | 13 | ###By the end of this lesson you will: 14 | * 15 | * 16 | * 17 | * 18 | 19 | Personas 20 | --------- 21 | Short introduction to this section 22 | 23 | Inline links to resources 24 | * __Watch:__ [Video title](#) 25 | * __Read:__ [Article Title - Chapters 1,2 & 5](#) 26 | * __Do:__ Some activity in pairs or alone, an online test etc. 27 | 28 | ###Group Activity 29 | Every day should have at least one group activity 30 | 31 | ### Section Checkpoint 32 | Every day should have at least one checkpoint 33 | * __Do:__ Write a blog post...... 34 | 35 | ###Extra Resources 36 | Extra things to do/read/watch outside of the lesson from this section - can also be used in lesson for people aho are ahead or finish before others. 37 | * __Watch:__ [Video title](#) 38 | * __Read:__ [Article Title - Chapters 1,2 & 5](#) 39 | * __Do:__ Some activity in pairs or alone, an online test etc. 40 | 41 | Empathy Mapping 42 | --------------- 43 | Why is empathy important in design? 44 | 45 | ###Group Activity 46 | In pairs or groups of three create empathy maps for some of your key personas. 47 | 48 | 49 | 50 | User Journeys 51 | ------------- 52 | 53 | 54 | To Do 55 | ----- 56 | ###Before next time: 57 | * __Watch:__ [Video title](#) 58 | * __Read:__ [Article Title - Chapters 1,2 & 5](#) 59 | * __Do:__ Some activity in pairs or alone, an online test etc. 60 | 61 | ###Before milestone [Date}: 62 | * __Watch:__ [Video title](#) 63 | * __Read:__ [Article Title - Chapters 1,2 & 5](#) 64 | * __Do:__ Some activity in pairs or alone, an online test etc. 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | Develop personas further, understand how different users may interact with site and how this impacts design and development 78 | 79 | Group discussion about users in sites 80 | 81 | write up any changes following discussion 82 | 83 | Empathy mapping 84 | 85 | 86 | example empathy mapping as group 87 | 88 | pairs / threes do some empathy mapping for your two or three most important user personas 89 | 90 | Blog post: empathy mapping 91 | -------------------------------------------------------------------------------- /_lessons/03_user-driven-development/03_user-driven-development.md: -------------------------------------------------------------------------------- 1 | USER DRIVEN DEVELOPMENT 2 | ======================= 3 | 4 | Overview 5 | -------- 6 | ###Here is what we'll be covering: 7 | 8 | 1. Review of impact mapping 9 | 2. User journeys 10 | 3. Empathy Mapping 11 | 12 | ###By the end of this lesson you will: 13 | * Be able to draw up user journeys that will infulence and inform development 14 | * Understand the importance of empathy in design 15 | * Have begun mapping user journeys and empathy maps for your project 16 | 17 | Impact Maps Review 18 | ------------------- 19 | Settting out and documenting objectives for projects is fundemntal for making good decisions throughout the development process. It also creates a frame of reference for all the people involved and makes conversations about the project and decisions easier. 20 | 21 | ###Group Activity 22 | Take it in turns to present your impact map to the group, a chance to get feedback and respond to questions from the rest of the group. Nominate someone to keep notes. 23 | 24 | 25 | ###Group Activity 26 | In pairs or groups of three create empathy maps for some of your key personas. 27 | 28 | 29 | User Journeys 30 | ------------- 31 | Mapping out potential user jouneys is essential in designing and developing a site that delivers on the objectives and goals we set. We need to get the users to the page or area of the site where they can achieve the goal. 32 | 33 | ###Resources 34 | * __Watch:__ [Video title](#) 35 | * __Read:__ [Article Title - Chapters 1,2 & 5](#) 36 | 37 | ###Group Activity 38 | In pairs or groups of three create some user journeys for the personas. 39 | 40 | Empathy Mapping 41 | --------------- 42 | Why is empathy important in design? 43 | 44 | ###Resources 45 | * __Watch:__ [Video title](#) 46 | * __Read:__ [Article Title - Chapters 1,2 & 5](#) 47 | 48 | ###Group Activity 49 | Based on the personas you already created for your impact maps we'll develop these further with an excercise called empathy mapping. Finding out more about these users or types of user will help us design and develop better sites. 50 | 51 | 52 | To Do 53 | ----- 54 | ###Before next time: 55 | * __Watch:__ [Video title](#) 56 | * __Read:__ [Article Title - Chapters 1,2 & 5](#) 57 | * __Do:__ Update your impact maps based on the outcomes of the group discussion 58 | 59 | ###Before milestone [Date}: 60 | * __Watch:__ [Video title](#) 61 | * __Read:__ [Article Title - Chapters 1,2 & 5](#) 62 | * __Do:__ Write a blog post about your work creating user journeys and how they will influence the development of your project. 63 | * __Do:__ Write a blog post about personas and empathy mapping for your project. -------------------------------------------------------------------------------- /tutorials/open_drupal_vm.md: -------------------------------------------------------------------------------- 1 | The Open Drupal VM 2 | ------------------ 3 | 4 | The Open Drupal virtual machine gives us a quick way to get a local development environment set up. A 'virtual machine' is a container that acts as if it were a separate computer. It's just like any other app on your computer except that is it's lets you access a whole other operating environment (so you can do things like use Linux if you're running Windows). 5 | 6 | First [download Virtualbox](https://www.virtualbox.org/wiki/Downloads) for your host (the operating system you'll be installing Virtualbox on). After you've done this head over to [https://github.com/OpenDrupal/open-drupal-vm](https://github.com/OpenDrupal/open-drupal-vm) and follow the instructions to download the VirtualBox .oma image file and install the virtual machine. 7 | 8 | Great! Now we can start using our new development environment. Boot up your machine and take a look around: 9 | 10 | * There's a fresh Drupal site already configured. You can access the code for the site at /home/opendrupal/drupal1 11 | * There are a few other useful programs included, like the SublimeText editor. 12 | * The MySQL database system and Apache web server are installed and configured so you shouldn't have to worry about them. 13 | * You can find the default passwords in the [readme file](https://github.com/OpenDrupal/open-drupal-vm#passwords) of the Open Drupal VM GitHub repository. 14 | 15 | ### Downloading modules 16 | 17 | To download a module click on the 'Terminal' app in the sidebar. Then type in: 18 | 19 | ```cd /home/opendrupal/sites/drupal1``` 20 | 21 | This will move you into the Drupal directory. Then we use [Drush](http://www.drush.org/) to download a module, to download the views module type in: 22 | 23 | ```drush dl views``` 24 | 25 | And to enable the module using Drush we can use the 'drush en' command: 26 | 27 | ```drush en -y views``` 28 | 29 | The '-y' flag is a shortcut so we don't have to type yes in! 30 | 31 | ### Editing Drupal files 32 | 33 | The Open Drupal VM comes with Sublime Text, open the editor and then add the /home/opendrupal/sites/drupal1 folder to the editor. From here you'll be able to navigate through your site files and edit them. Make sure you never hack core! 34 | 35 | ### Fixing problems 36 | 37 | There are some known issues documented in the [Open Drupal VM Github wiki](https://github.com/OpenDrupal/open-drupal-vm/wiki/Troubleshooting). If you encounter something you, open an issue in the [issue queue](https://github.com/OpenDrupal/open-drupal-vm/issues) and a friendly developer may help you out with it! 38 | 39 | ### Adding syntax highlighting for Sublime Text 40 | 41 | To install syntax highlighting, search Google and follow instructions! 42 | -------------------------------------------------------------------------------- /_lessons/00_intro/template.md: -------------------------------------------------------------------------------- 1 | Lesson Title 2 | ============ 3 | Intro if appropriate/necessary. 4 | 5 | Overview 6 | -------- 7 | ###Here is what we'll be covering: 8 | 9 | 1. Short simple sentences 10 | 2. To describe the main sections or concepts 11 | 3. What they mean in terms of the course 12 | 4. And why they are relevant to the student 13 | 14 | ###By the end of this lesson you will: 15 | * List of realistic and achievable goals 16 | * For the student to have completed 17 | * By the end of the day's learning 18 | * ...and more incentives for extra learning 19 | 20 | Section 1 21 | --------- 22 | Short introduction to this section 23 | 24 | Inline links to resources 25 | * __Watch:__ [Video title](#) 26 | * __Read:__ [Article Title - Chapters 1,2 & 5](#) 27 | * __Do:__ Some activity in pairs or alone, an online test etc. 28 | 29 | ###Group Activity 30 | Every day should have at least one group activity 31 | 32 | ### Section Checkpoint 33 | Every day should have at least one checkpoint 34 | * __Do:__ Write a blog post...... 35 | 36 | ###Extra Resources 37 | Extra things to do/read/watch outside of the lesson from this section - can also be used in lesson for people aho are ahead or finish before others. 38 | * __Watch:__ [Video title](#) 39 | * __Read:__ [Article Title - Chapters 1,2 & 5](#) 40 | * __Do:__ Some activity in pairs or alone, an online test etc. 41 | 42 | Section 2 43 | --------- 44 | There may only be one section of course... 45 | 46 | Inline links to resources for this section 47 | * __Watch:__ [Video title](#) 48 | * __Read:__ [Article Title - Chapters 1,2 & 5](#) 49 | * __Do:__ Some activity in pairs or alone, an online test etc. 50 | 51 | ###Group Activity 52 | Every day should have at least one group activity biut not necessarily every section. 53 | 54 | ###Section Checkpoint 55 | Every day should have at least one checkpoint but again - not necessarily every section - extra checkpoints or blog posts could be added to teh to do section at the end. 56 | * __Do:__ Write a blog post...... 57 | 58 | ###Extra Resources 59 | Extra things to do/read/watch outside of the lesson from this section - can also be used in lesson for people aho are ahead or finish before others. 60 | * __Watch:__ [Video title](#) 61 | * __Read:__ [Article Title - Chapters 1,2 & 5](#) 62 | * __Do:__ Some activity in pairs or alone, an online test etc. 63 | 64 | To Do 65 | ----- 66 | List of things that are mandatory 67 | ###Before next time: 68 | * __Watch:__ [Video title](#) 69 | * __Read:__ [Article Title - Chapters 1,2 & 5](#) 70 | * __Do:__ Some activity in pairs or alone, an online test etc. 71 | 72 | ###Before milestone [Date}: 73 | * __Watch:__ [Video title](#) 74 | * __Read:__ [Article Title - Chapters 1,2 & 5](#) 75 | * __Do:__ Some activity in pairs or alone, an online test etc. 76 | -------------------------------------------------------------------------------- /_lessons/14_hackathon/hackathon.md: -------------------------------------------------------------------------------- 1 | Hackathon 2 | ========= 3 | 4 | A hackathon is a great way to build a prototype product quickly. Hackathons 5 | take place all over the world in tech communities and many products go on to 6 | become real businesses. It’s also a great way to learn new skills and meet new 7 | people. 8 | 9 | __A hackathon day looks like this:__ 10 | 11 | 1. Pitching 12 | 2. Setting up 13 | 3. Planning 14 | 4. Prototyping 15 | 5. Mid-day demo 16 | 6. Building 17 | 7. Demo 18 | 19 | ### Preparation 20 | 21 | * Pens & paper for wireframe sketching 22 | * Computers / laptops / tables set up in separate groups 23 | 24 | ### Scoring Criteria 25 | 26 | * Design / UX 27 | * Product idea 28 | * Technical 29 | * Teamwork 30 | 31 | ### Team Role Ideas 32 | 33 | * Designer / themer 34 | * Module developer 35 | * Site builder 36 | * Project manager 37 | 38 | ### Pitching 39 | 40 | * Website ideas are presented - they should be achievable within one day 41 | * Teams of 3 or 4 people form around their favourite ideas 42 | 43 | ### Setting up 44 | 45 | * Decide on team roles 46 | * Set up a Git repository (e.g on BitBucket or GitHub) 47 | * Set up each team member's computer to be able to contribute to the main site 48 | * Set up an online development site if there is time (e.g on Pantheon) 49 | * To get going quickly and not get stuck in set-up, start work on one person’s computer 50 | 51 | ### Planning 52 | 53 | * Decide some of the main modules to use 54 | * Sketch some wireframes 55 | * Prototyping (optional) 56 | * Gather around one computer and start installing modules and configuring the site 57 | * Commit everything to git and all pull down copies 58 | * Mid-day demo 59 | * Before lunchtime ask each team to do a mini-demo of their work 60 | 61 | ### Building 62 | 63 | * Each team member works on a specific task, e.g: 64 | * Themer works on the theme on their computer 65 | * Module developer works on a custom module 66 | * Site builder works directly on the development site 67 | * Project manager ensures nobody is blocked and helps where it is needed 68 | 69 | ### Demo 70 | 71 | * One team member presents and talks through the site to everyone 72 | * The best team wins a prize! 73 | 74 | ### Rules 75 | 76 | * You must start from scratch 77 | 78 | ### Tips 79 | 80 | * Improvise! Use the tools you know 81 | * Don't dig yourself in a hole - be careful not to get stuck fixing bugs for too long. Keep regular backups and make sure you're all working in the same direction. 82 | 83 | ### Notes for Trainers 84 | 85 | * Time is extremely limited so emphasise this throughout the day 86 | * If participants are getting stuck on setup ask them to work on one person’s computer mainly, with others writing code (e.g custom modules and themes) that they can transfer to the main computer - this is a quick and easy way to get stuff done. 87 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | UPDATE: July 2018 2 | ----------------- 3 | 4 | This project now resurected with a new curriculum focussed on Drupal 8. This work is replaced by the new [curriculum](https://github.com/OpenDrupal/Curriculum) repo. This work remains temporarily for reference only and will be deleted. 5 | 6 | 7 | 8 | The Open Drupal Curriculum 9 | -------------------------- 10 | 11 | ### Free and Open Source training materials for teaching and learning Drupal. 12 | 13 | With cooperation from developers, educators and the community we are building an open source curriculum and set of training material to make it easier to run effective Drupal training programmes and help people get started in the web industry. 14 | 15 | ## The Curriculum 16 | 17 | [The Curriculum](_units/README.md) 18 | 19 | The curriculum is a roadmap of skills and competencies to aim for when learning to become a Drupal developer. It is split up into several units, each covering a specific topic. Within each unit there is a main aim and several learning outcomes. The curriculum on it's own doesn't teach anything itself - it's a framework to build on top of. 20 | 21 | ## Lessons 22 | 23 | [Full Lesson Overview](_lessons/README.md) 24 | 25 | A collection of workshop style lessons are available to work through. By working through these and working on Drupal projects outside of these lessons, all of the outcomes of the curriculum should be met. Lessons are currently designed to be delivered as one-day workshops within an apprenticeship style programme but can also be used as stand-alone workshops or followed by an individual self-learning. 26 | 27 | ## The Foundation 28 | 29 | The [Open Drupal Foundation](foundation/00_index.md) teaches the fundamentals of Drupal before any lessons are started. It's designed for people who are already fairly [web literate](https://webmaker.org/en-US/literacy) but have not had any professional web development experience. We dive straight in to building a Drupal site and see some quick results and learn about the Drupal and the open source ecosystem. It's currently designed to be delivered as part of a two week intensive bootcamp. 30 | 31 | __Part 1:__ 32 | 33 | 1. [Introduction](foundation/01_introduction.md) 34 | 2. [HTML basics](foundation/02_html_basics.md) 35 | 3. [Content management systems](foundation/03_content_management_systems.md) 36 | 4. [Intro to Drupal](foundation/04_intro_to_drupal.md) 37 | 5. [Build a Drupal site](foundation/05_build_drupal_site.md) 38 | 6. [Drupal content management](foundation/06_management.md) 39 | 7. [Site building](foundation/07_site_building.md) 40 | 8. [Themes](foundation/08_themes.md) 41 | 9. [Contributed modules](foundation/09_contrib_modules.md) 42 | 10. [Build your site](foundation/10_build_your_site.md) 43 | 44 | __Part 2:__ 45 | 46 | Coming soon... see [this issue](https://github.com/OpenDrupal/opendrupal/issues/12). 47 | 48 | __Part 3:__ 49 | 50 | Coming soon... see [this issue](https://github.com/OpenDrupal/opendrupal/issues/14). 51 | -------------------------------------------------------------------------------- /_lessons/00_intro/00_intro.md: -------------------------------------------------------------------------------- 1 | # Introduction 2 | 3 | The following course is comprised of 22 learning sessions designed to be delivered as day long workshops or followed as independent self lead learning. The course covers many aspects of web design and development and on completion you should have a good understanding of content management, version control, project planning, QA and testing as well as front and back end coding skills and the ability to use the command line. 4 | 5 | ## Prerequisites 6 | 7 | It is expected that you have completed the Open Drupal foundation course or the Drupal Apprenticeship Bootcamp before starting this course. If you have not please complete or review that course content before starting. 8 | 9 | ### Blog site 10 | 11 | A blog site built in Drupal, although not strictly required if you are following the self lead learning, is very useful as a tool to record your learning as you progress, confirm your understanding of concepts and issues, and as a resource for yourself to look back on. 12 | 13 | ### Google Drive 14 | You'll need a google drive account or somewhere similar to create, store and share documents, spreadsheets and presentations. 15 | 16 | ## Project site 17 | 18 | Throughout this course you will develop a project site, Where appropriate you will use this project to demonstrate the skills and concepts you are learning. The project site can be anything of your choosing but needs to include the following: 19 | 20 | * It must be built on Drupal 8 21 | 22 | * It should be focused around content you'll add yourself, and have a section listing this content in some way. 23 | 24 | * It should accept and process user input in some way. 25 | 26 | * It should be something realistic and suitable for Drupal. 27 | 28 | * The project must be started from scratch, so no distributions or existing websites you've built. 29 | 30 | #### Example Projects 31 | 32 | * __Healthy Food__ - Recipe submission and sharing with multi user blog 33 | 34 | * __Unsigned London__ - Unsigned music acts, venu and gig listings in London 35 | 36 | * __Scout Group__ - Public info, sign up, newsletter and secure areas to access restricted content based on role 37 | 38 | * __Fact of the Day__ - Daily facts delivered to subscribers across various channels, includes placement ads and takeover options 39 | 40 | * __Gym__ - Info on classes, tailored programmes, sign up, multi user fitness blog 41 | 42 | ## For apprenticeship candidates: 43 | 44 | Your project and blog sites are used as evidence of your completion of course checkpoints and requirements. All candidates must submit a completed project and blog at the end of the year for assessment by the Tech Partnership. 45 | 46 | The blog and project sites will show your understanding and abilities. They are also crucial to demonstrate skills required by the course that may be difficult to show completion or ownership of through your workplace learning. For example the planning of a project or setting acceptance criteria for QA. 47 | 48 | -------------------------------------------------------------------------------- /_lessons/08_frontend/08_frontend.md: -------------------------------------------------------------------------------- 1 | Frontend Development 2 | ==================== 3 | 4 | 1) CSS & Sass 5 | ------------- 6 | 7 | Aims: Be able to write well structured and thought out CSS to a high standard 8 | and confidently use a variety Sass features, such as variables, mixins and 9 | includes. 10 | 11 | ### A. CSS Standards 12 | 13 | * __Do:__ Use some design mockups you've created to start to style your website 14 | using CSS. Focus on writing well written and well structured CSS. Remember to 15 | refer back to any CSS guidelines you've taken note of. Style at least the 16 | header, footer and one complete page. 17 | * __Do:__ Validate your CSS using the [W3C CSS validator](https://validator.w3.org/). 18 | 19 | __Resources:__ 20 | 21 | * [CSS Tricks](https://css-tricks.com/) 22 | * [MDN: CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) 23 | * [5 Ways to Instantly Write Better CSS](http://code.tutsplus.com/tutorials/5-ways-to-instantly-write-better-css--net-3003) 24 | 25 | ### B. Sass 26 | 27 | * __Do:__ Make sure you're set up with Sass in your local environment. 28 | * __Read:__ The Preprocessing, Variables, Nesting, Partials and Import sections of [Sass Basics](http://sass-lang.com/guide). 29 | * __Do:__ Refactor your custom CSS to use these features of Sass. Start to build 30 | up common variables that you'll use in other places, like colours. Put these in 31 | a separate partial. 32 | 33 | ### C. Advanced Sass (optional) 34 | 35 | * __Read:__ The Mixins and Extend/Inheritance sections of [Sass Basics](http://sass-lang.com/guide). 36 | * __Do:__ Create a mixin for a button and implement it for the login button on 37 | your site. 38 | * __Do:__ Abstract more functionality of your site into mixins and extendables. 39 | 40 | ### Extra Resources 41 | 42 | * [Sass Reference](http://sass-lang.com/documentation/file.SASS_REFERENCE.html) 43 | * [The Sass Way](http://thesassway.com/) 44 | 45 | 2) JavaScript and jQuery 46 | ------------------------ 47 | 48 | Aims: Understand the fundamentals of JavaScript and jQuery, be able to select 49 | elements on the page and modify their properties dynamically. 50 | 51 | ### A. JavaScript 52 | 53 | * __Do:__ [CodeAcademy Javascript track](https://www.codecademy.com/tracks/javascript). Do a minimum of 54 | the 'introduction', 'functions' and 'for loops' sections. 55 | 56 | ### B. jQuery 57 | 58 | * __Do:__ [CodeAcademy jQuery track](https://www.codecademy.com/tracks/jquery). Do a minimum of the 'introduction', 'jQuery functions' and 'dynamic HTML' sections 59 | 60 | ### C. Build a JavaScript app (optional) 61 | 62 | * Using JavaScript, jQuery and any other libraries (such as [jQuery UI](https://jqueryui.com/) or even [Polymer](polymer-project.org)) build an app in [JS Fiddle](https://jsfiddle.net/) or locally. Your app 63 | should at minimum accept user input, do some processing and dynamically change the UI. 64 | * See [CodeCademy jQuery UI lessons](https://www.codecademy.com/courses/web-beginner-en-6DYRu/0/2) for some inspiration. 65 | 66 | ### Extra Resources 67 | 68 | * [MDN Web API]() 69 | * [Themery, the definitive guide to Drupal 7](http://themery.com/dgd7) 70 | -------------------------------------------------------------------------------- /_lessons/06_version-control-deployment/06_version-control-deployment.md: -------------------------------------------------------------------------------- 1 | Version Control and Deployment 2 | ======================================= 3 | 4 | Overview 5 | -------- 6 | ###Here is what we'll be covering: 7 | 8 | 1. Setting up versions of a Drupal site in different places 9 | 2. Deployment systems and workflows 10 | 3. Git version control 11 | 4. Gitflow 12 | 13 | ###By the end of this lesson you will: 14 | 15 | * Be comfortable migrating sites, files, content and changes between different versions of sites 16 | * Understand git version control and have git repositories for your projects 17 | * Be able to use Gitflow 18 | 19 | 20 | Deployment 21 | ---------- 22 | 23 | ### A. Components of a website 24 | 25 | The following components make up a Drupal site: 26 | 27 | 1. Codebase 28 | 2. Database 29 | 3. Files 30 | 31 | Commonly a website will run on several environments, e.g local, dev, staging and production. We need to make sure we can effectively migrate our website between these environments. These techniques will also be useful for setting up websites locally. 32 | 33 | ### B. Methods of migrating between environments 34 | 35 | 1. PhpMyAdmin, Adminer, Backup & Migrate 36 | 2. Git repository for code - how to configure? 37 | 3. Settings.php 38 | 4. Files directory 39 | 40 | ### C. Process 41 | 42 | * Make sure you understand the migration and deployment process 43 | * Export all of the components of your site. 44 | * Reset your VM - wiping everything - and re-import your site. 45 | 46 | Git 47 | --- 48 | 49 | ### A. Git Basics 50 | 51 | * __Do:__ https://try.github.io 52 | * __Do:__ https://www.codecademy.com/learn/learn-git 53 | 54 | ### B. Setup Your Own Git Repo 55 | 56 | * __Do:__ Initalise a new repository with your Blog site source code in. 57 | * __Do:__ Sign up for free repository hosting (or loginto your account if you have one) on [GitHub](https://github.com/) or [BitBucket](https://bitbucket.org/) and push your code. 58 | * __Do:__ Create a new branch, modify your codebase by downloading a new module, merge, add and push the code up. 59 | 60 | ### C. Git: Shared Repository Setup 61 | 62 | ####Group Activity 1 63 | 64 | * Nominate one person to create a new git repo with a single text file in called ```changelog.md```. Now share this repo with everyone in the group. 65 | * Now each member of the group should add in at least one new file and update the changelog with a new line 66 | ```file added [name] [date time]``` 67 | * Work on the repository collaboratively. If you encounter a merge conflict, open the file and resolve it using a text editor. 68 | 69 | ####Group Activity 2 70 | * Work together as a group to draw a diagram explaning how git works based on what you have learned 71 | 72 | ###Checkpoint 73 | * Create a blog post about Git. Include a screengrab and link to your blog repo and the diagram you created as a group. 74 | 75 | ### E. Gitflow (optional) 76 | 77 | * __Read:__ [A successful branching model](http://nvie.com/posts/a-successful-git-branching-model/) 78 | * __Do:__ Install the [Gitflow plugin](https://github.com/nvie/gitflow), create a feature branch on your blog site with some work on and merge into master via a release branch. 79 | * __Do:__ Repeat the previous group excersises using gitflow 80 | 81 | ### Extra Resources 82 | 83 | * [Pro Git](https://git-scm.com/doc) 84 | * [Atlassian: Git](https://www.atlassian.com/git/) 85 | * [Git - The Simple Guide](http://rogerdudler.github.io/git-guide/) 86 | * [Git Immersion](http://gitimmersion.com/) 87 | 88 | 89 | To Do 90 | ----- 91 | 92 | * __Read:__ Pro Git, [chapter 1](https://git-scm.com/book/en/v2/Getting-Started-Git-Basics) and [3.2: basic branching and merging](https://git-scm.com/book/en/v2/Git-Branching-Basic-Branching-and-Merging). 93 | * __Read:__ [Pro Git](https://git-scm.com/book/en/v2/Getting-Started-Git-Basics), chapter 2, 3, & 4. 94 | * __Read:__ [Github: Using pull requests](https://help.github.com/articles/using-pull-requests/). 95 | * __Do:__ Create a new pull request on a repo. -------------------------------------------------------------------------------- /_lessons/01_intro-to-agile/01_intro-to-agile.md: -------------------------------------------------------------------------------- 1 | Team Processes - Agile 2 | ====================== 3 | 4 | This lesson contains an introduction to the concepts of Agile development. This includes the general theory behind agile teams and the agile lifecycle as well as the more specific methdology of Scrum. 5 | 6 | Overview 7 | -------- 8 | ###Here is what we'll be covering: 9 | 10 | 1. What is Agile? - theory, principles and how it works for web development 11 | 2. Iterative development - what it means and how it works 12 | 3. Scrum - sprints and roles 13 | 4. User stories - to describe what we are going to build 14 | 5. Estimation - how we estimate tasks using scores 1 - 5 15 | 6. Planning - using Trello for Kanban, more detailed sprint boards and reviews 16 | 17 | ###By the end of this lesson you will: 18 | 19 | * Be able to define your project in terms of user stories 20 | * Provide estimates of for those user stories 21 | * Be able to plan your project in sprints 22 | * Start a kanban board to manage your project 23 | 24 | Agile development 25 | ----------------- 26 | 27 | ### A. An Introduction to Agile & SCRUM 28 | 29 | "Agile software development is a group of software development methods based on iterative and incremental development, where requirements and solutions evolve through collaboration between self-organizing, cross-functional teams. 30 | It promotes adaptive planning, evolutionary development and delivery, a time-boxed iterative approach, and encourages rapid and flexible response to change. It is a conceptual framework that promotes foreseen tight interactions throughout the development cycle." 31 | 32 | @todo - [link to Intro to Agile slides] 33 | (https://docs.google.com/presentation/d/1vQBfKZ0wvsEuqIqrvJFqlXUNdox9uxP2TQ_NGGF1Mrg/edit#slide=id.g5ae19c59a_0_6) 34 | 35 | ####Group Activity - Paper cups game 36 | 37 | @todo - link to teacher resource for paper cups game 38 | 39 | * What did we learn? 40 | * What agile priciples does this game demonstrate? 41 | 42 | ####SCRUM 43 | @todo add intro to SRCUM 44 | @todo - link to SCRUM slides 45 | 46 | * __Product Owner__ – (a role probably performed by the Service manager) responsible for delivering return on investment, usually by creating products that users love 47 | * __Delivery Manager__ (aka Scrum master or project manager) – the agile expert responsible for removing blockers (things slowing a team down), they also act as a facilitator at team meetings 48 | * __Team Members__ – self-organising and multi-disciplinary, they produce user stories, carry out the product manager’s vision and are responsible for estimating their output and speed 49 | 50 | * __Read:__ [Agile Manifesto and Principles](http://agilemanifesto.org/) 51 | * __Watch:__ [Agile in a nutshell](https://www.youtube.com/watch?v=zIPv-Ym2n1E) 52 | * __Read:__ [An intro to Scrum](https://www.atlassian.com/agile/scrum) 53 | * __Do:__ Write a blog post outlining the principles of Agile development, iteritive development and SCRUM 54 | 55 | ####Group Activity - Paper hat game 56 | 57 | You will need: 58 | @todo - link to teacher resource for paper hat game 59 | 60 | * What did we learn? 61 | * What agile priciples does this game demonstrate? 62 | 63 | ### B. Gathering Requirements 64 | For agile projects we gather our requirements as 'User Stories' rather than extensive documentation. This allows us greater flexibility. 65 | 66 | * __Read:__ [Gov.uk writing user stories](https://www.gov.uk/service-manual/agile/writing-user-stories.html) 67 | * __Do:__ Write between 5 & 10 user stories to describe functionality of a project (use one of the [example projects from the foundation course](https://drive.google.com/drive/folders/0By9KqisVw_3lTnRSZnVPb2RIMjA)). 68 | 69 | ### C. Estimation 70 | We estimate user stories (or features or tasks) for its difficluty and value _relatively_ to the other user stories (or features or tasks) 71 | 72 | *__Watch:__ [Agile Estimation in a nutshell](https://www.youtube.com/watch?v=sCCUEtjCpCs) 73 | *__Watch:__ [Agile Estimations - from Black Pepper Software](https://www.youtube.com/watch?v=7nTxdl29ePY) 74 | * __Do:__ As a group (or individually) come up with estimates (1-5) for all the user stories you created in the last excersise. 75 | -------------------------------------------------------------------------------- /_lessons/02_user-stories/02_user-stories.md: -------------------------------------------------------------------------------- 1 | User Stories 2 | ============ 3 | 4 | Overview 5 | -------- 6 | ###Here is what we'll be covering: 7 | 8 | 1. Presentation and discussion of your project idea 9 | 2. Personas - the types of user who might use your site 10 | 3. Recap user stories and estimation 11 | 4. Initial documentation for your project 12 | 13 | ###By the end of this lesson you will: 14 | 15 | * Have decided on your project and documented the main requirements for it 16 | * Have developed your own user stories with estimations for your project 17 | 18 | 19 | 1) Project Review 20 | ----------------- 21 | ###Group activity 22 | Present your project idea to the group, let us know what you are thinking of building, who the site is aimed at roughly how you see it working and what modules you are thinking of using. Following each presentation will be a group discussion about your project, a chance for everyone else to feedback on your ideas, ask questions and make suggestions. Appoint a different person for each presentation to keep track of the discussion and record the main points. 23 | 24 | ### Section Checkpoint 25 | 26 | * __Do:__ Write up your project idea as a document saving it to your folder on Google Drive 27 | 28 | Include: 29 | * A summary of the site 30 | * The main pages 31 | * Key Drupal modules 32 | * Advanced functionality 33 | 34 | 2) Personas 35 | ----------- 36 | Who are the main types of people who will be using your site? We need to know a bit about these users, or groups of users before we can write the story cards. Obviously there will be a main admin user with top level permissions and access but there may be extra admin users to perform special functions too. There will be anonymous users as well - people who have never visited the site before or have not yet signed in but maybe some other groups in between? Here are some examples of user groups and what they might need to do: 37 | 38 | ###Example 39 | A website for a medium sized company with pages, news items, and contact forms for different departments. They also have a blog section with content provided by members of the public. 40 | 41 | * Blogger 42 | * Create and publish own blog posts 43 | * See own unpublished blog posts 44 | * Blog Editor 45 | * Edit, promote, delete all blog posts 46 | * See all unpublished blog posts 47 | * Press Officer 48 | * Create/edit/delete news items 49 | * See all unpublished news items 50 | * Schedule News items for future publication 51 | * Site Editor 52 | * Create/edit/delete pages and webforms 53 | * See all unpublished content 54 | * User Administrator 55 | * Grant/revoke user roles 56 | * Add new users 57 | 58 | ### Section Checkpoint 59 | * __Do:__ Create a list of the main user groups for your project and the tasks they would want to do - add this to your project documentation. 60 | 61 | 3) User Stories & Estimates 62 | --------------------------- 63 | ###Recap 64 | * [What is a user story?](https://www.mountaingoatsoftware.com/agile/user-stories) 65 | * [10 Tips for Writing Good User Stories by Roman Pichler](http://www.romanpichler.com/blog/10-tips-writing-good-user-stories/) 66 | * [Atlassian - Estimation](https://www.atlassian.com/agile/estimation/) 67 | * [3 Powerful Estimation Techniques for Agile Teams by M. David Green](http://www.sitepoint.com/3-powerful-estimation-techniques-for-agile-teams/) 68 | 69 | ###Group Activity 70 | Work in pairs or groups of three to come up with at least 10 user stories for your project using the standard structure: 71 | 72 | * Title 73 | * Actor 74 | * Narrative 75 | * Goal 76 | 77 | ####Example 78 | | Actor: | As a | Journalist| 79 | | --- | --- | --- | 80 | | Narrative: | I want to |see contact information relating to the news article I am reading | 81 | | Goal: | So that | I can get directly in touch with the press office about it| 82 | 83 | Once you have 10 or so story cards agree on an estimate using M. David Green's estimation techniques. 84 | 85 | ### Section Checkpoint 86 | * __Do:__ Create a spreadsheet of all the user stories for your project based on the template provided. 87 | 88 | To Do 89 | ----- 90 | ###Before next time: 91 | * __Do:__ Create a blogpost outlining the day's session linking to your new documentation. 92 | * __Read:__ [Gov.uk 'writing user stories'](https://www.gov.uk/service-manual/agile/writing-user-stories.html) 93 | * __Do:__ Add more user stories to your spreadsheet. -------------------------------------------------------------------------------- /_lessons/README.md: -------------------------------------------------------------------------------- 1 | Open Drupal Lessons 2 | =================== 3 | 4 | Lessons are collections of useful resources and directions to help achieve the 5 | learning outcomes within the curriculum. Work done on projects outside of these 6 | lessons will also go toward fulfilling the learning outcomes - these lessons are 7 | designed to establish a strong base set of knowledge on web development in Drupal 8 | and go into some advanced concepts in detail. 9 | 10 | They are currently designed to be used as one day workshops delivered by a 11 | trainer to a small group of less than 8. There may be accompanying notes by 12 | trainers with them as well. 13 | 14 | The lessons can be re-ordered if it suits the programme they are being used in. 15 | 16 | All lessons assume that a participant has gone through all parts of The Open 17 | Drupal Foundation course, or has equivalent knowledge. The lessons are split up 18 | in to five sections. 19 | 20 | ### Open Drupal Dev Team Hacker 21 | 22 | Integrate into a team by skilling up and mastering the most important parts of 23 | setting up new projects and working on existing projects like a pro. Start your 24 | own project which you'll work on for the duration of the course. 25 | 26 | | No.| Units Covered | Notes | 27 | |----|---------------------------|--------------------------------------------------------------| 28 | | 01 | Team Processes | PM systems, Agile methodology, User Stories | 29 | | 02 | Full Project, Toolchain | Project set up, local dev environment, command line, Drush | 30 | | 03 | Full Project, Toolchain | Repository set up, Git, deployment & Drupal environments | 31 | | 04 | Full Project | Gathering requirements & prototyping | 32 | | 05 | Site Building, Front End | Contrib modules, theme set up | 33 | 34 | ### Open Drupal Front End Ninja 35 | 36 | Learn all about front end development and design on the web and how to use 37 | these skills in Drupal. 38 | 39 | | No.| Units Covered | Notes | 40 | |----|---------------------------|--------------------------------------------------------------| 41 | | 06 | Front End | HTML & theming | 42 | | 07 | Front End | Responsive design | 43 | | 08 | Front End | CSS, Sass, JavaScript, jQuery | 44 | | 09 | Front End | JavaScript, jQuery, theming | 45 | | 10 | Front End | JavaScript, finish theme | 46 | 47 | ### Open Drupal Full Stack Master 48 | 49 | See what it takes to work across all areas of the web stack. From setting up a 50 | server to API integrations. 51 | 52 | | No.| Units Covered | Notes | 53 | |----|---------------------------|--------------------------------------------------------------| 54 | | 11 | Back End | PHP, custom module development | 55 | | 12 | Back End | PHP, custom module development, APIs | 56 | | 13 | Site building, Team | Advanced module dev focus + Team skills (ahead of hackathon) | 57 | | 14 | Hackathon | | 58 | | 15 | Back End | DevOps: Features, deployment, LAMP administration | 59 | 60 | ### Open Drupal Back End Sensei 61 | 62 | Learn how to build back end systems and how to extend and build on top of 63 | Drupal by learning more advanced PHP and applying this knowledge building 64 | custom modules in Drupal. 65 | 66 | | No.| Units Covered | Notes | 67 | |----|---------------------------|--------------------------------------------------------------| 68 | | 16 | Back End | PHP, custom module development | 69 | | 17 | Back End | PHP, custom module development | 70 | | 18 | Back End | APIs, services | 71 | | 19 | Back End | Automated testing | 72 | | 20 | Testing | Testing & QA | 73 | 74 | ### Open Drupal Complete 75 | 76 | Wrap up all your hard work by finishing off your project and deploying. Then with your 77 | expert knowledge write a full website specification for a client to come full circle in 78 | your web development expertise. 79 | 80 | | No.| Units Covered | Notes | 81 | |----|---------------------------|-------------------------------------------------------------| 82 | | 21 | Full Project | Catch-up and finish projects | 83 | | 22 | Full Project | Catch-up and finish projects | 84 | | 23 | Specification | Write a full specification for an upcoming project | 85 | -------------------------------------------------------------------------------- /_units/README.md: -------------------------------------------------------------------------------- 1 | The Open Drupal Curriculum 2 | -------------------------- 3 | 4 | The Open Drupal curriculum units. 5 | 6 | Backend Development 7 | =================== 8 | 9 | __Aim:__ Full development cycle, including custom functionality, backend development 10 | 11 | __Outcomes:__ 12 | 13 | * How to build a Drupal module 14 | * Debugging and development processes (IDE, toolchain, coding standards, documentation) 15 | * Implementing core Drupal concepts programmatically (Pages, blocks, fields, entities) 16 | * Using tools to access a database, query and update a database 17 | 18 | __Ideas:__ 19 | 20 | * Basic PHP as a prerequisite (Teach programming before drupal module dev?) 21 | * Code Academy/Online Course Modules (Completed before this module starts) 22 | 23 | 24 | @todo - Complete writing content for this unit, see [this issue](https://github.com/OpenDrupal/opendrupal/issues/19). 25 | 26 | 27 | Frontend Development 28 | ==================== 29 | 30 | __Aim:__ Be able to understand, work with and make updates to the frontend layer of Drupal. 31 | 32 | __Outcomes:__ 33 | 34 | * Have gone through a full frontend design and implementation process 35 | * Use modern frontend tools to make updates to websites (CSS / Sass / JS / jQuery / TWIG) 36 | * Implementing design requirements 37 | * Build a Drupal theme from scratch 38 | 39 | __Ideas:__ 40 | 41 | * CSS best practices, accessibility & responsiveness 42 | 43 | @todo - Complete writing content for this unit, see [this issue](https://github.com/OpenDrupal/opendrupal/issues/20). 44 | 45 | 46 | Full Project 47 | ============ 48 | 49 | *Note: this unit is a bit different as you'll be planning a whole project to work on and dip in and out of it during subsequent units.* 50 | 51 | __Aim:__ Take ownership of a full project early on in the apprenticeship 52 | 53 | __Outcomes:__ 54 | 55 | * Architect a Drupal site 56 | * Build a publically accessible site making use of a custom module and custom theme 57 | * Understand general project processes 58 | 59 | __Ideas:__ 60 | 61 | * Make connections between different team members 62 | * Build up a full set of skills and provide evidence for developed skills 63 | * Site should be content related, and be able to list content 64 | * Site should accept and process user input in some way 65 | * Introduce the full project toward the start of the programme, focus on it more at the end 66 | 67 | 68 | @todo - Complete writing content for this unit, see [this issue](https://github.com/OpenDrupal/opendrupal/issues/16). 69 | 70 | 71 | Site Building 72 | ============= 73 | 74 | __Aim:__ Be able to architect and implement a site plan using contributed modules and Drupal core. 75 | 76 | __Outcomes:__ 77 | 78 | * Be able to assess contributed modules for suitability for a project using a wide range of criteria. 79 | * Understand how the issue queues and module versions work. 80 | * Install and configure several contrib modules including: Views, Display Suite, Context, CKEditor, Rules, Media, Date, Webform. 81 | 82 | @todo - Complete writing content for this unit, see [this issue](https://github.com/OpenDrupal/opendrupal/issues/18) 83 | 84 | 85 | Specification and Planning 86 | ========================== 87 | 88 | __Aim:__ Contribute to the specification and planning process 89 | 90 | __Outcomes:__ 91 | 92 | * Be able to capture and communicate objectives and requirements 93 | * Know how to understand and capture project scope 94 | * Be able to provide an educated estimate of how long a project would take to implement 95 | 96 | __Ideas:__ 97 | 98 | * What questions to ask? 99 | * Ideas behind lean, MVP 100 | * Capture functional requirements (possibly using user stories) 101 | * Prioritisation 102 | * Estimation (and the related challenge), estimate individual tasks / the whole project 103 | * Acceptance criteria 104 | 105 | 106 | @todo - Complete writing content for this unit, see [this issue](https://github.com/OpenDrupal/opendrupal/issues/22). 107 | 108 | 109 | Team Processes 110 | ============== 111 | 112 | __Aim:__ To know how to integrate into the workflow of a team 113 | 114 | __Outcomes:__ 115 | 116 | * Use internal project management systems 117 | * Understand how to read and comment on tasks 118 | * Understanding the development cycle of existing projects 119 | 120 | __Ideas:__ 121 | 122 | * How tasks are allocated, how work is logged, keeping your tasks updated so that others can see your progress 123 | * Know the different roles in a development team 124 | * How are tasks passed between different team members 125 | 126 | 127 | @todo - Complete this unit, see [this issue](https://github.com/OpenDrupal/opendrupal/issues/15). 128 | 129 | 130 | Testing, QA & Security 131 | ====================== 132 | 133 | __Aim:__ Be able to update an existing website and confirm it functions as it should 134 | 135 | __Outcomes:__ 136 | 137 | * Understand how to safely upgrade modules 138 | * Know how to use log files to track down problems (elementary debugging) 139 | * Be able to create a test plan for a site 140 | 141 | __Ideas:__ 142 | 143 | * QA / Testing procedures 144 | * Understand Drupal security updates 145 | * Drush module commands 146 | * Using hacked module 147 | * flagging patched modules 148 | * https://www.mozilla.org/en-US/lightbeam/ 149 | 150 | 151 | Using The Toolchain 152 | =================== 153 | 154 | __Aim:__ Be able to contribute to a project as part of a team 155 | 156 | __Outcomes:__ 157 | 158 | * Understand how code and config moves from development to production 159 | * Use the toolchain & deploy (source control, command line, features, configuration & packaging) 160 | * Local development environment setup (IDE etc) 161 | * Using Drupal community resources 162 | 163 | __Related Lessons:__ 164 | 165 | * 02_project-setup-toolchain 166 | * 03_toolchain 167 | 168 | __Ideas:__ 169 | 170 | * Drupal ladder (or a Drupal sprint / event) 171 | * Finding and assessing modules 172 | * Patches, the issue queue 173 | * IRC 174 | * Version Control 175 | -------------------------------------------------------------------------------- /_lessons/xx_stash_holding-area-for-cut-content/xx_stash.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | ### D. Kanban & Design in Agile 4 | 5 | * [Kanban](https://www.atlassian.com/agile/kanban) 6 | * [Design Spikes](http://www.smashingmagazine.com/2012/11/06/design-spikes-fit-big-picture-ux-agile-development/) 7 | 8 | Project Management Systems 9 | -------------------------- 10 | 11 | Project management systems are essential to any successful project. You'll need to 12 | 13 | ### A. Types of system 14 | 15 | * Trello 16 | * GitHub issue queue. See [mastering issues](https://guides.github.com/features/issues/). 17 | * JIRA 18 | * Open Atrium 19 | * Real life board 20 | 21 | * __Do:__ Sign-up for one of these systems (we recommend Trello) and add all your user stories to a 'backlog' section in a kanban board. 22 | * Use this management system as you proceed to develop your site. 23 | 24 | * __Checkpoint:__ Take a screenshot of your PM system, and include it in a blog post explaining the process you'll be undertaking. 25 | 26 | ### B. Build a scrum board (optional) 27 | 28 | * Using post-it notes build a real life scrum board. 29 | 30 | 31 | 32 | 33 | 34 | 2) Local Development Environment Setup 35 | -------------------------------------- 36 | 37 | Group discussion / showcase of your current local dev set up(?) 38 | 39 | @todo - Discuss VM 40 | 41 | - do we need an update? 42 | - some firms/candidates have their own 43 | 44 | * __Do:__ Open Drupal VM tutorial, *Tutorials->open_drupal_vm.md* 45 | * Now set up a snapshot at your machine's vanilla state. 46 | * __Checkpoint:__ all have a working local environment and be able to edit our Drupal sites. 47 | * __Group discussion:__ Q&A on virtual machines and local setup, tips & tricks on local development. 48 | 49 | 3) Command Line 50 | --------------- 51 | The command line & Drush while not essential tools are widely used and can make you more efficient and grant access to more powerful system features. For example, think about the time it would take you to find, download and install 5 separate modules. Not a great deal of time, granted, yet a fair bit more time than it takes with Drush: 52 | 53 | ``` 54 | drush dl module1 module2 module3 module4 module5 55 | drush en module1 module2 module3 module4 module5 56 | ``` 57 | 58 | ### A. Command Line Basics 59 | 60 | * __Do:__ [CodeAcademy - Learn the Command Line (units 1 & 2)](https://www.codecademy.com/learn/learn-the-command-line). 61 | 62 | ### B. VIM (optional) 63 | 64 | * __Do:__ [Open VIM Tutorial](http://www.openvim.com/tutorial.html). 65 | * __Do:__ Create a new blog post with an outline of how to use the command line and links to resources. 66 | 67 | ### Extra Resources 68 | 69 | * [*NIX Spellbook](http://nixsrv.com/) 70 | * [The Art of Command Line](https://github.com/jlevy/the-art-of-command-line) 71 | 72 | 4) Drush 73 | -------- 74 | 75 | ### A. Drush Intro 76 | 77 | * __Read:__ [DigitalOcean - A beginners guide to Drush](https://www.digitalocean.com/community/tutorials/a-beginner-s-guide-to-drush-the-drupal-shell) 78 | * __Do:__ Download a module using Drush, then enable it. Then check your Drupal site for updates and install any 79 | * __Do:__ Write your own Drush cheatsheet with at least 10 useful commands. 80 | * __Checkpoint:__ Save your Drush cheatsheet in your folder. 81 | 82 | ### B. Drush Aliases (optional) 83 | 84 | * __Read:__ [Deeson: Drush aliases](https://www.deeson.co.uk/labs/drupal-drush-aliases-and-how-use-them) 85 | * __Read:__ [example.aliases.drushrc.php](https://github.com/drush-ops/drush/blob/master/examples/example.aliases.drushrc.php) 86 | * __Do:__ Create an alias to your local Drupal installation. Set up a site on a remote environment and set up an aliases for this site. 87 | 88 | ### Extra Resources 89 | 90 | * [Drushcommands.com](http://drushcommands.com/) 91 | * [Github.com/drush-ops/drush](http://drush.ws/) 92 | * [Drush docs](http://docs.drush.org/) 93 | 94 | To Do 95 | ----- 96 | * __Do:__ [Shortcut Foo - The command line](https://www.shortcutfoo.com/app/dojos/command-line). Complete level 1 & 2. 97 | * __Do:__ [Learn code the hard way - The command line crash course](http://cli.learncodethehardway.org/book/), and practice. 98 | 99 | 100 | 101 | The Toolchain Continued & Site Building 102 | --------------------------------------- 103 | 104 | ### Preparation 105 | 106 | * @todo 107 | 108 | ### What we'll cover today: 109 | 110 | * Recap the previous workshop 111 | * Start adding some modules and configuration to our sites 112 | * Git basics 113 | * Set up a repository and add our codebase 114 | * Learn about deployment techniques between environments 115 | 116 | Project Build 117 | -------------- 118 | 119 | * Recap previous workshop: quiz on command line commands & Drush commands. 120 | * Review project plans & update if needed. 121 | 122 | ### A. Start building your site 123 | 124 | 30 Minutes - 1 Hour 125 | 126 | Git 127 | === 128 | 129 | * __Group Discussion:__ What is version control and why do we need it? 130 | 131 | Deployment 132 | ========== 133 | 134 | * __Group Discussion:__ The deployment process. 135 | * __Group Discussion:__ Environments & web servers. 136 | * __Do:__ Write down the different components you need to think about when deploying or migrating sites and what we need to consider about them. 137 | 138 | 139 | 140 | Site Building & Front End Development 141 | ===================================== 142 | 143 | 144 | Overview 145 | -------- 146 | 147 | A look into the Drupal contrib module ecosystem, install some useful modules to assist with development and dive deeper into a few powerful modules relevant to your project. Then spend some time going over the frontend development landscape and start building a theme in Drupal, learning about subtheming and getting started with Sass. 148 | 149 | After this lesson you should have: 150 | 151 | * A better understanding of contrib modules 152 | * Configured an advanced module for your site 153 | * A Drupal subtheme based on a popular base theme 154 | * Customised your subtheme with a template 155 | * A custom stylesheet and a understanding of how to implement CSS within Drupal 156 | * Sass and Compass up and running on your local development environment 157 | 158 | 1) Modules 159 | ---------- 160 | 161 | ### A. The Module Ecosystem 162 | 163 | * __Read:__ [Drupal.org: Assessing modules](https://www.drupal.org/node/1585732) 164 | * __Read:__ [Acquia: Evaluating Modules pt 2](https://www.acquia.com/gb/blog/selecting-drupal-modules-part-2-searching-modules) 165 | * __Read:__ [Acquia: Evaluating Modules pt 3](https://www.acquia.com/gb/blog/how-select-drupal-modules-part-3-evaluation-tips) 166 | * __Read:__ [6 Modules to Avoid Before Drupal 8 Arrives](https://www.ostraining.com/blog/drupal/modules-avoid-drupal-8/) 167 | 168 | ### B. Standard Development Module Stack 169 | 170 | * Make sure you have the following useful stack of modules and dev tools installed: Views, Admin Menu, Adminimal Administration Menu, Devel, Link, Webform, Backup & Migrate, Diff, Features, Libraries, jQuery Update, Maillog, Masquerade, Module Filter, Fast Permissions Administration, Pathauto, Token. 171 | * Take a look at the module pages of any modules you haven't heard of and read up on what they do. 172 | 173 | * __Hint:__ ```drush dl views admin_menu adminimal_admin_menu devel link webform backup_migrate diff features libraries jquery_update maillog masquerade module_filter fpa pathauto token``` 174 | 175 | ### C. Selecting & Configuring Advanced Modules 176 | 177 | * __Do:__ Which modules are relevant to your site? Take some time to pick a few, some popular modules you might want to consider include: Views, Date, Display Suite, Context, Panels, CKEditor, Media, File Entity. 178 | * __Do:__ Drill down into one or two module and read up on their documentation. Views, Display Suite and Panels are very powerful modules and worth spending the time to understand in more depth. 179 | 180 | #### Views 181 | 182 | * __Do:__ configure Views, Display Suite & Date for your site to show a list of date based content (e.g blog posts, events) which can be filtered by a URL string using contextual filters. Try creating a navigation block showing a summary of these dates. (Hint: take a look at the 'archive' default view). 183 | 184 | * @todo - Add resources & instructions for advanced configuration of Views, DS & Panels. 185 | 186 | 2) Front End Development and Drupal 187 | ----------------------------------- 188 | 189 | ### A. Overview 190 | 191 | * __Read:__ [Front-end Job Interview Questions](https://github.com/h5bp/Front-end-Developer-Interview-Questions) 192 | * __Read latest editions / subscribe:__ 193 | * [Front end Rapport: Lullabot](http://tinyletter.com/front-end-rapport/archive) 194 | * [Responsive Design Weekly](http://responsivedesignweekly.com/) 195 | * [Hugo Giraudel's Blog](http://hugogiraudel.com/blog/) 196 | * [Javascript Weekly](http://javascriptweekly.com/) 197 | 198 | ### B. Drupal Theming 199 | 200 | ### A. Types of Themes 201 | 202 | * __Research:__ Find out what the differences between a 'base theme', 'sub theme' and 'starter-kit' are in Drupal. What components does a sub theme inherit from a base theme? 203 | * __Hint:__ Here's a [good discussion on drupal.org](https://www.drupal.org/node/2474021). 204 | 205 | ### B. Evaluating Themes 206 | 207 | * __Read:__ [DrupalCon Munich 2012: Evaluating Base Themes](http://munich2012.drupal.org/sites/default/files/slides/basethemes-handout-munich_2.pdf) 208 | * __Read:__ [Drupal Base Themes](http://friendlymachine.net/posts/2012/drupal-base-themes) 209 | 210 | ### C. Working with Themes 211 | 212 | * __Watch:__ [Drupallize.me Introduction to Advanced Theming](https://drupalize.me/videos/introduction-advanced-theming-drupal-7?p=1146) 213 | 214 | Two of the most popular base themes for major custom Drupal projects are [Zen](https://www.drupal.org/project/zen) and [Omega version 4.x](https://www.drupal.org/project/omega) - decide one to install and create a sub theme from: 215 | 216 | #### Zen 217 | 218 | * [Drupal.org: Create a Zen Subtheme](https://www.drupal.org/node/873778) 219 | * [YouTube: Creating Responsive Drupal Sites with Zen Grids and the Zen 5 Theme](https://www.youtube.com/watch?v=_4xdymhPiVQ) 220 | 221 | #### Omega 222 | 223 | Note: Omega 4.x is fairly complex and can be challenging for beginners, it is however very powerful. 224 | 225 | * [Omega: Creating a subtheme](https://www.drupal.org/node/1936948) 226 | * [Beginning Drupal 7 Theming with Omega](http://radarearth.com/content/beginning-drupal-7-theming-omega) 227 | 228 | #### Other Themes 229 | 230 | Some other base themes worth considering: 231 | 232 | * [Gesso](https://www.drupal.org/project/gesso) 233 | * [Aurora](https://www.drupal.org/project/aurora) 234 | * [Mothership](https://www.drupal.org/project/mothership) 235 | * [Bootstrap](https://www.drupal.org/project/bootstrap) 236 | 237 | ### C. Front End Tools 238 | 239 | * Getting tooled up, other front end technologies you might need to know about (Grunt, Gulp, Sass etc). 240 | * Grunt / Gulp / Ruby / any other technologies required 241 | * Building things the right way - look through documentation, keep things clean etc. 242 | 243 | 3) CSS & Sass 244 | ------------- 245 | 246 | #### A. CSS 247 | 248 | CSS is a huge topic in itself. It's vital to understand CSS deeply for effective front end development. 249 | 250 | #### B. Sass & Compass 251 | 252 | * __Do:__ Install [Ruby & Sass](http://sass-lang.com/install) via the command line. 253 | * __Read:__ [Intro to Sass](http://sass-lang.com/guide). 254 | * __Do:__ Install [Compass](http://compass-style.org/install/) via the command line. 255 | * __Read:__ [Intro to Compass](http://compass-style.org/help/) 256 | * __Do:__ Navigate to your sub theme and run ```compass watch``` to compile your stylesheets. 257 | * __Do:__ Start theming your site, aim to target one content type at first. 258 | 259 | #### C. Sass Plugins 260 | 261 | * Breakpoint, Singularity, Susy, Zen Grids. 262 | 263 | #### E. CSS Architecture & Standards (Optional) 264 | 265 | * __Read:__ SMACSS, BEM 266 | * __Do:__ Write your own mini CSS styleguide, highlighting the most important parts to you. Save this as a .md file within a GitHub repository. 267 | 268 | #### F. Gulp & Advanced Sass (Optional) 269 | 270 | * Install Node.js, Gulp & Libsass within your theme 271 | * Add in BrowserSync & Autoprefixer 272 | * Look at yo-generator-webapp & Google's web starterkit 273 | 274 | Site Building & Front End Development 275 | ===================================== 276 | 277 | 1) Modules 278 | ---------- 279 | 280 | Quick run through: 1 - 2 hours 281 | 282 | ### A. The Module Ecosystem 283 | 284 | * Read through articles and write down your own 3 top tips for evaluating and selecting modules. 285 | * Group discussion on the top tips. 286 | 287 | ### B. Development Module Stack 288 | 289 | * Group discussion: which modules do you commonly use? 290 | 291 | ### C. Selecting & Configuring Advanced Modules 292 | 293 | * Group discussion: which modules did you decide on? 294 | * Demos: how to use some of the more popular modules. Tips & tricks on using modules. 295 | 296 | 2) Front End Development 297 | ------------------------ 298 | 299 | ### B. Drupal Theming 300 | 301 | Trainer note: depending on ability and progression, get everyone to decide on one theme and walk through installation and toolset installation. Get to the most basic point of editing a line of Sass. 302 | 303 | Write down advantages / disadvantages of popular themes 304 | 305 | 306 | Frontend Development & Theming in Drupal 307 | ======================================== 308 | 309 | HTML & Templating 310 | ----------------- 311 | 312 | Aims: Be able to write well structured, semantic HTML. Understand Drupal's theme system, override template and theme functions. 313 | 314 | ### A. HTML 5 315 | 316 | * __Do:__ Using the following resources as a references points, write a blog post on a) What is HTML5? b) Why are semantics in HTML important. 317 | 318 | __Resources:__ 319 | 320 | * [Dive Into HTML5: Intro](http://diveintohtml5.info/introduction.html) 321 | * [Dive Into HTML5: Semantics](http://diveintohtml5.info/semantics.html) 322 | * [MDN HTML Element Reference](https://developer.mozilla.org/en/docs/Web/HTML/Element) 323 | * [HTML5 Doctor: Let's talk about semantics](http://html5doctor.com/lets-talk-about-semantics/) 324 | 325 | ### B. Templates 326 | 327 | * __Read:__ [Overview of theme files](https://www.drupal.org/node/171194) 328 | * __Read:__ [Drupal 7 Template Suggestions](https://www.drupal.org/node/1089656) 329 | 330 | * Create a new template override for a custom block which is placed in a sidebar region, add a custom wrapper class and use the relevant HTML5 element. 331 | 332 | * Now, try adding custom template overrides for: 333 | 334 | 1. A specific region 335 | 2. Your site's front page 336 | 3. page.tpl.php based on content type 337 | 338 | Make sure you update any HTML to use the semantically correct elements. 339 | 340 | ### C. Customising Themes 341 | 342 | * Add a new region to your theme by declaring it in THEMENAME.info and adding it to page.tpl.php 343 | 344 | ### E. Theme Overrides 345 | 346 | To override HTML output in Drupal as well as using templates we can also use theme functions. These include preprocess, process and theme functions. 347 | 348 | Read the following articles and implement [template_preprocess_page()](https://api.drupal.org/api/drupal/includes%21theme.inc/function/template_preprocess_page/7) to add a string (e.g "Hello World!") to a page.tpl.php file in your custom theme. 349 | 350 | * __Read:__ [Beginners guide to overriding themable output](https://www.drupal.org/node/457740) 351 | * __Read:__ [Finding Variables](http://themery.com/dgd7/advanced-theming/finding-variables) 352 | * __Read:__ [Preprocess & Process Functions](http://themery.com/dgd7/advanced-theming/preprocess-process) + part [2](http://themery.com/dgd7/advanced-theming/preprocess-process/implement), [3](http://themery.com/dgd7/advanced-theming/preprocess-process/variables) and [4](http://themery.com/dgd7/advanced-theming/preprocess-process/in-action) 353 | 354 | Also try: 355 | 356 | 1. Implementing [template_preprocess_node](https://api.drupal.org/api/drupal/modules!node!node.module/function/template_preprocess_node/7) to add custom variables for specific content types. 357 | 2. Implement [theme_breadcrumb](https://api.drupal.org/api/drupal/includes%21theme.inc/function/theme_breadcrumb/7) to change the separator between breadcrumb items. 358 | 3. For other ideas see the [CEMS base theme's includes folder](https://github.com/hedleysmith/CEMS/tree/master/includes). 359 | 360 | CSS, Sass & Styling Drupal 361 | -------------------------- 362 | 363 | Aims: Be able to write well structured and consistently formatted CSS. Use the common features of Sass and apply them to a Drupal theme. 364 | 365 | ### A. CSS 366 | 367 | Using the following resources as inspiration, come up with your own short CSS guidelines on writing well formatted CSS. Add it as a new project in your public GitHub account. 368 | 369 | As a minimum this style guide should show one annotated example of a well written CSS rule and one annotated example of a badly written CSS rule. 370 | 371 | * https://github.com/necolas/idiomatic-css 372 | * http://cssguidelin.es/ 373 | * https://css-tricks.com/css-style-guides/ 374 | * http://sass-guidelin.es/ 375 | 376 | ### C. Styling in Drupal 377 | 378 | NOTES 379 | ===== 380 | 381 | Start to theme your Drupal site by creating new Sass partial files. 382 | 383 | ### D. BEM, SMACSS & CEMS (Optional) 384 | 385 | * http://markrabey.com/2014/11/07/writing-good-css/ 386 | 387 | ### Extra Resources 388 | 389 | * [Dive Into HTML5](http://diveintohtml5.info/index.html) 390 | * [HTML5 Rocks](http://www.html5rocks.com/en/) 391 | * [Smashing Magazine: HTML](http://www.smashingmagazine.com/tag/html/) 392 | * [Drupal CSS Coding Standards](https://www.drupal.org/coding-standards/css) 393 | 1. Set up our systems, including installation of Sass and Ruby. 394 | 395 | ### A. HTML 5 396 | 397 | * Discuss HTML5 398 | * Do exercise 399 | * Discuss blog posts 400 | 401 | 402 | --------------------------------------------------------------------------------