freeCodeCamp / curriculum

The freeCodeCamp curriculum and lesson editor
Creative Commons Attribution Share Alike 4.0 International
81 stars 124 forks source link

Challenges: Add real User Stories and convert existing to technical requirements #310

Open niaskywalk opened 5 years ago

niaskywalk commented 5 years ago

User Stories in Responsive Web Design Projects should be adjusted into real User Stories as defined:

...a user story is an informal, natural language description of one or more features of a software system.[wikipedia] User stories are often confused with system requirements. A requirement is a formal description of need; a user story is an informal description of a feature. [wikipedia]

From the Tribute page: (This is actually a System Requirement or Technical Specification)

User Story #1: My tribute page should have an element with a corresponding id="main", which contains all other elements.

This should read something more natural like it did in previous incarnations, then list the element requirement as System Requirements.

User Story#1: I can see the title of the subject of my Tribute User Story#1: I can see an image of the subject of my Tribute .... etc. System Req 01: an id of "main" in an element containing all elements. System Req 02: Subject is in an element with id of "title" System Req 03: image is in a wrapping div element with id of "img-div" ... etc.

### Why should this happen? While working with new campers, I watched as they struggle to START building by following exactly the user story without understanding what they are doing. One camper flipped between the sample, the so-called user stories, and their attempt to just write what they find, resulting in unclosed tags, a weird workflow and projects that technically pass, but still are confusing and useless for a user.

Workflow should also be introduced here. I would like to see simple instructions on starting similar to this, as this is how I help EVERY camper get past this first project:

Sketch out the site, either in text or on paper e.g., [ TRIBUTE TITLE ] { Description } [[ Tribute Image]] Lay out the basics e.g., <section> <h1>Tribute Title</h1> <div> <p>Description</p> <figure>Image <figcaption>Description of Image/ Copyright</figcaption>

`

Add specifics

e.g., <section id="main"> <h1 id="title">Tribute Title</h1> <div id="img-div"> etc... </section>

Fill in details, add CSS, and adjust until satisfied Submit work

### If I am submitting this, why don't I do this?

  1. I attempted to find the information. I followed the directions for installing all of these bits and pieces. It did not work on my computer. I found the files, eventually, but they are not so easy to edit as they are to read on the finished product.
  2. I can give a general description, as seen here. However, actually changing the content and making it coherent takes me way longer than it will take those of you who are used to accessing the information.
  3. If someone creates a straight-up text file I could edit or point one out if it already exists, I can begin to help.