|Interactive Examples On MDN|
|Written by Lucy Black|
|Tuesday, 27 March 2018|
In his blog post announcing the new availability of interactive examples, Will Bamerg explains that the MDN Web Docs team has been designing, building, and implementing interactive examples for the reference pages. He writes:
The motivation for this was the idea that MDN should do more to help “action-oriented” users: people who like to learn by seeing and playing around with example code, rather than by reading about it.
In his January 2017 propsal for putting simple examples at the top of JS, CSS and Web API references pages Bamberg expanded on the problem this project intended to address:
Although MDN is respected for completeness and correctness, it can be harder for people to get a quick refresher of syntax using MDN than using alternative sites like w3schools.
He also noted:
This is scoped to be a pretty small change.
The important thing to note is that as well as seeing what the supplied code does when you Run it, you can edit the code to see what happens when you change it.
In the case of CSS there are more than 150 examples contributed by the community. These are designed to show users the different kinds of syntax that an item could accept. Again as well as stepping through the code snippets, explore them by editing them. The Reset button allows you to restore the original:
The team is now working on similar interactive examples for the HTML reference and then it intends to tackle the SVG documentation.
or email your comment to: email@example.com
|Last Updated ( Tuesday, 27 March 2018 )|