آموزش CSS پیشرفته

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

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

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

how to separate thousands in python
جدا کردن سه رقم سه رقم اعداد در پایتون

این یک نمونه سرچ و جواب در این رابطه است:

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

اما در CSS همه چیز به راحتی زبان های برنامه نویسی نیست. در CSS سوالات شما بنا بر پروژه ای که کار می کنید می تواند متفاوت باشد. در واقع در CSS ابتدا باید درک خیلی خوبی نسبت به اجزا مختلفِ CSS و ارتباط آنها با یکدیگر داشته باشید تا موقع برخورد با “رفتارهای عجیب و غریب”، بتوانید آنها را حل کنید.

برای داشتن درک مناسب و عمیق بر CSS، یادگیری صحیح سرفصل های زیر در CSS بسیار ضروری است. آنچه شما باید به صورت عمیق و به ترتیب یاد بگیرید، شامل موارد زیر می باشد:

1- Box Model یا مدل جعبه ای در CSS:

تمام المنت هایی که در یک صفحه میبینید، در واقع یک جعبه است. هر جعبه (المنت) دارای Margin، Padding, Border و محتوا است. در واقع کوچکترین جز سازنده هر صفحه اینترنتی، جعبه ها هستند. مثل عکس ها، دکمه ها و آیکُن ها

2- نحوه و ترتیب اعمال استایل بر جعبه ها:

بعد از درک مدل جعبه ای، نوبت به این است که بدانید استایل هایی که می نویسید (همان کد های CSS) بر اساس چه ترتیبی بر روی جعبه ها اعمال می شوند.

3- چیدمان جعبه ها در صفحه با روش Float:

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

4- چیدمان جعبه ها در صفحه با استفاده از Flex box:

روش جدیدی که برای چیدمان جعبه ها در صفحه استفاده می شود، استفاده از Flex box است. استفاده از این روش نسبت به روش Float ساده تر است و همینطور توانایی های بیشتر نسبت به روش Float دارد.

5- چیدمان جعبه ها در صفحه با استفاده از Grid:

همینطور Grid هم روش جدیدی برای چیدمان جعبه ها در صفحه است. منتها این روش هم قابلیت های منحصر به فردی نسبت به دو روش قبلی دارد.

نکته مهم اینکه سه روش چیدمان Float، Flex box و Grid هر کدام قابلیت های خاص خودشان را دارند. بنابراین نمی توان گفت که کدام روش چیدمان، برتری خاصی نسبت به روش های دیگر دارد. در جای خود از هر روش باید استفاده شود.

6- واحدها در سی اس اس:

همینطور باید درک خوبی نسبت به واحدهای اندازه گیری در سی اس اس پیدا کنید. اگر از هر واحد در جای مناسب خود استفاده کنید، می توانید به سرعت و به راحتی (با تغییر یک عدد!) اندازه صفحات طراحی شده را بزرگ تر یا کوچک تر کنید. (ممکن است بعد از طراحی سایت مشتری یا کارفرما یا مدیرتان از شما بخواهد که المنت های استفاده شده در طراحی بزرگتر یا کوچکتر شوند)

7- موقعیت دهی در سی اس اس:

گاهی نیاز است جعبه ای نسبت به والد خود موقعیت دهی شود. بنابراین بایستی با موقعیت دهی های fixed,  absolute, relative و z-index آشنایی پیدا کنید.

با یادگیری این مفاهیم، می توانید مطمئن شوید که درک مناسبی نسبت به CSS پیدا کرده اید. آنچه سعی کرده ام در این دوره آموزشی رعایت کنم، این بوده که این مفاهیم با زبانی ساده اما عمیق به مخاطب منتقل داده شود.

همینطور در یک فصل، یک پروژه (وب سایت شخصی) پیاده سازی کرده ام که بتوانید کاربرد این مفاهیم و همینطور ارتباط آنها با یکدیگر را در عمل ببینید. البته موارد دیگری مثل انیمیشین، transition و رنگ ها وجود دارند که سعی شده در پروژه استفاده شوند.

شاید شما کاملا مبتدی باشید و ندانید که اصلا آیا قدمی که بر میدارید درست است؟!

شاید شما بخواهید طراح سایت شوید ولی هیچ ذهنیتی راجع به اینکه از کجا باید شروع کنید ندارید.

خوب، اولین قدم برای طراح وب شدن به ترتیب اینجا و اینجا است. در واقع این دو، پیشنیازهای این آموزش هستند.

شما بعد از یادگیری HTML و CSS نیاز است که به سراغ یادگیری جاوا اسکریپت بروید. بعد از یادگیری جاوااسکریپت بایستی یاد بگیرید. در واقع با HTML + CSS + Javascript می توانید وب سایت هایی استاتیک ایجاد کنید.

وب سایت استاتیک وب سایت هایی هستند که شما برای هر تغییر، بایستی وب سایت را مجددا آپلود کنید. چرا که دسترسی به دیتابیس ندارید. در واقع نمی توانید محتوای وب سایت را با استفاده از پنل مدیریتی تغییر دهید.

در مقابل، وب سایت های داینامیک را داریم که می توانید تنظیمات و محتوا را در دیتابیس ذخیره و بازیابی کنیم. در نتیجه برای ایجاد تغییرات تنها کافیست وارد پنل مدیریت شده و تغییرات را اعمال کنید.

برای ساخت وب سایت های داینامیک، بعد از یادگیری طراحی وب سایت استاتیک، به سراغ وردپرس بروید. یاد بگیرید چطور از توابع وردپرس استفاده کنید تا وب سایت هایی داینامیک ایجاد کنید.

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

1- بادگیری HTML

2- یادگیری CSS

3- یادگیری Javascript

4- یادگیری نحوه اتصال قالب ساخته شده به وردپرس

5- (این قسمت را می توان قسمت back-end نامید که می توانید برای تسلط کامل بر back-end، شروع به یادگیری PHP کنید)

با مشاهده این پکیج آموزشی و پیشنیازهایی که برای آن معرفی شده اند، قدم های 1 و 2 طراح سایت شدن را برداشته اید.

بعد از توضیحاتی که داده شد، بریم سراغ سرفصل های این دوره آموزشی: