index.html

---
layout: default
title: Home
---

<div class="row">
  <div class="twelve columns"><hr></div>
</div>

<div class="row introduction">
  <div class="seven columns">
    <h2>Chào mừng bạn đến với Code Club Vietnam,</h2>

    <p>Chúng tôi là một hội những người yêu lập trình, với mong muốn lan tỏa thú vui thật sự của lập trình tới khắp Hà Nội.<br />
Hiện tại, Code Club Vietnam đang mở các buổi dạy lập trình miễn phí cho các em học sinh tiểu học, và tổ chức các buổi họp mặt hàng tuần cho tất cả những ai muốn tham gia vào cuộc chơi này.</p>
  </div>

  <div class="five columns">
    <h2>Nhập cuộc:</h2>
    <p>Hãy giúp sức với chúng tôi để nuôi lớn các lập trình viên tương lai của Hà Nội</p>
    <p><a href="/support-us" class="button primary round">Nhập cuộc</a></p>
  </div>
</div>

<div class="row">
  <div class="twelve columns"><hr></div>
</div>

<div class="row how-it-works">
  <div class="twelve columns">

    <div class="row">
      <div class="ten columns">
        <h2>Hoạt động của Code Club Vietnam:</h2>
        <p>
Các tình nguyện viên của Code Club Vietnam gặp mặt mỗi tuần để bàn bạc về các hoạt động của câu lạc bộ và xây dựng giáo trình.<br />
Chúng ta sẽ cùng nhau tìm các địa điểm dạy phù hợp, kêu gọi tài trợ, tuyển tình nguyện viên để mở các lớp dạy lập trình miễn phí khắp Hà Nội.<br />
Mục tiêu của Code Club Vietnam là lan tỏa sự thú vị của lập trình, giúp học sinh chơi đùa với trí thông minh của mình, phát triển óc sáng tạo và trí tưởng tượng. Các học sinh của Code Club Vietnam (hiện tại, phần lớn học sinh là các em nhỏ độ tuổi từ 9-11) sẽ được học lập trình thông qua việc tự sáng tạo các trò chơi, hoạt hình và website.</p>
      </div>
    </div>

    <div class="row">
      <div class="bit">
        <div class="image">
          <img src="/img/club-steps/1.png">
        </div>
        <h4>Tình nguyện viên</h4>
      </div>
      <div class="bit">
        <div class="image">
          <img src="/img/club-steps/2.png">
        </div>
        <h4>Giáo trình</h4>
      </div>
      <div class="bit">
        <div class="image">
          <img src="/img/club-steps/3.png">
        </div>
        <h4>Địa điểm sinh hoạt</h4>
      </div>
      <div class="bit">
        <div class="image">
          <img src="/img/club-steps/4.png">
        </div>
        <h4>Học sinh</h4>
      </div>
      <div class="bit">
        <img src="/img/logo-150x150.png">
        <p><a href="/advice/creating-a-club.html" class="button secondary round">Tìm hiểu thêm</a></p>
      </div>
    </div>

  </div>
</div>

<div class="row">
  <div class="twelve columns"><hr></div>
</div>

<div class="row how-it-works community-steps">
  <div class="twelve columns">

    <div class="row">
      <div class="ten columns">
        <h2>Khởi nguồn của Code Club Vietnam:</h2>
        <p>Code Club Vietnam được xây dựng dựa trên mô hình của Code Club World - mạng lưới các câu lạc bộ lập trình dành cho trẻ em trên toàn thế giới. Hiện tại, đã có tới hơn 2.500 Code Club tại nhiều nước khác nhau tham gia vào mô hình này.</p>
      </div>
    </div>

    <div class="row">
      <div class="bit">
        <div class="image">
          <img src="/img/community-steps/1.png">
        </div>
        <h4>Take our projects</h4>
      </div>
      <div class="bit">
        <div class="image">
          <img src="/img/community-steps/2.png">
        </div>
        <h4>translate them into your language.</h4>
      </div>
      <div class="bit">
        <div class="image">
          <img src="/img/community-steps/3.png">
        </div>
        <h4>Support your volunteers</h4>
      </div>
      <div class="bit">
        <div class="image">
          <img src="/img/community-steps/4.png">
        </div>
        <h4>by using social media and holding meet ups</h4>
      </div>
      <div class="bit last">
        <a href="/advice/creating-a-community.html" class="button secondary round">Get started now</a>
      </div>
    </div>

  </div>
</div>

<div class="row">
  <div class="twelve columns"><hr></div>
</div>

