Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Auto Save

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <html>
  <head>
    <title>User Story Documentation</title>
  </head>
<body>
<nav id="navbar">
  <header><b>User Story</b></header>
  <ul>
    <li><a class="nav-link" href="#Definition">Definition</a></li>
    <li>
      <a class="nav-link" href="#History">History</a>
    </li>
    <li>
      <a class="nav-link" href="#Principle">Principle</a>
    </li>
    <li><a class="nav-link" href="#Examples">Examples</a></li>
    <li><a class="nav-link" href="#Usage">Usage</a></li>
    <li>
      <a class="nav-link" href="#Benefits">Benefits</a>
    </li>
    <li><a class="nav-link" href="#Limitations">Limitations</a></li>
    <li><a class="nav-link" href="#Relationship_to_epics,_themes_and_initiatives">Relationship to epics, themes and initiatives</a></li>
    <li><a class="nav-link" href="#Sizing">Sizing</a></li>
    <li><a class="nav-link" href="#Story_map">Story map</a></li>
    <li>
      <a class="nav-link" href="#User_journey_map">User journey map</a>
    </li>
    <li><a class="nav-link" href="#Comparing_with_use_cases">Comparing with use cases</a></li>
    <li><a class="nav-link" href="#Reference">Reference</a></li>
  </ul>
</nav>
  
  <main id="main-doc">
  <section class="main-section" id="Definition">
    <header><b>Definition</b></header>
    <article>
      <p>
        In software development and product management, a user story is an informal, natural language description of features of a software system. They are written from the perspective of an end user or user of a system, and may be recorded on index cards, Post-it notes, or digitally in project management software. Depending on the project, user stories may be written by different stakeholders like client, user, manager, or development team.
      </p>

      <p>
 User stories are a type of boundary object. They facilitate sensemaking and communication; and may help software teams document their understanding of the system and its context.
      </p>
    </article>
  </section>
  <section class="main-section" id="History">
    <header><b>History</b></header>
    <article>
      <p>Here it shows user story evolution through time:</p>

      <ul>
        <li>
         1998: Alistair Cockburn visited the Chrysler C3 project in Detroit and coined the phrase "A user story is a promise for a conversation."
        </li>
        <li>1999: Kent Beck published the first edition of the book Extreme Programming Explained, introducing Extreme Programming (XP), and the usage of user stories in the planning game.</li>
        <li>
          2001: Ron Jeffries proposed a "Three Cs" formula for user story creation:
          <ul> 
            <li>The Card (or often a post-it note) is a tangible physical token to hold the concepts;</li>
            <li>The Conversation is between the stakeholders (customers, users, developers, testers, etc.). It is verbal and often supplemented by documentation;</li>
            <li>The Confirmation ensures that the objectives of the conversation have been reached.</li>
          </ul>
        </li>
        <li>2001: The XP team at Connextra in London devised the user story format and shared examples with others.</li>
        <li>2004: Mike Cohn generalized the principles of user stories beyond the usage of cards in his book User Stories Applied: For Agile Software Development that is now considered the standard reference for the topic according to Martin Fowler. Cohn names Rachel Davies as the inventor of user stories.While Davies was a team member at Connextra she credits the team as a whole with the invention.</li>
        <li>2014: After a first article in 2005 and a blog post in 2008, in 2014 Jeff Patton published the user-story mapping technique, which intends to improve with a systematic approach the identification of user stories and to structure the stories to give better visibility to their interdependence.</li>
      </ul>
    </article>
  </section>
  <section class="main-section" id="Principle">
    <header><b>Principle</b></header>
    <article>
      <p>
       User stories are written by or for users or customers to influence the functionality of the system being developed. In some teams, the product manager (or product owner in Scrum), is primarily responsible for formulating user stories and organizing them into a product backlog. In other teams, anyone can write a user story. User stories can be developed through discussion with stakeholders, based on personas or simply made up.
      </p>
      <h4>
Common templates
      </h4>
      <p>
User stories may follow one of several formats or templates.
      </p>
            <p>
The most common is the Connextra template, stated below. Mike Cohn suggested the "so that" clause is optional although still often helpful.
      </p>
            <code>As a (role) I can (capability), so that (receive benefit)
      </code>
                  <p>
Chris Matts suggested that "hunting the value" was the first step in successfully delivering software, and proposed this alternative:
      </p>
            <code>In order to (receive benefit) as a (role), I can (goal/desire)
      </code>
                  <p>
