جستجو برای:
  • خانه
  • طراحی سایت
  • خدمات ما
    • سامانه یادگیری الکترونیکی – سایا (LMS)
    • سامانه الکترونیکی مدیریت آموزش (ساما) (EMS)
    • پشتیبانی نرم افزار
    • پشتیبانی سخت افزار
    • پشتیبانی شبکه
    • پشتیبانی ماشین های اداری
  • نمونه کارها
  • قالب و افزونه
  • دسته بندی مطالب
    • آموزش مجازی
    • اخبار سینما
    • افزونه وردپرس
    • آموزش افزونه وردپرس
    • بازی
    • دوره های رایگان
    • سریال
    • فناوری
    • فیلم
      • اکشن
      • تاریخی
      • ترسناک
      • کمدی
      • هیجان انگیز
      • ورزشی
    • قالب وردپرس
      • قالب خبری و وبلاگ
      • قالب شرکتی
      • قالب نمونه کار
      • قالب های چند منظوره
    • مقالات
      • بازایابی دیجیتال
      • برنامه نویسی
      • تولید و بازاریابی محتوا
      • طراحی و گرافیک
  • تماس با ما
  • DMCA
  • پشتیبان سایت
 
  • 02144824488
  • info@myhamyar.com
  • بلاگ
  • تماس با ما
  • درباره ما
همیارِمَن  | آموزش برنامه نویسی و طراحی سایت | طراحی گرافیک
دسترسی سریع
  • پشتیبان سایت
0

ورود و ثبت نام

  • خانه
  • طراحی سایت
  • خدمات ما
    • سامانه یادگیری الکترونیکی – سایا (LMS)
    • سامانه الکترونیکی مدیریت آموزش (ساما) (EMS)
    • پشتیبانی نرم افزار
    • پشتیبانی سخت افزار
    • پشتیبانی شبکه
    • پشتیبانی ماشین های اداری
  • نمونه کارها
  • قالب و افزونه
  • دسته بندی مطالب
    • آموزش مجازی
    • اخبار سینما
    • افزونه وردپرس
    • آموزش افزونه وردپرس
    • بازی
    • دوره های رایگان
    • سریال
    • فناوری
    • فیلم
      • اکشن
      • تاریخی
      • ترسناک
      • کمدی
      • هیجان انگیز
      • ورزشی
    • قالب وردپرس
      • قالب خبری و وبلاگ
      • قالب شرکتی
      • قالب نمونه کار
      • قالب های چند منظوره
    • مقالات
      • بازایابی دیجیتال
      • برنامه نویسی
      • تولید و بازاریابی محتوا
      • طراحی و گرافیک
  • تماس با ما
  • DMCA
  • پشتیبان سایت

بلاگ

همیارِمَن | آموزش برنامه نویسی و طراحی سایت | طراحی گرافیکبلاگدوره های رایگانچند پروژه تمرینی HTML و CSS

چند پروژه تمرینی HTML و CSS

2 شهریور 1400
ارسال شده توسط همیار من
دوره های رایگان
1.58k بازدید
همیارمن

۷ پروژه تمرینی HTML و CSS با پاسخ و چالش برانگیز

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

تمرین عملی HTML و CSS با اجرای پروژه‌ها

فهرست عناوین

  • تمرین عملی HTML و CSS با اجرای پروژه‌ها
  • پروژه تمرینی طراحی وب سایت دارای پاسخ و سورس‌ کد
      • ۱- طراحی یک فرم استخدام بدون استفاده از CSS
      • ۲- طراحی صفحه اصلی یک وب‌سایت رستوران
      • دانلود سورس کد
  • عناوین تمرین‌های HTML بدون پاسخ
      • ۵- صفحه اول وب‌سایت رستوران
      • ۶- طراحی یک لندینگ پیج برای مارکتنیگ
      • ۷- طراحی یک فرم ورود و ثبت نام فارسی
  • از پس پروژه‌ها برنمی‌آیم!

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

