> ## Documentation Index
> Fetch the complete documentation index at: https://help2.studystash.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Set up your first class

> A practical checklist for introducing StudyStash to your students.

export const ProgressChecklist = ({id, title = "Your next steps", items}) => {
  const [checked, setChecked] = useState([]);
  const [canSave, setCanSave] = useState(false);
  useEffect(() => {
    try {
      const saved = JSON.parse(localStorage.getItem(`studystash-help-${id}`) || "[]");
      if (Array.isArray(saved)) setChecked([...new Set(saved.filter(i => Number.isInteger(i) && i >= 0 && i < items.length))]);
      setCanSave(true);
    } catch {
      setCanSave(false);
    }
  }, [id]);
  const toggle = index => {
    const next = checked.includes(index) ? checked.filter(i => i !== index) : [...checked, index];
    setChecked(next);
    try {
      localStorage.setItem(`studystash-help-${id}`, JSON.stringify(next));
      setCanSave(true);
    } catch {
      setCanSave(false);
    }
  };
  return <section className="ss-checklist not-prose" aria-label={title}>
      <div className="ss-checklist-heading"><h3>{title}</h3><span aria-live="polite">{checked.length} of {items.length} complete</span></div>
      <progress value={checked.length} max={items.length} aria-label="Checklist progress" />
      <ul>{items.map((item, index) => <li key={item.href}>
          <input type="checkbox" id={`${id}-${index}`} checked={checked.includes(index)} onChange={() => toggle(index)} />
          <div><label htmlFor={`${id}-${index}`}>{item.title}</label><p>{item.description}</p><a href={item.href}>Open guide <span aria-hidden="true">→</span></a></div>
        </li>)}</ul>
      <p className="ss-small">{canSave ? "Your progress is saved in this browser. Come back to this checklist whenever you’re ready." : "Tick off each step as you go. Progress lasts while this page is open."}</p>
      {checked.length === items.length && <p role="status" className="ss-complete">All checked off. You’re ready for your next step.</p>}
    </section>;
};

<ProgressChecklist id="first-class-v1" title="Work through your checklist" items={[{"title": "Get your lecturer account", "description": "Ask your Project Lead or Customer Success Manager for access.", "href": "/educators/access-studystash"}, {"title": "Enable course access", "description": "Follow the instructions for your institution’s LMS.", "href": "/educators/overview#get-started"}, {"title": "Create and share a resource", "description": "Set sharing to Anyone with the link before sending it to your class.", "href": "/educators/share-with-your-class"}, {"title": "Introduce StudyStash", "description": "Post an announcement and play the student introduction video.", "href": "/educators/onboard-your-class"}, {"title": "Send a class reminder", "description": "Use a ready-made announcement again during reading or revision weeks.", "href": "/educators/announcement-templates"}]} />

<Columns cols={2}>
  <Card title="Watch a walkthrough" icon="circle-play" href="/tutorials">See the steps in a short video.</Card>
  <Card title="Find the right guide" icon="signs-post" href="/find-your-guide">Find instructions for a specific task.</Card>
</Columns>


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.