In this hands-on workshop, you'll build a real website from scratch — using only free, open-source tools. No experience needed. By the end, your site will be live on the internet!
Everything you need — $0 total cost!
HTML (لغة ترميز النص التشعبي) هي بنية كل موقع. تخبر المتصفح بالمحتوى الذي يعرضه — العناوين والفقرات والصور والروابط والأزرار. تخيّلها بمثابة skeleton of your site.
Every HTML element uses tags: an opening tag <h1> and a closing tag </h1>. يوضع المحتوى بينهما.
<h1> to <h6> = Headings (h1 biggest, h6 smallest)
<p> = Paragraph
<a href="..."> = Link
<img src="..."> = Image
<ul> / <li> = List
<div> = Container (group things together)
<button> = Button
👇 Try editing the code below and click "Run"!
Change [YOUR NAME] to your actual name. Add more items to the list. Change the emoji! Then click Run.
CSS (أوراق الأنماط المتتالية) هي skin and clothes of your website. It controls colors, fonts, sizes, spacing, layout — everything visual. Without CSS, every website would look like a boring text document!
color = Text color
background = Background color or image
font-size = Text size
font-family = Font style
padding = Space inside an element
margin = Space outside an element
border-radius = Rounded corners
text-align = center, left, right
Change the background color of the body. Change the color of h1. Add your own tags. Make the button a different color!
JavaScript is the brain of your website. HTML is the skeleton, CSS is the skin — and JS makes it do things. انقر على زر، وأظهر المحتوى أو أخفه، وغيّر الألوان، ونفّذ العمليات الحسابية، وأنشئ الألعاب — JavaScript يحقق كل ذلك!
أضف زرًا جديدًا يعرض رمزًا تعبيريًا عشوائيًا! أضف عدادًا يزداد مع كل نقرة. وجرّب جعل النرد ذا 20 وجهًا!
لنجمع الآن بنية HTML وتنسيق CSS وتفاعل JavaScript في موقع شخصي متكامل! عدّل الشيفرة أدناه لتجعله خاصًا بك.
You just built a complete personal portfolio website! It has a hero section, about me, projects, and links — all styled beautifully. This is a REAL website that you can publish on the internet!
Your website is ready. Now let the world see it!
Push your code to GitHub, enable Pages in settings — your site is live at yourname.github.io! الطريقة الأكثر شيوعًا لدى مطوري المصادر المفتوحة.
💚 100% FreeDrag and drop your files — instant website! Automatic HTTPS, custom domains, and it's incredibly fast.
💚 Free tierCreated by the makers of Next.js. Perfect for more advanced sites. Push to GitHub = automatic deployment.
💚 Free tierمثل GitHub Pages، لكنه غير ربحي بالكامل ومملوك للمجتمع. بلا تتبّع من الشركات. مصدر مفتوح بحق.
💚 100% Free & OpenfreeCodeCamp.org — Full HTML/CSS/JS course (300+ hours, free!)
TheOdinProject.com — Full-stack web development curriculum
KhanAcademy.org — Interactive intro to HTML/CSS/JS
MDN Web Docs (developer.mozilla.org) — أفضل مرجع لتقنيات الويب
HTML/CSS → JavaScript → React or Vue → Node.js → Databases → Full-Stack Developer! And every single tool in this journey is free and open source. بُني الويب على معايير مفتوحة — وأنت الآن جزء منه!
«عَلِّمُوا وَلَا تُعَنِّفُوا»
«علّموا ويسّروا.» — الويب مصمم ليكون مفتوحًا. أصبح موقعك الآن جزءًا من الويب المفتوح. شارك ما تعلمته! ✨