💢 کد های مورد استفاده در آموزش:

sudo su root
apt-get update
apt-get dist-upgrade -y
apt-get install wget curl nginx certbot python3-certbot-nginx git zsh unzip -y
sh -c "$(curl -fsSL https://raw.github.com/ohmyzsh/ohmyzsh/master/tools/install.sh)"

nano /etc/nginx/sites-available/default
# add domain to -> server_name _; replace _ your domain
systemctl restart nginx.service

certbot --nginx --nginx-ctl /usr/sbin/nginx
# email and y and y and 1

@xstack_tut ❌

🤔 فصل اول آموزش Full stack web developer
🤔 عنوان فصل HTML & CSS - قسمت 23

🤔 مباحث تدریس شده:
😄 کار کردن بیشتر با background
😄 ویژگی‌های background-color,background-image, background-size, background-position ,background-repeat
😄 و import کردن در CSS
#فیلم_آموزش #FullStackWebDeveloper

🫥 با انتشار این مطلب ما را حمایت کنید.

✏️ تمرین این جلسه کانال «برنامه‌نویسی با طعم تمشک»
✈️@xstack_tut ❌ | @devefun ✌️

👨‍💻 تمرین قسمت ۲۳: با آموخته خود در background و جلسات پیشین صفحه پیوست شده رو را با پس‌زمینه دلخواه طراحی کنید.

⛔️ پ.ن: موج بالای تصویر هم یک background جدا گانه است!

#تمرین #تمرین_HTML_CSS
✈️@xstack_tut ❌

💠 فصل اول آموزش Full stack web developer
💠 عنوان فصل HTML & CSS - قسمت 24
💠 مباحث تدریس شده:

✅ ادامه مبحث grid
✅ ویژگی‌های grid-template-columns, grid-template-rows, grid-gap, grid-column, grid-row, span در grid

✅ و چگونه دیباگ کردن grid

#فیلم_آموزش #FullStackWebDeveloper

⭕️ با انتشار این مطلب ما را حمایت کنید.

👇 تمرین این جلسه کانال «برنامه‌نویسی با طعم تمشک»

✈️@xstack_tut ❌ | @devefun

👨‍💻 تمرین قسمت ۲۴: با آموخته خود در grid و جلسات پیشین صفحه پیوست شده رو طراحی کنید.


#تمرین #تمرین_HTML_CSS
✈️@xstack_tut ❌

💠 فصل اول آموزش Full stack web developer
💠 عنوان فصل HTML & CSS - قسمت 25
💠 مباحث تدریس شده:
✅ ادامه مبحث flex
✅ ویژگی‌های flex-direction - flex-wrap - flex-flow - flex - align-items - flex-grow - flex-shrink - flex-basis در flex


#فیلم_آموزش #FullStackWebDeveloper
⭐ با انتشار این مطلب ما را حمایت کنید.

🟩 تمرین این جلسه کانال «برنامه‌نویسی با طعم تمشک»
✈️@xstack_tut ❌| @devefun ✈️

👨‍💻 تمرین قسمت ۲۵: با آموخته خود در flex و جلسات پیشین همراه با راهنمایی صفحه پیوست شده رو طراحی کنید.


#تمرین #تمرین_HTML_CSS
✈️@xstack_tut ❌

💠 فصل اول آموزش Full stack web developer
💠 عنوان فصل HTML & CSS - قسمت 26
💠 مباحث تدریس شده:
✅ ادامه مبحث grid
✅ ویژگی‌های grid-auto-columns , grid-auto-flow
✅ توضیح ()minmax
✅ نکات ساختن یکی مگا منو


#فیلم_آموزش #FullStackWebDeveloper
⭐ با انتشار این مطلب ما را حمایت کنید.

🟩 تمرین این جلسه کانال «برنامه‌نویسی با طعم تمشک»
✈️@xstack_tut ❌| @devefun ✈️

👨‍💻 تمرین قسمت ۲۶: با آموخته خود در این جلسه و جلسات پیش یک mega menu به شکل زیر درست کنید!


#تمرین #تمرین_HTML_CSS
✈️@xstack_tut ❌

💠 فصل اول آموزش Full stack web developer
💠 عنوان فصل HTML & CSS - قسمت 27
💠 مباحث تدریس شده:
✅ سیار کردن مگا منو
✅ ویژگی‌های , *-spacing, text-*, word-*
✅ ویژگی mix-blend-mode و line-height , white-spacee
✅ توضیح ()minmax
✅ آموزش :first-letter

#فیلم_آموزش #FullStackWebDeveloper
⭐ با انتشار این مطلب ما را حمایت کنید.

🟩 تمرین این جلسه کانال «برنامه‌نویسی با طعم تمشک»
✈️@xstack_tut ❌| @devefun ✈️

👨‍💻 تمرین قسمت ۲۷: با آموخته خود در flex و postion و mix-blend-mode تمرین زیر رو پیاده سازی کنید،

🔻پ.ن: تصویر زیر بکگراند ندارد همه المان ها HTML است!


#تمرین #تمرین_HTML_CSS
✈️@xstack_tut 🔺

💠 فصل اول آموزش Full stack web developer
💠 عنوان فصل HTML & CSS - قسمت 28
💠 مباحث تدریس شده:

