An interactive Arabic-language platform for learning Python programming, created by Zaid Abu Alshaar.
Live site: python.zaiddev.com
Zaid.python is a single-page application (SPA) that teaches Python through 12 structured levels, from basic data types to GUI programming with Tkinter. It includes interactive quizzes, code examples, and FAQ sections -- all available in both Arabic and English.
| Component | Technology |
|---|---|
| Markup | HTML5 (semantic) |
| Styling | Tailwind CSS (CDN) + custom CSS |
| Scripting | Vanilla JavaScript (ES6+) |
| Fonts | Google Fonts (Tajawal, Inter) |
| Icons | Font Awesome 6.0 |
| Routing | History API (client-side SPA) |
| Hosting | GitHub Pages + custom domain (CNAME) |
/
├── index.html # Main entry point (SPA shell)
├── 404.html # Custom 404 error page
├── CNAME # Custom domain config (python.zaiddev.com)
├── robots.txt # Search engine crawling rules
├── sitemap.xml # Sitemap for search engines
├── site.webmanifest # PWA manifest
├── css/
│ └── style.css # All custom styles
├── js/
│ └── script.js # App logic, translations, content, routing
├── assets/
│ ├── img/
│ │ ├── zaid-abu-alshaar.jpg # Profile photo (optimized)
│ │ └── og-image.jpg # Social sharing preview image (1200x630)
│ └── icons/
│ ├── favicon.svg # SVG favicon
│ ├── favicon-32x32.png # PNG favicon
│ ├── apple-touch-icon.png # Apple touch icon (180x180)
│ ├── icon-192x192.png # PWA icon
│ └── icon-512x512.png # PWA icon (large)
-
Clone the repository:
git clone https://github.com/ZaidAbuAlshaar/PythonWithZaid.github.io.git cd PythonWithZaid.github.io -
Serve the files with any static server:
# Using Python python3 -m http.server 8000 # Or using Node.js (npx) npx serve .
-
Open
http://localhost:8000in your browser.
- Hosting: GitHub Pages (automatically deploys from the main branch).
- Custom domain: Configured via the
CNAMEfile containingpython.zaiddev.com. - DNS: Ensure your domain's DNS points to GitHub Pages IPs (see GitHub docs).
The following SEO best practices are implemented:
- Unique
<title>tag -
<meta name="description">with relevant content -
<meta name="author">set to "Zaid Abu Alshaar" -
<link rel="canonical">pointing to the live URL -
<html lang="ar" dir="rtl">for proper language declaration - Open Graph tags (
og:title,og:description,og:image,og:url,og:type) - Twitter Card tags (
twitter:card,twitter:title,twitter:description,twitter:image) - JSON-LD structured data (Person schema + WebSite schema)
-
robots.txtallowing crawling with sitemap reference -
sitemap.xmllisting all public pages - Custom
404.htmlerror page - Favicons (SVG, PNG, Apple Touch Icon)
-
site.webmanifestfor PWA support - Semantic HTML (
<main>,<nav>,<header>,<footer>,<section>) - Single
<h1>per page view, logical heading hierarchy - ARIA labels on interactive elements
-
loading="lazy"on non-critical images and iframes -
width/heightattributes on images -
deferattribute on script loading - Keyboard focus styles (
focus-visible)
- Replace
assets/img/og-image.jpgwith a new image (recommended: 1200x630 pixels, JPEG). - Update the
og:imageandtwitter:imageURLs inindex.htmlif the filename changes.
- Replace
assets/img/zaid-abu-alshaar.jpgwith the new photo. - The image reference in
js/script.js(in theaboutPagefunction) will pick it up automatically.
Edit the <title>, <meta name="description">, and corresponding OG/Twitter tags in index.html.
© 2025 Zaid Abu Alshaar. All Rights Reserved.