سلام خدمت دوستان و همراهان عزیز هولوسن

این دوره برنامه نویسی فرانت اند (front-end) تحت وب، با زبان های HTML و CSS را شامل میشود.

در جلسه اول با معرفی برنامه نویسی وب در خدمتتان بودیم. و در جلسات گذشته با زبان HTML آشنا شدیم و همینطور با ساخت اولین صفحه HTML ، اکستنشن‌های VSCode و Chrome ، لینک‌ها و تصاویر آشنایی با استایل‌ها، کامنت، جداول، لیست‌ها و تگ div ، تگ‌های معنادار ، آشنایی با CSS ، انواع سلکتورها و همینطور روش‌های لینک کردن CSS و HTML  ، اندازه‌ها و CSS Box ، استایل متن در CSS  در خدمتتان بودیم. همینطور در جلسه قبل تحت عنوان Transition و Transform در CSS در خدمتتان بودیم. در این جلسه قرار است تا با طراحی واکنشگرا یا ریسپانسیو آشنا شویم.

پس با ما همراه باشید. ?‍?
مارو هم از نظرات خوب خودتون بی بهره نذارید. ❤?

جهت دانلود فایل‌های این جلسه اینجا کلیک کنید

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

برای ریسپانسیو کردن سایت از @media در CSS استفاده می‌کتیم. همینطور از تگ meta viewport نیز باید بهره ببریم.

معمولا نقاط شکست به شکل زیر است :

• 320px — 480px: Mobile devices
• 481px — 768px: iPads, Tablets
• 769px — 1024px: Small screens, laptops
• 1025px — 1200px: Desktops, large screens
• 1201px and more —  Extra large screens, TV

ترتیب پیشنهادی برای یادگیری طراحی سایت

پیشنهاد میکنیم از دیگر آموزش های هولوسن هم دیدن فرمایید