آموزش CSS 3 کاربردی (2023) - ساخت 6 صفحه وب حرفه ای

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

معرفی Introduction

• معرفی Introduction

قسمت 1 - ایجاد یک صفحه فهرست محصولات تجارت الکترونیک Part 1 - Create an eCommerce Product Listing Page

• به تم Shoppe Figma مراجعه کنید Reference the Shoppe Figma Theme

• منوی ناوبری HTML Navigation Menu HTML

• پیوند CSS را با Core Styles تأیید کنید Confirm CSS Linking with Core Styles

• اضافه کردن نمادهای ناوبری Add Navigation Icons

• گسترش عناصر ناوبری Widen Navigation Elements

• منوی ناوبری و لوگو را تمام کنید Finish the Navigation Menu and Logo

• یک تصویر قهرمان اضافه کنید Add a Hero Image

• چیدمان بدنه اصلی Main Body Layout

• محتوای بدن و عرض نسبی Body Content and Relative Widths

• طرح و سبک پیوندهای پاورقی Footer Links Layout and Styles

• پاورقی را نهایی کنید Finalize the Footer

قسمت 2 - یک صفحه جزئیات محصول با نظرات مشتریان بسازید Part 2 - Build a Product Detail Page with Customer Reviews

• به صفحه محصول در Shoppe مراجعه کنید Reference the Product Page in Shoppe

• نمای کلی طراحی صفحه محصول Product Page Design Overview

• ظروف HTML برای جزئیات محصول HTML Containers for the Product Details

• اطلاعات محصول HTML Product Info HTML

• سبک دادن به تصاویر گالری Styling the Gallery Images

• سبک های چیدمان برای جزئیات محصول Layout Styles for the Product Details

• استایل های دکمه و برچسب Button and Tag Styles

• منوی محصول و نظرات HTML Product Menu and Reviews HTML

• بررسی فرم HTML Review Form HTML

• منوی محصول CSS Product Menu CSS

• بررسی سبک های فرم Review Form Styles

• CSS جمع بندی و نتیجه گیری CSS Wrapup and Conclusions

قسمت 3 - یک صفحه فهرست قسمت پادکست بسازید Part 3 - Make a Podcast Episode List Page

• به تم Flowbase مراجعه کنید Reference the Flowbase Theme

• نمای کلی طراحی پایگاه جریان Flowbase Design Overview

• دانلود تم و دارایی Theming and Asset Downloads

• طرح‌بندی و سبک‌های منوی Nav Nav Menu Layout and Styles

• سبک های دکمه و HTML قهرمان Button Styles and Hero HTML

• طرح بندی قهرمان و سبک های عنوان Hero Layout and Title Styles

• شکل دادن به توضیحات قهرمان و فراداده Styling the Hero Description and Metadata

• چیدمان و سبک های دکمه اصلی Main Button Layout and Styles

• دکمه شکوفا می شود و هدر می شود Button Flourishes and Header

• بررسی اجمالی طراحی آخرین قسمت ها Latest Episodes Design Overview

• فهرست اپیزود HTML Episode List HTML

• آخرین قسمت ها و سبک های فیلتر ژانر Latest Episodes and Genre Filter Styles

• شرح قسمت و سبک برچسب Episode Description and Tag Styles

• میزبان و جدیدترین سبک های اپیزود Host and Latest Episode Styles

• پاورقی HTML Footer HTML

• سبک های پاورقی Footer Styles

یک صفحه درباره قانع کننده ایجاد کنید Create a Compelling About Page

• به صفحه درباره پایگاه جریان مراجعه کنید Reference the Flowbase About Page

• نمای کلی طراحی و Copypasta Design Overview and Copypasta

• هدر صفحه HTML و CSS Page Header HTML and CSS

• تاریخچه و آمار HTML History and Stats HTML

• بنیانگذار و حامی HTML Founder and Sponsor HTML

• سبک های آمار Stats Styles

• درباره و تاریخچه سبک About and History Styles

• بنیانگذار و سبک میزبان اصلی Founder and Main Host Styles

• سبک های بخش حامی Sponsor Section Styles

• فرم تماس HTML Contact Form HTML

• فرم تماس با CSS Contact Form CSS

• اندازه جعبه و بسته بندی Box Sizing and Wrapup

یک صفحه منوی رستوران ایجاد کنید Develop a Restaurant Menu Page

• به تم رستوران FoodZero مراجعه کنید Reference the FoodZero Restaurant Theme

• نمای کلی طراحی FoodZero FoodZero Design Overview

• هدر HTML Header HTML

• ساختار HTML منو Menu HTML Structure

• تکمیل منوی HTML Completing the HTML Menu

• رزرو و پاورقی HTML Reservations and Footer HTML

• سبک های فونت و دکمه Font and Button Styles

• یک ظاهر طراحی شده تاپ ناو Styling the Top Nav

• اتمام قهرمان Finishing the Hero

• تنظیم دقیق چیدمان منو Fine-tuning the Menu Layout

• تکمیل منو Completing the Menu

• سبک های رزرواسیون Reservation Styles

• شکل دادن به فرم خبرنامه Styling the Newsletter Form

• سبک‌های کانتینر حق نسخه‌برداری Copyright Container Styles

یک مقاله وبلاگ سفارشی بنویسید Write a Customized Blog Article

• به طرح مقاله بلاگ (با سایدبار) در فودزیرو مراجعه کنید Reference the Blog Article (with Sidebar) design in FoodZero

• نمای کلی طراحی و حمل کد Design Overview and Code Carrying

• دانلود دارایی Asset Downloads

• Hero Container HTML Hero Container HTML

• طرح بندی مقاله HTML Article Layout HTML

• HTML نوار کناری Sidebar HTML

• لیست نظرات HTML Comment List HTML

• فرم نظر جدید HTML New Comment Form HTML

• سبک کانتینر قهرمان Hero Container Styles

• طرح بندی مقاله اصلی Main Article Layout

• سبک های محتوای مقاله Article Content Styles

• سبک های فراداده Metadata Styles

• نوار جستجو و طرح بندی نوار کناری Search Bar and Sidebar Layout

• سبک های بخش نوار کناری Sidebar Section Styles

• پست ها و برچسب های اخیر Recent Posts and Tags

• پست قبلی و بعدی Previous and Next Post

• استایل کردن نظرات پست Styling Post Comments

• سبک های جدید فرم نظر New Comment Form Styles

سخنرانی پاداش Bonus Lecture

• سخنرانی جایزه (دیسکورد و پیوندهای دیگر) Bonus Lecture (Discord and other links)