اما امروز در این مقاله هیچ توضیحی در کار نیست! در ابتدا چند پروژه تمرینی HTML و CSS همراه با پاسخ در دسترس شما قرار می‌گیرد. سپس در انتهای مقاله چند پروژه تمرین بدون پاسخ برایتان قرار می‌دهیم تا خودتان با معلومات خود و به کمک روش جستجو در گوگل بتوانید طراحی‌های خواسته شده را اجرا کنید.

پروژه تمرینی طراحی وب سایت دارای پاسخ و سورس‌ کد

۱- طراحی یک فرم استخدام بدون استفاده از CSS

در اولین تمرین از شما می‌خواهم فرمی مطابق با تصویر زیر طراحی کنید. در این فرم نباید از CSS کمک بگیرید و لازم است تمامی المان‌های فرم را به کمک HTML پیاده سازی کنید.

این تمرین باعث می‌شود با انواع فیلد‌های موجود در فرم از جمله فیلد متنی، انتخابی، چک باکس و… به خوبی کار کنید. پاسخ این تمرین هم برای شما درج شده اما توصیه می‌کنم بدون توجه به پاسخ، چالش را حل نمایید!

در سورس کد پاسخ، احتمالا چندین ویژگی جدید برای فیلد‌های فرم مشاهده می‌کنید، خوب است با کمی جستجو انگلیسی، در مورد آنها اطلاعات کسب کنید. (یادگیری جستجو انگلیسی برای حل مسائل برنامه‌نویسی)

 

۲- طراحی صفحه اصلی یک وب‌سایت رستوران

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

سورس‌ کد پروژه نمونه html

پاسخ این پروژه در ادامه توضیحات برای شما قرار داده شده است، اما بدون تقلب و سرک کشیدن به آن طراحی را انجام دهید! راستی در این فایل، سورس کد چشمک زدن دکمه هم قرار دادیم (رنگ دکمه مدام تغییر می‌کند) تا این فایل یک نکته‌ی آموزشی جدید برایتان داشته باشد. حتما بعد از طراحی صفحه، فایل کد را بررسی کنید.

دانلود سورس کد

۳- طراحی یک صفحه وب دارای بخش‌های مختلف

در این تمرین می‌خواهیم یک صفحه وب خبری-وبلاگی را به صورت خالی فقط در حد تمپلیت طراحی کنید. هدف از این تمرین آشنایی با اجزای صفحه است. شاید شما بتوانید به کمک تگ div و p و مقداری CSS این صفحه را طراحی کنید. اما برای طراحی استاندارد و حرفه‌ای باید کارکرد تگ‌های مختلف را بیاموزید. در این صفحه از تگ‌های مهمی همچون main، footer، header و… استفاده شده است.

تمرین عملی HTML و CSS

پس در این تمرین کارکرد تگ‌های مهم html را مشاهده خواهید کرد. این تمرین دارای پاسخ است که توصیه می‌کنیم بعد از اتمام طراحی به آن مراجعه نمایید.

دانلود سورس کد

۴- طراحی یک وب‌سایت شخصی

به عنوان آخرین پروژه‌ی دارای پاسخ (تقلب!) می‌خواهیم یک صفحه بسیار ساده به عنوان وب‌سایت شخصی طراحی کنید. در این صفحه به وجود منو، معرفی شخص و نمونه‌کارها نیاز داریم. در واقع اینبار یک صفحه وب کامل را طراحی می‌کنیم.

برای مشاهده‌ی صفحه وارد لینک زیر شوید. در این تمرین کار با منو، ستون‌بندی‌های صفحه، انواع المان‌ها آشنا خواهید شد.

عناوین تمرین‌های HTML بدون پاسخ

زمانی می‌توانید مهارت خود را ارزیابی کنید که فایل پاسخی وجود نداشته باشد! در این بخش از مقاله قصد داریم چند عنوان تمرینی مطرح کنیم تا خودتان برای حل آنها تلاش کنید!