<div class="row">
  <div class="twelve columns">

    <div class="white panel map-wrapper">
      <div class="row">
        <div class="ten columns club-count">
          <h2><span class="counter"></span> <span class="counter-after">Code Clubs worldwide!</span></h2>
        </div>
        <div class="two columns start-club">
          <a class="button primary round">Start Club</a>
        </div>
      </div>
      <div id="map"></div>
    </div>

    <div class="panel" id="register">

      <form novalidate>

        <div class="row">
          <div class="twelve columns">
            <h3>Register your Code Club and join the movement!</h3>
          </div>
        </div>

        <div class="row">
          <div class="nine columns">
            <div class="row">

              <div class="six columns">
                <div class="custom-placeholder required">
                  <label for="venue[name]">Venue name</label>
                  <input class="medium input-text" name="venue[name]" id="venue[name]" type="text" data-trigger="change" required="required">
                </div>

                <div class="custom-placeholder">
                  <label>Venue website</label>
                  <input class="medium input-text" type="text" name="venue[website]" data-trigger="change">
                </div>

                <p>The venue website will be shown on the map marker</p>

                <br class="separator">

                <div class="custom-placeholder required">
                  <label for="venue[address_1]">Venue address 1</label>
                  <input class="medium input-text" name="venue[address_1]" id="venue[address_1]" type="text" data-trigger="change" required="required">
                </div>

                <div class="custom-placeholder">
                  <label for="venue[address_2]">Venue address 2</label>
                  <input class="medium input-text" name="venue[address_2]" id="venue[address_2]" type="text">
                </div>

                <div class="custom-placeholder">
                  <label for="venue[region]">Venue region</label>
                  <input class="medium input-text" name="venue[region]" id="venue[region]" type="text">
                </div>

                <div class="custom-placeholder">
                  <label for="venue[city]">Venue city</label>
                  <input class="medium input-text" name="venue[city]" id="venue[city]" type="text">
                </div>

                <div class="custom-placeholder">
                  <label for="venue[postcode]">Venue postcode</label>
                  <input class="medium input-text" type="text" name="venue[postcode]" id="venue[postcode]" data-trigger="change">
                </div>

                <p>The venue address will NOT be shown on the map marker and is just used to place the venue on the map.</p>

                <br class="separator">

                <div class="custom-placeholder required">
                  <label>Country</label>
                  {% include country_select.html %}
                </div>
              </div>

              <div class="six columns">
                <div class="custom-placeholder required">
                  <label for="contact[name]">Your name</label>
                  <input class="medium input-text" type="text" name="contact[name]" id="contact[name]" data-trigger="change" required="required">
                </div>

                <div class="custom-placeholder required">
                  <label for="contact[email]">Your email address</label>
                  <input class="medium input-text input-email" type="email" name="contact[email]" id="contact[email]" data-trigger="change" required="required">
                </div>

                <p class="mini-notice">Your name and email address will not be displayed</p>

                <div class="custom-placeholder">
                  <label for="contact[skype]">Club skype name</label>
                  <input class="medium input-text" type="text" name="contact[skype]" id="contact[skype]">
                </div>

                <p>Set up a club Skype name so you can chat to other clubs. It will be displayed on your map marker</p>

                <label id="terms-and-conditions">
                  <input type="checkbox" name="contact[agreed]" value="1" required="required" data-error-message="You must agree to the terms and conditions to continue.">
                  <strong>I have read and agreed to the <a href="http://codeclub-assets.s3.amazonaws.com/public/CodeClubWorld-Terms-of-Service-v1-clean.pdf">terms and conditions</a></strong>
                </label>

                <button type="submit" class="button primary round" id="create-a-club">Create a club</button>
              </div>
            </div>
          </div>

          <div class="three columns">
            <p><strong>Why register?</strong></p>
            <p>When you register your club you can download the certificates, door sign and badge templates to make your club complete.</p>

            <img src="/img/robots/giddy.png" class="giddy" />
          </div>
        </div>

      </form>

    </div>
  </div>
</div>

<div class="row">
  <div class="seven columns">
    <h2>Giáo trình của Code Club Vietnam:</h2>

    <p>Các bài code chúng tôi sử dụng hoặc được lấy từ nguồn của Code Club World, hoặc được chính đội tình nguyện viên của clb sáng tạo.
