دوره برنامه نویسی وب آیولرن

🔥 ایده‌های برتر دوره‌ی قبلی مسابقات چه بوده؟ 🔺این ویدئو را تا آخر مشاهده کن تا با بخشی از ایده‌های برندگان دوره‌ی دوم مسابقات آیوکاپ آشنا بشی. ❗️ از ایده‌پردازی و مطرح‌کردن ایده‌ات نگران نباشی و بدون که اتفاقات بزرگ، می‌تونه فقط با یک ایده شروع بشه. 📌 جهت شرکت در مسابقه وارد سایت آیوکاپ شوید👇 http://aiocup.com

🔥برای انجام چالش‌ها آماده بشید🔥 🌀 پروژه‌های این دوره از مسابقات آیوکاپ نسبت به دوره قبل کمی متفاوت شده و خیلی نزدیک به پروژه‌های واقعی هست. 🌀قبل از انجام پروژه‌های برنامه‌برنامه‌نویسی، حتما مبانی زبان‌هایی مثل php را مرور کنید و با ذهنی آماده، چالش موردنظرتون را انتخاب کنید. 📌 جهت شرکت در مسابقه وارد سایت آیوکاپ شوید👇 http://aiocup.com

🔥 آیولرنی‌های عزیز چهارشنبه سوریتون مبارک🔥 💥 امیدوارم از این روزهای آخر سال حسابی استفاده کنید و روزهای خوبی رو داشته باشید. 💥 مواظب خودتون باشید و کلی خوش بگذرونید😍

🔥نحوه‌ی شرکت در سومین دوره‌ی مسابقات کشوری آیولرن🔥 💎 مسابقات آیوکاپ، در دو بخش ایده‌ها و چالش‌های برنامه‌نویسی و هوش‌مصنوعی برگزار می‌شود. 💎 برای شرکت در هر بخش، می‌بایست در مرحله‌ی اول ثبت‌نام کنید. 💎 حتما دستورالعمل‌های هر بخش را مطالعه کنید و طبق قوانین و شیوه‌نامه‌ها طرح خود را ارسال کنید. 💎 زمان ارسال طرح‌ها در سایت آیوکاپ: از ۱۳ام فروردین تا ۱۰ام اردیبهشت ماه ۱۴۰۳ 💎 اختتامیه مسابقه و اعلام نتایج: ۲۱ام اردیبهشت ماه ۱۴۰۳ ❗️توجه کنید: فرصت ثبت‌نام و ظرفیت شرکت در مسابقه محدود است.❗️ 📌جهت ثبت‌نام در مسابقه‌ی کشوری برنامه‌نویسی و هوش‌مصنوعی آیولرن وارد سایت آیوکاپ شوید👇 http://aiocup.com

💎 سومین دوره‌ی مسابقات کشوری آیوکاپ شنبه ۲۰ اسفند 💎 🌀آیوکاپ برگزار کننده‌ی مسابقات کشوری خلاقیت، نوآوری، و کارآفرینی در حوزه‌ی برنامه‌نویسی و هوش‌مصنوعی در ایران ♨️شرکت‌ها و سازمان‌های بسیار بزرگی در سطح بین‌المللی و داخلی، حامیان مسابقات کشوری آیوکاپ شدند!

گوگل حامی مسابقات آیولرن شد🔥 برای اولین بار در ایران در یک مسابقات کشوری در حوزه هوش مصنوعی و برنامه نویسی، شرکت گوگل از طریق انجمن اختراعات ترکیه و برگزارکنندگان مسابقات 1idea1world ترکیه از مسابقات آیولرن به نام آیوکاپ حمایت کرده است. مسابقات آیوکاپ از ۲۰ اسفند شروع خواهد شد. آیولرن، به تمامی دانشجویان و شرکت کنندگان آیوکاپ تبریک می‌گوید❤️ 💎 aiocup.com

❕تفاوت Box و Drop shadow در css: ⚠️ تصویر سمت چپ:

img{
    box-shadow: 10px 7px 20px orange;
}

⚠️ تصویر سمت راست:

img{
filter: drop-shadow(10px 7px 20px orange);
}

همانطور که ذکر شد، در تصاویر png برای افزودن سایه به تصویر، از دستور filter برای ایجاد سایه استفاده میکنیم! ==..==..==..==..==..==..==..==..==..==..==.. ✅کانال پشتیبانی برنامه نویسی وب آیولرن ✨ @aiolearn

🔥موفقیت یک شبه اتفاق نمیفته 💢 امشب ساعت ۲۰، قراره راهکارهایی برای موفق شدن یاد بگیری که کمتر جایی ازش صحبت می‌شه. ❗️لایو اسکای‌روم، ساعت ۲۰ را از دست نده❗️ 💎 لینک ورود به لایو👇 https://www.skyroom.online/ch/aiolearn/shuttle

⁉️ آیا می‌دانستید که می‌توانید پیشخوان وردپرس خود را عوض کنید؟؟! ⚠️ اگر از پیشخوان ساده وردپرس خسته شدید میتوانید از فایل افزونه زیر استفاده کنید و پیشخوان خود را زیباتر کنید نحوه استفاده: از قسمت افزونه ها روی گزینه "افزودن افزونه تازه" کلیک کنید و گزینه "بارگذاری افزونه" کلیک کنید و فایل زیر را آپلود کنید و در ادامه افزونه را فعال کنید از پیشخوان جدید وردپرس لذت ببرید😍 ==..==..==..==..==..==..==..==..==..==..==.. ✅کانال پشتیبانی برنامه نویسی وب آیولرن ✨ @aiolearn

