home.component.html

<div id="banner">
  <img src="../../assets/sheldon.png" alt="turtle mascot 1" />
  <img src="../../assets/shelly.png" alt="turtle mascot 2" />
  <div id="banner-buttons">
    <a
      mat-stroked-button
      href="https://download.microsoft.com/download/3/6/8/3684D9A0-C25C-4F50-96E2-2BB1DFA146E7/SmallBasic.msi"
      title="Download Small Basic"
    >
      <span class="fa fa-arrow-down" aria-hidden="true"></span>
      <span>
        <div class="button-headline">Download</div>
        Small Basic
      </span>
    </a>
    <a
      mat-stroked-button
      href="https://aka.ms/SBOVnext"
      target="_blank"
      title="Start coding online"
    >
      <span class="fa fa-terminal" aria-hidden="true"></span>
      <span>
        <div class="button-headline">Start</div>
        Coding Online
      </span>
    </a>
  </div>
</div>
<div id="content">
  <div id="welcome">
    <h1>Welcome to Small Basic!</h1>
    <p>
      Small Basic is the only programming language created specially to help
      students transition from block-based coding to text-based coding. By
      teaching the fundamental elements of syntax-based languages in an
      approachable manner, Small Basic gives students the skills and confidence
      to tackle more complex programming languages such as Java and C#. You can
      also build applications for Kinect, Lego Mindstorm, Raspberry Pi, Arduino,
      Oculus Rift, and more using Small Basic.
    </p>

    <p>
      For ages 7 to 107, Small Basic is one of the easiest ways to learn to
      code. <a href="https://social.technet.microsoft.com/wiki/contents/articles/14114.small-basic-the-unique-features.aspx" target="_blank">See all the unique features</a>.
    </p>

    <h2>Simple</h2>
    <img
      class="right-picture"
      src="../../assets/codeshot.png"
      alt="Screenshot of Small Basic code"
    />
    <p>
      Small Basic combines a friendly environment with a very simple language
      and a rich and engaging set of libraries to make your programs and games
      <b>pop</b>! In a matter of few lines of code, you will be well on your way
      to creating your very own game!
    </p>

    <p>
      With smart coding hints from IntelliSense, Small Basic makes writing code
      a breeze. <a href="https://social.technet.microsoft.com/wiki/contents/articles/14114.small-basic-the-unique-features.aspx#Simple" target="_blank">Learn more about how Small Basic is Simple</a>.
    </p>

    <h2>Social</h2>
    <p>
      Share your programs with your friends and let them import your published
      programs and run them on their computer. Using the Silverlight player, you
      can even post your games on your own blogs and websites and play them in
      the browser. <a href="https://social.technet.microsoft.com/wiki/contents/articles/14114.small-basic-the-unique-features.aspx#Social" target="_blank">Learn more about how Small Basic is Social</a>.
    </p>

    <h2>Gradual</h2>
    <img
      class="left-picture"
      src="../../assets/intellisense.png"
      alt="Screenshot of Small Basic IntelliSense"
    />
    <p>
      Learn programming concepts starting with the fundamentals and move your
      way up. Small Basic is based on .NET and what you learn here could be
      easily applied to other .NET programming languages like Visual Basic. And
      when you graduate to Visual Basic, you can bring your existing programs
      with you using a built-in conversion utility. <a href="https://social.technet.microsoft.com/wiki/contents/articles/14114.small-basic-the-unique-features.aspx#Gradual" target="_blank">Learn more about how Small Basic is Gradual</a>.
    </p>

    <h2>Why Learn to Code?</h2>
    <img
      class="right-picture"
      src="../../assets/tetris.png"
      alt="Screenshot of Tetris game"
    />
    <p>
      You might be wondering: why should I learn to code anyways? Coding is a
      fun way to express your imagination, creativity, and logical thinking all
      at once! When you learn to code, you develop various skills, such as how
      to break down complex problems and solve them step by step. Software is
      the language of our world, so learning to code can really help you in the
      future! If you want to learn more, watch this
      <a href="https://www.youtube.com/watch?v=nKIu9yen5nc" target="_blank"
        >video</a
      >!
    </p>
  </div>
  <div id="sidebar">
    <div class="socialMedia">
      <a
        href="https://www.facebook.com/groups/smallbasic/"
        target="_blank"
        title="Link to Small Basic Facebook page"
        class="fa fa-facebook"
      ></a>
      <a
        href="https://twitter.com/Small_Basic"
        target="_blank"
        title="Link to Small Basic Twitter page"
        class="fa fa-twitter"
      ></a>
      <a
        href="https://www.youtube.com/channel/UCu725C2we0oPgrRbWVLWjkw"
        target="_blank"
        title="Link to Small Basic YouTube page"
        class="fa fa-youtube"
      ></a>
      <a
        href="https://social.msdn.microsoft.com/Forums/en-US/home?forum=smallbasic"
        target="_blank"
        title="Link to Microsoft Developer Network Small Basic forum"
        class="fa fa-windows"
      ></a>
    </div>
    <div>
      <h2>Announcements</h2>
      <ul>
        <li *ngFor="let announcement of announcements | slice: 0:3">
          <a href="{{ announcement.link }}"
            ><b>{{ announcement.title }}</b></a
          >
          <div class="indent">
            <div class="byline">
              <div>{{ announcement.author }}</div>
              <div>{{ announcement.date | date: "shortDate" }}</div>
            </div>
            {{ announcement.description }}
          </div>
        </li>
      </ul>
      <a href="{{ feedService.smallBasicUrl }}" target="_blank">More</a>
    </div>
    <div>
      <h2>Forum Posts</h2>
      <ul>
        <li *ngFor="let post of forumPosts | slice: 0:3">
          <a href="{{ post.link }}"
            ><b>{{ post.title }}</b></a
          >
          <div class="indent">
            <div class="byline">
              <div>{{ post.author }}</div>
              <div>{{ post.date | date: "shortDate" }}</div>
            </div>
            {{ post.description }}
          </div>
        </li>
      </ul>
      <a href="{{ feedService.forumUrl }}" target="_blank">More</a>
    </div>
  </div>
</div>