آموزش ایجاد یک طراحی وب سایت واکنش گرا

سرفصل ها و درس ها

معرفی Introduction

• معرفی Introduction

• در مورد این دوره About this course

• شرایط و فناوری که ما پوشش خواهیم داد Terms and technology we'll be covering

• آنچه برای تکمیل این دوره نیاز دارید What you'll need to complete this course

• درباره فایل های تمرین About the exercise files

آماده سازی محتوا و ساختار HTML Preparing the HTML Content and Structure

• راه اندازی پروژه ما Setting up our project

• استراتژی HTML برای طرح ما The HTML strategy for our layout

• ایجاد کانتینرهای اصلی HTML Creating the main HTML containers

• اضافه کردن محتوا به هدر Adding content into the header

• اضافه کردن محتوا به بخش اصلی Add content to main section

• اضافه کردن محتوا به بخش اتمسفر Add content to atmosphere section

• محتوا را به بخش How-To اضافه کنید Add content to the How-To section

• افزودن پیمایش Adding the navigation

• افزودن محتوای پاورقی Adding the footer content

ایجاد Style و Layout با CSS Creating the Style and Layout with CSS

• وارد کردن فونت گوگل Importing a Google Font

• تعریف سبک های متن اصلی Defining the basic text styles

• عنوان و ظرف صفحه را استایل دهید Style the heading and page container

• آرم و آیتم قهرمان را سبک کنید Style the logo and hero item

• ایجاد سبک دکمه Creating the button style

• تنظیم ردیف سه ستونی Setting up three-column row

• اضافه کردن گرافیک به بخش اصلی Adding graphics to the main section

• پاک کردن شناورها با شبه عناصر CSS Clearing floats with CSS pseudo-elements

• طراحی بخش اتمسفر Styling the Atmosphere section

• استایل دادن به بخش How-To به کنار عناصر Styling the How-To Section aside elements

• استایل دادن به عنصر بلوک نقل قول How-To Section Styling the How-To Section blockquote element

• افزودن محتوا با شبه عناصر Adding content with pseudo-elements

• سبک دادن به پاورقی Styling the Footer

ایجاد یک سیستم منو با CSS Creating a Menu System with CSS

• قرار دادن مجدد Nav Re-positioning the Nav

• شکل دادن به فهرست موارد و پیوندها Styling the nav list-items and links

• نمایش و پنهان کردن منوهای فرعی nav Showing and Hiding the nav sub menus

• گزینه های سازگاری دستگاه برای nav Device compatibility options for nav

• افزودن فلش های نشانه Adding indication arrows

ایجاد تنظیمات چیدمان برای نمایشگرهای بزرگ و متوسط Making Layout Adjustments for Large and Medium Screens

• انجام تنظیمات جزئی برای نمایشگرهای بزرگتر Making minor adjustments for larger screens

• انجام تنظیمات برای نمایشگرهای بزرگ Making adjustments for large screens

• انجام تنظیمات برای صفحه نمایش متوسط Making adjustments for medium screens

انجام تنظیمات برای نمایشگرهای کوچک Making Adjustments for Small Screens

• حرکت ناوبری برای صفحه نمایش های کوچکتر Moving the navigation for smaller screens

• تنظیم بر اساس لوگو و عناصر قهرمان Adjusting to the logo and hero elements

• تنظیم مجدد بخش های اصلی و اتمسفر Rearranging the main and atmosphere sections

• تنظیم مجدد بخش نحوه انجام Rearranging the how-to section

• تنظیم مجدد ناوبری Rearranging the navigation

• تنظیم فاصله پیمایش و پاورقی Adjusting the spacing of the navigation and footer

انجام تنظیمات برای کوچکترین صفحه نمایش Making Adjustments for the Smallest Screens

• تنظیمات برای هدر و قهرمان Adjustments for the header and hero

• تنظیم بخش How-To Adjusting the How-To section

• تنظیم فوتر Adjusting the footer

ایجاد تنظیمات چیدمان و محتوا برای چاپ Making Layout and Content Adjustments for Print

• استراتژی برای چاپ Strategy for printing

• پیوند دادن یک فایل CSS برای چاپ Linking a CSS file for print

• تنظیم سبک های پایه Setting up the base styles

• تنظیم هدر Setting up the header

• نمایش URL ها هنگام چاپ Displaying URLs when printing

• راه اندازی بخش اصلی Setting up the Main section

• راه اندازی بخش اتمسفر Setting up the Atmosphere section

• تگ های تصویر خود را با CSS تغییر دهید Switching our image tags with CSS

• سبک دادن به پاورقی Styling the footer

• تنظیم شکستگی صفحه با CSS Setting page breaks with CSS

از اینجا به کجا بروم Where To Go From Here

• از اینجا به کجا برویم Where to go from here