نحوه ایجاد یک وب سایت: آموزش HTML و آموزش CSS

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

معرفی Introduction

• خوش آمدی Welcome

• طرح کلی دوره Course outline

• منابع کد Code resources

• چگونه برای موفقیت How To Succeed

• هنر ساخت وب سایت The Art of Building Websites

شروع شدن Getting Started

• سرگرمی شماره 1 - کدهای وضعیت HTTP Having Fun #1 - HTTP Status Codes

• سرگرمی شماره 2 - ساختن اخبار Having Fun #2 - Making The News

• سرگرمی شماره 3 - بازی ویدیویی دایناسور Having Fun #3 - The Dinosaur Video Game

آشنایی با اینترنت و وب جهانی Understanding The Internet & World Wide Web

• تاریخچه اینترنت History of the Internet

• تاریخچه شبکه جهانی وب History of the World Wide Web

• چه کسی اینترنت و WWW را کنترل می کند؟ Who Controls the Internet & WWW?

• مستندات وب Web Documentation

• برجسته کردن صفحات وب و برنامه های افزودنی کروم Highlighting Webpages & Chrome Extensions

• چگونه وب کار می کند How The Web Works

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

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

• آناتومی یک صفحه HTML Anatomy of an HTML Page

• اصطلاحات HTML HTML Terminology

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

• جدایی از نگرانی ها A Separation of Concerns

• مجموعه قوانین CSS CSS Rule-sets

• پیوند دادن CSS به HTML Linking CSS to HTML

• چند انتخاب کننده CSS Multiple CSS Selectors

پیکربندی محیط شما Configuring Your Environment

• محیط های توسعه یکپارچه Integrated Development Environments

• WebStorm WebStorm

• Atom.io Atom.io

• والا Sublime

• دریم ویور Dreamweaver

با Github ماهر شوید Becoming Skilled with Github

• نمای کلی Github Github Overview

• Git & Github - The Story Git & Github - The Story

• راه اندازی git و github در ویندوز Setting up git and github on Windows

• راه اندازی git و github در مک Setting up git and github on Mac

• ملزومات ترمینال Terminal Essentials

• ایجاد یک مخزن Git محلی "Master". Creating a “Master” Local Git Repository

• ایجاد یک مخزن «Origin/Master» از راه دور Github Creating an “Origin/Master” Remote Github Repository

• استفاده از Github - دستورات پایه Using Github - Basic Commands

• استفاده از Github - حذف یک Repo Using Github - Deleting A Repo

ملزومات HTML HTML Essentials

• نمای کلی بخش Section Overview

• قراردادهای نامگذاری فایل FIle Naming Conventions

• قراردادهای نامگذاری پوشه Folder Naming Conventions

• باز کردن یک پروژه در Webstorm Opening A Project in Webstorm

• برچسب های ضروری Essential Tags

• Emmet.io Emmet.io

• تغییر قالب Webstorm Modifying Webstorm Formatting

• ویژگی ها را تگ کنید Tag Attributes

• URL های نسبی Relative URLs

• URL های مطلق Absolute URLs

• نظرات Comments

• تمرینات دستی Hands-On Exercises

• تمرینات دستی - راه حل Hands-On Exercises - Solutions

CSS Essentials CSS Essentials

• نمای کلی بخش Section Overview

• همه برچسب ها و ویژگی های HTML، همه انتخابگرها و ویژگی های CSS All HTML Tags & Attributes, All CSS Selectors & Properties

• املاک مرزی border Property

• دارایی مرزی border-radius Property

• نمایش ویژگی display Property

• ویژگی های padding & margin padding & margin Properties

• مدل جعبه Box Model

• ویژگی جعبه اندازه box-Sizing Property

• مرور Review

• تمرینات دستی Hands-On Exercises

• تمرینات دستی - راه حل Hands-On Exercises - Solutions

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

• نمای کلی بخش Section Overview

• CSS بازنشانی می شود CSS Resets

• انتخابگرهای CSS: عنصر، کلاس، شناسه CSS Selectors: element, class, id

• انتخابگرها: ویژگی Selectors: attribute

• انتخابگرها: شبه کلاس ها Selectors: pseudo-classes

• انتخابگرها: شبه کلاس: فوکوس Selectors: pseudo-class :focus

• انتخاب کنندگان: شبه کلاس نهمین فرزند - قسمت اول Selectors: pseudo-class nth child - part I

• انتخاب کنندگان: شبه کلاس نهم فرزند - قسمت دوم Selectors: pseudo-class nth child - part II

