یادگیری پروژه محور همواره یکی از بهترین روش‌ها برای یادگیری یک تکنولوژی است. اما تعریف همین پروژه‌ها نیز چالش برانگیز است. دلیل آن این است که واقعا چگونه یک پروژه را برای محدوده دانش خودمان پیاده‌سازی کنیم؟ از کجا بدانیم اگر قصد پیاده‌سازی پروژه X را داریم بیشتر موضوعات اولیه آن را می‌دانیم یا خیر؟ به همین دلیل برای یادگیری پروژه محور نیاز است که شما از یکسری تسک‌ها و پروژه‌های موجود الهام بگیرید.
HTML و CSS از جمله اساسی‌ترین تکنولوژی‌های حوزه توسعه وبسایت هستند و به همین دلیل دنبال کردن دوره‌های آموزشی کفایت نخواهد کرد. شما باید به خوبی کار عملی با این موارد را یاد بگیرید و شیوه توسعه و طراحی وبسایت با این موارد را بلد باشید.
به همین دلیل در این مطلب از وبسایت راکت قصد داریم شما را با ۱۰ پروژه‌ای آماده کنیم که می‌توان بعنوان مثال‌هایی برای توسعه پروژه محور در نظر داشته باشید. هر کدام از این موارد حاوی توضیحاتی هستند که با مطالعه آن‌ها میتوانید منظور نهایی‌شان را درک کنید.
همچنین برای یادگیری کامل HTML و CSS میتوانید از دو دوره اصلی وبسایت راکت استفاده کنید:
۱. صفحه‌ی گرامیداشت
صفحه گرامیداشت، به شیوه‌ای طراحی می‌شود که در آن سعی کنید برای یک فرد خاص صفحه‌ای را ایجاد کنید که اطلاعاتی مانند بیوگرافی، تصویر، رزومه، موفقیت‌ها و... وی در آن درج شده باشد. نمی‌خواهیم نمونه‌های کاملی از این صفحات را به شما ارائه کنم چون قصد دارم از خلاقیت خودتان استفاده کنید و همچنین از مثال‌های مختلفی که خودتان در گوگل میتوانید پیدا کنید استفاده نمایید. در این لینک یک نمونه بسیار اولیه و ساده از یک صفحه گرامیداشت خواهید دید.
2. صفحه‌ی وب شامل فرم
همیشه فرم‌ها بخش مهمی از هر پروژه‌ای هستند و شما در بسیاری از اپلیکیشن‌ها با آن‌ها سر و کار خواهید داشت. حالا که اینطور است، چرا زودتر تمرین نکنیم و دانش خود را در آن زمینه افزایش ندهیم؟! وقتی با مسائل مربوط به Input و تگ‌های اساسی در HTML آشنا شدید، بیایید و با تمام آن تگ‌ها، یک فرم کامل را ایجاد کنید. نحوه‌ی استفاده از فیلدهای متنی، چک باکس، دکمه رادیویی، تاریخ و سایر المان‌های مهم موجود در فرم را یاد بگیرید. وقتی مشغول ساخت یک فرم هستید، ساختاردهی درست به صفحه‌ی وب را یاد خواهید گرفت. برای ساخت چنین صفحاتی نیز میتوانید به تنهایی از مهارت‌های HTML یا HTML5 خود استفاده کنید اما برای بهتر جلوه دادن پروژه میتوانید کمی استفاده از CSS را نیز مد نظر قرار دهید.
3. وبسایت پارالاکس
یک وبسایت پارالاکس دارای تصاویری ثابت در پس‌زمینه است و شما با اسکرول کردن میتوانید سایر بخش‌های تصویر را مشاهده کنید. با داشتن دانش پایه‌ای در زمینه‌های HTML و CSS میتوانید این اختلاف دید (پارالاکس) را به وبسایت خود اضافه کنید. مردم از این روش محبوب برای طراحی وب استفاده می‌کنند و به کمک آن ظاهر زیبایی را به صفحه‌ی وب خود می‌بخشند. امتحان کردن آن را به شما پیشنهاد می‌کنم. ابتدا کل صفحه را به 3 یا 4 بخش تقسیم کنید. سپس برای هر بخش تصویر پس‌زمینه‌ی مرتبط با متن انتخاب کرده و سایر المان‌های CSS را برای ایجاد پارالاکس به آن اضافه کنید.
4. صفحه فرود
یکی دیگر از پروژه‌های خوبی که میتوانید با استفاده از HTML و CSS بسازید، ساخت صفحه‌ی فرود است اما برای انجام این کار باید کاملاً در این دو بخش مهارت داشته باشید. هنگام ساخت صفحه‌ی فرود باید بسیار خلاق باشید. شما نحوه‌ی اضافه کردن پاورقی و سربرگ‌ها، ایجاد ستون، تراز کردن آیتم‌ها، تقسیم بخش‌ها و خیلی موارد دیگر را تمرین خواهید کرد. باید به دقت از CSS استفاده کنید چون المان‌های مختلف با یکدیگر همپوشانی ندارند. باید به مسائلی مثل ترکیب رنگ، مارجین، فاصله بین بخش‌ها، پاراگراف‌ها و باکس‌ها نیز رسیدگی کنید. ترکیب رنگ‌ها باید برای بخش‌ها یا پس‌زمینه‌های مختلف تطابق مناسبی با یکدیگر داشته باشد.
5. وبسایت رستوران
از دانش جامع خود در زمینه HTML و CSS جهت ساخت یک صفحه‌ی وب زیبا برای رستوران استفاده کنید. ساخت طرح‌بندی برای وبسایت یک رستوران نسبت به نمونه‌های قبلی کمی پیچیده‌تر است. شما با استفاده از CSS Grid یک طرح‌بندی را برای مرتب کردن غذاها و نوشیدنی‌ها آماده می‌کنید. باید قیمت‌ها و تصاویر را به آن اضافه کنید. برای زیباتر کردن ظاهر صفحه میتوانید از ترکیب رنگ مناسب، فونتی زیبا و تصاویر باکیفیت استفاده کنید. برای اینکه بتوانید تصاویر بهتری را به کاربران ارائه دهید، میتوانید از تصاویر کشویی استفاده کنید. همچنین برای هدایت به صفحات داخلی از لینک‌ها استفاده کنید.
6. صفحه وب کنفرانسی
میتوانید صفحه‌ای برای برگزاری یک رویداد یا کنفرانس بسازید. برای افرادی که مشتاق به شرکت در چنین کنفرانس‌هایی هستند، یک دکمه برای ورود طراحی کنید. در بالای بخش سربرگ، لینک‌های مختلفی را برای سخنران، مکان و برنامه ذکر کنید. هدف کنفرانس و مخاطبان مربوط به آن را توضیح دهید. مواردی مثل مقدمه، تصویر سخنران، جزئیات محل برگزاری و هدف اصلی کنفرانس را در صفحه وب خود لحاظ کنید. صفحه را به چند بخش تقسیم کنید. برای بخش‌های مختلف از رنگ پس‌زمینه‌ی مناسب استفاده کنید. نوع و رنگ فونت خود را به گونه‌ای انتخاب کنید که با تم صفحه همخوانی داشته باشد. برای ساخت چنین صفحه‌ای به دانش عمیقی در زمینه HTML یا HTML5 و CSS احتیاج خواهید داشت.
7. صفحه فروشگاه موسیقی
اگر به موسیقی علاقه دارید، میتوانید یک صفحه وب برای آن بسازید. برای انجام این کار به دانش HTML5 و CSS3 احتیاج دارید. یک تصویر مناسب در پس‌زمینه قرار دهید تا بیانگر هدف آن صفحه باشد. منوهای مختلفی را در بخش سربرگ اضافه کنید. مواردی مثل دکمه‌ها، لینک‌ها و تصاویر را به صفحه اضافه کنید. در مورد مجموعه آهنگ‌های موجود یک توضیح کلی ارائه دهید. در پایین صفحه لینک‌های مختص «سبد خرید» را قرار دهید. اطلاعات تماس را هم در بخش پایین صفحه ذکر کنید. میتوانید قابلیت‌های دیگری مانند گیفت‌کارت‌ها، خرید اشتراک و دوره‌ی آزمایشی را نیز به صفحات وب خود اضافه کنید.
8. سایت عکاسی
اگر به خوبی با HTML5 و CSS3 آشنا باشید، میتوانید یک وبسایت تک صفحه‌ایِ واکنش‌گرا برای عکاسی بسازید. برای واکنش‌گرا کردن آن از فلکس باکس و مدیا کوئری استفاده کنید. نام شرکت را به همراه یک تصویر در بالای صفحه قرار دهید. کارهای خود را با قرار دادن چندین عکس در پایین آن به نمایش بگذارید. در بخش پاورقی جزئیات تماس عکاس را ذکر کنید. برای دیدن کارها یک دکمه اضافه کنید. این دکمه باید شما را مستقیماً به قسمت تصاویر هدایت کند. همچنین باید به نکاتی مثل مارجین، padding، ترکیب رنگ، اندازه و سبک فونت، اندازه تصویر و استایل دکمه‌ها رسیدگی کنید.
9. نمونه‌کارهای شخصی
شما با دانستن HTML5 و CSS3 میتوانید نمونه‌کار خود را نیز خلق کنید. مهارت‌ها و کارهای به اتمام رسیده را در کنار نام و تصویر خود به نمایش بگذارید. میتوانید رزومه‌ی خود را به این نمونه‌کار اضافه کنید. در قسمت سربرگ منوهایی مثل شرایط تماس، خدمات و درباره‌ی ما را ذکر کنید. در بخش فوقانی صفحه از خودتان تعریف کنید. در زیر سربرگ چند نمونه از کارهای‌تان را نشان دهید و اطلاعات تماس یا اکانت شبکه‌های اجتماعی خود را به اشتراک بگذارید.
10. مستندات فنی
اگر اندکی با جاوااسکریپت آشنا باشید، میتوانید یک صفحه‌ی وب از مستندات فنی را ایجاد کنید. برای انجام این کار باید با CSS، HTML و جاوااسکریپت (به صورت پایه‌ای) آشنا باشید. تمام صفحه وب را به دو بخش تقسیم کنید. بخش چپ صفحه شامل فهرست‌هایی با تمام موضوعات است. اما در بخش راست باید مستندات یا توضیحات مربوط به موضوعات واقع در سمت چپ را قرار دهید. ما باید صفحه را طوری طراحی کنیم که وقتی کاربر در بخش چپ روی یک موضوع کلیک می‌کند، در بخش راست محتوای مختص به آن موضوع نمایش داده شود. برای ساخت کلیک میتوانید از گزینه بوک‌مارک در جاوااسکریپت یا CSS استفاده کنید. حتماً نباید ظاهر خیلی فانتری به آن بدهید، فقط باید ساده و در عین حال زیبا باشد.
در پایان
ما در راکت تلاش بسیار زیادی می‌کنیم تا شما را از طریق پروژه‌های واقعی و کاربردی با یک تکنولوژی آشنا کنیم. به همین دلیل در اغلب دوره‌های آموزشی وبسایت راکت شما با چند مثال عملی همراه خواهید بود و به همین دلیل به صورت پروژه محور یاد خواهید گرفت. در این مطلب نیز تلاش کردیم تا شما را با ۱۰ الگوی نمونه برای طراحی سایت آشنا کنیم. هر کدام از این موارد مطمئنا یک جنبه آموزشی منحصر به فرد داشته و به شما کمک می‌کنند تا درک بهتری از HTML و CSS پیدا کنید.
دیدگاه و پرسش
در حال دریافت نظرات از سرور، لطفا منتظر بمانید
در حال دریافت نظرات از سرور، لطفا منتظر بمانید