Mozilla

 Developer  Network  (MDN)  

We  are  an  open  community  of  developers  building  resources  for  a  better  web,  regardless  of  brand,  
browser  or  platform.  Anyone  can  contribute  and  each  person  who  does  makes  us  stronger.  Together  we  
can  continue  to  drive  innovation  on  the  Web  to  serve  the  greater  good.  It  starts  here,  with  you.  

Join  the  Community  

 
For  advice,  help,  or  just  to  get  to  know  us,  please  join  the  following:      
 
IRC  Channels  –  for  chatting  with  MDN  contributors:    
● #devmo:  Discussions  of  developer  documentation  content  in  MDC    
● #mdn:  General  questions  about  MDN    
The  MDN  community  meets  every  other  Wednesday  at  10:00  am  Pacific  Time  (18:00  UTC  winter;  17:00  
UTC  summer)  in  #devmo  on  irc.mozilla.org.  
 
To  join  IRC,  follow  the  instructions  on  the  IRC  wiki:  https://wiki.mozilla.org/IRC#Getting_Started  
 
Email  lists  –  less  frequent  communications  for  the  entire  MDN  community:    
● mozilla.dev.mdc:  MDN  Documentation  Center    -­‐  discussions  about  content  production.    
● mozilla.dev.mdn:  Technical  website  development  of  the  MDN  platform.  
● mozilla.dev.mdc.es:  MDN  Documentation  Center  -­‐  Spanish  localization  community.  
● mozilla.dev.mdc.pt:  MDN  Documentation  Center  -­‐  Portuguese  localization  community.  

Go  to  MDN  
 
To  add,  edit,  or  translate  documents,  you  will  need  to  go  to  the  MDN  website:  
https://developer-­‐new.mozilla.org  
 
Once  on  the  site,  you  will  need  to  create  an  account  on  MDN.    Mozilla  Developer  Network  uses  Persona  
(also  known  as  BrowserID)  to  manage  accounts.  BrowserID  is  safe,  secure,  and  easy.  It  protects  user  
privacy,  user  control,  and  user  choice  in  ways  that  other  providers  don't  or  can't.  

Create  an  account  

 
1. Click  the  Sign  In  button  at  the  top  of  the  page.  A  BrowserID  login  window  opens.  
 

 
 
 
 
 2. Enter  the  email  address  you  want  to  use  for  the  account,  and  click  next.  
 

 
 
What  happens  next  depends  on  whether  you  have  used  this  email  address  with  BrowserID  before.  
 