Another template based on the Five Ws specifies:
      </p>
            <code>As (who) (when) (where), I want (what) because (why)
      </code>
    </article>
  </section>
  <section class="main-section" id="Examples">
    <header><b>Examples</b></header>
    <article>
      <h4>Screening Quiz (Epic Story)</h4>
      <p>As the HR manager, I want to create a screening quiz so that I can understand whether I want to send possible recruits to the functional manager.</p>
            <h4>Quiz Recall</h4>
      <p>As a manager, I want to browse my existing quizzes so I can recall what I have in place and figure out if I can just reuse or update an existing quiz for the position I need now.</p>
                  <h4>Limited Backup</h4>
      <p>As a user, I can indicate folders not to back up so that my backup drive isn't filled up with things I don't need saved.</p>
    </article>
  </section>
  <section class="main-section" id="Usage">
    <header><b>Usage</b></header>
      <p>
     A central part of many agile development methodologies, such as in XP's planning game, user stories describe what may be built in the software project. User stories are prioritized by the customer (or the product owner in Scrum) to indicate which are most important for the system and will be broken down into tasks and estimated by the developers. One way of estimating is via a Fibonacci scale.
      </p>
         <p>
    When user stories are about to be implemented, the developers should have the possibility to talk to the customer about it. The short stories may be difficult to interpret, may require some background knowledge or the requirements may have changed since the story was written.
      </p>
         <p>
User stories can be expanded to add detail based on these conversations. This can include notes, attachments and acceptance criteria.
      </p>
      <h4>
Acceptance criteria
      </h4>
      <p>
Mike Cohn defines acceptance criteria as "notes about what the story must do in order for the product owner to accept it as complete." They define the boundaries of a user story and are used to confirm when a story is completed and working as intended.
      </p>
          <p>
The appropriate amount of information to be included in the acceptance criteria varies by team, program and project. Some may include 'predecessor criteria', "The user has already logged in and has already edited his information once". Some may write the acceptance criteria in typical agile format, Given-When-Then. Others may simply use bullet points taken from original requirements gathered from customers or stakeholders.
      </p>
          <p>
In order for a story to be considered done or complete, all acceptance criteria must be met.
      </p>
  </section>
  <section class="main-section" id="Benefits">
    <header><b>Benefits</b></header>
    <article>
      <p>
There is no good evidence that using user stories increases software success or developer productivity. However, user stories facilitate sensemaking without undue problem structuring, which is linked to success.
      </p>
    </article>
  </section>
  <section class="main-section" id="Limitations">
    <header><b>Limitations</b></header>
    <article>
      <p>
Limitations of user stories include:
      </p>
      <ul>
        <li>Scale-up problem: User stories written on small physical cards are hard to maintain, difficult to scale to large projects and troublesome for geographically distributed teams.</li>
                <li>Vague, informal and incomplete: User story cards are regarded as conversation starters. Being informal, they are open to many interpretations. Being brief, they do not state all of the details necessary to implement a feature. Stories are therefore inappropriate for reaching formal agreements or writing legal contracts.</li>
                <li>Lack of non-functional requirements: User stories rarely include performance or non-functional requirement details, so non-functional tests (e.g. response time) may be overlooked.</li>
                <li>Don't necessarily represent how technology has to be built: Since user stories are often written from the business perspective, once a technical team begins to implement, it may find that technical constraints require effort which may be broader than the scope of an individual story. Sometimes splitting stories into smaller ones can help resolve this. Other times, 'technical-only' stories are most appropriate. These 'technical-only' stories may be challenged by the business stakeholders as not delivering value that can be demonstrated to customers\stakeholders.</li>
      </ul>
    </article>
  </section>
  <section class="main-section" id="Relationship_to_epics,_themes_and_initiatives">
    <header><b>Relationship to epics, themes and initiatives</b></header>
    <article>
      <p>
In many contexts, user stories are used and also summarized in groups for semantic and organizational reasons. The different usages depend on the point-of-view, e.g. either looking from a user perspective as product owner in relation to features or a company perspective in relation to task organization.
      </p>

      <p>
While some suggest to use 'epic' and 'theme' as labels for any thinkable kind of grouping of user stories, organization management tends to use it for strong structuring and uniting work loads. For instance, Jira seems to use a hierarchically organized to-do-list, in which they named the first level of to-do-tasks 'user-story', the second level 'epics' ( grouping of user stories ) and the third level 'initiatives' ( grouping of epics ). However, initiatives are not always present in product management development and just add another level of granularity. In Jira, 'themes' exist ( for tracking purposes ) that allow to cross-relate and group items of different parts of the fixed hierarchy.
      </p>
           <p>
In this usage, Jira shifts the meaning of themes in an organization perspective: e.g how much time did we spent on developing theme "xyz". But another definition of themes is: a set of stories, epics, features etc for a user that forms a common semantic unit or goal. There is probably not a common definition because different approaches exist for different styles of product design and development. In this sense, some also suggest to not use any kind of hard groups and hierarchies.
      </p>
                        <h4>Epic</h4>
      <p>Large stories or multiple user stories that are very closely related are summarized as epics. A common explanation of epics is also: a user story that is too big for a sprint.</p>
                      <h4>Initiative</h4>
      <p>Multiple epics or stories grouped together hierarchically, mostly known from Jira.</p>
                      <h4>Theme</h4>

    </article>
  </section>
  <section class="main-section" id="Sizing">
    <header><b>Sizing</b></header>
    <article>
      <p>
