SEF R42 Summaries

A clean, responsive static website for browsing Arabic-language summaries of web development lectures from the Route Academy R42 cohort. Content is organized by topic and loaded dynamically, with a collapsible sidebar for easy navigation.

What It Does

The site presents 34 lecture summaries across five topic groups:

Group	Lectures
HTML & CSS	1 – 14
HTML5 & CSS3	15, 16, 18 – 24
GitHub	17
JavaScript	25 – 31, 33, 34
Bootstrap	32

Each summary is written in the Egyptian Arabic dialect and follows a consistent structure: a short overview, numbered key points, and important notes.

Features

• Grouped sidebar navigation — lectures are organized by topic with collapsible sections
• Active lecture tracking — the sidebar automatically highlights the lecture currently in view using the Intersection Observer API
• Dark / Light theme — toggle persists across sessions via localStorage
• Fully responsive — collapses to a slide-in drawer on mobile, with swipe-to-open/close gesture support
• No build step — pure HTML, CSS, and JavaScript; open the file and go

Getting Started

No installation or dependencies required.

1. Clone the repository

   git clone https://github.com/your-username/R42-summary.git
   cd R42-summary

2. Open in a browser

   Simply open index.html in any modern browser:

   # macOS
   open index.html
   
   # Linux
   xdg-open index.html
   
   # Windows
   start index.html

   Note: Because lecture content is fetched via the fetch() API, the site must be served over HTTP — not opened as a plain file:// URL — for content to load correctly. Use any static file server:

   # Using Python
   python3 -m http.server 8080
   
   # Using Node.js (npx)
   npx serve .

   Then navigate to http://localhost:8080.

Project Structure

R42-summary/
├── index.html              # Main entry point
├── content/
│   ├── lec1.html           # Individual lecture summaries
│   ├── lec2.html
│   └── ...lec34.html
├── css/
│   ├── general.css         # CSS reset, variables, and base typography
│   ├── style.css           # Layout and component styles
│   └── all.css             # Font Awesome icon library
├── js/
│   ├── content-loader.js   # Fetches lecture content and builds the sidebar
│   └── script.js           # Theme toggle, sidebar interactions, scroll tracking
└── images/
    └── favicon.ico

Adding a New Lecture

1. Create the content file in the content/ directory following the naming pattern lecXX.html (e.g., lec35.html).

   Use this structure as a template:

   <h3><bdi>Lecture Title</bdi></h3>
   <h3><bdi>Summary</bdi></h3>
   <p><bdi>A brief summary of the lecture.</bdi></p>
   
   <h3><bdi>Key Points</bdi></h3>
   <ol>
     <li>
       <h4 data-order="1"><bdi>Key Point</bdi></h4>
       <p><bdi>Explanation of the key point.</bdi></p>
       <ul>
         <li><bdi>Term</bdi> <i class="fa-solid fa-arrow-left"></i> <bdi>Explanation</bdi></li>
       </ul>
     </li>
   </ol>
   
   <h3><bdi>Notes</bdi></h3>
   <ul>
     <li><bdi>An important note.</bdi></li>
   </ul>

2. Register the lecture in js/content-loader.js by adding an entry to the lectures array:

   {
     id: 'lec35',
     title: 'Lecture 35',
     group: 'JavaScript'   // Must match an existing group name exactly
   }

   If the lecture belongs to a brand-new topic group, also add the group name to the groups array in the same file.

Technologies Used

• HTML5 — semantic structure and <bdi> for bidirectional Arabic text
• CSS3 — CSS Grid layout, custom properties (variables), smooth transitions
• JavaScript (ES6+) — async/await content fetching, Intersection Observer, touch events
• Font Awesome — icons (bundled locally in css/all.css and webfonts/)
• Google Fonts — Montserrat

Author

Made with ❤️ by Ziad Aboughaleb
Contact: WhatsApp

Contributing

Contributions are welcome! If you'd like to improve the site's UI, fix a content error, or add a missing lecture summary:

1. Fork the repository
2. Create a feature branch (git checkout -b feat/your-feature)
3. Commit your changes (git commit -m 'Add your feature')
4. Push to the branch (git push origin feat/your-feature)
5. Open a Pull Request

Please follow the existing content conventions described in GEMINI.md when writing or editing lecture summaries.