search

susansprague / prework-study-guide

MIT License
0 stars 0 forks source link

HTML #1

Open susansprague opened 1 year ago

susansprague commented 1 year ago

HTML

User Story

As a boot camp student, I want a Prework Study Guide website, so that I can review all the information I learned throughout Prework

Acceptance Criteria

GIVEN a Prework Study Guide website WHEN I visit the website in my browser THEN I see four boxes titled HTML, CSS, Git, and JavaScript with associated notes listed WHEN I view the study guide THEN I see a dark blue header and footer, and four boxes with a shadow WHEN I open the console in my browser THEN I can see the four topics I learned listed along with a suggestion on what I should study first WHEN I visit the website using the URL THEN I can access my website from any browser

julienBelinga commented 1 year ago

Possible HTML structure for the user story and acceptance criteria:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Prework Study Guide</title>
    <style>
      /* add styles as needed */
    </style>
  </head>
  <body>
    <header>
      <h1>Prework Study Guide</h1>
    </header>
    <main>
      <section>
        <h2>HTML</h2>
        <ul>
          <li>HTML stands for Hypertext Markup Language.</li>
          <li>HTML is used to create the structure and content of web pages.</li>
          <li>HTML uses tags to define elements such as headings, paragraphs, lists, links, images, and forms.</li>
        </ul>
      </section>
      <section>
        <h2>CSS</h2>
        <ul>
          <li>CSS stands for Cascading Style Sheets.</li>
          <li>CSS is used to define the presentation and layout of web pages.</li>
          <li>CSS uses selectors to target HTML elements and properties to specify their styles.</li>
        </ul>
      </section>
      <section>
        <h2>Git</h2>
        <ul>
          <li>Git is a version control system for managing code changes.</li>
          <li>Git allows multiple developers to work on the same codebase simultaneously and track their changes.</li>
          <li>Git uses commits, branches, and merges to organize and merge code changes.</li>
        </ul>
      </section>
      <section>
        <h2>JavaScript</h2>
        <ul>
          <li>JavaScript is a programming language for creating interactive and dynamic web pages.</li>
          <li>JavaScript can manipulate HTML and CSS, handle user events, and communicate with servers.</li>
          <li>JavaScript can be used on both the client side (in the browser) and the server side (with Node.js).</li>
        </ul>
      </section>
    </main>
    <footer>
      <p>&copy; 2023 Boot Camp</p>
    </footer>
  </body>
</html>

In this example, the user story is expressed in plain language as an "I want" statement, and the acceptance criteria are formulated as a list of "given-when-then" scenarios. The HTML structure follows the semantics of HTML5, with a header, main, and footer section, and each topic (HTML, CSS, Git, and JavaScript) is represented as a separate section with an associated heading and unordered list of notes. The styling is left to the discretion of the designer, and can be added using CSS rules in the head section or in an external stylesheet.