جلسه اول: فرم جستجوی انیمیشنی

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

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

در این کادر متنی می توانیم متن موردنظر برای جستجو را وارد کنیم. همچنین آیکن ذره بین هم به یک دایره سبز رنگ بزرگ تبدیل می شود، با یک علامت ضربدر که به معنای این است که با کلیک کردن روی آن، کادر بسته می شود.

جلسه دوم: فرم ثبت نام و ورود به سایت

در جلسه دوم نحوه ساخت یک فرم ورود/ثبت نام آموزش داده می شود. این فرم به دو بخش تقسیم شده است. بخش سمت چپ حاوی یک متن و یک تصویر بوده و بخش سمت راست حاوی دو سربرگ یا زبانه به نام های REGISTER و LOGIN است. ابتدا سربرگ REGISTER که برای ثبت نام می باشد، فعال و قابل نمایش است که حاوی سه کادر متنی برای نام کاربری، ایمیل و کلمه عبور می باشد.

با کلیک کردن روی عبارت LOGIN سربرگ مربوطه فعال می شود که حاوی دو کادر متنی ایمیل و کلمه عبور است.

جلسه سوم: منوی افقی ریسپانسیو

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

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

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

جلسه چهارم: اسلایدر تصاویر

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

جلسه پنجم: لیست پایین افتادنی اعلانات سایت

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