Common approaches to sizing user stories include:
      </p>
      <ul>
        <li>Story Points: User stories are often given a 'size' based on a team's opinion of how long it might take to deliver, to do this, they will allocate a number of story points to the story. A story point is an arbitrary and inconsistent indicator of the team's opinion of size, at a point in time. The points allocation is usually based on a Fibonacci scale.</li>
                <li>T-shirt sizes: This is similar to story points in that it is the team's opinion. It is a less granular indicator of size than story points.</li>
                <li>COSMIC Function Points: This is a 2nd generation ISO standard software sizing methodology suited to agile software development where not all requirements are known up-front.</li>
                <li>IFPUG Function Points: First generation functional sizing methodology.</li>
      </ul>
            <p>
Multiple epics or stories grouped together by a common theme or semantic relationship.
      </p>
    </article>
  </section>
  <section class="main-section" id="Story_map">
    <header><b>Story map</b></header>
    <article>
      <p>A story map organises user stories according to a narrative flow that presents the big picture of the product. The technique was developed by Jeff Patton from 2005 to 2014 to address the risk of projects flooded with very detailed user stories that distract from realizing the product's main objectives.</p>
            <p>User story mapping uses workshops with users to identify first the main business activities. Each of these main activities may involve several kind of users or personas.</p>
            <p>The horizontal cross-cutting narrative line is then drawn by identifying the main tasks of the individual user involved in these business activities. The line is kept throughout the project. More detailed user stories are gathered and collected as usual with the user story practice. But each new user story is either inserted into the narrative flow or related vertically to a main tasks.</p>
            <p>The horizontal axis corresponds to the coverage of the product objectives, and the vertical axis to the needs of the individual users.</p>
            <p>In this way it becomes possible to describe even large systems without losing the big picture.</p>
                  <p>Story maps can easily provide a two-dimensional graphical visualization of the Product Backlog: At the top of the map are the headings under which stories are grouped, usually referred to as 'epics' (big coarse-grained user stories), 'themes' (collections of related user stories) or 'activities'. These are identified by orienting at the user’s workflow or "the order you'd explain the behavior of the system". Vertically, below the epics, the actual story cards are allocated and ordered by priority. The first horizontal row is a "walking skeleton" and below that represents increasing sophistication.</p>
   
    </article>
  </section>
  <section class="main-section" id="User_journey_map">
    <header><b>User journey map</b></header>
    <article>
      <p>
A user journey map intends to show the big picture but for a single user category. Its narrative line focuses on the chronology of phases and actions that a single user has to perform in order to achieve his or her objectives.
      </p>
            <p>
This allows to map the user experience beyond a set of user stories. Based on user feedback, the positive and negative emotions can be identified across the journey. Points of friction or unfulfilled needs can be identified on the map. This technique is used to improve the design of a product, allowing to engage users in participatory approaches.
      </p>
    </article>
  </section>
  <section class="main-section" id="Comparing_with_use_cases">
    <header><b>Comparing with use cases</b></header>
    <article>
            <div class="grid">
               <div class="first"  id="grid-item">
                <p></p>
              </div>
              <div class="second" id="grid-item">
                <h4 id="user">User Stories</h4>
              </div>
             <div class="third" id="grid-item">
                <h4 id="user">Use Cases</h4>
              </div>
              <div class="first"  id="grid-item">
                <p id="user">similarities</p>
              </div>
              <div class="second" id="grid-item">
                <ul><li>Generally formulated in users' everyday language. They should help the reader understand what the software should accomplish.</li></ul>
              </div>
             <div class="third"  id="grid-item">
                <ul><li>Written in users' everyday business language, to facilitate stakeholder communications.</li></ul>
              </div>
             <div class="first" id="grid-item">
                <p id="user">differences</p>
              </div>
              <div class="second" id="grid-item">
                <ul><li>Provide a small-scale and easy-to-use presentation of information, with little detail, thus remaining open to interpretation, through conversations with on-site customers.</li></ul>
              </div>
             <div class="third" id="grid-item">
                <ul><li>Use cases organize requirements to form a narrative of how users relate to and use a system. Hence they focus on user goals and how interacting with a system satisfies the goals.</li>
                  <li>Use case flows describe sequences of interactions, and may be worded in terms of a formal model. A use case is intended to provide sufficient detail for it to be understood on its own.</li>
                </ul>
              </div>
               <div class="first" id="grid-item">
                <p id="user">template</p>
              </div>
              <div class="second" id="grid-item">
                <p id="gridp"><i><code>As a (type of user),</code> <code>I can (some goal)</code><code> so that (some reason).</code></i></p>
              </div>
             <div class="third" id="grid-item">
                <ul><li>	
