This media is not supported in your browser
VIEW IN TELEGRAM
🔥 یه ایده جدید دارم برای آموزش بعدی:
میخوام یه افکت حاشیه الکتریکی (برقزنان) بسازم با HTML، CSS و کمی SVG — افکتی که میتونی تو کارتها یا باکسهای خاص سایت استفاده کنی 😎
اما قبل از اینکه ضبطش کنم،
میخوام بدونم 👇
📣 دوست داری آموزش کاملش ضبط بشه؟
اگه نظرت مثبته، با ریاکشن 👍 یا ❤️ نشون بده
تا اگه استقبال شد، آموزش رو ضبط کنم و توی یوتیوب بذارم 💪
https://www.youtube.com/post/UgkxOuBXTUPus468jhmCZ3Ai-99cWz31JqDT
میخوام یه افکت حاشیه الکتریکی (برقزنان) بسازم با HTML، CSS و کمی SVG — افکتی که میتونی تو کارتها یا باکسهای خاص سایت استفاده کنی 😎
اما قبل از اینکه ضبطش کنم،
میخوام بدونم 👇
📣 دوست داری آموزش کاملش ضبط بشه؟
اگه نظرت مثبته، با ریاکشن 👍 یا ❤️ نشون بده
تا اگه استقبال شد، آموزش رو ضبط کنم و توی یوتیوب بذارم 💪
https://www.youtube.com/post/UgkxOuBXTUPus468jhmCZ3Ai-99cWz31JqDT
❤9👍2
از اینجا سایت حرفهای بساز! طراحی خدمات و محصولات سایت تحویل غذا 🚀
در این جلسه از پروژه طراحی قالب تحویل غذا، یاد میگیریم چطور بخش خدمات (چگونه کار میکند؟) و منوی محصولات یا محبوبترینها رو فقط با HTML, CSS و JS طراحی کنیم.
در این بخش تمرکز ما روی طراحی باکسهای واکنشگرا، افکتهای Hover و چیدمان حرفهای کارتها است تا ظاهر قالب دقیقاً مثل سایتهای حرفهای تحویل غذا بشه.
🔸 ویژگیهای این جلسه:
طراحی بخش خدمات با چیدمان سهستونه
طراحی کارتهای محصول با دکمه و قیمت
واکنشگرا کردن منو برای موبایل
استفاده از CSS Grid و Flexbox
آماده برای اضافه کردن به قالب نهایی
https://youtu.be/X8GwXmsWatM?si=1I_nh73UMUH-RUhk
🎓 اگر جلسه اول رو ندیدی، از اینجا شروع کن 👇
👉 [لینک جلسه اول]
https://youtu.be/aCWbgJN_rvk?si=jQNzTaxugpT_wHKf
🎓 اگر جلسه دوم رو ندیدی، از اینجا شروع کن 👇
👉 [لینک جلسه دوم ]
https://youtu.be/AuyU3hFqTNU?si=Agsivx43ZZwxmcea
در این جلسه از پروژه طراحی قالب تحویل غذا، یاد میگیریم چطور بخش خدمات (چگونه کار میکند؟) و منوی محصولات یا محبوبترینها رو فقط با HTML, CSS و JS طراحی کنیم.
در این بخش تمرکز ما روی طراحی باکسهای واکنشگرا، افکتهای Hover و چیدمان حرفهای کارتها است تا ظاهر قالب دقیقاً مثل سایتهای حرفهای تحویل غذا بشه.
🔸 ویژگیهای این جلسه:
طراحی بخش خدمات با چیدمان سهستونه
طراحی کارتهای محصول با دکمه و قیمت
واکنشگرا کردن منو برای موبایل
استفاده از CSS Grid و Flexbox
آماده برای اضافه کردن به قالب نهایی
https://youtu.be/X8GwXmsWatM?si=1I_nh73UMUH-RUhk
🎓 اگر جلسه اول رو ندیدی، از اینجا شروع کن 👇
👉 [لینک جلسه اول]
https://youtu.be/aCWbgJN_rvk?si=jQNzTaxugpT_wHKf
🎓 اگر جلسه دوم رو ندیدی، از اینجا شروع کن 👇
👉 [لینک جلسه دوم ]
https://youtu.be/AuyU3hFqTNU?si=Agsivx43ZZwxmcea
YouTube
از اینجا سایت حرفهای بساز! طراحی خدمات و محصولات سایت تحویل غذا 🚀
در این جلسه از پروژه طراحی قالب تحویل غذا، یاد میگیریم چطور بخش خدمات (چگونه کار میکند؟) و منوی محصولات یا محبوبترینها رو فقط با HTML, CSS و JS طراحی کنیم.
در این بخش تمرکز ما روی طراحی باکسهای واکنشگرا، افکتهای Hover و چیدمان حرفهای کارتها است تا…
در این بخش تمرکز ما روی طراحی باکسهای واکنشگرا، افکتهای Hover و چیدمان حرفهای کارتها است تا…
❤6
menu.zip
1.7 KB
فایل تمرین این جلسه
❤️ فراموش نکن:
لایک 👍 + نظر 💬 + اشتراکگذاری 🔁
باعث میشه آموزشهای بعدی سریعتر منتشر بشن ✨
https://youtu.be/X8GwXmsWatM?si=j0L7o1xhQRgAUpVa
❤️ فراموش نکن:
لایک 👍 + نظر 💬 + اشتراکگذاری 🔁
باعث میشه آموزشهای بعدی سریعتر منتشر بشن ✨
https://youtu.be/X8GwXmsWatM?si=j0L7o1xhQRgAUpVa
❤5
ساخت کتاب سهبعدی فقط با HTML, CSS و JS 😍 | آموزش کامل و پروژهمحور برای طراحان وب
در این آموزش پروژهمحور یاد میگیری چطور فقط با HTML، CSS و JS یک کتاب سهبعدی حرفهای بسازی!
اگر عاشق طراحی وب هستی و میخوای مهارتت رو بالا ببری، حتماً تا آخر ویدیو رو ببین ❤️
https://youtu.be/Py_QTVgtj7U?si=Ss-LJRpBBJp6Sre-
در این آموزش پروژهمحور یاد میگیری چطور فقط با HTML، CSS و JS یک کتاب سهبعدی حرفهای بسازی!
اگر عاشق طراحی وب هستی و میخوای مهارتت رو بالا ببری، حتماً تا آخر ویدیو رو ببین ❤️
https://youtu.be/Py_QTVgtj7U?si=Ss-LJRpBBJp6Sre-
❤7
pure css 3d-file.zip
6.4 KB
فایل تمرین این جلسه
❤️ فراموش نکن:
لایک 👍 + نظر 💬 + اشتراکگذاری 🔁
باعث میشه آموزشهای بعدی سریعتر منتشر بشن ✨
https://youtu.be/Py_QTVgtj7U?si=Ss-LJRpBBJp6Sre-
❤️ فراموش نکن:
لایک 👍 + نظر 💬 + اشتراکگذاری 🔁
باعث میشه آموزشهای بعدی سریعتر منتشر بشن ✨
https://youtu.be/Py_QTVgtj7U?si=Ss-LJRpBBJp6Sre-
❤7👍1
🎉 ۶۰۰ نفر شدیم! 🎉
باورم نمیشه 😍 کانال تلگراممون حالا ۶۰۰ تا همراه با انگیزه و پرانرژی داره!
از روزی که شروع کردیم تا الان، هر لایک، ریاکشن و نظری که گذاشتین باعث شد انگیزه بگیرم و آموزشهای بیشتری بسازم 💪
📺 راستی اگه هنوز کانال یوتیوب رو دنبال نکردین، اونجا آموزشهای کامل HTML، CSS و پروژههای کاربردی مرحلهبهمرحله قرار میدم.
میتونید از همینجا برید و ویدیوها رو ببینید 👇
🔗 لینک کانال یوتیوب
https://www.youtube.com/@replywp
❤️ ممنون از حمایتهاتون، چون بدون شما این مسیر ادامه پیدا نمیکرد.
بریم که مسیر یادگیریمون رو تا ۱۰۰۰ نفر ادامه بدیم! 🚀
#HTML #CSS #طراحی_وب #آموزش
باورم نمیشه 😍 کانال تلگراممون حالا ۶۰۰ تا همراه با انگیزه و پرانرژی داره!
از روزی که شروع کردیم تا الان، هر لایک، ریاکشن و نظری که گذاشتین باعث شد انگیزه بگیرم و آموزشهای بیشتری بسازم 💪
📺 راستی اگه هنوز کانال یوتیوب رو دنبال نکردین، اونجا آموزشهای کامل HTML، CSS و پروژههای کاربردی مرحلهبهمرحله قرار میدم.
میتونید از همینجا برید و ویدیوها رو ببینید 👇
🔗 لینک کانال یوتیوب
https://www.youtube.com/@replywp
❤️ ممنون از حمایتهاتون، چون بدون شما این مسیر ادامه پیدا نمیکرد.
بریم که مسیر یادگیریمون رو تا ۱۰۰۰ نفر ادامه بدیم! 🚀
#HTML #CSS #طراحی_وب #آموزش
❤16
راز طراحی بخش نظرات کاربران با HTML CSS JS و Swiper فاش شد!
در این جلسه از پروژه طراحی قالب تحویل غذا 🍔، بخش نظرات کاربران (User Reviews) رو طراحی میکنیم.
در این آموزش یاد میگیری چطور با HTML, CSS و کتابخانه Swiper JS یک اسلایدر زیبا و واکنشگرا برای نمایش نظرات کاربران بسازی ⭐️
https://youtu.be/qCCt8HkPE0w?si=2YqDAqNP20kfjyzz
در این جلسه از پروژه طراحی قالب تحویل غذا 🍔، بخش نظرات کاربران (User Reviews) رو طراحی میکنیم.
در این آموزش یاد میگیری چطور با HTML, CSS و کتابخانه Swiper JS یک اسلایدر زیبا و واکنشگرا برای نمایش نظرات کاربران بسازی ⭐️
https://youtu.be/qCCt8HkPE0w?si=2YqDAqNP20kfjyzz
YouTube
راز طراحی بخش نظرات کاربران با HTML CSS JS و Swiper فاش شد!
در این جلسه از پروژه طراحی قالب تحویل غذا 🍔، بخش نظرات کاربران (User Reviews) رو طراحی میکنیم.
در این آموزش یاد میگیری چطور با HTML, CSS و کتابخانه Swiper JS یک اسلایدر زیبا و واکنشگرا برای نمایش نظرات کاربران بسازی ⭐
🎓 اگر جلسه اول رو ندیدی، از اینجا…
در این آموزش یاد میگیری چطور با HTML, CSS و کتابخانه Swiper JS یک اسلایدر زیبا و واکنشگرا برای نمایش نظرات کاربران بسازی ⭐
🎓 اگر جلسه اول رو ندیدی، از اینجا…
❤3🔥1
part-04-file.zip
1.9 KB
فایل تمرین این جلسه
❤️ فراموش نکن:
لایک 👍 + نظر 💬 + اشتراکگذاری 🔁
باعث میشه آموزشهای بعدی سریعتر منتشر بشن ✨
https://youtu.be/qCCt8HkPE0w?si=E6j0WmDOj1eCLzzu
❤️ فراموش نکن:
لایک 👍 + نظر 💬 + اشتراکگذاری 🔁
باعث میشه آموزشهای بعدی سریعتر منتشر بشن ✨
https://youtu.be/qCCt8HkPE0w?si=E6j0WmDOj1eCLzzu
❤4🥰1
🎓 اگر جلسه اول رو ندیدی، از اینجا شروع کن 👇
👉 [لینک جلسه اول]
https://youtu.be/AuyU3hFqTNU?si=Agsivx43ZZwxmcea
🎓 اگر جلسه دوم رو ندیدی، از اینجا شروع کن 👇
👉 [لینک جلسه دوم ]
https://youtu.be/aCWbgJN_rvk?si=jQNzTaxugpT_wHKf
🎓 اگر جلسه دوم رو ندیدی، از اینجا شروع کن 👇
👉 [لینک جلسه سوم ]
https://youtu.be/X8GwXmsWatM?si=1I_nh73UMUH-RUhk
👉 [لینک جلسه اول]
https://youtu.be/AuyU3hFqTNU?si=Agsivx43ZZwxmcea
🎓 اگر جلسه دوم رو ندیدی، از اینجا شروع کن 👇
👉 [لینک جلسه دوم ]
https://youtu.be/aCWbgJN_rvk?si=jQNzTaxugpT_wHKf
🎓 اگر جلسه دوم رو ندیدی، از اینجا شروع کن 👇
👉 [لینک جلسه سوم ]
https://youtu.be/X8GwXmsWatM?si=1I_nh73UMUH-RUhk
❤3👍2
🔥 به نظرت این کارت محصول ارزش ضبط آموزش داره؟ 🔥
همین طرح خفن رو فقط با HTML و CSS طراحی کردم 😍
هم ریسپانسیوه، هم افکتهای جذاب داره، هم طراحیاش تمیز و حرفهایه 💪
میخوام بدونم اگه شما هم دوست دارید آموزش کاملش رو ضبط کنم و داخل کانال یوتیوب بذارم،
حتماً با ریاکشن ❤️ یا 🔥 به من بگید تا برم سراغ ضبطش 🎥
🧠 نظرتون خیلی مهمه چون باعث میشه آموزشهایی بسازم که واقعاً دلتون بخواد 👇
https://www.youtube.com/post/UgkxDwhU51Gg91Rvu3TNXJefrzWn-3OnvaPe
همین طرح خفن رو فقط با HTML و CSS طراحی کردم 😍
هم ریسپانسیوه، هم افکتهای جذاب داره، هم طراحیاش تمیز و حرفهایه 💪
میخوام بدونم اگه شما هم دوست دارید آموزش کاملش رو ضبط کنم و داخل کانال یوتیوب بذارم،
حتماً با ریاکشن ❤️ یا 🔥 به من بگید تا برم سراغ ضبطش 🎥
🧠 نظرتون خیلی مهمه چون باعث میشه آموزشهایی بسازم که واقعاً دلتون بخواد 👇
https://www.youtube.com/post/UgkxDwhU51Gg91Rvu3TNXJefrzWn-3OnvaPe
❤12🔥2👎1
آموزش ساخت حاشیه الکتریکی (Neon Border) با HTML + CSS + SVG — بدون JS
آموزش کامل ساخت حاشیه الکتریکی (Neon Border) با فقط HTML + CSS + SVG — سریع، ریسپانسیو و بدون جاوااسکریپت. مناسب کارتها، هِروها و پنلهای سایت.
در این ویدیو از صفر تا صد یک افکت مرز نئونی و متحرک میسازیم: قرار است SVG برای شکل و فیلترها، و CSS برای رنگدهی، Glow و انیمیشن استفاده شود. کدها ساده و قابل استفاده دوباره (component) هستند و بهینه برای موبایل در توضیحات قرار گرفتهاند.
آنچه در این آموزش یاد میگیرید:
ساختار HTML ساده برای کارت/باکس
اضافه کردن SVG (stroke, filter, noise)
استایلدهی glow و animation با CSS
بهینهسازی برای موبایل و عملکرد (بدون JS)
تبدیل به کامپوننت قابل استفاده مجدد
حتماً با ریاکشن ❤️ یا 🔥 به من بگید این آموزش کاربردی بوده یا نه
https://youtu.be/OXLt2Jf7NzA?si=gY463oHCN4oUNGns
آموزش کامل ساخت حاشیه الکتریکی (Neon Border) با فقط HTML + CSS + SVG — سریع، ریسپانسیو و بدون جاوااسکریپت. مناسب کارتها، هِروها و پنلهای سایت.
در این ویدیو از صفر تا صد یک افکت مرز نئونی و متحرک میسازیم: قرار است SVG برای شکل و فیلترها، و CSS برای رنگدهی، Glow و انیمیشن استفاده شود. کدها ساده و قابل استفاده دوباره (component) هستند و بهینه برای موبایل در توضیحات قرار گرفتهاند.
آنچه در این آموزش یاد میگیرید:
ساختار HTML ساده برای کارت/باکس
اضافه کردن SVG (stroke, filter, noise)
استایلدهی glow و animation با CSS
بهینهسازی برای موبایل و عملکرد (بدون JS)
تبدیل به کامپوننت قابل استفاده مجدد
حتماً با ریاکشن ❤️ یا 🔥 به من بگید این آموزش کاربردی بوده یا نه
https://youtu.be/OXLt2Jf7NzA?si=gY463oHCN4oUNGns
YouTube
آموزش افکت الکتریکی حرفهای با CSS | بدون هیچ کتابخانهای UI خودت رو بساز!
آموزش کامل ساخت حاشیه الکتریکی (Neon Border) با فقط HTML + CSS + SVG — سریع، ریسپانسیو و بدون جاوااسکریپت. مناسب کارتها، هِروها و پنلهای سایت.
در این ویدیو از صفر تا صد یک افکت مرز نئونی و متحرک میسازیم: قرار است SVG برای شکل و فیلترها، و CSS برای رنگدهی،…
در این ویدیو از صفر تا صد یک افکت مرز نئونی و متحرک میسازیم: قرار است SVG برای شکل و فیلترها، و CSS برای رنگدهی،…
❤7
electric-border-file.zip
5.2 KB
فایل تمرین این جلسه
❤️ فراموش نکن:
لایک 👍 + نظر 💬 + اشتراکگذاری 🔁
باعث میشه آموزشهای بعدی سریعتر منتشر بشن ✨
https://youtu.be/OXLt2Jf7NzA?si=gY463oHCN4oUNGns
❤️ فراموش نکن:
لایک 👍 + نظر 💬 + اشتراکگذاری 🔁
باعث میشه آموزشهای بعدی سریعتر منتشر بشن ✨
https://youtu.be/OXLt2Jf7NzA?si=gY463oHCN4oUNGns
👍7❤1
از صفر تا صد: فرم ورود Glassmorphism با دکمه نمایش رمز 👁
در این ویدیو یاد میگیری چطور با HTML، CSS و JavaScript یه فرم ورود شیشهای جذاب (Glassmorphism) بسازی که حتی دکمه نمایش رمز عبور هم داره 👁
این پروژه هم سادهست، هم کاربردی و ظاهرش کاملاً مدرن و حرفهایه!
🔥 مناسب برای تمرین طراحی وب و اضافه کردن به رزومه یا پروژههات
📁 توی آموزش مرحلهبهمرحله یاد میگیری:
ساخت فرم لاگین با ساختار HTML
طراحی افکت شیشهای با CSS (Glassmorphism)
افزودن قابلیت نمایش/مخفی کردن رمز عبور با JS
نکات حرفهای برای زیباسازی و انیمیشن
👇 اگر آموزشهای بیشتر از این سبک دوست داری، با لایک و اشتراکگذاری ویدیو حمایت کن ❤️
و یادت نره توی کامنت بنویسی:
https://youtu.be/u-OEs8t6SAs?si=hbyn5dSpow3tbIHi
در این ویدیو یاد میگیری چطور با HTML، CSS و JavaScript یه فرم ورود شیشهای جذاب (Glassmorphism) بسازی که حتی دکمه نمایش رمز عبور هم داره 👁
این پروژه هم سادهست، هم کاربردی و ظاهرش کاملاً مدرن و حرفهایه!
🔥 مناسب برای تمرین طراحی وب و اضافه کردن به رزومه یا پروژههات
📁 توی آموزش مرحلهبهمرحله یاد میگیری:
ساخت فرم لاگین با ساختار HTML
طراحی افکت شیشهای با CSS (Glassmorphism)
افزودن قابلیت نمایش/مخفی کردن رمز عبور با JS
نکات حرفهای برای زیباسازی و انیمیشن
👇 اگر آموزشهای بیشتر از این سبک دوست داری، با لایک و اشتراکگذاری ویدیو حمایت کن ❤️
و یادت نره توی کامنت بنویسی:
https://youtu.be/u-OEs8t6SAs?si=hbyn5dSpow3tbIHi
YouTube
آموزش طراحی فرم ورود با HTML و CSS
در این ویدیو یاد میگیری چطور با HTML، CSS و JavaScript یه فرم ورود شیشهای جذاب (Glassmorphism) بسازی که حتی دکمه نمایش رمز عبور هم داره 👁️
این پروژه هم سادهست، هم کاربردی و ظاهرش کاملاً مدرن و حرفهایه!
🔥 مناسب برای تمرین طراحی وب و اضافه کردن به رزومه…
این پروژه هم سادهست، هم کاربردی و ظاهرش کاملاً مدرن و حرفهایه!
🔥 مناسب برای تمرین طراحی وب و اضافه کردن به رزومه…
❤6
login-form-new-FILE.zip
674.2 KB
فایل تمرین این جلسه
❤️ فراموش نکن:
لایک 👍 + نظر 💬 + اشتراکگذاری 🔁
باعث میشه آموزشهای بعدی سریعتر منتشر بشن ✨
https://youtu.be/u-OEs8t6SAs?si=DSd97UfcP52nQUjf
❤️ فراموش نکن:
لایک 👍 + نظر 💬 + اشتراکگذاری 🔁
باعث میشه آموزشهای بعدی سریعتر منتشر بشن ✨
https://youtu.be/u-OEs8t6SAs?si=DSd97UfcP52nQUjf
🔥8
This media is not supported in your browser
VIEW IN TELEGRAM
🎥 پروژه جدید: اسلایدر سهبعدی حرفهای فقط با HTML و CSS 😍
یه پروژه فوقالعاده آماده کردم که بدون حتی یه خط JavaScript ساخته شده!
اسلایدر بهصورت سهبعدی میچرخه، با هاور متوقف میشه و کاملاً ریسپانسیوه ✨
به نظرتون آموزش کاملش رو ضبط کنم و بزارم داخل کانال یوتیوب؟
👇👇👇
اگه موافقین، با ریاکشن ❤️ یا 👍 حتماً بگین تا شروع کنم ضبطش 🎬
https://www.youtube.com/post/UgkxiguCfyTbYxN2y8i_EQOnTbK91hIR0J1e
یه پروژه فوقالعاده آماده کردم که بدون حتی یه خط JavaScript ساخته شده!
اسلایدر بهصورت سهبعدی میچرخه، با هاور متوقف میشه و کاملاً ریسپانسیوه ✨
به نظرتون آموزش کاملش رو ضبط کنم و بزارم داخل کانال یوتیوب؟
👇👇👇
اگه موافقین، با ریاکشن ❤️ یا 👍 حتماً بگین تا شروع کنم ضبطش 🎬
https://www.youtube.com/post/UgkxiguCfyTbYxN2y8i_EQOnTbK91hIR0J1e
❤11👍3👌1
طراحی کارت محصول حرفهای با HTML/CSS — قیمت و دکمه خرید (پروژه عملی)
در این ویدیو قدمبهقدم یک کارت محصول شیشهای حرفهای میسازیم — نمایش قیمت، تخفیف، دکمه افزودن به سبد و افکتهای جذاب فقط با HTML و CSS (پروژه عملی).
https://youtu.be/YfVd5P2H9Uc?si=MG6mZmdrzf-XTfSU
در این ویدیو قدمبهقدم یک کارت محصول شیشهای حرفهای میسازیم — نمایش قیمت، تخفیف، دکمه افزودن به سبد و افکتهای جذاب فقط با HTML و CSS (پروژه عملی).
https://youtu.be/YfVd5P2H9Uc?si=MG6mZmdrzf-XTfSU
YouTube
طراحی کارت محصول حرفهای با HTML/CSS — قیمت و دکمه خرید (پروژه عملی)
در این ویدیو قدمبهقدم یک کارت محصول شیشهای حرفهای میسازیم — نمایش قیمت، تخفیف، دکمه افزودن به سبد و افکتهای جذاب فقط با HTML و CSS (پروژه عملی).
سلام! من زمانالله ابراهیمی هستم 👋
با سالها تجربه در طراحی سایت، اینجا در کانالم سعی میکنم آموزشهای…
سلام! من زمانالله ابراهیمی هستم 👋
با سالها تجربه در طراحی سایت، اینجا در کانالم سعی میکنم آموزشهای…
❤5👌1
file.zip
5.7 MB
❤3👌2
ساخت فرم ورود و ثبتنام حرفهای (RTL) با HTML/CSS/JS — از صفر تا صد
آموزش ساخت فرم ورود و ثبتنام حرفهای (RTL) با HTML, CSS, JS — طراحی واکنشگرا، اعتبارسنجی، و افکتهای زیبا از صفر تا صد 🚀
در این آموزش کامل و پروژهمحور، یاد میگیری چطور یک فرم ورود و ثبتنام حرفهای (RTL) را فقط با HTML, CSS و JavaScript از صفر تا صد طراحی کنی.
این فرم کاملاً راستچین، واکنشگرا (Responsive) و مناسب برای وبسایتهای فارسی است.
در طول آموزش، با طراحی رابط کاربری (UI)، اعتبارسنجی فیلدها، افکتهای جذاب CSS، و ساخت ساختار مدرن آشنا میشوی تا فرم ورود و ثبتنامی مشابه سایتهای حرفهای بسازی.
🔹 ویژگیهای این آموزش:
طراحی کامل فرم ورود و ثبتنام با HTML و CSS
راستچین (RTL) و کاملاً فارسیسازیشده
استفاده از JavaScript برای اعتبارسنجی (Validation)
طراحی واکنشگرا برای موبایل و دسکتاپ
انیمیشنهای جذاب و رابط کاربری مدرن
مناسب برای تازهکارها تا سطح متوسط
بدون نیاز به هیچ فریمورک اضافی
🎯 نتیجه نهایی: یک فرم آماده استفاده در پروژههای واقعی، وبسایتهای شخصی یا پنلهای کاربری.
📦 ابزارهای استفادهشده:
HTML5 – CSS3 – JavaScript – Google Fonts – Remixicon
👨💻 اگر به طراحی وب علاقه داری و میخوای پروژههات رو حرفهایتر کنی، حتماً این ویدیو رو تا آخر ببین و آموزشهای جدید رو از دست نده.
https://youtu.be/zweTbQ9STBc?si=YiXkVRmQMr9mVD3n
آموزش ساخت فرم ورود و ثبتنام حرفهای (RTL) با HTML, CSS, JS — طراحی واکنشگرا، اعتبارسنجی، و افکتهای زیبا از صفر تا صد 🚀
در این آموزش کامل و پروژهمحور، یاد میگیری چطور یک فرم ورود و ثبتنام حرفهای (RTL) را فقط با HTML, CSS و JavaScript از صفر تا صد طراحی کنی.
این فرم کاملاً راستچین، واکنشگرا (Responsive) و مناسب برای وبسایتهای فارسی است.
در طول آموزش، با طراحی رابط کاربری (UI)، اعتبارسنجی فیلدها، افکتهای جذاب CSS، و ساخت ساختار مدرن آشنا میشوی تا فرم ورود و ثبتنامی مشابه سایتهای حرفهای بسازی.
🔹 ویژگیهای این آموزش:
طراحی کامل فرم ورود و ثبتنام با HTML و CSS
راستچین (RTL) و کاملاً فارسیسازیشده
استفاده از JavaScript برای اعتبارسنجی (Validation)
طراحی واکنشگرا برای موبایل و دسکتاپ
انیمیشنهای جذاب و رابط کاربری مدرن
مناسب برای تازهکارها تا سطح متوسط
بدون نیاز به هیچ فریمورک اضافی
🎯 نتیجه نهایی: یک فرم آماده استفاده در پروژههای واقعی، وبسایتهای شخصی یا پنلهای کاربری.
📦 ابزارهای استفادهشده:
HTML5 – CSS3 – JavaScript – Google Fonts – Remixicon
👨💻 اگر به طراحی وب علاقه داری و میخوای پروژههات رو حرفهایتر کنی، حتماً این ویدیو رو تا آخر ببین و آموزشهای جدید رو از دست نده.
https://youtu.be/zweTbQ9STBc?si=YiXkVRmQMr9mVD3n
YouTube
ساخت فرم ورود و ثبتنام حرفهای (RTL) با HTML/CSS/JS — از صفر تا صد
آموزش ساخت فرم ورود و ثبتنام حرفهای (RTL) با HTML, CSS, JS — طراحی واکنشگرا، اعتبارسنجی، و افکتهای زیبا از صفر تا صد 🚀
در این آموزش کامل و پروژهمحور، یاد میگیری چطور یک فرم ورود و ثبتنام حرفهای (RTL) را فقط با HTML, CSS و JavaScript از صفر تا صد…
در این آموزش کامل و پروژهمحور، یاد میگیری چطور یک فرم ورود و ثبتنام حرفهای (RTL) را فقط با HTML, CSS و JavaScript از صفر تا صد…
❤5
file.zip
3.3 KB
فایل تمرین این جلسه
❤️ فراموش نکن:
لایک 👍 + نظر 💬 + اشتراکگذاری 🔁
باعث میشه آموزشهای بعدی سریعتر منتشر بشن ✨
https://youtu.be/zweTbQ9STBc?si=g--c16q-UU0CL8A_
❤️ فراموش نکن:
لایک 👍 + نظر 💬 + اشتراکگذاری 🔁
باعث میشه آموزشهای بعدی سریعتر منتشر بشن ✨
https://youtu.be/zweTbQ9STBc?si=g--c16q-UU0CL8A_
❤5👍2
🔥 یه ایدهی جدید برای ویدیوی بعدی دارم، میخوام نظر شما رو بدونم 👇
خیلی وقتا یه فرم ورود و ثبتنام قشنگ با HTML و CSS طراحی میکنیم،
اما در نهایت فقط ظاهره — یعنی کاربر چیزی واقعاً ثبت نمیکنه و اطلاعاتش ذخیره نمیشه 😅
میخوام توی ویدیو بعدی نشون بدم چطور همین فرم ساده رو به یه سیستم واقعی و داینامیک تبدیل کنیم با PHP و MySQL 💪
طوری که کاربر بتونه:
- واقعاً ثبتنام کنه ✅
- وارد حساب خودش بشه 🔐
- پیام خطا یا موفقیت دریافت کنه 🎉
- اطلاعاتش داخل دیتابیس ذخیره بشه 💾
حتی امنیت هم رعایت میشه (مثل password_hash و session) تا پروژه حرفهای باشه.
حالا سوال من اینه 👇
دوست دارید این آموزش کامل و مرحلهبهمرحله ضبط بشه؟
یا ترجیح میدید فقط بخش اصلی (ثبتنام و ورود) رو آموزش بدم؟
عدد گزینهتون رو توی کامنت بنویسید ❤️
👇👇👇
1️⃣ آموزش کامل از صفر تا دیتابیس
2️⃣ فقط ساخت فرم و اتصال ساده به PHP
3️⃣ فقط سورسکد و توضیح ویدئویی کوتاه
https://www.youtube.com/post/UgkxUXDKRWLebHaq5EVQsdxrSj2-qcr-IXwg
خیلی وقتا یه فرم ورود و ثبتنام قشنگ با HTML و CSS طراحی میکنیم،
اما در نهایت فقط ظاهره — یعنی کاربر چیزی واقعاً ثبت نمیکنه و اطلاعاتش ذخیره نمیشه 😅
میخوام توی ویدیو بعدی نشون بدم چطور همین فرم ساده رو به یه سیستم واقعی و داینامیک تبدیل کنیم با PHP و MySQL 💪
طوری که کاربر بتونه:
- واقعاً ثبتنام کنه ✅
- وارد حساب خودش بشه 🔐
- پیام خطا یا موفقیت دریافت کنه 🎉
- اطلاعاتش داخل دیتابیس ذخیره بشه 💾
حتی امنیت هم رعایت میشه (مثل password_hash و session) تا پروژه حرفهای باشه.
حالا سوال من اینه 👇
دوست دارید این آموزش کامل و مرحلهبهمرحله ضبط بشه؟
یا ترجیح میدید فقط بخش اصلی (ثبتنام و ورود) رو آموزش بدم؟
عدد گزینهتون رو توی کامنت بنویسید ❤️
👇👇👇
1️⃣ آموزش کامل از صفر تا دیتابیس
2️⃣ فقط ساخت فرم و اتصال ساده به PHP
3️⃣ فقط سورسکد و توضیح ویدئویی کوتاه
https://www.youtube.com/post/UgkxUXDKRWLebHaq5EVQsdxrSj2-qcr-IXwg
👌7❤4🎉1
طراحی بخش اپلیکیشن و نقشه سایت با HTML CSS JS | بخش حرفهای قالب 🍔
در این جلسه میریم سراغ دو بخش مهم و کاربردی قالب «تحویل غذا» 🍔
با هم یاد میگیریم چطور بخش اپلیکیشن (App Section) و موقعیت ما (Map Section) رو بهصورت کاملاً واکنشگرا و مدرن طراحی کنیم.
🔹 طراحی بخش معرفی اپلیکیشن با دکمه دانلود و استایل جذاب
🔹 ساخت بخش نقشه سایت همراه اطلاعات تماس و ساعت کاری
🔹 تمرکز روی طراحی تمیز و حرفهای با رنگهای برند
🔹 آمادهسازی قالب برای جلسه بعدی (فوتر و انیمیشنها)
https://youtu.be/BkQXTMWltuE?si=ZwxrXP_FAYyIKGmx
در این جلسه میریم سراغ دو بخش مهم و کاربردی قالب «تحویل غذا» 🍔
با هم یاد میگیریم چطور بخش اپلیکیشن (App Section) و موقعیت ما (Map Section) رو بهصورت کاملاً واکنشگرا و مدرن طراحی کنیم.
🔹 طراحی بخش معرفی اپلیکیشن با دکمه دانلود و استایل جذاب
🔹 ساخت بخش نقشه سایت همراه اطلاعات تماس و ساعت کاری
🔹 تمرکز روی طراحی تمیز و حرفهای با رنگهای برند
🔹 آمادهسازی قالب برای جلسه بعدی (فوتر و انیمیشنها)
https://youtu.be/BkQXTMWltuE?si=ZwxrXP_FAYyIKGmx
YouTube
طراحی بخش اپلیکیشن و نقشه سایت با HTML CSS JS | بخش حرفهای قالب 🍔
در این جلسه میریم سراغ دو بخش مهم و کاربردی قالب «تحویل غذا» 🍔
با هم یاد میگیریم چطور بخش اپلیکیشن (App Section) و موقعیت ما (Map Section) رو بهصورت کاملاً واکنشگرا و مدرن طراحی کنیم.
🔹 طراحی بخش معرفی اپلیکیشن با دکمه دانلود و استایل جذاب
🔹 ساخت بخش…
با هم یاد میگیریم چطور بخش اپلیکیشن (App Section) و موقعیت ما (Map Section) رو بهصورت کاملاً واکنشگرا و مدرن طراحی کنیم.
🔹 طراحی بخش معرفی اپلیکیشن با دکمه دانلود و استایل جذاب
🔹 ساخت بخش…
❤6😁1