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

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

خوش آمدید و قدم های اول Welcome and First Steps

• ساختار و پروژه های دوره Course Structure and Projects

• قبل از شروع بخوانید! Read Before You Start!

• راهنمای مهاجرت به نسخه 2 Migration Guide to v2

• مروری بر سطح بالا از توسعه وب A High-Level Overview of Web Development

• راه اندازی ویرایشگر کد ما Setting Up Our Code Editor

• اولین صفحه وب شما! Your Very First Webpage!

• دانلود مطالب دوره Downloading Course Material

• قبل از شروع تماشا کنید! Watch Before You Start!

اصول HTML HTML Fundamentals

• بخش معرفی Section Intro

• مقدمه ای بر HTML Introduction to HTML

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

• عناصر متن Text Elements

• عناصر متن بیشتر: فهرست ها More Text Elements: Lists

• تصاویر و ویژگی ها Images and Attributes

• هایپرلینک ها Hyperlinks

• ساختار صفحه ما Structuring our Page

• یادداشتی در مورد HTML معنایی A Note on Semantic HTML

• نصب افزونه‌های کد VS اضافی Installing Additional VS Code Extensions

• چالش شماره 1 CHALLENGE #1

• چالش شماره 2 CHALLENGE #2

اصول CSS CSS Fundamentals

• بخش معرفی Section Intro

• مقدمه ای بر CSS Introduction to CSS

• CSS داخلی، داخلی و خارجی Inline, Internal and External CSS

• استایل دادن به متن Styling Text

• ترکیب انتخابگرها Combining Selectors

• انتخابگرهای کلاس و شناسه Class and ID Selectors

• کار با رنگ ها Working With Colors

• شبه طبقات Pseudo-classes

• استایل سازی هایپرلینک ها Styling Hyperlinks

• با استفاده از Chrome DevTools Using Chrome DevTools

• نظریه CSS شماره 1: تضاد بین انتخابگرها CSS Theory #1: Conflicts Between Selectors

• نظریه شماره 2 CSS: وراثت و انتخابگر جهانی CSS Theory #2: Inheritance and the Universal Selector

• چالش شماره 1 CHALLENGE #1

• نظریه شماره 3 CSS: مدل جعبه CSS CSS Theory #3: The CSS Box Model

• استفاده از حاشیه ها و بالشتک ها Using Margins and Paddings

• افزودن ابعاد Adding Dimensions

• وسط صفحه ما Centering our Page

• چالش شماره 2 CHALLENGE #2

• نظریه شماره 4 CSS: انواع جعبه ها CSS Theory #4: Types of Boxes

• نظریه شماره 5 CSS: موقعیت یابی مطلق CSS Theory #5: Absolute Positioning

• شبه عناصر Pseudo-elements

• مهارت برنامه نویس شماره 1: گوگل و خواندن اسناد Developer Skill #1: Googling and Reading Documentation

• مهارت توسعه‌دهنده شماره ۲: اشکال‌زدایی و پرسیدن سؤال Developer Skill #2: Debugging and Asking Questions

• چالش شماره 3 CHALLENGE #3

Layouts: Floats، Flexbox و CSS Grid Fundamentals Layouts: Floats, Flexbox, and CSS Grid Fundamentals

• بخش معرفی Section Intro

• 3 روش چیدمان ساختمان The 3 Ways of Building Layouts

• استفاده از شناورها Using Floats

• پاکسازی شناورها Clearing Floats

• ساخت یک طرح شناور ساده Building a Simple Float Layout

• box-sizing: border-box box-sizing: border-box

• چالش شماره 1 CHALLENGE #1

• آشنایی با فلکس باکس Introduction to Flexbox

• نمای کلی Flexbox A Flexbox Overview

• فاصله گذاری و تراز کردن آیتم های فلکس Spacing and Aligning Flex Items

• ویژگی فلکس The flex Property

• افزودن Flexbox به پروژه ما Adding Flexbox to Our Project

• ساخت یک چیدمان ساده Flexbox Building a Simple Flexbox Layout

• چالش شماره 2 CHALLENGE #2

• مقدمه ای بر CSS Grid Introduction to CSS Grid

• یک نمای کلی شبکه CSS A CSS Grid Overview

