آموزش ریسپانسیو سازی صفحات وب

معرفی دوره

viewport قسمتی از صفحه وب ما است که کاربر در حال تماشای آن میباشد ما در این ویدیو با آن آشنا خواهیم شد و نحوه وارد کردن آن به فایل html خود را یاد میگیریم ممنون از همراهی شما.

یکی از ویژگی های media query به ما اجازه میدهد که با توجه به عرض صفحه نمایش بتوانیم شرط گذاری کنیم و تغییرات در استایل وب سایت به وجود آوریم در این ویدیو راجب media query و روش استفاده از آن را با یک مثال توضیح میدهیم

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

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

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

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

ما در این قسمت سکشن sweet رو ریسپانسیو میکنیم البته قبل از اون ایرادی در قالب رو برطرف میکنیم که قالب کاملا بدون مشکل باشه, پس بیاین شروع کنیم.

توی این ویدیو میریم و بخش بعدی رو ریسپانسیو میکنیم , یعنی بخش menu پس بیاین و شروع کنیم

در این ویدیو بخش بعدی که hot هست رو ریسپانسیو میکنیم و کم کم داریم به تموم کردن کار ریسپانسیو این تم میرسیم

خب بریم سراغ یکی از آخرین بخش های این قالب یعنی بخش delight , چیز سختی نیست پس بیاین تمومش کنیم

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

یکم راجب دوره حرف بزنیم

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

خب ما در این ویدیو قسمت nav خودمون رو بیشتر جلو میبریم و در ویدیو بعد این قسمت رو تموم میکنیم

خب خب خب در این قسمت بالاخره nav رو تموم میکنیم و با خیال راحت میریم سراغ قسمت ها بعدی پس بیاین تمومش کنیم

در این ویدیو میریم و big section رو ریسپانسیو میکنیم

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

خب ما در این ویدیو 2 بخش رو به صورت کامل ریسپانسیو میکنیم پس با من همراه باشید

خب توی این ویدیو footer خودمون رو ریسپانسیو میکنیم و فصل اول این دوره اینجا به پایان میرسه

در این ویدیو در مورد آپدیت دوره و نکات دیگری صحبت میشه

در این ویدیو در مورد تفاوت width و max-width صحبت میکنیم

در این ویدیو به بررسی مدیا کوئری میپردازیم

در این ویدیو به بررسی سیستم گرید بوت استرپ خواهیم پرداخت

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

در این ویدیو ادامه سیستم گریدبندی خودمون رو مینویسیم

در این ویدیو ساخت سیستم گرید خودمون رو پیش میبریم

در این ویدیو سیستم گریدبندی خودمون رو تکمیل تر میکنیم

در این ویدیو سیستم گریدبندی خودمون رو تکمیل تر میکنیم

در این ویدیو ساخت سیستم گریدبندی ما به پایان میرسه