آموزش تمرین های کدنویسی: HTML معنایی و CSS

معرفی Introduction

• خود را با طرح‌بندی‌های CSS به چالش بکشید Challenge yourself with CSS layouts

• آنچه شما باید بدانید What you should know

1. چالش ها: طرح بندی با Flexbox 1. Challenges: Layouts with Flexbox

• ایجاد نشانه گذاری معنایی برای عکس ها و متن Create semantic markup for photos and text

• به طور کلی یک ظاهر طراحی شده روبات ها Generally styling the robots

• یک طرح بندی انعطاف پذیر با Flexbox ایجاد کنید Create a flexible layout with Flexbox

• اضافه کردن کنترل در نقاط شکست Adding controls across breakpoints

2. چالش ها: طرح بندی با نوارهای ناوبری 2. Challenges: Layouts with Navigation Bars

• برای سربرگ و نوار ناوبری نشانه گذاری معنایی ایجاد کنید Create semantic markup for the header and navbar

• با دو روش یک طرح افقی ایجاد کنید Create a horizontal layout with two methods

• فقط با استفاده از CSS یک طرح بندی موبایل و دکمه همبرگر ایجاد کنید Create a mobile layout and hamburger button using only CSS

• برای ایجاد یک نوار ناوبری پاسخگو، یک طرح دسکتاپ اضافه کنید Add a desktop layout to create a responsive navbar

3. چالش ها: طرح بندی با شبکه 3. Challenges: Layouts with Grid

• برای یک سری عکس و متن نشانه گذاری معنایی ایجاد کنید Create semantic markup for a series of photos and text

• طرح دسکتاپ را ایجاد کنید Create the desktop layout

• شبکه را یکپارچه کنید و نقاط شکست ایجاد کنید Integrate the grid and create breakpoints

• چالش ها را برای یک صفحه وب کامل ترکیب کنید Combine the challenges for a full webpage