۵- صفحه اول وب‌سایت رستوران

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

۶- طراحی یک لندینگ پیج برای مارکتنیگ

خب انگار در این تمرین با یک پروژه واقعی سروکار دارید! طرحی که مشاهده می‌کنید به صورت واقعی (نه تمرینی) برای یک وب‌سایت تبلیغاتی زده شده بود. سعی کنید به عنوان یک پروژه‌ی واقعی به آن نگاه کنید و تمام جزییات آن را پیاده سازی کنید.

استفاده از تصاویر مناسب برعهده‌ی شماست. همچنین می‌توانید به جای کلیه متون این طرح از متن‌های آزمایشی استفاده نمایید.

۷- طراحی یک فرم ورود و ثبت نام فارسی

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

پروژه تمرینی HTML و CSS

در گام قبلی با طراحی یک فرم ساده آشنا شدید. حالا وقت آن رسیده کمی سلیقه به خرج دهید و استایل‌های CSS را چاشنی کار کنید.

از پس پروژه‌ها برنمی‌آیم!

۷ پروژه تمرینی HTML در لیست بالا، از سطح ساده تا متوسط طراحی شده بودند. سعی کردیم خیلی پروژه‌های پیچیده را در این لیست قرار ندهیم. اگر حدود ۷۰ درصد آنها را بتوانید به تنهایی و بدون مراجعه به پاسخ اجرا کنید باید به شما تبریک بگوییم. شما فقط به اجرای پروژه‌های تمرینی بیشتر نیاز دارید.

اما با این وجود اگر نتوانستید پروژه‌های فوق را حتی تا ۵۰٪ انجام دهید بهتر است به مرحله‌ی یادگیری و تمرین بازگردید!

مهمترین علت‌هایی که باعث شده نتوانید پروژه ها را اجرا کنید:

  • به اندازه‌ی کافی آموزش ندیده‌اید.
  • بعد از یادگیری هر مبحث به قدر کافی تمرین نداشته‌اید.
  • حجم زیادی از مطالب را در زمان بسیار کوتاهی آموخته‌اید.

پیشنهاد می‌کنم اگر هنوز در اجرای پروژه‌ها مشکل زیادی دارید به سراغ آموزش ویدیویی HTML و CSS بروید. مشاهده این دوره باعث می‌شود در مدت کوتاهی بتوانید به صورت کامل این زبان‌ها را اصولی و دقیق یاد بگیرید.

بیشتر بخوانید:

  • دانلود افزونه فرم ساز گرویتی فرمز نسخه 2.5.7.3 | Gravity Forms
  • دانلود افزونه یوآست سئو پرمیوم | Yoast Seo Premium
  • آپلود وب‌سایت در سرور | چگونه سایت ساخته شده را به صورت آنلاین مشاهده
  • UMT چیست؟ راهنمای کامل برای استفاده از UTM
  • دوره آموزش رایگان bootstrap

اشتراک گذاری:
برچسب ها: CSSHTMLآموزشآموزش CSSآموزش HTMLآموزش رایگان CSSآموزش رایگان HTMLآموزش وب سایتچند پروژه تمرینی HTML و CSSدوره رایگان
در تلگرام
کانال ما را دنبال کنید!
در اینستاگرام
ما را دنبال کنید!

مطالب زیر را حتما مطالعه کنید

لوگو ادمین سایت

آموزش انیمیشن‌سازی با CSS

در این قسمت از آموزش انیمشن‌سازی در CSS قصد داریم به طور کلی به آموزش...
همیارمن

نحوه اضافه کردن کد PHP در وردپرس

اگر به دنبال اضافه کردن کد php در وردپرس به صفحات در وردپرس هستید به...

دوره رایگان طراحی فروشگاه اینترنتی!

در حال آپدیت... امروزه شاهد سایت های فروشگاهی بسیاری هستیم. افراد بسیاری وجود دارند که...