• انتخابگرها: تایپوگرافی شبه کلاس Selectors: pseudo-class typography

• انتخابگرها: انتخابگرهای تو در تو Selectors: nested selectors

• حاشیه: 0 خودکار و ویژگی نمایشگر margin: 0 auto & The Display Property

• تمرین دستی - صفحه موج سوار Hands-On Exercise - The Surfer Page

• تمرین دستی - صفحه موج سوار - راه حل Hands-On Exercise - The Surfer Page - Solution

• تمرینات دستی Hands-On Exercises

• تمرینات دستی - راه حل I Hands-On Exercises - Solutions I

• تمرینات دستی - راه حل II Hands-On Exercises - Solutions II

• مرور Review

ترتیب و ویژگی CSS CSS Order & Specificity

• نمای کلی بخش Section Overview

• کاربرد CSS توسط مرورگر The Browser’s Application of CSS

• چالش و راه حل شماره 1 Challenge & Solution #1

• چالش و راه حل شماره 2، 3، 4 Challenge & Solution #2, 3, 4

• چالش و راه حل شماره 5، 6 Challenge & Solution #5, 6

• تمرین دستی Hands-On Exercise

• تمرینات دستی - راه حل Hands-On Exercises - Solutions

• مرور Review

قالب بندی متن Formatting Text

• نمای کلی بخش Section Overview

• ویژگی فونت font Property

• ویژگی font-family font-family Property

• ویژگی اندازه فونت font-size Property

• خواص فونت وزن و سبک فونت font-weight & font-style Properties

• ویژگی های تغییر فونت و تبدیل متن font-variant & text-transform Properties

• ویژگی line-height line-height Property

• ویژگی های فاصله حروف، فاصله بین کلمات و رنگ ها letter-spacing, word-spacing, & color Properties

• فونت های گوگل Google Fonts

• ویژگی های text-align & text-shadow text-align & text-shadow Properties

• text-decoration Property & <del> text-decoration Property & <del>

• ویژگی text-indent text-indent Property

• تمرینات دستی Hands-On Exercises

• تمرینات دستی - راه حل Hands-On Exercises - Solutions

• مرور Review

ساختار اسناد Structuring Documents

• نمای کلی بخش Section Overview

• ساختار سند - اصطلاحات Document Structure - Terminology

• HTML معنایی Semantic HTML

• تمرینات عملی - HTML معنایی Hands-On Exercises - Semantic HTML

• تمرینات دستی - HTML معنایی - راه حل های من Hands-On Exercises - Semantic HTML - My Solutions

• HTML معنایی - هدر، ناوبری، اصلی Semantic HTML - header, nav, main

• HTML معنایی - مقاله، بخش Semantic HTML - article, section

• HTML معنایی - کنار و پاورقی Semantic HTML - aside & footer

• HTML معنایی - مثال ها Semantic HTML - Examples

• HTML معنایی - سرفصل ها - h1 - h6 Semantic HTML - headings - h1 - h6

• HTML معنایی - شکل، figcaption Semantic HTML - figure, figcaption

• تمرینات دستی Hands-On Exercises

• تمرینات دستی - راه حل Hands-On Exercises - Solutions

• تمرینات عملی - یادگیری عناصر HTML - راه حل های من Hands-On Exercises - Learning HTML Elements - My Solutions

• مرور Review

اصول چیدمان - مدل جعبه و نمایشگر Layout Fundamentals - Box Model & Display

• نمای کلی بخش Section Overview

• منابع طرح و بررسی Layout Resources & Review

• نمایش بررسی اموال Display Property Review

• تمرین دستی - صفحه Divs Hands-On Exercise - Page of Divs

• تمرین دستی - صفحه Divs - راه حل Hands-On Exercise - Page of Divs - Solution

• تمرین دستی - منوی افقی Hands-On Exercise - Horizontal Menu

• تمرین دستی - منوی افقی - راه حل Hands-On Exercise - Horizontal Menu - Solution

• فروشگاه تاکو - ویژگی نمایش Taco Shop - Display Property

• مرور Review

چیدمان با Flexbox Layout with Flexbox

• نمای کلی بخش Section Overview

• درک Flexbox - Container & Items Understanding Flexbox - Container & Items

• ظروف و ایجاد یک کانتینر فلکس Containers & Creating A Flex Container

• ویژگی کانتینر: انعطاف پذیر Container Property: flex-wrap

