💎 آموزش HTML و CSS از مقدماتی (فارسی) حسن خسروجردی

📌 تمام جلسات یکجا

#فیلم #ویدئو #وب #وبسایت
#Video #Website #Web #HTML #html #Css #Css3
🆑 @Computer_IT_Engineering

آموزش زبان CSS

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

#css #webdesign #book

آموزش بوت استرپ

در مورد واکنشگرایی مطلبی رو قرار دادیم و کتاب آموزش css رو هم برای دانلود گذاشتیم. حالا به مرحله ی جذاب استفاده از پرطرفدارترین فریم ورک طراحی یعنی Bootstrap رسیده ایم. طیف گسترده ای از الگوهای آماده ولی قابل ویرایش که تنها با یک دستور فراخوانی میشن و شما برای ایجاد یک منو که پیش از دهها خط HTML و CSS و جاوااسکریپت نیاز داشت، فقط به یک دستور بوت استرپ نیاز دارید!

#bootstrap #css #webdesign #book

دسترسی به مطالب کانال:
مبتدی #beginner
گرافیک #graphics
بانک #database
کدها #code
محیط #ide
ابزارها #tools
بازی #game
کتاب #book
آندروید #android
وب #webdesign
کدساز #codegenerator
راهنما #skill

همینطور زبان و تکنولوژی های کدنویسی:
#csharp #php #javascript #vue
#sql #access #asp #server #spa
#typescript #html #css #nodejs
#xampp #mysql #wordpress

کتاب، فیلم و دوره های جالبی در مورد بوت استرپ یا سرنخ! براتون گذاشته ام که با یه سرچ ساده داخل کانال "کدنویس یکروزه" بهش میرسین.

#bootstrap #css

واکنشگرایی یا Responsive pages

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

#responsive #bootstrap #css

لینکهای فراگیری Javascript

   علاوه بر اینکه در یک پُست هشتگ های کانال رو معرفی کرده ام، حالا لینکهایی از مطالب مربوط جاوااسکریپت رو هم براتون میذارم که دوره کنید:

- کار با Local storage دیتابیس داخلی
- مشکلات محاسباتی در جاوااسکریپت
- روش ساخت برنامه تست چند جوابی
- چهار فرآیند CRUD در جاوااسکریپت
- آموزش Typescript یا جاوااسکریپت۶
- یک برنامه ی محاسباتی جاوااسکریپت
- جزوه ی مدرن جاوااسکریپت فارسی
- قفل گذاری روی برنامه ی تحت وب
- جزوه ی نصب و آموزش Node.js
- روش ساخت اَپ تک صفحه در Vue.js
- روش ساخت تاس با ۵ خط کدنویسی

علاوه بر اینها روی هشتگ زیر بزنید:
#javascript

جلوگیری از ذخیره ی تصاویر سایت!

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

#html #css #code #webdesign

آموزش طراحی Grid

گرید توانایی فوق العاده ای در قالب بندی دو بعدی صفحتون داره. بعد از یادگیریش خودتون هم باورتون نمیشه که چطور با ۱۰ خط کد تونستین همچین قالبی رو ایجاد کنید !

#css #webdesign

کلیدهای سفارشی Bootstrap

رنگ کلیدهای بوت استرپ محدود به ۵ رنگ یا همین حدوده.
یه سایت کد جالبی ارائه کرده که با زحمت زیاد به صورت آفلاین ذخیره اش کردم تا با سرعت خیلی بالا به هر رنگ دلخواه کلید بوت استرپی بسازیم!
اولین پارامتر برنامه اسم کلاسی هست که به رنگ اون کلید میدیم و هر جا این نام کلاس رو به کار ببریم به کلید مورد نظر دست پیدا خواهیم کرد.
کافیه فقط کدهای css رو که جنریت کرده به پروژه اضافه کرده باشیم.

#code #codegenerator #css #bootstrap

اجرای ویدیو در زمینه ی صفحه وب

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

#code #webdesign #html #css

یک قالب جمع و جور واکنشگرا

   چند قالب جالب قبل از این معرفی شدن از جمله:
نمونه ی قابل استفاده در بلیزر.
و نمونه های وردپرس.
و همچنین نمونه های مستقل.

اما ویژگی این قالب الان، مستقل بودن از فریمورک های سنگین مثل بوت استرپ و شکیل بودن با کمترین کد هست.
همینطور نمونه ی خوبی برای آموزش و یادگیری css.

#code #webdesign #css

تاس سه بُعدی فقط با CSS

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

#javascript #css #html