1. If  you  have  not  used  BrowserID  before,  a  window  asks  you  to  choose  a  password.  Enter  the  
password  twice,  and  click  verify.  
2.  

 
 
 
a. Check  the  email  account  you  entered  and  look  for  a  message  from  
[email protected].  (Check  your  spam  filter  if  necessary.)  
b. Click  the  registration  link  in  the  message.  
c. Enter  the  password  for  this  address  (twice  if  it's  new),  and  click  finish.  In  the  MDN  tab  
or  window  (where  you  originally  clicked  Sign  In),  MDN  displays  an  account-­‐creation  
page.  
d. Enter  a  user  name  to  associate  with  your  account,  and  click  Create  new  profile.  Note  
that  user  names  cannot  contain  spaces.  
 
3. If  you  have  used  BrowserID  before,  enter  your  existing  BrowserID  password  for  this  email  
address.  Enter  it  and  click  verify.  
 
You  now  have  an  account  on  MDN  and  can  create,  edit,  and  translate  documentation  content.  
Editing  Content  on  MDN  
Start  editing  a  page  
 
1. Check  to  make  sure  you  are  signed  into  MDN  (see  section  above  for  instructions)  
2. To  edit  a  page,  click  Edit  at  the  top  of  the  page.  The  page  switches  to  edit  mode,  and  shows  the  
contents  of  the  page  inside  an  editor  panel.  
 

 
 

 
 

Save  your  work  

 
The  editor  in  MDN  offers  multiple  ways  to  check  and  save  your  work.  
 

 
 
1. Save  changes:  Saves  your  changes  and  leaves  edit  mode,  returning  the  page  to  reading  mode.  This  
is  the  same  as  the  Save  and  Exit  button  in  the  editor  toolbar.  
2. Save  and  keep  editing:  Saves  your  changes,  remaining  in  edit  mode.  This  is  the  same  as  the  Save  
and  Keep  Editing  button  in  the  editor  toolbar.  
3. Preview  changes:  Renders  your  changes  in  another  browser  tab.  This  view  executes  any  templates  
that  are  referenced  in  the  page,  so  that  you  can  see  how  the  templates  will  appear  to  readers.  
4. Discard  changes:  Throws  away  your  changes  since  the  last  save,  and  returns  the  page  to  reading  
mode.  
 

 
Modify  the  page  info  
 
While  a  page  is  in  edit  mode,  you  can  modify  some  of  the  page  metadata.  Click  the  "i"  to  open  the  page  
info  fields.  
 
● Title:  The  title  that  appears  in  the  browser  title  bar  and  at  the  top  of  the  page  content.  
● Slug:  The  last  part  of  the  URL  for  the  page.  Normally,  this  is  based  on  the  page  title  (appropriate  
substitutions  for  spaces  and  special  characters),  but  you  can  change  it.  
● TOC:  If  this  box  is  checked,  a  table-­‐of-­‐contents  is  automatically  generated  for  the  page,  based  on  
the  headings  within  the  page  (up  to  H4),  in  a  box  near  the  top  of  the  page.  
 
Any  changes  to  these  fields  are  saved  when  you  save  the  page  as  a  whole.  
 

Format  text  
 
The  editor  offers  several  toolbar  buttons  to  help  with  formatting  text.  Some  of  these  of  common  to  many  
editors  and  need  no  explanation.  
 
● Source:  Switches  the  editor  from  visual  editing  to  HTML  source  editing.  
● H1,  H2,  H3,  H4,  H5,  H6:  These  buttons  correspond  exactly  to  the  corresponding  HTML  heading  
elements.  This  is  different  from  the  previous  version  of  the  MDN  editor,  where  pressing  H1  
produced  <h2>,  and  so  on.  Therefore,  avoid  formatting  with  H1,  as  there  should  be  only  one  <h1>  
element  in  a  page,  and  for  MDN,  that  is  produced  by  the  page  title.  
● PRE:  Encloses  the  selected  text  in  a  <pre>  element.  Clicking  this  button  enables  the  Syntax  
Highlighter  menu  next  to  it,  which  lets  you  select  the  type  of  code,  so  that  syntax  highlighting  is  
applied  appropriately.  
● Styles:  Selecting  an  item  from  this  menu  surrounds  the  selected  text  in  a  <div>  (for  block  styles)  or  
<span>  (for  inline  styles)  element  with  the  corresponding  class  identifier.  This  enables  the  
affected  text  to  be  appropriately  styled  by  MDN's  style  sheets.  
● <>:  This  button  wraps  the  selection  in  a  <code>  block,  which  is  useful  for  indicating  names  of  APIs,  
variables,  and  files.  

Translating  a  Page  
 
1. On  the  Languages  menu,  click  Add  Translation.    
 

 
 
2. The  Select  Languages  page  appears.  
 
  

 
 
3. Click  the  language  that  you  want  to  translate  the  page  into.  The  Translating  Article  view  opens,  
with  the  original  language  text  displayed  on  the  left  side  of  the  view.  
 

 
 
4. Translate  the  title  and  the  page  content  into  the  target  language.  To  do  so,  click  on  the  round  "i"  
button,  which  reveals  the  information  you  can  edit.    
5. Click  Save  Changes  when  you  are  done.  
 
Note:  The  user  interface  elements  of  the  Translating  Article  view  are  initially  shown  in  English.  
 
Edit  a  translated  page  
 
       On  a  translated  page,  click  the  Edit  button  (which  may  be  labeled  in  the  target  language).  The  
Translating  Article  view  opens.