{% extends "base.html" %}

{% block pageid %}web{% endblock %}

{% block extrahead %}
  <link rel="alternate" type="application/rss+xml" title="Mozilla Hacks &#8211; the Web developer blog RSS Feed" href="https://hacks.mozilla.org/feed/" />
{% endblock %}

{% block bodyclass %}section-web landing{% endblock %}

{% block title %}{{ page_title(_('Web')) }}{% endblock %}

{% block content %}
<header id="section-head">
<div class="wrap">
  <h1 class="intro">{{ _('Welcome to the <b>Web Developer Community</b>')|safe }}</h1>

  <div class="util">
    <p><strong>{{ _('Develop for an open and participatory Web.') }}</strong></p>
    <ul>
      <li class="util-twitter"><a href="http://twitter.com/mozhacks">{{ _('Twitter') }}</a></li>
      <li class="util-rss"><a href="http://hacks.mozilla.org/feed/">{{ _('Subscribe') }}</a></li>
    </ul>
  </div>
</div>
</header>

<section id="content">
<div class="wrap sidebar">
  <section id="content-main" role="main">

    <div class="boxed">
      <section id="popular-docs" class="articles-list">
        <header class="head section-web">
          {# L10n: Please escape HTML entities here, like &amp; #}
          <h2>{{ _('Awesome Web Demos')|safe }}</h2>
        </header>

        <ul class="hfeed">
          <li class="hentry">
            <h4 class="entry-title"><a href="{{ url('demos') }}" rel="bookmark">{{ _('Demo Studio') }}</a></h4>
            <p class="entry-summary">{{ _('Do you want to show the world what the Web can do? Demo Studio is your place for sharing awesome demos and experiments with the latest Web standards and open technologies.') }}</p>
          </li>
          <li class="hentry">
            <h4 class="entry-title"><a href="http://hacks.mozilla.org/demos/" rel="bookmark">{{ _('Hacks Blog') }}</a></h4>
            <p class="entry-summary">{{ _('Learn more about developer features and the latest technologies through articles and demos on the Hacks Blog.') }}</p>
          </li>
        </ul>
      </section>

      <section id="popular-docs" class="articles-list">
        <header class="subhead">
          {# L10n: Please escape HTML entities here, like &amp; #}
          <h3>{{ _('Popular Web Documentation')|safe }}</h3>
        </header>

        <ul class="hfeed">
          <li class="hentry">
            <h4 class="entry-title"><a href="{{ devmo_url(_('/en/HTML/HTML5')) }}" rel="bookmark">{{ _('HTML5') }}</a></h4>
            <p class="entry-summary">{{ _('Find out what HTML5 is really all about and how you can develop for a better Web through open standards.') }}</p>
          </li>
          <li class="hentry">
            <h4 class="entry-title"><a href="{{ devmo_url(_('/en/JavaScript')) }}" rel="bookmark">{{ _('JavaScript') }}</a></h4>
            <p class="entry-summary">{{ _('A great resource for anyone working with JS.') }}</p>
          </li>
          <li class="hentry">
            <h4 class="entry-title"><a href="{{ devmo_url(_('/en/CSS')) }}" rel="bookmark">{{ _('CSS') }}</a></h4>
            <p class="entry-summary">{{ _("You'll find everything you need in the CSS reference and helpful tutorials to build pretty websites.") }}</p>
          </li>
          <li class="hentry">
            <h4 class="entry-title"><a href="{{ devmo_url(_('/en/DOM')) }}" rel="bookmark">{{ _('DOM') }}</a></h4>
            <p class="entry-summary">{{ _("The DOM is the architecture for Web documents; learn how to use the DOM and its API to look at and manipulate Web content.") }}</p>
          </li>
        </ul>
        <p class="all"><a href="{{ devmo_url(_('/en/Web_Development')) }}" class="go">{{ _('All web development documentation') }}</a></p>
      </section>

      <section id="fave-tools">
        <header class="subhead">
          {# L10n: Please escape HTML entities here, like &amp; #}
          <h3>{{ _('Favorite Web Developer Tools')|safe }}</h3>
        </header>
        <ul class="tools">
          <li>
            <h4><a href="http://getfirebug.com/">Firebug <img src="{{ MEDIA_URL }}img/icn-tool-firebug.png" alt="" /></a></h4>
            <p class="desc">{{ _('The most popular and powerful web development tool.') }}</p>
            <p class="desc"><q>{{ _('"An absolute necessity for anyone doing serious web development. Awesome!!!!"') }}</q> &ndash; <cite>{{ _('geckoday via AMO') }}</cite></p>
          </li>
          <li>
            <h4><a href="https://addons.mozilla.org/en-US/firefox/addon/60/">Web Developer <img src="{{ MEDIA_URL }}img/icn-tool-devtoolbar.png" alt="" /></a></h4>
            <p class="desc">{{ _('Firefox Add-on that adds a lot of great developer tools that are just a click away.') }}</p>
          </li>
          <li>
            <h4><a href="http://code.google.com/speed/page-speed/">Page Speed <img src="{{ MEDIA_URL }}img/icn-tool-pagespeed.png" alt="" /></a></h4>
            <p class="desc">{{ _('Evaluate performance of web pages with this Firefox/Firebug Add-on') }}</p>
          </li>
          <li>
            <h4><a href="https://addons.mozilla.org/en-US/firefox/addon/6683/">Firecookie <img src="{{ MEDIA_URL }}img/icn-tool-firecookie.png" alt="" /></a></h4>
            <p class="desc">{{ _('Another great Firefox/Firebug Add-on that helps you view and manage cookies in your browser.') }}</p>
          </li>
          <li class="all"><a href="https://addons.mozilla.org/{{ LANG }}/firefox/extensions/web-development/" class="go">{{ _('All web development tools') }}</a></li>
        </ul>
      </section>

      <section id="recent-news" class="articles-list">
        <header class="subhead">
          {# L10n: Please escape HTML entities here, like &amp; #}
          <h3>{{ _('Recent Web News &amp; Updates')|safe }}</h3>
        </header>

        {{ newsfeed(updates) }}

        <p class="all"><a href="http://hacks.mozilla.org" class="go">{{ _('All web development entries') }}</a></p>
      </section>
    </div>{# /.boxed #}

  </section>{# /#content-main #}

  <aside id="content-sub" role="complementary">
  
    <div class="module help">
      <h3>{{ _('Help on Mozilla Websites!') }}</h3>
      {% trans mdn_getinvolved_href="https://wiki.mozilla.org/Webdev/MDN/GetInvolved", webdev_getinvolved_href="https://blog.mozilla.com/webdev/get-involved/"%}
      <p>Did you know Mozilla's websites are open-source? We want you to build sites like MDN with us. Thank you for helping us help you help us all.</p>
      <p><a href="{{ mdn_getinvolved_href }}" class="go">Get involved with MDN</a></p>
      <p><a href="{{ webdev_getinvolved_href }}" class="go">Get involved with Mozilla Webdev</a></p>
      {% endtrans %}
    </div>

    <figure id="apps-promo" class="promo banner">
      <a href="{{ url('apps') }}">
        <img src="{{MEDIA_URL}}img/labsapps-promo-235x275.png" width="235" height="275" alt="{{ _("Be part of the Mozilla Labs Apps project. Learn More.") }}">
      </a>
    </figure>

    {{ twitter(tweets, title=_('Tweets from the Web developer community.')) }}
  </aside>{# /#content-sub #}

</div>
</section>{# /#content #}

{% endblock %}