آموزش ایجاد یک سایت با شبکه CSS و بوت استرپ 4

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

بررسی اجمالی دوره Course Overview

• بررسی اجمالی دوره Course Overview

راه اندازی پروژه ما Setting up Our Project

• مقدمه Introduction

• نگاهی به نحوه کار شبکه CSS در سایت ما A Look at How CSS Grid Will Work on Our Site

• تنظیم براکت با Emmet Setting up Brackets with Emmet

• بیایید این سایت را شروع کنیم Let's Get This Site Started

• افزودن قلم های Google Adding Google Fonts

• با استفاده از قلم بسیار جذاب Using Font Awesome

• متحرک کردن پیمایش Animating the Scroll

• خلاصه Summary

افزودن محتوای سبک نشده Adding the Unstylized Content

• مقدمه Introduction

• تنظیم بخشها Setting up the Sections

• افزودن متن هدر Adding the Header Text

• چاپ ها ، نقاشی ها و نقاشی ها Prints, Paintings, and Drawings

• نقاشی هفته Painting of the Week

• در مورد پسر About the Guy

• آماده سازی گالری چاپها Preparing the Prints Gallery

• برخی از نقاشی های معروف و گران قیمت Some Famous and Expensive Paintings

• گالری طراحی را توسعه دهید Develop the Drawing Gallery

• بخش تماس The Contact Section

• بخش پاورقی The Footer Section

• خلاصه Summary

استفاده از سبک های بوت استرپ Using Bootstrap Styles

• مقدمه Introduction

• قلم ها ، رنگ ها و متن نمایش Fonts, Colors, and Display Text

• تصاویر پاسخگو Responsive Images

• کارت های بوت استرپ Bootstrap Cards

• نمایش فاصله و حاشیه متن Display Text Spacing and Borders

• سبک دادن به نقاشی هفته و درباره بخشها Styling the Painting of the Week and About Sections

• بخشهای هنری The Art Sections

• بخش تماس و پاورقی The Contact and Footer Section

• تغییر برخی از بوت استرپ و HTML Switching up Some Bootstrap and HTML

• سفارشی کردن ایستگاه از پیش تنظیم Bootstrap Customizing Bootstrap Presets

• افزودن تصاویر پس زمینه Adding the Background Images

• خلاصه Summary

استفاده از شبکه CSS برای چیدمان صفحه Using CSS Grid for Page Layout

• مقدمه Introduction

• سربرگ The Header

• شبکه های CSS تو در تو Nested CSS Grids

• بخش درباره The About Section

• بخشهای چاپ و نقاشی The Prints and Drawing Sections

• شبکه نقاشی ها The Paintings Grid

• شبکه تماس The Contact Grid

• شبکه پاورقی The Footer Grid

• خلاصه Summary

پایان سایت و خلاصه Finishing the Site and Summary

• مقدمه Introduction

• ضخیم شدن مرز Thickening a Border

• افزودن یک گروه دکمه Bootstrap Adding a Bootstrap Button Group

• راه اندازی Bootstrap Navbar Setting up the Bootstrap Navbar

• راه اندازهای راه انداز برای جلوه لایت باکس Bootstrap Modals for the Lightbox Effect

• تغییر بخش نقاشی Tweaking the Painting Section

• خلاصه Summary