Shared note

header {
  background-color: #4CAF50;
  color: white;
  padding: 20px 0;
  text-align: center;
}

h1 {
  margin: 0;
}

section {
  max-width: 900px;
  margin: 20px auto;
  background-color: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

h2 {
  color: #4CAF50;
  border-bottom: 2px solid #4CAF50;
  padding-bottom: 5px;
}

ul {
  list-style-type: disc;
  margin-left: 20px;
}

.semester {
  background-color: #e8f5e9;
  padding: 10px;
  margin: 10px 0;
  border-left: 5px solid #4CAF50;
}

.summer {
  background-color: #fff3e0;
  padding: 10px;
  margin: 10px 0;
  border-left: 5px solid #FF9800;
}

.odin {
  background-color: #e3f2fd;
  padding: 10px;
  margin: 10px 0;
  border-left: 5px solid #2196F3;
}

footer {
  text-align: center;
  padding: 15px;
  background-color: #eee;
  margin-top: 20px;
}

<div class="semester">
  <h3>Semester 1 (Aug–Dec)</h3>
  <ul>
    <li>HTML – fill gaps and reinforce knowledge</li>
    <li>CSS – responsive design, flexbox, grid</li>
    <li>JavaScript – fundamentals, DOM manipulation</li>
    <li>Java – full 17-hour course (Variables, OOP, Loops, Arrays, Inheritance, etc.)</li>
  </ul>
</div>

<div class="semester">
  <h3>Semester 2 (Jan–May)</h3>
  <ul>
    <li>Python 3 – reinforce and learn best practices</li>
    <li>Git & GitHub – version control basics</li>
    <li>SQL – basic database queries</li>
    <li>Intro to Back-End Development – Node.js basics if available</li>
  </ul>
</div>

<div class="summer">
  <h3>Summer After 9th (June–Aug)</h3>
  <ul>
    <li>Mini-projects: Weather app, Portfolio site, To-do list, Quiz app</li>
    <li>Focus on combining HTML/CSS/JS and Python skills</li>
  </ul>
</div>

<div class="odin">
  <h3>Semester 1 (Aug–Dec) – Foundations</h3>
  <ul>
    <li>Review HTML, CSS, JavaScript in depth</li>
    <li>Git, GitHub, CLI practice</li>
    <li>Small Odin assignments & GitHub repos</li>
  </ul>
</div>

<div class="odin">
  <h3>Semester 2 (Jan–May) – Full-Stack JavaScript</h3>
  <ul>
    <li>Advanced JavaScript (ES6+, async/await, API calls)</li>
    <li>Node.js & Express for back-end</li>
    <li>MongoDB for database</li>
    <li>Build and deploy full-stack projects</li>
  </ul>
</div>

<div class="summer">
  <h3>End of 10th / Summer Before 11th</h3>
  <ul>
    <li>Capstone project: polished full-stack app with deployment</li>
    <li>Portfolio-ready projects on GitHub and online</li>
  </ul>
</div>