ساخت صفحه معرفی شخصی با HTML و CSS

ساخت صفحه معرفی شخصی با HTML و CSS اولین پروژه جمع بندی دوره ارومیا دیزاین است. در درس 53، مهارت های ساختاردهی، رنگ، فاصله، چیدمان و دسترس پذیری را کنار هم قرار می دهیم تا یک صفحه کامل بسازیم. هدف فقط نمایش یک نام نیست؛ بازدیدکننده باید بفهمد صاحب صفحه چه کاری انجام می دهد، چه نمونه کاری دارد و چگونه می توان با او ارتباط گرفت.

در درس قبلی و بررسی صفحه با DevTools یاد گرفتیم علت خطا را پیدا کنیم. این بار از ابتدا ساختار روشن می سازیم و در پایان همان ابزار را برای بررسی نتیجه به کار می بریم. هویت و نمونه کارهای پروژه فرضی هستند؛ پیش از استفاده واقعی، متن ها و نشانی تماس را تغییر دهید.

دانلود پروژه درس 53 + پاسخ تمرین

صفحه کامل معرفی شخصی، CSS و فایل تمرین مستقل

دانلود فایل ZIP پروژه درس 53

پس از استخراج، index.html را باز کنید.

هدف و محدوده پروژه را مشخص کنید

صفحه شامل معرفی کوتاه، درباره من، مهارت ها، نمونه کارها و راه ارتباط است. برای این پروژه به پایگاه داده، فریم ورک یا جاوااسکریپت نیاز نداریم. ناوبری به بخش های همان صفحه می رود و راه تماس یک پیوند ایمیل است. این پیوند جای فرم ارسال پیام یا سامانه پشتیبانی را نمی گیرد.

قبل از کدنویسی، متن کوتاه هر بخش را آماده کنید. معرفی باید روشن بگوید چه خدمتی ارائه می دهید. در بخش مهارت ها از درصدهای ساختگی مانند تسلط 95 درصدی پرهیز کنید؛ نام مهارت و نمونه استفاده واقعی آن مفیدتر است. نمونه کار را هم با توضیح نقش خود و نتیجه قابل مشاهده معرفی کنید.

ساختار فایل های پروژه

فایل index.html محتوای صفحه و style.css ظاهر آن را نگه می دارد. practice.css برای تمرین مستقل و solution.css پاسخ تمرین است. فایل پاسخ به صورت پیش فرض بارگذاری نمی شود. پروژه از فونت سیستمی استفاده می کند و وابستگی اینترنتی ندارد؛ بعد از استخراج ZIP، صفحه را مستقیم در مرورگر باز کنید.

در فایل HTML، زبان فارسی و جهت راست به چپ مشخص شده اند. viewport به مرورگر موبایل کمک می کند عرض صفحه را متناسب با نمایشگر در نظر بگیرد. عنوان سند و توضیح متا هم مخصوص همین صفحه نوشته می شوند؛ این اطلاعات به تنهایی تضمینی برای رتبه جستجو نیستند.

<!doctype html>
<html lang="fa" dir="rtl">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>صفحه معرفی شخصی</title>
  <link rel="stylesheet" href="style.css">
</head>

ساختار معنایی صفحه را بسازید

هدر، ناوبری، محتوای اصلی و فوتر مسئولیت های جدا دارند. در main یک عنوان اصلی برای معرفی شخص قرار می گیرد و بخش های بعدی با h2 شروع می شوند. عنوان هر کارت نمونه کار h3 است. اندازه ظاهری تیتر را با CSS تنظیم می کنیم و صرفا برای بزرگ تر شدن متن، سطح عنوان را تغییر نمی دهیم.

هر section این پروژه موضوع و عنوان مشخص دارد. کارت های مستقل نمونه کار با article ساخته شده اند. استفاده از این عناصر وقتی مفید است که با معنای واقعی محتوا هماهنگ باشد. برای مرور پایه ها، درس دسترس پذیری در HTML را دوباره بررسی کنید.