Title: "goal the use case is trying to satisfy"</li>
                  <li>Main Success Scenario: numbered list of steps</li>
                  <ul><li>Step: "a simple statement of the interaction between the actor and a system"</li></ul>
             <li>	
Extensions: separately numbered lists, one per Extension</li>  
                                    <ul><li>Extension: "a condition that results in different interactions from .. the main success scenario". An extension from main step 3 is numbered 3a, etc.</li></ul>
                </ul>
              </div>
            </div>
    </article>
  </section>
  <section class="main-section" id="Reference">
    <header><b>Reference</b></header>
    <article>
      <ul>
        <li>
          All the documentation in this page is taken from
          <a
            href="https://en.wikipedia.org/wiki/User_story"
            target="_blank"
            >wikipedia</a
          >
        </li>
      </ul>
    </article>
  </section>
</main>
  </body>
  </html>
              
            
!

CSS

              
                body{
  background-color:	 #ffffe6;
}

#navbar {
  position: fixed;
  min-width: 200px;
  top: 0px;
  left: 0px;
  width: 210px;
  height: 100%;
  border-right: dotted;
  border-color: rgba(0, 0, 0, 0.6);
}

header {
  color: black;
  margin: 10px;
  text-align: center;
  font-size: 1.8em;
  font-weight: thin;
}

#main-doc header {
  text-align: left;
  margin: 0px;
}

#navbar ul {
  height: 88%;
  padding: 0;
  overflow-y: auto;
  overflow-x: hidden;
}

#navbar li {
  color: #4d4e53;
  border-top: 1px dotted;
  list-style: none;
  position: relative;
  width: 100%;
}

#navbar a {
  display: block;
  padding: 10px 30px;
  color: black;
  text-decoration: none;
  cursor: pointer;
}

#main-doc {
  position: absolute;
  margin-left: 210px;
  padding: 20px;
  margin-bottom: 110px;
}

section article {
  color: black;
  margin: 12px;
  font-size: 0.97em;
}

section li {
  margin: 15px 0px 0px 20px;
}

code {
  display: block;
  text-align: center;
  white-space: pre-line;
  position: relative;
  word-break: normal;
  word-wrap: normal;
  line-height: 2;
  background-color: #ffd9cc;
  padding: 15px;
  margin: 10px;
  border-radius: 5px;
}

@media only screen and (max-width: 500px) {
  /* For mobile phones: */
  #navbar ul {
    background-color: #ffffe6;
    border: 1px solid;
    height: 207px;
  }

  #navbar {
    background-color: white;
    position: absolute;
    top: 0;
    padding: 0;
    margin: 0;
    width: 100%;
    max-height: 275px;
    border: none;
    z-index: 1;
    border-bottom: 2px solid;
  }

  #main-doc {
    position: relative;
    margin-left: 0px;
    margin-top: 270px;
  }
}

@media only screen and (max-width: 500px) {
  #main-doc {
    margin-left: -10px;
  }

  code {
    margin-left: -20px;
    width: 100%;
    padding: 15px;
    padding-left: 10px;
    padding-right: 45px;
    min-width: 233px;
  }
}

.grid {
  display: grid;
  grid-template-columns: 20% 40% 40%;
  margin-top: 10px;
  margin-bottom: 30px;
}

#grid-item {
  background-color: #ffd9cc;
  border: 1px solid rgba(0, 0, 0, 0.8);
  font-size: 15px;
  text-align: left;
}

h4 {
  margin-top: 3px;
  margin-bottom: 3px;
  font-size: 20px;
}

#user {
  text-align: center;
  font-weight: bold;
}

ul li{
  margin-left: 2px;
  margin-right: 4px;
}

              
            
!

JS

              
                // !! IMPORTANT README:

// You may add additional external JS and CSS as needed to complete the project, however the current external resource MUST remain in place for the tests to work. BABEL must also be left in place. 

/***********
INSTRUCTIONS:
  - Select the project you would 
    like to complete from the dropdown 
    menu.
  - Click the "RUN TESTS" button to
    run the tests against the blank 
    pen.
  - Click the "TESTS" button to see 
    the individual test cases. 
    (should all be failing at first)
  - Start coding! As you fulfill each
    test case, you will see them go   
    from red to green.
  - As you start to build out your 
    project, when tests are failing, 
    you should get helpful errors 
    along the way!
    ************/

// PLEASE NOTE: Adding global style rules using the * selector, or by adding rules to body {..} or html {..}, or to all elements within body or html, i.e. h1 {..}, has the potential to pollute the test suite's CSS. Try adding: * { color: red }, for a quick example!

// Once you have read the above messages, you can delete all comments. 

              
            
!
999px

Console