آموزش طراحی قالب سایت دیجی کالا با Html | Css | Sass | Bootstrap | Jquery به صورت کاملا واکنشگرا جهت ورود به بازار کار + سورس قالب
آموزش طراحی سایت از صفر تا استخدام
آموزش کامل HTML
آموزش کامل CSS
آموزش کامل sass
آموزش کامل bootstrap
آموزش کامل jquery
آموزش پروژه محور به همراه صدها مثال کاربردی
کاملترین آموزش فارسی جهت ورود به بازار کار
بدون نیاز به دانش قبلی
آموزش حرفه ای زبان های طراحی قالب سایت
به همره سورس قالب HTML دیجی کالا
توجه: این دوره (آموزش طراحی قالب سایت دیجی کالا) دائما توسط مهندس روشنایی (مدرس دوره) بروز گردیده و مطابق با آخرین استانداردهای برنامه نویسی آپدیت می شود. توجه فرمائید دریافت آپدیت ها برای خریداران قبلی رایگان می باشد و نیازی به پرداخت هزینه مجدد نیست.همواره می توانید جهت دریافت آپدیت ها به پنل کاربری خود در سایت مراجعه فرمائید.
سرفصل های دوره جامع طراحی سایت دیجی کالا
طراحی قالب سایت یکی از مهارتهای اساسی در زمینه توسعه وب و دیجیتال مارکتینگ است که بسیاری از افراد به دنبال یادگیری آن هستند. دیجی کالا به عنوان یکی از بزرگترین فروشگاههای اینترنتی ایران، از نظر طراحی و ساختار قالب، الگویی مناسب برای بسیاری از طراحان و توسعه دهندگان وب به حساب میآید. در این دوره قصد داریم قالب مشابه با قالب سایت دیجیکالا رو با استفاده از مباحث Html | Css | Sass | BootStrap | Jquery از صفر طراحی کنیم. در این آموزش موارد مهم کامل توضیح داده شده است که باعث می شود از مبتدی تا پیشرفته، همه چیز را از صفر تا صد یاد بگیرید، همچنین در این دوره زبان های طراحی قالب سایت به صورت تخصصی آموزش داده شده است. این دوره برای طیف وسیعی از افراد از جمله دانشجویان، طراحان وب، برنامهنویسان و علاقهمندان به دنیای وب بسیار مناسب است.
فصل 1 : مقدمات طراحی سایت
در این فصل مباحثی که جلوتر مورد نیاز هستش رو بطور کامل بررسی خواهیم کرد، پس در این فصل به مقدمه ای از مباحث طراحی سایت می پردازیم.
قسمت 1 : ورود به دنیای وب
در این بخش اولین و مهم ترین ابزار مورد نیاز یک طراح سایت رو معرفی و به صورت کلی مورد بررسی قرار میدیم و در ادامه به صورت عملی بررسی می کنیم که اصلا سایت چیه؟ و همچنین با اصطلاحات مرورگر (Web Browser)، وب سایت (Web Site)، کلمه کلیدی (Keyword)، باکس جستجو (Search Box)، SERP و اتصال (Link) در طول آموزش آشنا می شوید.
قسمت 2 : معرفی بخش های مختلف نتایج جستجو گوگل
احتمالا قبل از دیدن این بخش، زمانی که عبارتی رو در گوگل جستجو می کردید به جزئیات نتایج جستجو در گوگل دقت نمی کردید و اما بعد از دیدن این بخش با انواع بخش های مختلف نتایج جستجو بیشتر آشنا می شوید و مطمئن باشید در روند یادگیری مباحث مختلف طراحی سایت، اصطلاحاتی که در این بخش یاد می گیرید خیلی کمکتون می کنه و با دید تخصصی تری به بخش های مختلف نتایج جستجو گوگل نگاه می کنید و اما اصطلاحاتی که در این بخش یاد می گیرید شامل :
name of the website _ favicon of the website _ breadcrumb _ page title _ rich snippets _ release or update date _ meta description _ matches _ image of the result _ star rating _ product price _ links related _ organic _ sponsored _ local pack _ featured snippets _ top stories _ images _ people also ask _ knowledge panel _ site links _ twitter_ related searches _ video _ video carousel _ apps _ google flights _ jobs _ recipes _ shopping results
قسمت 3 : دیتاسنتر ، سرور ، رک چیست؟
بعد از این که به صورت عملی در جلسات گذشته درک کردید که سایت چیه؟ احتمالا این سوال براتون پیش اومده که بگید این اطلاعات سایت ها در کجا ذخیره و نگهداری میشن؟ برای این که جواب این سوالتون رو بدم در این بخش شما رو با 3 اصطلاح دیتاسنتر (Data Center) ، سرور (Server) و رک (Rack) آشنا میکنم.
قسمت 4 : آیپی و وب سرور چیست؟
در این بخش ابتدا مفهموم آیپی رو درک می کنید و متوجه میشد که هر دستگاه دیجیتالی به منظور ایجاد ارتباط با اینترنت حتما باید آدرس آیپی داشته باشه که این آدرس آیپی یه آدرس عددی هستش که مشخص کننده یک کامپیوتر یا دستگاهی در شبکه هست که از طریق این آدرس می تونن با هم ارتباط برقرار کنن و زبان یکدیگر رو متوجه بشن بعدش با مفهوم وب سرور آشنا میشید که این وب سرور نرم افزاری هستش که روی سرور نصب میشه و وظیفه هندل کردن، پردازش و پاسخ دادن به درخواست هایی است که مرورگر به سمت سرور میفرسه رو داره.
قسمت 5: DNS چیست؟ و چگونه مرورگر IP متناظر با دامنه جستجو شده رو پیدا میکنه؟
در این بخش ابتدا مفهوم DNS رو درک می کنید و متوجه میشید که DNS به منظور ایجاد شکاف ارتباطی بین کامپیوترها و انسان ها و برقراری ارتباط آسان تر توسعه داده شده و در واقع وظیفه اصلی DNS اتصال دامنه به آیپی هستش بجای اینکه بخواهیم IP را تایپ کنیم آدرس نام دامنه را تایپ می کنیم و در آخر بطور کامل درک می کنید که چگونه مرورگر IP متناظر با دامنه جستجو شده رو پیدا میکنه و همچنین با اصطلاحات زیر در طول آموزش آشنا خواهید شد:
ISP _ Resolving name server _ Root name server _ TLD name server _ Authoritative name server
قسمت 6: URL و دامنه از چه قسمت هایی تشکیل شده اند؟
URL دارای بخش های مختلفی هستش که یکی از بخش هایش دامنه می باشد که در این بخش تک تک قسمت های یک URL که شامل پروتکل ارتباطی،زیر دامنه، دامنه سطح دوم، دامنه سطح بالا و شاخه و مسیرهای داخلی رو تک به تک مورد بررسی قرار می دهیم و همچنین در این بخش با اصطلاحات زیر آشنا می شوید:
Protocol HTTP & HTTPS _ SSL _ Sub Domain _ SLD _ TLD _ Sub Directory _ Query String _ sTLS _ gTLD _ ccTLD
قسمت 12: معرفی مهم ترین قسمت های مختلف سایت
آشنایی با بخش های مهم سایت میتونه در روند کاری و یادگیریتون خیلی کمکتون کنه پس بر این منظور در این بخش به معرفی مهم ترین قسمت های مختلف سایت می پردازیم و همچنین با اصطلاحات زیر آشنا می شوید:
Arrow _ Ribbon _ Favicon _ Drag & Drop _ popup _ Breadcrumb _ Field _ Logo _ Sidebar _ Skleton Loader _ Action Sheets _ Notification _ Snack bars _ Customer Reviews _Charts _ Chips _ Range Slider _ Divider _ Border _ Shadow _ Toggle Button _ Sub Menu _ Mega Menu _ Post Thumbnail _ Scroll bar _ Related Post _ Sticky Header & Sidebar _ Category _ Search box _ Footer _ header _ Content _ body _ Comment _ Avatar _ Login _register _ User Profile _ Tab _ Countdown _ Slider _ Accordion _ Form _ Label _ Input _ Check and Radio _ Menu _ Dark Mode _ Toast _ Popover _ Tooltip _ Modal _ Carousel _ Navigation bar _ Dropdown _ Pagination _ Spinner _ Progress bar _ Button _ Alert _ Tabel
قسمت 13: کامپایلر (Compiler) چیست و چگونه کار میکند؟
در این جلسه ابتدا بررسی میکنیم که یک برنامه نویس برای یادگیری و درک بهتر هر زبان برنامه نویسی باید با نوع زبان ( اینکه زبان برنامه نویسی مد نظرش سطح بالاست یا سطح پایین ) آشنایی داشته باشه پس زبان های سطح بالا و سطح پایین رو مورد بررسی قرار میدیم و در ادامه تعریف کامپایلر ، انواع مختلف کامپایلر ، مراحل کار کامپایلر رو مورد بررسی قرار میدهیم و همچنین با اصطلاحات زیر آشنا میشوید:
Compiler _ AOT _ JIT _ Scanning _ Lexical _ Syntactic _ Semantic
قسمت 14: از معرفی تا نصب کد ادیتور (Code Editor)
در این جلسه ابتدا به صورت عملی یکی از اصلی ترین تفاوت بین یک کد ادیتور ساده با یک ویرایشگر کد حرفه ای رو لمسش می کنید و در ادامه با توجه به نیاز آموزش و کاریمون لازم میشه که از یک ادیتور حرفه ای استفاده کنیم بر این منظور انواع مختلف ویرایشگرهای کد رو معرفی میکنم و همچنین متوجه می شوید که IDE و Text Editor چیه؟ و بعد از آشنایی با انواع مختلف کد ادیتور، یدونه خوبشو با توجه به نیاز کاریمون انتخاب می کنیم و مراحل نصب رو با هم دیگه طی می کنیم.
فصل 2 : ساخت صفحات ورود | ثبت نام ، کد تایید، رمز عبور سایت دیجی کالا
قسمت 1: پیکربندی محیط توسعهی VS Code و نصب افزونهها و تنظیمات اولیه برای توسعهی قالب دیجی کالا
برای آغاز توسعهی حرفهای یک قالب وبسایت مشابه دیجیکالا، ابتدا ویرایشگر کد Visual Studio Code (VS Code) را دانلود و نصب میکنیم. پس از نصب، به منظور افزایش کارایی و بهبود تجربه توسعه، مجموعهای از افزونههای ضروری را به VS Code اضافه خواهیم کرد. این افزونهها شامل HTML CSS Support برای پشتیبانی کامل از زبانهای نشانهگذاری HTML و CSS، GitHub Theme برای بهرهمندی از تم ظاهری جذاب و کارآمد GitHub، Live Server برای مشاهدهی زنده تغییرات کد در مرورگر بدون نیاز به بهروزرسانی دستی و Live Sass Compiler جهت کامپایل خودکار کدهای Sass به CSS میشوند. استفاده از این افزونهها، فرآیند توسعه قالب وبسایت را به طور قابل توجهی تسریع و بهبود میبخشد و به خلق یک محصول با کیفیت حرفهای کمک شایانی میکند.
در مرحلهی بعد، ساختار فایلها و پوشههای پروژه را ایجاد میکنیم. این ساختار، سازماندهی کدها و منابع پروژه را تسهیل کرده و مدیریت پروژه را در مراحل بعدی توسعه سادهتر میکند. پس از ایجاد ساختار مورد نظر، پوشهی اصلی پروژه را به داخل VS Code وارد میکنیم. این کار میتواند از طریق روشهای مختلفی مانند باز کردن پوشه از طریق منوی File یا کشیدن و رها کردن پوشه در پنجرهی VS Code انجام شود.
در نهایت، به منظور شخصیسازی محیط کاری و افزایش راحتی کار با VS Code، روش تغییر فونت و تم ظاهری ویرایشگر را آموزش میدهیم. با انتخاب فونت و تم مناسب، میتوان محیط کاری را به گونهای تنظیم کرد که با سلیقه و نیازهای توسعهدهنده سازگار باشد و در نتیجه راندمان و سرعت کار را بهبود بخشید.
قسمت 2: دریافت آخرین نسخه بوت استرپ با npm، افزودن کتابخانه جی کوئری و ایجاد اولین فایل sass
برای آغاز پروژه و بهرهمندی از قابلیتهای قدرتمند فریمورک Bootstrap و کتابخانهی jQuery، نخست باید Node.js را بر روی سیستم خود نصب کنید. Node.js محیط اجرایی جاوااسکریپت در سمت سرور است که به ما اجازه میدهد از npm (Node Package Manager) برای مدیریت وابستگیهای پروژه استفاده کنیم. پس از نصب موفقیتآمیز Node.js، npm به طور خودکار در دسترس خواهد بود. با استفاده از npm، میتوانیم آخرین نسخه پایدار Bootstrap را دانلود و در پروژه خود یکپارچه کنیم. این کار به ما امکان دسترسی به مجموعهای گسترده از کامپوننتها، سبکها و ابزارهای آماده را میدهد که سرعت توسعه و کیفیت پروژه را به طور قابل توجهی افزایش میدهد.
در ادامه، کتابخانهی جاوااسکریپت jQuery را به پروژه اضافه میکنیم. jQuery یک کتابخانهی قدرتمند و پرکاربرد است که کار با DOM (Document Object Model) را بسیار سادهتر میکند. با افزودن jQuery به پروژه، میتوانیم به راحتی رویدادهای مرورگر را مدیریت کرده، عناصر HTML را دستکاری کنیم و انیمیشنها و جلوههای بصری را پیادهسازی نماییم. پس از اضافه کردن jQuery، باید آن را به درستی در فایلهای HTML پروژه خود فراخوانی (آدرسدهی) کنیم. این کار معمولاً با قرار دادن تگ `<script>` شامل آدرس فایل jQuery در بخش `<head>` یا `<body>` صورت میگیرد.
در آخرین مرحله، اولین فایل Sass خود را ایجاد و نحوهی کامپایل آن به CSS را آموزش خواهیم داد. Sass (Syntactically Awesome Style Sheets) یک پیشپردازندهی CSS قدرتمند است که به توسعهدهندگان اجازه میدهد با استفاده از ویژگیهای پیشرفتهای مانند متغیرها، میکسینها و توابع، کدهای CSS را به شکلی سازمانیافتهتر و قابل نگهداریتر بنویسند. پس از ایجاد فایل Sass، از یک کامپایلر Sass (مانند Sass یا Dart Sass) برای تبدیل کدهای Sass به CSS استفاده میکنیم تا مرورگرها بتوانند آن را تفسیر و رندر کنند. این فرایند به ما امکان میدهد از مزایای Sass برای مدیریت و سازماندهی سبکهای پروژه بهرهمند شویم و در عین حال از سازگاری کامل با مرورگرها اطمینان حاصل کنیم.
قسمت 3: دریافت تمامی آیکون های اختصاصی مربوط به دیجی کالا و تبدیل به فونت آیکون
در این بخش از آموزش، به مرحلهی هیجانانگیز تبدیل آیکونهای اختصاصی دیجیکالا به فونت آیکون میرسیم. این کار به شما امکان میدهد از این آیکونهای زیبا و منحصربهفرد در پروژههای خود به سادگی و با بالاترین کیفیت استفاده کنید.
ابتدا، نیاز به جمعآوری آیکونهای مورد نیاز از وبسایت دیجیکالا دارید. تمام آیکونها به صورت فایلهای SVG ارائه میشوند که فرمتی ایدهآل برای تبدیل به فونت آیکون هستند. برای دریافت آسانتر این آیکونها، از افزونههای مرورگر کروم یا فایرفاکس مانند “SVG Export” استفاده می کنیم. این افزونهها به شما امکان میدهند با یک کلیک ساده، آیکونهای SVG را از صفحه وب دیجیکالا ذخیره کنید.
پس از جمعآوری آیکونها، نوبت به تبدیل آنها به فونت آیکون میرسد. برای این کار از پلتفرم قدرتمند و پرکاربرد IcoMoon.io استفاده خواهیم کرد. IcoMoon ابزاری کاربرپسند با رابط گرافیکی ساده است که فرآیند تبدیل SVG به فونت آیکون را به سادگی انجام میدهد. آیکونهای SVG خود را به IcoMoon آپلود می کنیم، نامها و کدهای دلخواه خود را به آنها اختصاص می دهیم و در نهایت فونت آیکون مورد نظر خود را دانلود می کنیم.
در نهایت، فونت آیکون ایجاد شده حاوی آیکونهای دیجیکالا را به پروژه خود اضافه می کنیم.حالا دیگه با استفاده از CSS به راحتی میتونیم از این آیکونها در هر قسمتی از پروژه خود استفاده کنیم. پس از اضافه کردن فونت، حتماً یک تست سریع انجام میدیم تا از درستی نمایش و دسترسی به آیکونها اطمینان حاصل کنیم. با اطمینان از صحت عملکرد، می تونیم با خیالی راحت به مراحل بعدی پروژه خود بپردازیم.
با یادگیری این بخش، دیگر نیازی نیست نگران کیفیت و یکپارچگی آیکونها در پروژه خود باشید. با استفاده از فونت آیکون، از سرعت بارگذاری بالاتر، سازگاری با دستگاههای مختلف و ظاهر حرفهایتر پروژه خود لذت ببرید.
قسمت 4: افزودن فونت ایران یکان به پروژه و فراخوانی کردن فونت
در این بخش فونت ایران یکان با وزن های مختلف رو به پروژه اضافه می کنیم و همچنین یاد می گیرید که چطور با استفاده از سایت fontdrop.info به صورت آنلاین وزن فونت ها رو با دقت کامل بدست بیاورد، که زمانی که خواستیم فونت ایران یکان رو فراخوانی کنیم بدونیم که فونت هایی که داخل پوشه های مختلف هستش دارای چه وزنی ان که به درستی مقدار مناسب font-weight رو مشخص کنیم.
قسمت 5: ریست کردن استایل های پیش فرض یکسری از تگ های پرکاربرد
همانطور که می دونید یکسری از تگ های html دارای استایل های پیش فرضی هستن، مثلا تگ a وقتی فراخوانی میشه یک text decoration ای به خودش میگیره یا وقتی از تگ button استفاده می کنیم یک border و background پیش فرضی به خودش میگیره، اما در این دوره به استایل های پیش فرض این تگ ها نیاز نداریم پس همین ابتدا استایل های پیش فرض تگ های ul – ol – dd – button – input – textarea – a رو ریست می کنیم که جلوتر راحت تر تغیرات رو اعمال کنیم و استایل اختصاصی خودمون رو بدهیم.
قسمت 6: نحوه یافتن تمامی رنگ های اختصاصی یا سازمانی دیجی کالا و انتقال به پروژه
سایت دیجی کالا طبق یه نظم و قانون بندی خاصی پیش میره که این نظم به بخش رنگ های سازمانی دیجی کالا هم سرایت کرده. زمانی که گوشه و کنار سایت دیجی کالا رو مشاهده کنید خواهید دید که از ترکیب رنگی بسیار زیبایی استفاده کرده که برای انتخاب رنگ ها از تیم خلاق و حرفه ای استفاده میکنه تا این رنگ ها به ذهن من و شما بیشتر ثبت بشه و با دیدن یکسری از رنگ های رایج و متداول دیجی کالا یاد سایت دیجی کالا بیوفتیم.
و اما در این قسمت ابتدا یکی از المان های دیجی کالا رو انتخاب می کنیم تا ببینیم از چه رنگی استفاده کرده، حالا اگر بخواهیم تک تک المان ها رو مورد بررسی قرار بدیم و رنگ های مورد استفاده دیجی کالا رو یادداشت کنیم واقعا کار سختی هستش، با انتخاب اون المان متوجه می شویم که رنگ های دیجی کالا داخل یکسری متغیر هایی قرار داده شده که تیم توسعه دیجی کالا از اون متغیرهایی که ایجاد کرده در بخش های مختلف سایت استفاده میکنه که راحت تر بتونه مقدار داخل متغیر رو تغییر بده.
همانطور که گفته شد سایت دیجی کالا اصولی و حرفه ای پیاده سازی شده که برای بخش رنگ ها هم تیم توسعه دیجی کالا بشدت زمان گذاشته پس با توجه به این نظم خیلی راحت با استفاده از یکی از متغیر های دیجی کالا به کمک یه تکنیک خیلی ساده به تمامی رنگ های سازمانی یا اختصاصی سایت دیجی کالا دست پیدا می کنیم.
بعد از این که رنگ های سازمانی دیجی کالا مشخص شد، حالا خیلی راحت متغیرهای مربوطه خودمون رو برای بخش رنگ ها ایجاد می کنیم و مقدار رنگی دریافت شده رو داخل متغیر مربوطه قرار می دهیم تا در ادامه بتونیم از متغیر هایی که ایجاد کردیم استفاده کنیم
فصل 8 : تدوین و پیاده سازی مینی پروژه های کاربردی طراحی سایت
مینی پروژه 1: چگونه نوار آیکون افقی و عمودی بسازم ؟
یه نوار آیکون افقی و عمودی درست کن که کلا 5 تا آیکون باشه و این آیکون ها رو هم ( خانه _ جستجو _ ایمیل _ کره زمین _ سطل آشغال ) قرار بده و دارای فاصله مناسب بینشون باشه و آیکون خانه بصورت آکتیو باشه و رنگ پس زمینه اش سبز باشه و زمانی که کاربر موس اش رو روی هر کدوم از این آیکون ها برد پس زمینه اش مشکی بشه و با یک ترنزیشنی رنگ پس زمینه نمایش داده بشه.
مینی پروژه 2: چگونه یک آیکون منو (منو همبرگری) بسازم؟
یه آیکون منو یا همون منو همبرگری درست کن که دارای سه خط موازی روی هم دیگه با یه فاصله مشخص قرار گرفته باشن و رنگ خط اول زرد ، خط دوم مشکی ، خط سوم آبی باشه و زمانی که روی این منو همبرگری کلیک شد به شکل ضربدر در بیاد و وقتی روی ضبدر کلیک شد به همون حالت اول (سه خط موازی) در بیاد.
مینی پروژه 8: چگونه تغییر تبها هنگام قرار گرفتن ماوس روی آنها با استفاده از CSS و JavaScript رو ایجاد کنم؟
فضایی برای تب به صورت عمودی ایجاد کن و تعدادی آیتم برای تب قرار بده ، و در حالت اول هیچ محتوایی از تب ها نمایش داده نشود، زمانی که کاربر ماوس اش رو بر روی هر کدوم از تب ها برد محتوای مربوط به هر تب نمایش داده بشه.
مینی پروژه 9: چگونه منو ناوبری واکنش گرا با CSS و جاوا اسکریپت ایجاد کنم؟
ابتدا یک فضایی برای منوی ناوبری ایجاد کن و داخلش یک تعداد آیتم برای منو قرار بده (این منوی ناوبری به دیواره بالایی کاملا چسبیده باشه) حالا زمانی که عرض دستگاه کوچکتر از 600px شد آیکون مربوط به منوی موبایلی نمایش داده بشه و زمانی که کاربر بر روی آیکون کلیک کرد بتونه به صورت کشویی آیتم های مربوط به منو رو ببینه.
مینی پروژه 10: چگونه با جاوا اسکریپت یک منوی جستجو برای فیلتر کردن لینک ها ایجاد کنم؟
یک تعداد آیتم و یک فضایی ایجاد کن که کاربر بتونه عبارت مورد نظرشو جستجو کنه و برنامه رو طوری پیاده سازی کن که وقتی کاربر عبارتی رو داخل فضای مربوط وارد کرد اگر داخل اون آیتم ها عبارت جستجو شده وجود داشت نمایش داده بشه و اگر وجود نداشت تمامی آیتم ها نمایش داده نشوند، این پروژه طوری پیاده سازی بشه که به بزرگی و کوچکی حروف حساس نباشه.
مینی پروژه 11: چگونه یک منوی ناوبری واکنشگرا به همراه باکس جستجو ایجاد کنم؟
ابتدا یک فضایی برای منوی ناوبری ایجاد کن و داخلش یک تعداد آیتم برای منو و در سمت چپ این منو فضایی برای باکس جستجو قرار بده (این منوی ناوبری به دیواره بالایی کاملا چسبیده باشه) حالا زمانی که عرض دستگاه کوچکتر از 600px شد تمامی آیتم ها و باکس جستجو صد در صد عرض والدشون رو در بر بگیرن.
مینی پروژه 12: چگونه یک منوی ناوبری کناری ثابت با CSS ایجاد کنم؟
یک نوار کناری به صورت fixed شده ایجاد کن و داخل این نوار کناری یک تعداد آیتم های منو که به صورت لینک شده باشن رو قرار بده و در کنار این نوار کناری فضایی برای محتوا قرار بده و زمانی که کاربر اسکرول کرد این نوار کناری به صورت fixed شده باشه.
مینی پروژه 13: چگونه منوی کناری با قابلیت باز و بسته شدن به صورت انیمیشنی رو ایجاد کنم؟
فضایی برای آیکون منوی موبایلی ایجاد کن و زمانی که کاربر بر روی این آیکون کلیک کرد یک منوی ناوبری از سمت چپ صفحه ظاهر بشه و داخل این منو یک تعداد آیتم وجود داشته باشه و زمانی که رو آیکون ضربدر کلیک کرد اون منوی کناری با یک ترنزیشنی مخفی بشه.
مینی پروژه 14: چگونه یک منوی ناوبری کناری واکنش گرا با CSS ایجاد کنم؟
یک نوار کناری به صورت fixed شده ایجاد کن و داخل این نوار کناری یک تعداد آیتم های منو که به صورت لینک شده باشن رو قرار بده و زمانی که کاربر ماوس اش رو بر روی هر کدوم از آیتم ها برد رنگ پس زمینه اش تغییر پیدا کنه و در کنار این نوار کناری فضایی برای محتوا قرار بده و زمانی که کاربر اسکرول کرد این نوار کناری به صورت fixed شده باشه و زمانی که عرض دستگاه کوچکتر از 700px شد ، نوار کناری موقعیتش تغییر پیدا کنه و به قسمت فوقانی صفحه منتقل پیدا کنه و زمانی که عرض دستگاه کوچکتر از 400px شد هر کدوم از آیتم های منو 100% عرض رو در بر بگیره.
مینی پروژه 15: چگونه منوی ناوبری پوششی تمام صفحه با قابلیت باز و بسته شدن ایجاد کنم؟
فضایی برای آیکون منوی موبایلی ایجاد کن و زمانی که کاربر بر روی این آیکون کلیک کرد یک منوی ناوبری پوششی تمام صفحه ظاهر بشه و داخل این منو یک تعداد آیتم زیر هم دیگه در وسط وجود داشته باشه و زمانی که رو آیکون ضربدر کلیک کرد اون منوی پوششی تمام صفحه با یک ترنزیشنی ارتفاعش به صفر برسد در کل مخفی بشه.
مینی پروژه 16: چگونه دکمههای ناوبری کناری با قابلیت شناور شدن با CSS ایجاد کنم؟
4 تا دکمه به صورت لینک شده ایجاد کن با رنگ های متفاوت و این دکمه ها به دیواره سمت چپ پنجره مرورگر چسبیده باشن و طوری باشه که به داخل رفته باشن و زمانی که کاربر بر روی نیمه ای از بخش نمایش داده شده موس اش رو برد کل دکمه نمایش داده بشه و این نمایش داده شدن با یک ترنزیشنی انجام بشه.
مینی پروژه 17: چگونه یک منو قابل پیمایش افقی با CSS ایجاد کنم؟
یک تعداد فضا برای آیتم های منو ایجاد کن که به صورت لینک شده باشن و این آیتم ها در کنار هم دیگه با یک فاصله مشخصی قرار داشته باشن و فضای کلی در برگیرنده آیتم های منو در راستای افق اسکرول داشته باشه.
مینی پروژه 18: چگونه لینکهای ناوبری با خط زیرین (underline) با CSS ایجاد کنم؟
یک Navigation menu ایجاد کن که داخلش تعدادی آیتم وجود داشته باشه و زمانی که کاربر موس اش رو بر روی هر آیتم می برد یک خطی زیر اون آیتم کشیده بشه.
مینی پروژه 19: چگونه یک نوار ناوبری با عرض برابر ایجاد کنم؟
یک Navigation menu ایجاد کن که داخلش 4 آیتم با عرض های یکسان وجود داشته باشه و زمانی که عرض دستگاه کوچکتر از 500px شد هر کدام از این آیتم ها صد در صد والدشون رو در بر بگیره.
مینی پروژه 20: چگونه یک منو ناوبری ثابت با CSS ایجاد کنم؟
یک Navigation menu ایجاد کن که صد در صد عرض دستگاه رو در بر بگیره که داخلش یکسری آیتم های مربوط به منو باشه و این منوی ناوبری کاملا به صورت ثابت باشه.
مینی پروژه 21: چگونه نوار ناوبری کشویی هنگام اسکرول با CSS و JavaScript ایجاد کنم؟
منوی ناوبری ایجاد کن که دارای تعدادی آیتم باشه و در ابتدا وقتی صفحه لود میشه منو مخفی باشه و اما زمانی که کاربر به سمت پایین اسکرول کرد منو نمایش داده بشه که با بالا و پایین کردن اسکرول منو نمایش و مخفی بشه در واقع منوی ناوبری حالت کشویی پیدا کنه.
مینی پروژه 22: چگونه مخفی کردن منوی ناوبری با اسکرول به پایین با استفاده از CSS و جاوااسکریپت ایجاد کنم؟
منوی ناوبری ایجاد کن که دارای تعدادی آیتم باشه و در ابتدا وقتی صفحه لود میشه منو نمایش داده بشه و اما زمانی که کاربر به سمت پایین اسکرول کرد منو مخفی بشه که با بالا و پایین کردن اسکرول، منو نمایش/مخفی بشه.
مینی پروژه 23: چگونه با استفاده از CSS و جاوااسکریپت اندازه منوی ناوبری رو با اسکرول کردن تغییر دهم؟
منوی ناوبری ایجاد کن که به دیواره بالایی کاملا چسبیده باشه و این منو دارای تعدادی آیتم و فضایی برای لوگو باشه طرح رو طوری پیاده سازی کن که وقتی کاربر اسکرول رو بالا و پایین کرد محتویات داخل منو بزرگ و کوچک بشه در واقع اندازه اش تغییر پیدا کنه.
مینی پروژه 24: چگونه منوی ناوبری چسبنده رو با CSS ایجاد کنم؟
منوی ناوبری ایجاد کن که این منو دارای تعدادی آیتم باشه و این منو از دیواره بالایی صفحه فاصله داشته باشه حال زمانی که کاربر اسکرول کرد این منوی ناوبری وقتی به دیواره بالایی صفحه رسید تا زمانی که اسکرول به انتهای صفحه میرسه به صورت چسبنده باشه.
مینی پروژه 25: چگونه منو کشویی قابل کلیک با CSS و جاوا اسکریپت ایجاد کنم؟
منوی ناوبری ایجاد کن که به دیواره بالایی کاملا چسبیده باشه و تعدادی آیتم داخل این منوی ناوبری قرار بده و یکی از این آیتم ها دارای زیر منو (منوی کشویی) باشه که با کلیک بر روی آیتمی که دارای زیر منو هستش اون منوی کشویی نمایش/مخفی بشه و این قابلیت رو هم پیاده سازی کن که وقتی زیر منو نمایش داده میشه کاربر وقتی بر روی صفحه کلیک کرد اون منوی کشویی مخفی بشه.
مینی پروژه 40: چگونه با استفاده از CSS یک گالری تصویر با نوار اسکرول افقی ایجاد کنم؟
چهار فضا مربوط به تصویر ایجاد کن و طوری این تصاویر رو در کنار هم دیگه قرار بده که در راستای افق قرار بگیرن و زمانی که تصاویر از عرض صفحه خارج شد ، اسکرول در راستای افق بگیره.
مینی پروژه 45: چگونه روی تصویر، عنوانی را هنگام قرار گرفتن اشاره گر موس ایجاد کنم؟
فضایی برای تصویر ایجاد کن که وقتی موس بر روی تصویر رفت عنوانی با پس زمینه ای ظاهر بشه.
مینی پروژه 46: چگونه متن رو در موقعیت های مختلف تصویر قرار دهم؟
یک فضایی برای تصویر ایجاد کن که این تصویر صد در صد عرض والدش رو در بر بگیره و 5 تا عبارت کوتاه متنی ایجاد کن که به عنوان خواهر و برادر این تصویر باشن و هر کدوم از این عبارت متنی رو در یه گوشه ای از تصویر قرار بده مثلا : بالا سمت راست ، بالا سمت چپ ، پایین سمت راست ، پایین سمت چپ و وسط قرار بده.
مینی پروژه 47: چگونه با CSS یک تصویر پسزمینه تار (بلور) ایجاد کنم؟
یک تصویری رو در پس زمینه قرار بده که این تصویر کامل عرض و ارتفاع View Port رو در بر بگیره و بعدش این عکس رو بلور کن و روی عکس یک باکس مستطیل شکلی قرار بده که داخل این باکس هم عنوان وجود داشته باشه و هم فضایی برای پاراگراف و همچنین این باکس مستطیل شکل به صورت شفاف باشه.
مینی پروژه 48: چگونه آیتم هایی برای معرفی اعضای تیم بسازم؟
سه آیتم برای معرفی اعضای تیم ایجاد کن، که فضای مربوط به آیتم شامل تصویر ، نام ، عنوان شغلی ، سخنی از عضو تیم ایمیل و دکمه مشاهده نمونه کار باشه و این سه تا آیتم کنار هم دیگه قرار بگیرن و وقتی عرض دستگاه کوچکتر از 650px شد هر کدوم از آیتم ها صد در صد عرض دستگاه رو در بر بگیرن.
مینی پروژه 49: چگونه یک تصویر چسبنده موقع اسکرول کردن بسازم؟
طرحی رو ایجاد کن که از دو ستون تشکیل شده باشه که ستون سمت چپ متنی باشه و ستون سمت راست تصویر باشه و زمانی که کاربر اسکرول کرد تصویر از یک جا به بعد به صورت چسبان دربیاد .
مینی پروژه 50: چگونه یک تصویر رو به لرزش در بیارم؟
یک فضایی برای تصویر ایجاد کن، و طرح رو جوری پیاده سازی کن که وقتی کاربر موس اش رو بر روی تصویر برد تصویر به لرزش در بیاید و زمانی که موس از روی تصویر برداشته شد اون تکان خوردن متوقف شود.
مینی پروژه 72: چگونه با استفاده از CSS و جاوا اسکریپت، اسلایدر سفارشی رنج (محدوده) ایجاد کنم؟
یک input ای با تایپ range ایجاد کن و با استفاده از CSS سفارشی سازی اش کن جوری که عرض input صد در صد عرض صفحه رو در بر بگیره و رنگ پس زمینه این input رو تغییر بده و دستگیره هایی که برای جابجایی اسلایدر وجود داره رو دایره ای شکل اش کن و در حالت اول مقدار این input روی 50 باشه و با تغییر این اسلایدر مقدار گرفته بشه و در داخل یک تگ span ای نمایش داده بشه.
مینی پروژه 73: چگونه با استفاده از CSS،(ابزار راهنما) Tooltip ایجاد کنم؟
یک Tooltip یا همون ابزار راهنما ایجاد کن که وقتی کاربر موس اش رو بر روی عبارتی برد، یک باکس مستطیلی بالای متن ظاهر بشه و عبارتی داخل اون باکس مستطیلی نمایش داده بشه و زمانی که موس از روی عبارت متنی برداشته شد اون Tooltip مخفی بشه.
مینی پروژه 74: چگونه با استفاده از CSS یک پیشبارگذار (Preloader) ایجاد کنم؟
یک پیش بارگذار یا همون لودینگ دایره شکلی ایجاد کن که به صورت 360 درجه در حال چرخش باشه و بعد از مدت زمان 3 ثانیه این loader مخفی بشه و بعدش یک عبارت متنی ای از پایین به بالای صفحه به صورت انیمیشی ظاهر بشه.
مینی پروژه 76: چگونه یه متن شفاف که انگار از روی یه تصویر پسزمینه برش خورده و روی اون قرار گرفته رو ایجاد کنم؟
یک فضایی برای تصویر مشخص کن و بر روی تصویر عبارت متنی ای رو در وسط قرار بده و متن طوری بشه که شفافه و انگار از روی یه تصویر برش خورده و روی اون قرار گرفته باشه.
مینی پروژه 82: چگونه با استفاده از CSS و جاوا اسکریپت حالت دارک مود رو ایجاد کنم؟
یه فضایی برای عنوان ، عبارت متنی و دکمه مشخص کن و طوری باشه که وقتی کاربر بر روی دکمه کلیک کرد امکان تغییر حالت روشن به تاریک و برعکس فراهم باشه در کل با کلیک کردن روی دکمه کلاسی به تگ body اضافه بشه و در صورت موجود بودن حذف بشه و اون کلاسی که اضافه میشه دارای یکسری استایل هایی باشه.
مینی پروژه 83: چگونه با استفاده از CSS اشکال مختلف هندسی رو ایجاد کنم؟
اشکال هندسی مثلث سمت (بالا، پایین، راست، چپ)، متوازی الاضلاع، مستطیل، ذوزنقه، بیضی، دایره و مربع رو ایجاد کن و این اشکال هندسی در وسط صفحه و زیر هم دیگه با یک فاصله مشخصی قرار داشته باشن.
مینی پروژه 86: چگونه با استفاده از فونت آیکونها جلوههای متحرک ایجاد کنم؟
با استفاده از فونت آیکون های مربوط به مرحله به مرحله شارژ شدن باطری، انیمیشنی رو ایجاد کن که انگار در حال شارژ شدن می باشد در واقع شارژ شدن یک باتری رو شبیهسازی کن.
مینی پروژه 87:چگونه با استفاده از جاوااسکریپت یک تایمر شمارش معکوس بسازم؟
مینی پروژه 88: چگونه افکت تایپ خودکار متن با استفاده از جاوا اسکریپت رو ایجاد کنم؟
یک دکمه و یک فضا برای عبارت متنی ای ایجاد کن و با استفاده از جاوا اسکریپت کاری کن که وقتی کاربر بر روی دکمه کلیک کرد یه عبارتی متنی ای به صورت خودکار (کارکتر به کارکتر) داخل اون فضای مشخص شده با یک افکتی تایپ بشه.
مینی پروژه 89:چگونه یک نمای لیست شبکهای (یا شبکهای لیستی) ایجاد کنم؟
مینی پروژه 90:چگونه با HTML و جاوااسکریپت یک مبدل واحد وزن بسازم؟
نظر/پرسش/پیشنهاد شما
برای ارسال نظر لطفا ابتدا وارد شوید.
soheil
1403/07/09کجا باید آموزش را دانلود کنیم ؟
علیرضا روشنایی
1403/07/09درود وقت بخیر .
دوره در حال برگذاری می باشه، بعد از تکمیل اطلاع رسانی میشه