This pad is made to design a full HTML tutorial for the MDN Learning Area: Feel free to comment and edit :) ============= Thanks to all the feedback and research below, we are moving to phase 2: drafting a plan. In order to have a tutorial able to be innovative, exhaustive and valuable to all kind of audience we can build a 3 step content for HTML: 1. Clean up and improve the structure of the HTML reference. Target audience: Average to advanced developers (but with possible improvement for beginners) 2. Provide in depth articles on how to use each individual HTML element (on article per element). Target audience: Average to beginner developers 3. Provide in depth articles on how to solve common problem with HTML (and HTML only) For 1 we need to discuss how to update the structure and content of the HTML element reference (the same kind of work that have been done ). TBD on the dev-mdc mailing list For 2 we need to set up how to handle all those articles. TBD on the dev-mdc mailing list and Learning Area Trello board. For 3 we need to discuss what are those problem. TBD on the dev-mdc mailing list and listed on the form of "how to" question right here. PHASE 1 (DONE) --------------------------------------------------------------------------------------------- ******************************************************************** * Please, take 1h to answer our study about HTML Tags: * http://bit.ly/1F2XGNS (Closed, raw data are available here: https://conceptcodify.com/studies/Yas60hXlSm354SowXeqYOfoa/analyze/ more refined analysis to be available soon) ******************************************************************** Expected audience: * Beginners with no specific knowledge about web development (nor any form of computer development skills) Expected perimeter: * HTML technology only. Other technologies will be covered in their own tutorial and how to combine technologies is part of other learning pathways: ("How to build a web site", currently available on MDN and the future "How to build mobile web sites") Raw MDN material to consider: * https://developer.mozilla.org/en-US/docs/Web/Guide/HTML * https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Introduction Webmaker resources: * Crash Course HTML & CSS: https://mozteach.makes.org/thimble/crash-course-html-and-css * HTML Cheatsheet: https://mozteach.makes.org/thimble/html-cheatsheet * Intro to HTML: https://techkim.makes.org/thimble/intro-to-html * Markup Mixer: https://thomaspark.makes.org/thimble/markup-mixer * Webmaker Resources / Composing for the Web: https://webmaker.org/en-US/resources/literacy/weblit-Composing * Ways of the Web (basic overview): https://mozteach.makes.org/thimble/ways-of-the-web-teaching-kit * Developing Modern Websites: https://fourtonfish.makes.org/thimble/creating-for-the-modern-web * Make Your First Website https://thimble.webmaker.org/project/60764/remix * HTML Basics https://training.webmakerprototypes.org/en/html/concepts/ * Chris Mills: https://chrisdavidmills.github.io/basic-practical-web-design-skills/ Third party resources: * Full curriculum by Greg Baker: http://www.cs.sfu.ca/~ggbaker/165-draft/ * http://de.selfhtml.org/ (German) (Yeah, I remind using the fr version in my early days :D) * SELFHTML is now maintained in a wiki on that page: http://wiki.selfhtml.org/wiki/HTML * W3Schools (I know, I know! But still, it's there.) http://www.w3schools.com/html/default.asp * HTML Dog http://www.htmldog.com/guides/html/beginner/ * codeacademy.com It's an easy and interactive way for a complete beginners to get started with HTML and other web modules. * I guess we are talking about this: http://www.codecademy.com/en/tracks/web * This is very good: http://www.codecademy.com/en/skills/make-a-website/topics/html-elements/html-css-intro (indeed it is :D) * Dash (General Assembly) - the first part of the first tutorial is HTML only: https://dash.generalassemb.ly/ (similar set up to Codecademy) * Learn to Code HTML & CSS (Shay Howe) - the first two lessons are HTML: http://learn.shayhowe.com/html-css/building-your-first-web-page/ Tools: * Do we make people use an external editor, or do we use the built-in dev tools? * External editor * External editor means one set of docs works for everyone * We can do quick out-takes into the built-in tools if needed. * We could direct people towards Thimble [https://thimble.webmaker.org] * What about introducing both how to use Thimble and how to save a text file? * Built-in tools * Insanely powerful and provide quick visual veedback of what youre doing... but; * Different in every browser * Do we actually cover the steps in all of them or just go with Firefox's tools? * Or is this reason enough not to use the dev tools for primary docs like this? # I usually compare Web technologies and Human body. That helps the beginner understand it perfectly. (indeed, I already used such comparison as well. Well spotted :) * HTML - Skeleton * CSS- skin * Javascript - Sense organs # Would be nice to add exercises at the end of the chapters. This could be kind of a challenge for the learner and the solution should not be explained in the same page. * For teaching basic HTML to my students I usually provide pictures of webpages or documents and let them time to use the material and code the exercise in HTML. * Thimble inline help and syntax correction is completely useful for beginners when they don't have a teacher to ask why the code doesn't work. # Self-assessment tools would also be a good addition. DRAFT PATHWAYS (feel free to change and comment) ----------------------------------------------------------------------------- 0. Environment prerequisites An optional entry point for learning HTML could be an overview of what is needed to actually code and test HTML files. A per-OS introduction could be needed. On MDN we currently have a few articles covering that specific point: * https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Installing_basic_software * https://developer.mozilla.org/en-US/Learn/What_software_do_I_need * https://developer.mozilla.org/en-US/Learn/Choose,_Install_and_set_up_a_text_editor (IMHO this article is of little use for raw beginners. It would be better, if there would be an opinionated selection. E.g., Vim, is cool, but it has absolutely no place in this beginner's page. The article should pre-select and explain good editors, that come pre-installed or are easy to set up: Win: Notepad++, Linux: Gedit or Kate, Mac: Whatever's most easy to get started) * https://developer.mozilla.org/en-US/Learn/Set_up_a_basic_working_environment There are some _very_ basic points, that need to be told if people start from the very beginning: Open HTML files locally (file: protocol), or, if you have installed Apache, that you can access the files by entering "localhost" in the address bar, stuff like that. Those are the stumbling blocks for beginners, not tags. 1. HTML: What is it? How it works? 1.1: All tutorial linked above start with something similar. Explaining the basic syntax, providing the basic vocabulary (tag, element, attribute, etc.) * http://www.w3schools.com/html/html_intro.asp * http://www.htmldog.com/guides/html/beginner/tags/ * http://www.codecademy.com/fr/courses/web-beginner-en-HZA3b/0/2?curriculum_id=50579fb998b470000202dc8b (less obvious but still with the same idea) * http://wiki.selfhtml.org/wiki/HTML/Allgemeine_Regeln/Textauszeichnung * https://training.webmakerprototypes.org/en/html/concepts/ 1.2: It seams there is always a second part that is about DOCTYPE and the basic structure of HTML document (, , and <body> elements). Usually, this all end with the learner achieving it's first basic HTML file. * At the end of this chapter the reader should be able to format a text by using HTML tags. X. HTML: ? The following are topics suggestion that need to be sorted: * Page structure <!doctype html><head> and <body< (this is intended to be part of section 1.2, see above) * Document structure (advanced: <header>, <footer>, <article>, <aside>, <nav>) * Document structure (basics: <div>, <span>, <section>, <p>) <- I would not start with div and span as they are "last resort" elements Are they? They are used so often that it is important to explain what they are and how to use them very early in order to prevent bad practices with them.Oh yes of course! I meant: <div> and <span> should be used when no semantic tags match (often for technical reasons). We absolutely need to explain them but I prefer to first explain a few semantic tags, just to get people used to them first. * Hierarchy of titles (<h1> to <h6>) * Content structure: List (<ul>, <ol> and <li>) * Content structure: Text semantic (<em> vs. <i>, <strong> vs. <b>, <cite> vs. <q>, <code> vs. <samp>, <s> vs. <del>, etc) Maybe too much at that point and need to be split into several smaller part? * Meta data (<meta>, <title>, <link>) * Linking (Basics: <a>) Consider revamping https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Hyperlink * Linking (CSS: <link>, <style>) * Linking (JS: <script>) * Form (Only the basics concept: <form>, <fieldset>, <label>, <input>, <textarea>, <select>, the advanced mechanisms are covered here: https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Forms but even like that it might be needed to split it into smaller pieces) * Images (basics: The <img> element, possibly also talk about <map> and <area> elements) * Images (advanced: The <picture> element) Maybe not suited for a beginner course? * Media (<audio> and <video>, also possibly <track>) * Tables (Definitely a huge topic that need to be split into smaller pieces) * Embedded content (<iframe> and <object>)