• اندازه ستون ها و ردیف ها Sizing Grid Columns and Rows

• قرار دادن و پوشا اقلام شبکه Placing and Spanning Grid Items

• تراز کردن آیتم ها و آهنگ های شبکه Aligning Grid Items and Tracks

• ساختن یک طرح بندی ساده CSS Grid Building a Simple CSS Grid Layout

• چالش شماره 3 CHALLENGE #3

قوانین و چارچوب طراحی وب سایت Web Design Rules and Framework

• بخش معرفی Section Intro

• بررسی اجمالی پروژه Project Overview

• مروری بر طراحی وب سایت و شخصیت های وب سایت Overview of Web Design and Website Personalities

• قوانین طراحی وب سایت شماره 1: تایپوگرافی Web Design Rules #1: Typography

• پیاده سازی تایپوگرافی Implementing Typography

• قوانین طراحی وب سایت شماره 2: رنگ ها Web Design Rules #2: Colors

• پیاده سازی رنگ ها Implementing Colors

• قوانین طراحی وب سایت شماره 3: تصاویر و تصاویر Web Design Rules #3: Images and Illustrations

• قوانین طراحی وب سایت شماره 4: نمادها Web Design Rules #4: Icons

• پیاده سازی آیکون ها Implementing Icons

• قوانین طراحی وب سایت شماره 5: سایه ها Web Design Rules #5: Shadows

• پیاده سازی سایه ها Implementing Shadows

• قوانین طراحی وب سایت شماره 6: شعاع مرزی Web Design Rules #6: Border-radius

• اجرای Border-radius Implementing Border-radius

• قوانین طراحی وب سایت شماره 7: فضای خالی Web Design Rules #7: Whitespace

• قوانین طراحی وب سایت شماره 8: سلسله مراتب بصری Web Design Rules #8: Visual Hierarchy

• پیاده سازی فضای خالی و سلسله مراتب بصری Implementing Whitespace and Visual Hierarchy

• قوانین طراحی وب سایت شماره 9: تجربه کاربری (UX) Web Design Rules #9: User Experience (UX)

• وب سایت-شخصیت ها-چارچوب The Website-Personalities-Framework

• The Missing Piece: Steal Like An Artist! The Missing Piece: Steal Like An Artist!

اجزا و الگوهای چیدمان Components and Layout Patterns

• بخش معرفی Section Intro

• قوانین طراحی وب سایت شماره 10 - قسمت 1: عناصر و اجزاء Web Design Rules #10 - Part 1: Elements and Components

• ساختن یک قطعه آکاردئونی - قسمت 1 Building an Accordion Component - Part 1

• ساختن یک قطعه آکاردئونی - قسمت 2 Building an Accordion Component - Part 2

• ساختن یک جزء چرخ فلک - قسمت 1 Building a Carousel Component - Part 1

• ساختن یک جزء چرخ فلک - قسمت 2 Building a Carousel Component - Part 2

• ساخت جزء جدول - قسمت 1 Building a Table Component - Part 1

• ساخت جزء جدول - قسمت 2 Building a Table Component - Part 2

• چالش شماره 1: ایجاد یک جزء صفحه بندی CHALLENGE #1: Building a Pagination Component

• قوانین طراحی وب سایت شماره 10 - قسمت 2: الگوهای چیدمان Web Design Rules #10 - Part 2: Layout Patterns

• بخش ساختن یک قهرمان - قسمت 1 Building a Hero Section - Part 1

• بخش ساختن یک قهرمان - قسمت 2 Building a Hero Section - Part 2

• ساخت طرح بندی برنامه وب - قسمت 1 Building a Web Application Layout - Part 1

• ساخت طرح بندی برنامه وب - قسمت 2 Building a Web Application Layout - Part 2

پروژه Omnifood – راه اندازی و نسخه دسکتاپ Omnifood Project – Setup and Desktop Version

• بخش معرفی Section Intro

• 7 مرحله برای یک وب سایت عالی The 7 Steps to a Great Website

• تعریف و برنامه ریزی پروژه (مرحله 1 و 2) Defining and Planning the Project (Steps 1 and 2)

