MDN/Development/Beginners MDN material

Project statement

Initial draft written by Chris Mills, 10th October 2013

MDN has always been really good at reference material and advanced topics, providing professional developers with a comprehensive source of developer material that they can trust. MDN also has a number of good tutorials to teach the basics of certain technologies. But these are somewhat spread out, and MDN is not known as being a popular destination for complete beginners who wish to take those first steps towards becoming a web developer.

The aim of this project is to create a beginner's zone, as a canonical landing place for these audience members, which will combine the depth of knowledge and authoring skill of the MDN community with the learning power and awesome tools of the Webmaker community.

What resources do we have?

• We have MDN to host the pages on.
• We have Webmaker tools like X-ray Goggles and Thimble to provide interactive learning experiences.
• We have open badges to provide awards for completing exercises (we have notes on integrating badges with MDN already).
• We have together.js for allowing students to collaborate on docs.
• We have the Webmaker Web literacy standard, to inform the structure and learning objectives, plus many other Webmaker resources and staff to help us. I have talked to Webmakers like Kate Hudson and Laura Hilliger about this idea already, and they think it is a good idea.
• We have a large bank of beginner's material called the web standards curriculum, which Chris co-wrote along with a number of community members in around 2008/2009. This comprises around 50-60 articles on web standards, web design and development concepts, HTML, CSS and JavaScript. the content is currently not doing much, and needs an update. It is published under cc-by, so we could happily reuse it and save ourselves a lot of time.
• We have Firefox Developer Tools, which can be used to explore examples and illuminate technologies.

Chris has already started to create a sample exercise to start conceptualising what the content could look like.

What do we need to do?

Ideally, the tools should be a bit more integrated for the material to work optimally, which presents some technical challenges. The exercises currently live on separate make pages, but it would be better if these were embedded in the articles themselves, so the reader could have the whole interactive learning package in the same place.

There should be a way for the program to automatically check whether a correct answer has been submitted, and if so, points should be awarded, with a badge being awarded for repeated successes or completion of a whole section. Points/badges should be stored on a user's MDN/persona/developer program login.

Also, I love the idea of allowing students to collaborate and discuss material, using tools like together.js, but we need to work out the best way to integrate this. I tested it on Thimble during the summit, and it played ok with the Published examples, but not the interactive edit screen. Some advice on how best to integrate this would be great.

What is the scope of the beginner's material?

• Basic web concepts
• Accessibility
• IA
• SEO
• UX
• HTML
• CSS
• JS
• Web apps
•  ?

NOTE: Add more details somewhere else.

Question: how long should an article be for this course? The CSS basics article I have posted over to MDN as a test bed is a bit long, especially for a beginner audience.

What other learning resources are there to inspire us?

Other resources that do a good job are:

• Codecademy, which does a great job of interactive exercises, although I feel that these would work better if interspersed with some tutorial material.
• Khan academy also does a great job of interactive exercises, and for a wider range of subjects.
• Webplatform.org has some beginner's tutorials, which includes quite a lot of the web standards curriculum and some MDN material as well, but nothing has really been done with it yet.
• Dash is a new teaching site with in-browser tutorials for HTML, CSS and Javascript.

Other resources that could be useful

• Webmaker teach templates - princpals love these because they incorporate STEM. Often used for public classes for kids, do events round a theme, STEM topics.
• Popcorn - dynamic video editor/remixer
• Homago - learning platform, looks really interesting

Other notes

Need to think about how Webmaker and Appmaker fit in. Online universities might be a good target. Reach out to colleges? Dan Scott works at a university; ask him for ideas. Need end goal objectives for the beginner course, e.g. build you own game