ناوبری ساده و قابل استفاده در موبایل

چهار پیوند به شناسه بخش ها متصل هستند. برای رفتن به بخش مهارت ها، href باید دقیقا با id همان بخش هماهنگ باشد. در پروژه منوی همبرگری اضافه نکرده ایم؛ پیوندها با flex-wrap در عرض کم به سطر بعد می روند و همگی در دسترس می مانند.

<a href="#skills">مهارت ها</a>
<section id="skills" aria-labelledby="skills-title">
  <h2 id="skills-title">مهارت ها</h2>
</section>

منویی که بدون اسکریپت و بدون پنهان کردن گزینه ها کار می کند، برای این صفحه کوچک کافی است. اگر منوی پیچیده تری می سازید، کنترل صفحه کلید و وضعیت باز و بسته را هم طراحی کنید. درس ساخت منوی واکنش گرا جزئیات بیشتری دارد.

بخش معرفی را با Grid بچینید

بخش hero دو ستون دارد: متن معرفی و یک کارت گرافیکی ساده با حروف اول نام فرضی. کارت گرافیکی اطلاعات ضروری تازه ای ندارد و با aria-hidden از محتوای کمکی کنار گذاشته شده است. اگر عکس واقعی شخص را جایگزین کردید، متن جایگزین را بر اساس نقش همان تصویر تعیین کنید.

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  align-items: center;
  gap: 2rem;
}

minmax با حداقل صفر اجازه می دهد محتوای ستون در فضای محدود بهتر جمع شود. این قاعده به تنهایی همه سرریزها را رفع نمی کند؛ رشته های طولانی، اندازه ثابت و عناصر داخلی را هم بررسی کنید. برای مرور ساخت شبکه، درس CSS Grid را بخوانید.

رنگ و اندازه های مشترک را متمرکز کنید

رنگ متن، رنگ کنش اصلی، زمینه و شعاع کادر در root نام گذاری شده اند. به جای تکرار یک کد رنگ در چند بخش، از متغیر مرتبط استفاده می کنیم. این کار تغییر تم را ساده تر می کند، اما هر مقدار تکی لازم نیست متغیر شود؛ نقش مشترک و نیاز واقعی به تغییر هماهنگ را در نظر بگیرید.

:root {
  --ink: #0f172a;
  --accent: #075985;
  --paper: #ffffff;
  --radius: 1rem;
}

برای بررسی دامنه متغیرها و ارث بری، درس متغیرهای CSS مکمل پروژه است. رنگ پیوند اصلی با متن سفید و زمینه تیره انتخاب شده است. پس از شخصی سازی رنگ ها، کنتراست حالت معمول و فوکوس را دوباره بررسی کنید.

تصویر مفهومی صفحه معرفی شخصی در نمایشگر و موبایل — تصویر مفهومی برای معرفی موضوع؛ ظاهر پروژه دانلودی آموزشی و ساده تر است.

کارت های نمونه کار و ترتیب خواندن

سه کارت در نمایشگر بزرگ کنار هم قرار می گیرند و در عرض کمتر به یک ستون تبدیل می شوند. ترتیب HTML با ترتیب خواندن هماهنگ است و برای جابه جایی نمایشی، محتوا را با order بازچینی نکرده ایم. عنوان، نوع پروژه و توضیح کوتاه برای هر کارت کافی است؛ پیوند نمایشی بدون مقصد واقعی اضافه نکنید.

اگر بعدا لینک پروژه واقعی را اضافه می کنید، متن پیوند را مشخص بنویسید. عبارتی مانند «مشاهده پروژه معرفی خدمات» از چند پیوند تکراری با متن «اینجا» روشن تر است. اگر هنوز نمونه واقعی ندارید، تمرین آموزشی بودن آن را صریح بیان کنید و ادعای مشتری یا نتیجه ساختگی ننویسید.

واکنش گرایی و اندازه متن