• طرح ایده های چیدمان اولیه (مرحله 3) Sketching Initial Layout Ideas (Step 3)

• اولین مراحل طراحی و توسعه (مرحله 4) First Design and Development Steps (Step 4)

• اصول طراحی واکنشگرا Responsive Design Principles

• رم و حداکثر عرض چگونه کار می کنند How rem and max-width Work

• ساختن قهرمان - قسمت 1 Building the Hero - Part 1

• ساختن قهرمان - قسمت 2 Building the Hero - Part 2

• ساختن قهرمان - قسمت 3 Building the Hero - Part 3

• ساخت هدر Building the Header

• ساخت ناوبری Building the Navigation

• راه اندازی یک شبکه قابل استفاده مجدد Setting Up a Reusable Grid

• ساخت بخش چگونه کار می کند - قسمت 1 Building the How-It-Works Section - Part 1

• ساخت بخش چگونه کار می کند - قسمت 2 Building the How-It-Works Section - Part 2

• ساخت بخش Featured-In Building the Featured-In Section

• ساخت بخش وعده های غذایی - قسمت 1 Building the Meals Section - Part 1

• بخش ساختن وعده های غذایی - قسمت 2 Building the Meals Section - Part 2

• بخش ساختن وعده های غذایی - قسمت 3 Building the Meals Section - Part 3

• ساخت بخش توصیفات - قسمت 1 Building the Testimonials Section - Part 1

• ساخت بخش توصیفات - قسمت 2 Building the Testimonials Section - Part 2

• ساخت بخش قیمت گذاری - قسمت 1 Building the Pricing Section - Part 1

• ساخت بخش قیمت گذاری - قسمت 2 Building the Pricing Section - Part 2

• ساخت بخش ویژگی ها Building the Features Part

• ساخت بخش Call-to-Action - قسمت 1 Building the Call-To-Action Section - Part 1

• ساخت بخش Call-To-Action - قسمت 2 Building the Call-To-Action Section - Part 2

• ساخت بخش فراخوان - قسمت 3 Building the Call-To-Action Section - Part 3

• ساخت پاورقی - قسمت 1 Building the Footer - Part 1

• ساخت پاورقی - قسمت 2 Building the Footer - Part 2

پروژه Omnifood – طراحی وب سایت واکنش گرا Omnifood Project – Responsive Web Design

• بخش معرفی Section Intro

• پرسش های رسانه ای چگونه کار می کنند How Media Queries Work

• نحوه انتخاب نقاط شکست How to Select Breakpoints

• پاسخگویی به لپ تاپ های کوچک Responding to Small Laptops

• پاسخگویی به تبلت های منظره Responding to Landscape Tablets

• پاسخگویی به تبلت ها Responding to Tablets

• ساخت ناوبری موبایل Building the Mobile Navigation

• پاسخگویی به تبلت های کوچکتر Responding to Smaller Tablets

• پاسخگویی به تلفن ها Responding to Phones

پروژه Omnifood – اثرات، بهینه سازی ها و استقرار Omnifood Project – Effects, Optimizations and Deployment

• بخش معرفی Section Intro

• مقدمه ای کوتاه بر جاوا اسکریپت A Short Introduction to JavaScript

• کارکرد ناوبری موبایل Making the Mobile Navigation Work

• پیاده سازی اسکرول صاف Implementing Smooth Scrolling

• پیاده سازی نوار ناوبری چسبنده Implementing a Sticky Navigation Bar

• پشتیبانی از مرورگر و رفع شکاف Flexbox در سافاری Browser Support and Fixing Flexbox Gap in Safari

• تست عملکرد با فانوس دریایی Testing Performance With Lighthouse

• افزودن فاویکون و توضیحات متا Adding Favicon and Meta Description

• بهینه سازی های تصویر Image Optimizations

• استقرار در Netlify Deployment to Netlify

• کارکردن فرم با Netlify Forms Making the Form Work With Netlify Forms

پایان! The End!

• از اینجا کجا برویم Where to Go from Here

• دوره های دیگر من + به روز رسانی My Other Courses + Updates

[LEGACY] دوره قدیمی نسخه 1 [LEGACY] Old Course Version 1

• نسخه قدیمی دوره را دانلود کنید Download the Old Course Version