• ویژگی کانتینر: جهت انعطاف پذیر (محور اصلی و محور متقاطع) Container Property: flex-direction (primary-axis & cross-axis)

• ویژگی کانتینر: جریان انعطاف پذیر Container Property: flex-flow

• ویژگی کانتینر: justify-content Container Property: justify-content

• ویژگی کانتینر: align-اقلام Container Property: align-items

• ویژگی کانتینر: align-content Container Property: align-content

• ویژگی مورد: تراز کردن خود Item Property: align-self

• ویژگی مورد: سفارش Item Property: order

• ویژگی مورد: flex-grow Item Property: flex-grow

• ویژگی مورد: انعطاف پذیر Item Property: flex-shrink

• ویژگی مورد: flex-bases Item Property: flex-basis

• ویژگی آیتم: flex Item Property: flex

• تمرین دستی - Flexbox Froggy Hands-On Exercise - Flexbox Froggy

• تمرینات دستی Hands-On Exercises

• تمرینات دستی - راه حل - 8 صفحه Hands-On Exercises - Solutions - 8 Pages

• تمرینات دستی - راه حل - 6 صفحه Hands-On Exercises - Solutions - 6 Pages

• مرور Review

داستان های رسانه Media Queries

• نمای کلی بخش Section Overview

• درک پرسش های رسانه ای Understanding Media Queries

• حداقل عرض و حداکثر عرض Min-Width & Max-Width

• پرسش رسانه چاپی Print Media Query

• نوع رسانه و عبارات Media Type & Expressions

• Taco Shop & Scaling Font - مثالها Taco Shop & Scaling Font - Examples

• طراحی ریسپانسیو و طراحی موبایل اول Responsive Design & Mobile First Design

• تمرینات دستی Hands-On Exercises

• تمرینات دستی - راه حل Hands-On Exercises - Solutions

• مرور Review

الگوهای طراحی فلکس باکس Flexbox Design Patterns

• نمای کلی بخش Section Overview

• الگوی طراحی Flexbox Google شماره 1 Google’s Flexbox Design Pattern #1

• الگوی طراحی Flexbox Google شماره 2 Google’s Flexbox Design Pattern #2

• الگوی طراحی Flexbox Google شماره 3 Google’s Flexbox Design Pattern #3

• تمرینات دستی Hands-On Exercises

• تمرینات دستی - راه حل Hands-On Exercises - Solutions

• Flexbox مثال شماره 1 - منوی پاسخگو Flexbox Example #1 - Responsive Menu

• Flexbox مثال شماره 2 - بالای تاشو Flexbox Example #2 - Above The Fold

• مثال Flexbox شماره 3 - نمونه جام مقدس Flexbox Example #3 - Holy Grail Example

• Flexbox مثال شماره 4 - جام مقدس Redux Flexbox Example #4 - Holy Grail Redux

• تمرینات دستی Hands-On Exercises

• مرور Review

چیدمان با موقعیت Layout with Position

• نمای کلی بخش Section Overview

• Layout Essentials - یک مرجع سریع Layout Essentials - A Quick Reference

• نمای کلی موقعیت Position Overview

• موقعیت ثابت شد Position Fixed

• موقعیت نسبی Position Relative

• موقعیت مطلق Position Absolute

• Taco Shop - Position Property Taco Shop - Position Property

• تمرینات دستی Hands-On Exercises

• تمرینات دستی - راه حل Hands-On Exercises - Solutions

• مرور Review

چیدمان با Float Layout with Float

• نمای کلی بخش Section Overview

• تصاویر شناور و سرریز: خودکار Float Images & Overflow: Auto

• طرح بندی شناور و پاکسازی شناورها Float Layout & Clearing Floats

• مثال شناور - جام مقدس Float Example - Holy Grail

• فروشگاه تاکو - املاک شناور Taco Shop - Float Property

• تمرینات دستی Hands-On Exercises

• تمرینات دستی - راه حل Hands-On Exercises - Solutions

• مرور Review

زمینه Background

• نمای کلی بخش Section Overview

• رنگ پس زمینه Background Color

• پس زمینه-تصویر، پس زمینه-تکرار، اندازه پس زمینه background-image, background-repeat, background-size

• پس زمینه-موقعیت، پس زمینه-منشاء background-position, background-origin

• پس زمینه-پیوست background-attachment

• زمینه background

• تمرینات دستی Hands-On Exercises

• تمرینات دستی Hands-On Exercises

• تمرینات دستی - راه حل Hands-On Exercises - Solutions

• تمرینات دستی - راه حل Hands-On Exercises - Solutions