Mỗi kỳ học, các em sẽ được tìm hiểu thêm về lập trình trên cơ sở mày mò, sáng tạo và sử dụng trí tưởng tượng để tự phát triển các trò chơi, phần mềm của riêng mình.
Kỳ 1&2 sẽ sử dụng Scratch để dạy các em nền tảng cơ bản của lập trình máy tính. Kỳ 3, các em sẽ được học về phát triển web qua HTML và CSS. Kỳ 4 sẽ dùng Python.</p>
    <br>
    <p>Code Club World will provide all of the Code Club materials in plaintext form - and we need you to use Github and translate them into your own language. Work together on this and it will be done in no time at all. You'll notice that the materials have not been designed, they are just in markdown. If you want your country's materials designed you'll need to find a designer to do this for you.</p>
  </div>
</div>

<div class="boxes row materials">

  <div class="three columns morepanel">
    <div class="wrap">
      <h4>Brazilian Portuguese</h4>

      <a class="button secondary round" href="http://codeclub-resources.s3.amazonaws.com/codeclub-term-1-scratch-pt-BR.zip">Materials in Brazilian Portuguese</a>
      <p class="links">
        <b>Brazilian Code Club Websites</b><br>
        <a href="http://www.codeclubbrasil.org">Code Club in Brazil</a>
      </p>
    </div>
  </div>

  <div class="three columns morepanel">
    <div class="wrap">
      <h4>Catalan</h4>

      <a class="button secondary round" href="https://github.com/CodeClub/scratch-curriculum/tree/master/ca-ES">Materials in Catalan</a>
      <p class="links">
        <b>Catalan Code Club Websites</b><br>
        <a href="http://codeclubcat.org/">Code Club Catalan</a>
      </p>
    </div>
  </div>

  <div class="three columns morepanel">
    <div class="wrap">
      <h4>Dutch</h4>

      <a class="button secondary round" href="http://codeclub-resources.s3.amazonaws.com/codeclub-term-1-scratch-nl-NL.zip">Materials in Dutch</a>
      <p class="links">
        <b>Dutch Code Club Websites</b><br>
        <a href="http://codeclub-nederland.nl/">Code Club Nederland</a>
      </p>
    </div>
  </div>

  <div class="three columns morepanel">
    <div class="wrap">
      <h4>English</h4>

      <a class="button secondary round" href="http://projects.codeclubworld.org/en-GB/">Materials in English</a>
      <p class="links">
        <b>English Code Club Websites</b><br>
        <a href="http://www.codeclub.org.uk">Code Club in the UK</a>
        <a href="http://www.codeclubhk.org">Code Club in Hong Kong</a>
      </p>
    </div>
  </div>

  <div class="three columns morepanel">
    <div class="wrap">
      <h4>German</h4>

      <a class="button secondary round" href="http://codeclub-resources.s3.amazonaws.com/codeclub-term-1-scratch-de-DE.zip">Materials in German</a>
      <p class="links">
        <b>German Code Club Websites</b><br>
        No websites have been made yet
      </p>
    </div>
  </div>

  <div class="three columns morepanel">
    <div class="wrap">
      <h4>Norwegian</h4>

      <a class="button secondary round" href="http://codeclub-resources.s3.amazonaws.com/codeclub-term-1-scratch-bn-NO.zip">Materials in Norwegian</a>
      <p class="links">
        <b>Norwegian Code Club Websites</b><br>
        <a href="http://kodeklubben.no/">Code Club in Norway</a>
      </p>
    </div>
  </div>

  <div class="three columns morepanel">
    <div class="wrap">
      <h4>Spanish</h4>

      <a class="button secondary round" href=https://github.com/CodeClub/scratch-curriculum/tree/master/es-ES/Trimestre%201>Materials in Spanish</a>
      <p class="links">
        <b>Spanish Code Club Websites</b><br>
        No websites have been made yet
      </p>
    </div>
  </div>

  <div class="three columns morepanel">
    <div class="wrap">
      <h4>Ukranian</h4>

      <a class="button secondary round" href="http://codeclub-resources.s3.amazonaws.com/codeclub-term-1-scratch-uk-UA.zip">Materials in Ukranian</a>
      <p class="links">
        <b>Ukranian Code Club Websites</b><br>
        No websites have been made yet
      </p>
    </div>
  </div>

  <div class="three columns morepanel">
    <div class="wrap">
      <h4>Missing projects in your language?</h4>

      <div class="links">
        <p>If you can't see projects translated into your language then that means they still need to be done.</p>
        <p>Can you translate from English to your language?</p>
      </div>

      <a class="button secondary round" href="https://github.com/CodeClub/scratch-curriculum/blob/master/CONTRIBUTING.md">Get started now</a>
    </div>
  </div>

</div>