آموزش ایجاد لیست کشویی وابسته به هم در HTML

در این مقاله در همیار من قصد داریم یکی از مطالب بسیار مهم و کاربردی...
ترفندهای عکاسی حرفه‌ای با موبایل (ساده و بدون هزینه!)

ساده و بدون هزینه ترفند های عکاسی حرفه ای با موبایل را یاد بگیرید

یکی از وسایلی که امروزه تقریبا با همه ما همراه شده است و ساعت‌ها آن...
لوگو ادمین سایت

DOM چیست و چه کاربردی دارد؟

DOM عبارتی است که بیشتر آنرا در زبان جاوا اسکریپت می‌شنویم. در این مقاله در...

4 دیدگاه

به گفتگوی ما بپیوندید و دیدگاه خود را با ما در میان بگذارید.

  • maedejy گفت:
    29 شهریور 1400 در 8:57 ب.ظ

    وقتتون بخیر ,
    ممکنه بگید سورس پروژ ها کجا قرار داره؟

    پاسخ
    • همیار من گفت:
      30 شهریور 1400 در 10:25 ق.ظ

      درود خدمت شما کاربر عزیز.
      در زیر هر مطلب ذکر شده است دانلود سورس کد

      پاسخ
  • رویا گفت:
    16 بهمن 1400 در 11:31 ب.ظ

    سلام
    در تمرین اول منظورتون مطابق کدام تصویر‌هست؟

    پاسخ
    • همیار من گفت:
      17 بهمن 1400 در 10:42 ق.ظ

      سلام درود خدمت شما تصویر مشخص است.

      پاسخ

دیدگاهتان را بنویسید لغو پاسخ

جستجو در همیارمَن
جستجو برای:
  • آموزش مجازی
  • اخبار سینما
  • افزونه وردپرس
    • آموزش افزونه وردپرس
  • بازی
  • پیشنهادی
  • دسته‌بندی نشده
  • دوره های رایگان
  • سریال
  • فناوری
  • فیلم
    • اکشن
    • تاریخی
    • ترسناک
    • جنایی
    • کمدی
    • مستند
    • معمایی
    • هیجان انگیز
    • ورزشی
  • قالب HTML
  • قالب وردپرس
    • قالب خبری و وبلاگ
    • قالب شرکتی
    • قالب نمونه کار
    • قالب های چند منظوره
  • مقالات
    • بازایابی دیجیتال
    • برنامه نویسی
    • تولید و بازاریابی محتوا
    • طراحی و گرافیک
آخرین مطالب سایت
  • آموزش انیمیشن‌سازی با CSS
  • بهترین فیلم های اسلشر تاریخ سینما
  • نقد فیلم Cure – یک فیلم هیپنوتیزم کننده
  • نقد فیلم یتیم Orphan: First Kill
  • کسب درآمد از آموزش آنلاین چگونه است؟
برچسب‌ها
CSS HTML آموزش آموزش CSS آموزش css3 آموزش css3 pdf آموزش css3 رایگان آموزش css3 پیشرفته آموزش css pdf آموزش css حرفه ای آموزش css و html آموزش css پروژه محور آموزش css پیشرفته آموزش افزونه وردپرس آموزش تولید محتوا آموزش رایگان html همیارمن آموزش رایگان زبان html آموزش وب سایت افزونه وردپرس بازاریابی بازاریابی دیجیتال بازی بررسی بررسی بازی تولید محتوا دانلود افزونه وردپرس دانلود قالب وردپرس دوره دوره رایگان دیجیتال مارکتینگ سایت فناوری فیلم قالب قالب سایت قالب وب سایت قالب وردپرس نقد نقد بازی نقد فیلم نقد و بررسی نقد و بررسی بازی نقد و بررسی فیلم وردپرس ووکامرس

ورود

رمز عبور را فراموش کرده اید؟

هنوز عضو نشده اید؟ عضویت در سایت