• مرور Review

چالش Refactor Refactor Challenge

• نمای کلی بخش Section Overview

• تجزیه و تحلیل فایل های شروع Analyzing The Starting Files

• درون خطی بلوک Refactor inline-block Refactor

• فلکس باکس Refactor flexbox Refactor

تمام صفحه در بالای صفحه Full-Page Above-The-Fold

• نمای کلی بخش Section Overview

• مرحله 1: ساختار HTML Step #1: HTML Structure

• مرحله شماره 1: ساختار HTML - راه حل Step #1: HTML Structure - Solution

• مرحله شماره 2: چیدمان Step #2: Layout

• مرحله شماره 2: چیدمان - راه حل Step #2: Layout - Solution

• مرحله 3: تصویر پس زمینه Step #3: background image

• مرحله شماره 3: تصویر پس زمینه - راه حل Step #3: background image - Solution

• مرحله چهارم: قالب بندی متن Step #4: Format Text

• مرحله چهارم: قالب بندی متن - راه حل Step #4: Format Text - Solution

• مرحله پنجم: دکمه را سبک کنید Step #5: Style The Button

• مرحله 5: دکمه را سبک کنید - راه حل Step #5: Style The Button - Solution

• مرحله ششم: موبایل Step #6: Mobile

• مرحله ششم: موبایل - راه حل Step #6: Mobile - Solution

• مرور Review

گسترش مهارت های خود Expanding Your Skillset

• نمای کلی بخش Section Overview

• q، blockquote، & cite element; ذکر ویژگی q, blockquote, & cite elements; cite attribute

• عناصر pre، samp، code، kbd، abbr pre, samp, code, kbd, abbr elements

• موجودیت های HTML HTML Entities

• پیوند دادن تصاویر و نشانک ها Linking Images & Bookmarks

• ویژگی box-shadow box-shadow Property

• ویژگی عمودی تراز کردن vertical-align property

• دستگاه های تلفن همراه - تاریخچه تلفن همراه و تقویت فونت mobile devices - mobile history & font-boosting

• دستگاه های تلفن همراه - عرض نمای متا = پهنای دستگاه mobile devices - meta viewport width=device-width

• دستگاه های تلفن همراه - متا ویوپورت اولیه-مقیاس=1 mobile devices - meta viewport initial-scale=1

• نمای متا - نمونه تصویر meta viewport - picture example

• مرور Review

گرافیک Graphics

• نمای کلی بخش Section Overview

• رنگ ها Colors

• انتخاب ترکیب رنگ - Adobe Color ( Kuler ) Picking Color Combinations - Adobe Color ( Kuler )

• انواع تصویر - شطرنجی/بیت مپ و برداری Image Types - Raster/Bitmap & Vector

• فونت عالی Font Awesome

• فونت عالی - عملکرد Font Awesome - Performance

• فونت عالی - دستورالعمل استفاده مروری Font Awesome - Instructions on Use Review

• فونت عالی به SVG - Adobe Illustrator Font Awesome to SVG - Adobe Illustrator

• درک SVG - اشکال اولیه SVG Understanding SVG - Basic SVG Shapes

• اصطلاحات SVG SVG Terminology

• عنصر مسیر SVG SVG Path Element

• مسیر SVG - نمونه های بیشتر SVG Path - More Examples

• SVG Stroke & Fill SVG Stroke & Fill

• SVG - یادداشت ها و منابع SVG - Notes & Resources

• SVG - Viewbox SVG - Viewbox

• استایل دادن به SVG ها با CSS Styling SVGs with CSS

• SVG - نمادها و عناصر استفاده کنید SVG - Symbol & Use Elements

• نماد، استفاده و CSS Symbol, Use, & CSS

• نماد با مسیرهای متعدد Symbol with Multiple Paths

• برای سکته های مغزی جا بگذارید Leave Room For Strokes

• سکته ٪ Stroke %

• نماد و استفاده در مقابل img symbol & use vs img

• مرور Review

پس زمینه تمام صفحه Full-Page Background

• نمای کلی بخش Section Overview

• هدر ثابت Fixed Header

• سربرگ ثابت - راه حل Fixed Header - Solution

• ظروف سربرگ Header Containers

• ظروف سربرگ - راه حل Header Containers - Solution

• SVG’S را بسازید Make SVG’S

• SVG’S را بسازید - راه حل Make SVG’S - Solution

• SVG ها را درج کنید Insert SVGs

• درج SVG - راه حل Insert SVGs - Solution