✅ ویژگی‌های user-select
✅ توضیح ()var و تعریف و تغییر متغییر در css
✅ کار کردن با Inkscape

#فیلم_آموزش #FullStackWebDeveloper
🔻 با انتشار این مطلب ما را حمایت کنید.

🟩 تمرین این جلسه کانال «برنامه‌نویسی با طعم تمشک»

✈️@xstack_tut ❌| @devefun ✈️

👨‍💻 تمرین قسمت ۲۸: با آموخته خود در این قسمت و قسمت های پیشین طرح بالا در سه سایز PC, tablet, mobile را کدنویسی کنید و از مگا منوی تمرین ۲۶ به صورت واکنشگرا responsive در آن استفاده کنید!

🚫پ.ن: رنگ‌ها به صورت var تعریف شود، حتی رنگ‌های مگا منو تمرین ۲۶ نیز باید تغییر کند و با متغییر تعریف شوند! و عکس ها به دلخواه خودتون خودتون باشه!

#تمرین #تمرین_HTML_CSS
✈️@xstack_tut 🔺

💠 فصل اول آموزش Full stack web developer
💠 عنوان فصل HTML & CSS - قسمت 29
💠مباحث تدریس شده:
✅ ادامه مبحث grid
✅ ویژگی‌های grid-area grid-area-template
✅ توضیح outline
✅ توضیح focus:
✅ کار با live template های php strom

#فیلم_آموزش #FullStackWebDeveloper
🔻 با انتشار این مطلب ما را حمایت کنید.

🟩 تمرین این جلسه کانال «برنامه‌نویسی با طعم تمشک»
✈️@xstack_tut ❌| @devefun ✈️

👨‍💻 تمرین قسمت ۲۹: با آموخته خود در این قسمت و قسمت های پیشین طرح بالا رو پیاده سازی کنید!


#تمرین #تمرین_HTML_CSS
✈️@xstack_tut 🔺

💠فصل اول آموزش Full stack web developer
💠 عنوان فصل HTML & CSS - قسمت 30
💠 مباحث تدریس شده:
✅ تاثیر + و ~ در انتخاب گر
✅ ویژگی visiblity و تفاوت آن با display
✅ ساخت یک switch toggle در html css 🎚️
✅ خصوصیت noscript و وضعیت :check

#فیلم_آموزش #FullStackWebDeveloper
🔻 با انتشار این مطلب ما را حمایت کنید.

🟩 تمرین این جلسه کانال «برنامه‌نویسی با طعم تمشک»
✈️@xstack_tut ❌| @devefun ✈️

👨‍💻 تمرین قسمت ۳۰: با آموخته خود در این قسمت و قسمت های پیشین یک جدول با قابلیت dark mode درست کنید!

🚫پ.ن: ممکن است یه خرده غیر اصولی به نظر برسه ولی استفاده JavaScript مجاز نیست!

#تمرین #تمرین_HTML_CSS
✈️@xstack_tut 🔺

✅ مقایسه اجمالی و مختصر، شیوه کد نویسی در سه سکوی javanoscript, reactJS, vueJS یا vanillaJS برای کسانی که در انتخاب مردد هستند

💠 پیرو پادکست قبلی توضیحاتی در مورد react و vue دادیم، دو مثال رو در هر سه انجام دادیم تا یک نگرش کلی از این دو داشته باشید!

🔺نمونه مشابه هرگز منتشر نشده و برای اولین بار توسط xstack این فیلم منتشر شده است!

🔻پ.ن: ممکنه دوستانی که vue یا react کار می‌کنند، با دیدنش بگن ما در پروژه تجاری این شکلی استفاده نمی‌کنیم، فراموش نکنیم که این یک نمونه آموزشی است نه تجاری!

✈️@xstack_tut ❌| @devefun ✈️

💠 معرفی فونت وب remixIcon ویژه طراحان

❌ گاهی از گشتن در font-awesome پشیمون میشم و گیج میشیم، بعضیاش چرا پولی هستش و با کلاس‌های پیش‌وند متخلف تعریف میشه، از اون گذشته حس می‌کنیم، خیلی تکراری شده!!!

✅ پس با هم دردیم، فونت remix Icon هم مدرن‌تره، هم کاملا اوپن سورس و مشکلات فوق رو نداره برای نصبش فقط کافیه از دستور زیر استفاده کنید:

npm i remixicon

و برای دیدن نمونه آیکون‌ها به سایتش مراجعه کنید:

https://remixicon.com/

✈️@xstack_tut ❌| @devefun ✈️

💠 فصل اول آموزش Full stack web developer
💠 عنوان فصل HTML & CSS - قسمت 31

💠 مباحث تدریس شده:
✅ ساخت یک پارالاکس
✅ یادآوری :before :after
✅ کار با Inkscape مجدد


#فیلم_آموزش #FullStackWebDeveloper
🔻 با انتشار این مطلب ما را حمایت کنید.

🟩 تمرین این جلسه کانال «برنامه‌نویسی با طعم تمشک»

✈️@xstack_tut ❌| @devefun ✈️

👨‍💻 تمرین قسمت ۳۱: با آموخته خود در این قسمت و یک section پارالاکس به تمرین ۲۸ اضافه کنید!


#تمرین #تمرین_HTML_CSS
✈️@xstack_tut 🔺