Weblify | ترفندهای طراحی وب
Photo
#عمومی
♦️ یه نقشه راه بیسیک برای Front-end:
🔹 ۱. آشنایی با طرز کار وب و مرورگرها (۱ تا ۲ روز): مفاهیمی مثل HTTP/HTTPS یا DNS و Domain Names رو یاد بگیرید و آشنایی خلاصه از طرز کار اینترنت و مرورگرها داشته باشین.
🔹 ۲. راهاندازی فضای کار (۱ روز): ادیتورتون (معمولا VSCode) رو مشخص کنید، اکستنشنهای پرکاربرد مثل Prettier، Live Server،Copilot و... رو نصب کنید و یه آشنایی مختصری در صورت امکان از ترمینال ادیتور داشته باشین.
🔹 ۳. آشنایی HTML + CSS (حدود ۱ ماه): این دو تا پایه اساسی هر وبسایتی هستن، HTML اسکلت سایت و CSS ویژگیهای ظاهری اون رو مشخص میکنه. لازم نیست تو یک ماه همهچیز درباره CSS رو بدونین، همه این مراحل وقتی به مرحلههای بعدی میرید یادگیریشون همچنان ادامه داره.
🔹 ۴. یادگیری JavaScript (۱ تا ۲ ماه): اصول تعامل کاربر با سایت وابسته به این زبانه. اگه قبلا برنامهنویسی کار نکردین حتما اصول پایهای مثل متغیرها، فانکشنها و ... رو خوب یاد بگیرید و بعدا سراغ ویژگیهای جدیدتر(ES6+) برید. سعی کنید با پروزه عملی و تمرین در کنار آموزش یاد بگیرید.
🔹 ۵. آشنایی با Git و GitHub (۱ هفته): از گیت برای ذخیرهسازی و ثبت تغییرات تو کدتون استفاده کنید. سعی کنید این مرحله رو حین یادگیری جاوااسکریپت و پروژههای تمرینیتون انجام بدین.
🔹 ۶. یادگیری کتابخونهها وFramework ها (۱ تا ۲ ماه): اپشنهای زیادی هست مثل Vue, Angular,Svelte، ولی برای شروع توصیه میشه اول React رو یاد بگیرید چون استانداردترین فریمورک/کتابخونه هست و یادگیریش نسبت به بقیه سادهتره، اما در نهایت انتخاب با خودتونه. علاوه بر این یادگیری کتابخونههای مثل Redux Toolkit و Framer Motion توصیه میشه.
❗️ جزئیات چیزایی که تو هر زبان یا کتابخونه باید بلد باشین تو عکسا آورده شده.
👨💻 @Weblify_Tutorials 🎨
♦️ یه نقشه راه بیسیک برای Front-end:
🔹 ۱. آشنایی با طرز کار وب و مرورگرها (۱ تا ۲ روز): مفاهیمی مثل HTTP/HTTPS یا DNS و Domain Names رو یاد بگیرید و آشنایی خلاصه از طرز کار اینترنت و مرورگرها داشته باشین.
🔹 ۲. راهاندازی فضای کار (۱ روز): ادیتورتون (معمولا VSCode) رو مشخص کنید، اکستنشنهای پرکاربرد مثل Prettier، Live Server،Copilot و... رو نصب کنید و یه آشنایی مختصری در صورت امکان از ترمینال ادیتور داشته باشین.
🔹 ۳. آشنایی HTML + CSS (حدود ۱ ماه): این دو تا پایه اساسی هر وبسایتی هستن، HTML اسکلت سایت و CSS ویژگیهای ظاهری اون رو مشخص میکنه. لازم نیست تو یک ماه همهچیز درباره CSS رو بدونین، همه این مراحل وقتی به مرحلههای بعدی میرید یادگیریشون همچنان ادامه داره.
🔹 ۴. یادگیری JavaScript (۱ تا ۲ ماه): اصول تعامل کاربر با سایت وابسته به این زبانه. اگه قبلا برنامهنویسی کار نکردین حتما اصول پایهای مثل متغیرها، فانکشنها و ... رو خوب یاد بگیرید و بعدا سراغ ویژگیهای جدیدتر(ES6+) برید. سعی کنید با پروزه عملی و تمرین در کنار آموزش یاد بگیرید.
🔹 ۵. آشنایی با Git و GitHub (۱ هفته): از گیت برای ذخیرهسازی و ثبت تغییرات تو کدتون استفاده کنید. سعی کنید این مرحله رو حین یادگیری جاوااسکریپت و پروژههای تمرینیتون انجام بدین.
🔹 ۶. یادگیری کتابخونهها وFramework ها (۱ تا ۲ ماه): اپشنهای زیادی هست مثل Vue, Angular,Svelte، ولی برای شروع توصیه میشه اول React رو یاد بگیرید چون استانداردترین فریمورک/کتابخونه هست و یادگیریش نسبت به بقیه سادهتره، اما در نهایت انتخاب با خودتونه. علاوه بر این یادگیری کتابخونههای مثل Redux Toolkit و Framer Motion توصیه میشه.
❗️ جزئیات چیزایی که تو هر زبان یا کتابخونه باید بلد باشین تو عکسا آورده شده.
👨💻 @Weblify_Tutorials 🎨
❤1👍1
Weblify | ترفندهای طراحی وب
Photo
#معرفی_ابزار
♦️ معرفی سایت: Calltoinspiration
🔹 حتما تا حالا شده موقع طراحی UI با کمبود ایده مواجه بشین. مثلا بخواین یه دکمه یا یه فرم درست کنید ولی با خودتون بگید کاش برای طراحی ظاهریش یه ایدهی جدید داشتم ولی هرچی فکر میکنین ایده جدیدی به ذهنتون نمیرسه!
🔹 این وبسایت دقیقا به حل همین مشکل کمک میکنه، یعنی برای هرجور کامپوننت رابط کاربری که میخواین طراحی کنین بهتون ایده میده، و باعث میشه سریعتر، بهتر و خلاقانهتر کامپوننتهاتون رو طراحی کنید. برای طراحی:
▪️Form
▪️Alert
▪️Tab
▪️Dropdown
▪️Button
و... خیلی کامپوننتهای دیگه میتونین از این سایت ایده بگیرین! مثلا دو تا عکسی که گذاشتم ایده برای فرم Log in هست.
❗️ پ.ن: برای ورود احتمالا طبق معمول باید از فیلترشکن استفاده کنید..
👨💻 @Weblify_Tutorials 🎨
♦️ معرفی سایت: Calltoinspiration
🔹 حتما تا حالا شده موقع طراحی UI با کمبود ایده مواجه بشین. مثلا بخواین یه دکمه یا یه فرم درست کنید ولی با خودتون بگید کاش برای طراحی ظاهریش یه ایدهی جدید داشتم ولی هرچی فکر میکنین ایده جدیدی به ذهنتون نمیرسه!
🔹 این وبسایت دقیقا به حل همین مشکل کمک میکنه، یعنی برای هرجور کامپوننت رابط کاربری که میخواین طراحی کنین بهتون ایده میده، و باعث میشه سریعتر، بهتر و خلاقانهتر کامپوننتهاتون رو طراحی کنید. برای طراحی:
▪️Form
▪️Alert
▪️Tab
▪️Dropdown
▪️Button
و... خیلی کامپوننتهای دیگه میتونین از این سایت ایده بگیرین! مثلا دو تا عکسی که گذاشتم ایده برای فرم Log in هست.
❗️ پ.ن: برای ورود احتمالا طبق معمول باید از فیلترشکن استفاده کنید..
👨💻 @Weblify_Tutorials 🎨