تبدیل قالب فیگما به کد HTML,CSS!! رایگان! قسمت اول 1

یک وبلاگ برای آموزش برنامه نویسی و کد های جذاب!

هر چی از برنامه نویسی می خوای یاد بگیر، ما هم سعی می کنیم توی این راه برات یه راهنما باشیم...

تبدیل قالب فیگما به کد HTML,CSS!! رایگان! قسمت اول 1

تبدیل قالب فیگما به کد HTML,CSS!! رایگان! قسمت اول 1


تبدیل قالب فیگما به کد HTML,CSS، راهیه برای اینکه شما توانایی کدزنی خودتون رو بالا ببرین. حالا ما با برگذاری این دوره ی رایگان، برای کمک به جامعه ی عزیز برنامه نویس ایران اومدیم.
البته یه سری نکاتی راجع به ویدیو وجود داره که باید بدونید:
حتما حتما بعد دیدن هر ویدیو کد هاش رو برای خودتون توضیح بدین تا راحت متوجه بشین. ساختار ها رو رعایت کنین تا به مشکل نخورین. و حتما هم کانال ما رو دنبال کنین تا از این آموزش ها بیشتر ببینین!
تمام فایل های پروژه توی این لینک قرار می گیرن: https://github.com/SW-web-designer/figma-to-code

توضیحات دوره

یه سری توضیحات هست که لازمه داده بشه راجع به این دوره:
  1. تمام فایل های این دوره به مرور رو این لینک آپلود میشه: https://github.com/SW-web-designer/figma-to-code/
  2. این پروژه رو می تونید به عنوان نمونه کار توی روزومه تون بزارین. (البته پیشنهاد نمیشه)
  3. تمام حقوق معنوی و مادی این دوره متعلق به «هنر طراحی وبسایت» هست.
  4. اینکه این دوره رایگانه، به این معنی نیست که باقی دوره هامون توی آینده هم قراره رایگان باشه.
  5. اگه وسط دوره به سایتی ارجاع داده شد، بدونید هیچ تبلیغی در کار نیست و کاملا به صلاح شماست.
  6. و البته دنبال کردن کانال آپارات هم یادتون نره! https://www.aparat.com/web_art
۰ ۰

CSS یا Cascading Style Sheets یک زبان استایل‌دهی است که برای طراحی و ظاهرسازی صفحات وب استفاده می‌شود. این زبان امکان اعمال قالب‌بندی، طرح‌بندی، و تزئینات به محتواهای HTML را فراهم می‌کند. با استفاده از CSS، توسعه‌دهندگان وب قادرند تا ابزارهای مختلفی را برای تغییرات ظاهری صفحات خود مورد استفاده قرار دهند، از جمله اندازه، رنگ، فونت، فاصله‌بندی و توضیحات.

 

در آموزش CSS، ابتدا باید با مفاهیم اصلی این زبان آشنا شد. این شامل انواع انتخابگرها، ویژگی‌های CSS، و مفاهیم مانند میراث (Inheritance) و اعمال‌های غیرمستقیم (Cascading) است. سپس با ویژگی‌های اصلی CSS مانند رنگ، فونت، پس‌زمینه، حاشیه‌ها، و توضیحات آشنا شده و نحوه استفاده از آنها را فرا خواهید گرفت. در انتها، به مطالعه مفاهیم پیشرفته‌تری مانند Flexbox و Grid Layout می‌پردازید که به شما کمک می‌کنند تا طرح‌بندی‌های پیچیده‌تری را در وب‌سایت‌های خود پیاده‌سازی کنید.

ارسال نظر آزاد است، اما اگر قبلا در رویا بلاگ ثبت نام کرده اید می توانید ابتدا وارد شوید.
تگ های زیر پشتیبانی میشود
<b> <strong> <em> <i> <u> <strike> <s> <sup> <sub> <blockquote> <code> <pre> <hr> <br> <p> <a> <span>