آموزش طراحی وب برای مبتدیان: برنامه نویسی دنیای واقعی در HTML و CSS

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

خوش آمدی! Welcome!

• معرفی دوره Course Introduction

• تصویر کلی از دوره (چه چیزی باید انتظار داشت) Big Picture Overview of Course (What To Expect)

ملزومات HTML HTML Essentials

• چرا HTML هیجان انگیز است Why HTML is Exciting

• ابتدا به HTML نگاه کنید First Look at HTML

• ساده ترین راه برای شروع The Easiest Way to Get Started

• دست در! اولین فایل HTML خود را ایجاد کنید Hands On! Create your First HTML File

• عروسک های روی هم چیده شده روسی: لیست های گلوله ای Russian Stacking Dolls: Bulleted Lists

• ساختار سند HTML HTML Document Structure

• نگاه اول به ویژگی ها: پیوند دادن صفحات به یکدیگر First Look at Attributes: Linking Pages Together

• بخش 1 بررسی Section 1 Review

افزودن رسانه به صفحه وب Adding Media to a Web Page

• تصاویر Images

• فایل های صوتی Audio Files

• فایل های ویدیویی Video Files

• گرافیک و تصاویر برداری (SVG و Figma) Vector Graphics & Illustrations (SVG & Figma)

مبانی متن Text Basics

• سرفصل ها Headings

• لیست ها Lists

• کج با حروف درشت Bold & Italic

• شخصیت های خاص Special Characters

معناشناسی و سازمان Semantics & Organization

• عناصر ساختاری معنایی Semantic Structural Elements

• جهت یابی Navigation

• عناصر غیر معنایی ("div" و "span") Non-semantic Elements ("div" and "span")

• نظرات HTML HTML Comments

• عنصر "بخش". The "Section" Element

تشکیل می دهد Forms

• تشکیل می دهد Forms

• انواع مختلف ورودی Different Types of Inputs

• انتخاب بین مجموعه ای از گزینه ها Choosing Between a set of options

جداول Tables

• نحوه ایجاد جدول داده ها How to Create a Table of Data

• از جداول برای چیدمان استفاده نکنید Do Not Use Tables for Layout

CSS Essentials CSS Essentials

• معرفی CSS CSS Introduction

• انتخابگرهای CSS CSS Selectors

• آبشار The Cascade

• مدل جعبه Box Model

• یادداشت سریع درباره CSS Floats Quick Note About CSS Floats

• ایجاد طرح بندی صفحه با Floats Creating a Page Layout with Floats

• مدرسه زیبایی! آنچه را که آموخته ایم به کار گیریم Beauty School! Apply What We've Learned

CSS متوسط Intermediate CSS

• منوی پیمایش یک ظاهر طراحی شده Styling Navigation Menu

• محتوای همپوشانی و پس‌زمینه‌های شفاف Overlapping Content & Transparent Backgrounds

وظایف CSS کمتر هیجان انگیز اما هنوز ضروری است Less Exciting Yet Still Necessary CSS Tasks

• استایل دادن به جداول داده Styling Data Tables

• فرم های یک ظاهر طراحی شده Styling Forms

تایپوگرافی CSS CSS Typography

• تایپوگرافی CSS CSS Typography

• استفاده از فونت های سفارشی "وب". Using Custom "Web" Fonts

مهلت زمانی توسعه دهنده! Developer Timeout!

• ابزارهای توسعه دهنده | عناصر را بازرسی کنید Developer Tools | Inspect Elements

پس زمینه های CSS CSS Backgrounds

• تصاویر پس زمینه Background Images

• پس زمینه های گرادیان Gradient Backgrounds

• CSS Sprites CSS Sprites

• پس زمینه با عرض کامل - محتوای با عرض ثابت Full Width Backgrounds - Fixed Width Content

طراحی وب سایت واکنش گرا Responsive Web Design

• مقدمه فصل Chapter Introduction

• طراحی وب سایت واکنش گرا Responsive Web Design

• شبکه های پاسخگو Responsive Grids

• شبکه پاسخگو با Flexbox Responsive Grid with Flexbox

Flexbox در CSS چیست؟ What is Flexbox in CSS?

• فلکس باکس (قسمت 1) Flexbox (Part 1)

• فلکس باکس (قسمت 2) Flexbox (Part 2)

جلوه های ویژه CSS3 CSS3 Special Effects

• سایه های جعبه Box Shadows

• گوشه های گرد Rounded Corners

• تبدیل CSS CSS Transform

• انتقال CSS CSS Transitions

• انیمیشن های CSS CSS Animations

استفاده از جاوا اسکریپت بدون نوشتن جاوا اسکریپت Leveraging JavaScript without Writing JavaScript

• مقدمه فصل Chapter Introduction

• نمایش اسلاید (قسمت 1) Slideshow (Part 1)

• نمایش اسلاید (قسمت 2) Slideshow (Part 2)

• با کلیک/ضربه زدن محتوا را آشکار و پنهان کنید Reveal & Hide Content on Click / Tap

• باز کردن تصویر در پنجره مودال (گالری) Open Image in Modal Window (Gallery)

بوت استرپ چیست؟ What is Bootstrap?

• بوت استرپ (قسمت 1) Bootstrap (Part 1)

• بوت استرپ (قسمت 2) Bootstrap (Part 2)

ساس Sass

• شروع کار با Sass Getting Started With Sass

• مبانی Sass Sass Basics

• ساس ادامه داد Sass Continued

انتشار یک وب سایت زنده بر روی وب Pushing a Website Live Up Onto The Web

• پخش زنده با استفاده از صفحات GitHub Going Live using GitHub Pages

سازگاری بین مرورگرها Cross Browser Compatibility

• پشتیبانی از مرورگر متقابل و تشخیص ویژگی Cross Browser Support & Feature Detection

فراتر از این دوره Beyond This Course

• مراحل بعدی Next Steps

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