⭕️نحوه نمایش ایموجی در html: ❕هر ایموجی دارای کد خاص خود است که با استفاده که از کد htmlای ایموجی، میتوان در سایت نمایش داد. به عنوان مثال:

<p>&#x1F354</p>
<p>&#x1F33A</p>
<p>&#x1F389</p>
<p>&#x1F60A</p>
<p>&#x2764</p>

نتیجه: 1. 🖤 : 🍔 2. 😊 : 😊 3. 🎉 : 🎉 4. 🌺 : 🌺 5. 🍔 : 🍔 برای پیدا کردن ایموجی های بیشتر میتوانید به سایت زیر مراجعه کنید و از ایموجی ها لذت ببرید: https://symbl.cc/en/emoji/ ==..==..==..==..==..==..==..==..==..==..==.. ✅کانال پشتیبانی برنامه نویسی وب آیولرن ✨ @aiolearn

❕اگر میخواهید وقتی یک متن را select میکنید و رنگ پس زمینه متن تغییر کند، با استفاده از ::selection در css می‌توانید این کار جذاب را انجام دهید:

    <div class="duv_slec">
        <h1>
            عنوان
        </h1>
        <p>لورم ایپسوم متنردهای اصلی، و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.</p>
    </div>

     ::selection{
            color: #fff;
            background: rgba(114, 52, 176, 0.779);
        }

==..==..==..==..==..==..==..==..==..==..==.. ✅کانال پشتیبانی برنامه نویسی وب آیولرن ✨ @aiolearn

💬 نحوه ایجاد متن متحرک در وبسایت: با استفاده از دستور marquee در html می‌توانید متن را از سمت چپ به راست یا برعکس حرکت دهید! برای انجام این کار میتوانید از کد زیر استفاده کنید:

<marquee behavior="" direction="right">
        <h1>
            We are aiolearn family!
        </h1>
</marquee>

⚠️نحوه تعریف متغیر در فایل CSS:

 <style>
         :root{
            --name:rgb(19, 128, 152) ;
         }
        h1{
            color:var(--name);
        }
    </style>

   <div class="d1">
        <h1>سلام</h1>
    </div>

ما ابتدا با استفاده از دستور root یک متغیر را تعریف میکنیم که داخل متغیر، یک کد رنگی، اندازه و ... را قرار میدیم. و بعد با استفاده از دستور var در css متغیر را فراخوانی میکنیم.

🎨 ساخت پالت های رنگی جذاب و جدید برای UI و UX ❕با استفاده از این ابزار میتونید ترکیب های رنگی جدید بسازید و توی موارد مختلفی برای ساخت وب اپلیکیشن ها و طراحی هایتون ازشون استفاده کنید ( برای ترکیب رنگ میتونید از قسمت MIX رنگ های جدید رو اضافه کنید یا رنگ های موجود رو تغییر بدید تا ترکیب رنگی جدید بدست بیاد) ‼️آدرس سایت: https://hue.tools

❗️آموزش تغییر آیکون موس در html و css: نکته: شما برای اجرای این کار نیاز به عکس با پسوند cur دارید. میتوانید از طریق سایت زیر عکس های png و jpg خود را به cur تبدیل کنید👇 https://converter.11zon.com/fa/png-to-cur بعد از تبدیل فرمت عکس به cur با استفاده از دستور زیر، میتوانید آیکون موس خود را در سایت تغییر دهید:

body {
  cursor: url("آدرس عکس با پسوند cur") , default !important;
}

کد های جاوااسکریپت:

window.onscroll = function() {updateProgressBar()};

function updateProgressBar() {
  var documentHeight = document.body.scrollHeight - window.innerHeight;

  var scrollHeight = window.pageYOffset 

  var progress = (scrollHeight / documentHeight) * 100;

  document.getElementById("myBar").style.width = progress + "%";
}

💥 آموزش‌های عمومی آیولرن 💥 ساخت اسکرول نوبار ساده با HTML , CSS , JAVASCRIPT : شما اول نیاز دارید که میزان اسکرول صفحه رو با جاوااسکریپت بدست بیاورید تا طبق اون مقدار، اندازه اسکرول نوبار تغییر کند

<div class="nav">
        <div class="nav-container">
            <div class="nav-bar" id="myBar"></div>
        </div>
    </div>
    
    <div class="mtn">
        <!-- این متن را به مقدار زیادی تکرار کنید تا صفحه اسکرول شود -->
        <h3>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است.</h3>
    </div>

کد های css:

body{
    margin: 0;
}

.nav-container {
    width: 100%;
    height: 12px; /* ارتفاع نوار پیشرفت */
    background-color: #b9b9b9;
}

.nav-bar {
  height: 100%;
  background-color: #265683; /* رنگ نوار پیشرفت */
  width: 0%;
}

.nav{
    position: fixed;
    top: 0px;
    height: 50px;
    background-color: orange;
    width: 100%;
}

.mtn{
    text-align: center;
}