• SVG های سبک - راه حل Style SVGs - Solution

• Dev Tools Styling & Company Naming - Solution Dev Tools Styling & Company Naming - Solution

• افزودن پیوندها و سبک - راه حل Adding Links & Style - Solution

• پاسخگو، موبایل اول Responsive, Mobile-First

• پاسخگو، موبایل اول - راه حل Responsive, Mobile-First - Solution

• منوی موبایل Mobile Menu

• منوی موبایل - راه حل Mobile Menu - Solution

• مرور Review

فاویکون Favicon

• نمای کلی بخش Section Overview

• ایجاد یک تصویر Create An Image

• Favicon را ایجاد کنید Generate Favicon

• تولید فاویکون - پوشه فرعی Generate Favicon - Subfolder

• تولید فاویکون - کش را پاک می کند Generate Favicon - Clears Cache

• تولید فاویکون - فشرده سازی Generate Favicon - Compression

• Favicon Essentials Favicon Essentials

• پس زمینه تمام صفحه - فاویکون Full Page Background - Favicon

• مرور Review

Flexbox Practicum - قسمت 1 Flexbox Practicum - Part 1

• نمای کلی بخش Section Overview

• پیشخوان Counter

• شمارنده - راه حل Counter - Solution

• منوی برگه Tab Menu

• منوی برگه - راه حل Tab Menu - Solution

• منوی سرصفحه Header Menu

• منوی سرصفحه - راه حل Header Menu - Solution

• مرور Review

انتقال و انیمیشن Transitions & Animations

• نمای کلی بخش Section Overview

• انتقال ها Transitions

• نمونه های انتقال Transition Examples

• تصاوير متحرك Animations

• مثال های انیمیشن و تمرین دستی Animation Examples & Hands-On Exercise

• راه حل تمرین دستی و تمرین دستی دیگر Hands-On Exercise Solution & Another Hands-On Exercise

• راه حل تمرین دستی Hands-On Exercise Solution

• تبدیل و انیمیشن ها Transform & Animations

Flexbox Practicum - قسمت 2 Flexbox Practicum - Part 2

• نمای کلی بخش Section Overview

• ذخیره پاورقی - راه حل Footer Saving - Solution

• منوی نوار کناری - راه حل Sidebar Menu - Solution

• صفحه خوش آمدید - راه حل Welcome Page - Solution

• نماد شماره گیری - راه حل Dial Icon - Solution

• لیست ویژگی - راه حل Feature List - Solution

• کارت - راه حل Card - Solution

• گروه کارت - راه حل Card Group - Solution

شما یک قهرمان هستید You Are A Hero

• نمای کلی بخش Section Overview

• تمرین Flexbox در بالای صفحه Above-The-Fold Flexbox Practice

• نوار کناری Fly-Out Side-Bar Fly-Out

• خطی- گرادیان Linear-Gradient

• صوتی و تصویری Audio & video

• مارک داون Markdown

• پیشوندهای فروشنده، AutoPrefixer، Task-Runners Gulp & Grunt Vendor Prefixes, AutoPrefixer, Task-Runners Gulp & Grunt

• انتشار سایت شما - یک مرور کلی Publishing Your Site - An Overview

• انتشار سایت شما - خرید دامنه Publishing Your Site - Buying A Domain

• انتشار سایت شما - Google Cloud Publishing Your Site - Google Cloud

• انتشار سایت شما - Google Cloud II Publishing Your Site - Google Cloud II

• مرور Review

تشکیل می دهد Forms

• نمای کلی بخش Section Overview

• نمای کلی بخش Section Overview

• عنصر فرم The Form Element

• عنصر ورودی The Input Element

• عنصر برچسب The Label Element

• عنصر ورودی - انواع The Input Element - Types

• textarea، انتخاب، گزینه، optgroup textarea, select, option, optgroup

• مجموعه میدان و افسانه fieldset & legend

• نمونه های فرم، پیشرفت، متر Form Examples, progress, meter

• مرور Review

• مرور Review

حالا برو بساز Now Go Build It

• مروری بر سه پروژه Overview of Three Projects

• طرح بازی - وب سایت پیمانکار Game Plan - Contractor Website

• فایل های شروع - وب سایت پیمانکار Starting Files - Contractor Website

• طرح بازی - وب سایت سفر Game Plan - Travel Website

• فایل های شروع - وب سایت سفر Starting Files - Travel Website

خداحافظی و مراحل بعدی Farewell & Next Steps

• تبریک می گویم! Congratulations!

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