Zhinarashidi: صفحه‌ای تازه حاوی «== مقدمه == '''HTML'''، '''CSS''' و '''JavaScript''' سه پایه اصلی وب‌سازی هستند: * '''HTML''' ساختار صفحه را می‌سازد (متن، عکس، دکمه، فرم). * '''CSS''' ظاهر و استایل صفحه را تعیین می‌کند (رنگ، فونت، چیدمان). * '''JavaScript''' رفتار و تعامل صفحه را اضافه می‌کند (کلیک، انیمیشن، اعتب...» ایجاد کرد

2026-09-06T05:34:04Z

صفحه‌ای تازه حاوی «== مقدمه == '''HTML'''، '''CSS''' و '''JavaScript''' سه پایه اصلی وب‌سازی هستند: * '''HTML''' ساختار صفحه را می‌سازد (متن، عکس، دکمه، فرم). * '''CSS''' ظاهر و استایل صفحه را تعیین می‌کند (رنگ، فونت، چیدمان). * '''JavaScript''' رفتار و تعامل صفحه را اضافه می‌کند (کلیک، انیمیشن، اعتب...» ایجاد کرد

صفحهٔ تازه

== مقدمه ==
'''HTML'''، '''CSS''' و '''JavaScript''' سه پایه اصلی وب‌سازی هستند:
* '''HTML''' ساختار صفحه را می‌سازد (متن، عکس، دکمه، فرم).
* '''CSS''' ظاهر و استایل صفحه را تعیین می‌کند (رنگ، فونت، چیدمان).
* '''JavaScript''' رفتار و تعامل صفحه را اضافه می‌کند (کلیک، انیمیشن، اعتبارسنجی فرم).

با این سه‌تا می‌شود یک وب‌سایت کامل و استاتیک (بدون نیاز به سرور یا دیتابیس) مثل صفحه‌ی پورتفولیو ساخت.

== ساختار استاندارد یک صفحه HTML ==
<pre>
<!DOCTYPE html>
<html lang="fa" dir="rtl">
<head>
<meta charset="UTF-8">
<title>عنوان سایت</title>
<link rel="stylesheet" href="style.css">
</head>
<body>

<script src="script.js"></script>
</body>
</html>
</pre>

== ساختار معمول یک صفحه پورتفولیو ==
* '''Hero / معرفی''': عکس، نام، شغل/تخصص، یک جمله معرفی کوتاه
* '''درباره من (About)''': توضیح کامل‌تر درباره خودتان، مهارت‌ها و تجربه
* '''پروژه‌ها (Projects)''': نمایش نمونه‌کارها با عکس، توضیح و لینک
* '''مهارت‌ها (Skills)''': لیست یا نمودار مهارت‌های فنی
* '''تماس با من (Contact)''': فرم تماس یا لینک شبکه‌های اجتماعی و ایمیل

== نکات مهم CSS برای پورتفولیو ==

=== طراحی واکنش‌گرا (Responsive) ===
سایت باید در موبایل، تبلت و دسکتاپ درست نمایش داده شود.
<pre>
@media (max-width: 768px) {
.container {
flex-direction: column;
}
}
</pre>

=== Flexbox (چیدمان ساده) ===
<pre>
.container {
display: flex;
justify-content: space-between;
align-items: center;
}
</pre>

=== Grid (چیدمان جدولی/پیچیده‌تر) ===
<pre>
.projects {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
</pre>

== نکات مهم جاوااسکریپت برای پورتفولیو ==

=== سوییچ زبان (فارسی/انگلیسی) ===
<pre>
function switchLanguage(lang) {
document.documentElement.lang = lang;
document.documentElement.dir = (lang === "fa") ? "rtl" : "ltr";
// به‌روزرسانی متن‌ها بر اساس lang
}
</pre>

=== منوی موبایل (Hamburger Menu) ===
<pre>
const menuBtn = document.querySelector(".menu-btn");
const navMenu = document.querySelector(".nav-menu");

menuBtn.addEventListener("click", () => {
navMenu.classList.toggle("active");
});
</pre>

=== اسکرول نرم به بخش‌ها (Smooth Scroll) ===
<pre>
document.querySelectorAll('a[href^="#"]').forEach(link => {
link.addEventListener("click", function(e) {
e.preventDefault();
document.querySelector(this.getAttribute("href"))
.scrollIntoView({ behavior: "smooth" });
});
});
</pre>

== نکات کلی برای یک پورتفولیوی خوب ==
* سرعت بارگذاری صفحه را بالا نگه دارید (عکس‌ها را فشرده کنید).
* از فونت خوانا و رنگ‌بندی هماهنگ استفاده کنید.
* حتماً نسخه موبایل را تست کنید.
* پروژه‌ها را با لینک زنده (Live Demo) و لینک کد (GitHub) نشان دهید.
* صفحه تماس یا لینک‌های شبکه اجتماعی را واضح و در دسترس بگذارید.

== منابع بیشتر ==
* [https://developer.mozilla.org/fa/ مستندات MDN (مرجع کامل HTML/CSS/JS)]
* [[Git]]
* [[صفحهٔ اصلی]]

HTML CSS JS و ساخت پورتفولیو - تاریخچهٔ نسخه‌ها