We're going to start off with a list item using the li tag. We're going to go ahead and add a class, and we're going to call this class message. In there, we can add two divs. The first div is going to be the title area where we add the from and createdAt values, and the second div is going to be the body of the message:

<script id="message-template" type="text/template">
  <li class="message">
    <div></div>
    <div></div>
  </li>
</script>

Now for the first div we are going to provide a class, the class will equal message__title. This is where the message title information is going to go. We're going to kick things off in here by providing an h4 tag, which is going to render a nice header to the screen, and all we're going to put inside h4 is the from data, which we can do by using those double curly braces, {{from}}:

<script id="message-template" type="text/template">
  <li class="message">
    <div class="message__title">
      <h4>{{from}}</h4>
    </div>

The same exact thing holds true for span, that's going to happen next. We'll add a span tag, and inside the span tag, we're going to inject createdAt, adding our double curly braces, and specifying the property name:

<script id="message-template" type="text/template">
  <li class="message">
    <div class="message__title">
      <h4>{{from}}</h4>
      <span>{{createAt}}</span>
    </div>