در breakpoint پروژه، hero و شبکه نمونه کار به یک ستون تبدیل می شوند. ظرف اصلی با min و calc عرض مناسب می گیرد و تیتر با clamp اندازه منعطف دارد. برای متن ها ارتفاع ثابت تعریف نشده است تا در بزرگ نمایی و هنگام طولانی شدن محتوا، فضای لازم حفظ شود.

@media (max-width: 48rem) {
  .hero, .project-grid {
    grid-template-columns: 1fr;
  }
}

انتخاب 48rem یک تصمیم برای همین طرح است؛ نقطه شکست را بر اساس زمانی انتخاب کنید که محتوای شما به فضای بیشتری نیاز دارد. نام دستگاه معیار کافی نیست. در درس توابع کاربردی CSS درباره اندازه های منعطف بیشتر توضیح داده ایم.

فوکوس و پیوند پرش را حفظ کنید

اولین پیوند صفحه به main می رود و فقط هنگام فوکوس در بالای صفحه نمایان می شود. این مسیر به کاربر صفحه کلید کمک می کند ناوبری تکراری را رد کند. روی پیوندها outline واضح قرار دارد و فوکوس برای زیبایی حذف نشده است. صفحه انیمیشن تزئینی و اسکرول نرم ندارد، بنابراین حرکت غیرضروری به آن اضافه نمی شود.

برای بررسی کنتراست، بزرگ نمایی و ترجیح حرکت، درس دسترس پذیری در طراحی را مرور کنید. وجود یک پیوند پرش یا کادر فوکوس به معنی انطباق کامل صفحه با همه معیارهای دسترس پذیری نیست؛ مسیر استفاده و محتوای واقعی را هم باید آزمایش کرد.

راه تماس را واقعی و شفاف تنظیم کنید

نشانی hello@example.com در پروژه نمونه است و باید پیش از انتشار عوض شود. mailto معمولا برنامه ایمیل دستگاه را باز می کند؛ داشتن آن به معنی ارسال خودکار یا تضمینی پیام نیست. اگر فرم واقعی می خواهید، ارسال و اعتبارسنجی سمت سرور و مدیریت پیام ها به پیاده سازی جدا نیاز دارند.

اطلاعاتی را عمومی کنید که برای ارتباط کاری لازم هستند. آدرس منزل یا اطلاعات شخصی غیرضروری را صرفا برای پر کردن صفحه ننویسید. در این نمونه، یک روش تماس روشن کافی است و هیچ فرم ظاهری که پیام را واقعا ارسال نکند اضافه نشده است.

آزمایش پروژه پیش از انتشار

index.html را باز کنید و همه پیوندهای داخلی را امتحان کنید.
عرض های 320، 768 و 1280 پیکسل را بررسی کنید؛ کارت و متن نباید صفحه را از عرض بیرون ببرند.
با Tab و Shift+Tab حرکت کنید و با Enter مقصد پیوندها را باز کنید.
بزرگ نمایی 200 درصد را بررسی کنید؛ متن نباید پشت کادرها مخفی شود.
نام، ایمیل و توضیح نمونه کارهای فرضی را پیش از استفاده واقعی جایگزین کنید.
بعد از هر تغییر CSS، فایل را ذخیره و صفحه را دوباره بارگذاری کنید.

اگر تغییر اعمال نشد، مسیر فایل، انتخابگر و قانون برنده را در DevTools ببینید. برای ساختن تغییر پایدار، به جای چند وصله متعارض، پایه و حالت متفاوت را جدا نگه دارید. روش بهینه سازی CSS و کاهش کد تکراری در این پروژه هم کاربرد دارد.

تمرین مستقل: برجسته کردن یک نمونه کار

به یکی از article ها کلاس card–featured اضافه کنید. practice.css را بعد از style.css متصل کنید و فقط رنگ کادر را #075985 و زمینه را #e0f2fe قرار دهید. padding و چیدمان مشترک کارت را دوباره ننویسید. پس از حل، solution.css را به جای فایل تمرین متصل و نتیجه را مقایسه کنید.