آموزش HTML و CSS مدرن از ابتدا (شامل Sass) [ویدئو]

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

معرفی Introduction

• به دوره خوش آمدید Welcome To The Course

• نحوه عملکرد وب (خلاصه) How The Web Works (Summarized)

• نقش HTML و CSS در توسعه وب The Roles Of HTML & CSS In Web Development

• راه اندازی با کد ویژوال استودیو Getting Setup With Visual Studio Code

مبانی HTML HTML Basics

• بخش معرفی Section Intro

• ایجاد و باز کردن صفحات HTML Create & Open HTML Pages

• Doctype & Basic Layout Doctype & Basic Layout

• راه اندازی سرور زنده (افزونه VSCode) Setting Up Live Server (VSCode Extension)

• متا تگ ها و موتورهای جستجو Meta Tags & Search Engines

• سرفصل ها، پاراگراف ها و تایپوگرافی Headings, Paragraphs & Typography

• پیوندها، تصاویر و ویژگی ها Links, Images & Attributes

• فهرست ها و جداول Lists & Tables

• فرم ها و ورودی Forms & Input

• عناصر سطح بلوک و درون خطی Block & Inline Level Elements

• Divs & Spans، Classs & ID Divs & Spans, Classes & Ids

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

• برچسب ها و چالش های معنایی HTML5 HTML5 Semantic Tags & Challenge

• راه حل و جمع بندی معنایی HTML5 HTML5 Semantics Solution & Wrap Up

مبانی CSS CSS Basics

• بخش معرفی Section Intro

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

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

• Dev Tools معرفی Dev Tools Introduction

• فونت ها در CSS Fonts In CSS

• انواع رنگ Color Types

• پس زمینه و مرزها Backgrounds & Borders

• مدل جعبه، حاشیه و بالشتک Box Model, Margin & Padding

• شناور و تراز Float & Alignment

• حالت پیوند و یک ظاهر طراحی دکمه Link State & Button Styling

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

• صفحه نمایش Inline، Block و Inline-Block Inline, Block & Inline-Block Display

• تثبیت موقعیت Positioning

• چالش سبک فرم Form Style Challenge

• راه حل سبک فرم Form Style Solution

• کنار: دید، نظم و حاشیه منفی Aside: Visibility, Order & Negative Margin

وب سایت هتل Hotel Website

• معرفی پروژه Project Intro

• کنار: طراحی و ایده Aside: Design & Ideas

• ساختار فایل و نوار ناوبری File Structure & Navbar

• اطلاعات ویترین و خانه Showcase & Home Info

• ویژگی ها و پاورقی Features & Footer

• درباره صفحه About Page

• صفحه تماس Contact Page

مقدمه ای برای طرح بندی پاسخگو Intro To Responsive Layouts

• طراحی ریسپانسیو چیست؟ What Is Responsive Design?

• شروع با پرسش های رسانه ای Getting Started With Media Queries

• واحدهای Em & Rem Em & Rem Units

• واحدهای Vh و Vw Vh & Vw Units

• ساخت وب سایت هتل به طور کامل واکنش گرا Making The Hotel Website Fully Responsive

معرفی فلکس باکس Intro To Flexbox

• فلکس باکس چیست؟ What Is Flexbox?

• اصول فلکس Flex Basics

• تراز و سفارش فلکس Flex Alignment & Order

وب سایت EdgeLedger (Flexbox) EdgeLedger Website (Flexbox)

• معرفی پروژه Project Intro

• ساختار فایل و نوار ناوبری فلکس File Structure & Flex Navbar

• سربرگ ویترین Showcase Header

• بخش آنچه انجام می دهیم What We Do Section

• ما چه کسی هستیم و بخش مشتریان Who We Are & Clients Sections

• فرم تماس، نقشه و پاورقی Contact Form, Map & Footer

• اسکرول صاف با JS Smooth Scrolling With JS

• نمایش عریض و تبلت Widescreen & Tablet View

• نمای گوشی هوشمند Smartphone View

استقرار وب سایت - میزبان مشترک Website Deployment - Shared Host

• انواع میزبانی وب Types Of Web Hosting

• راه اندازی ایمیل Setting Up Email

• سربرگ ویترین Showcase Header

• سایت خود را از طریق FTP آپلود کنید Upload Your Site via FTP

• جایزه: ارسال فرم تماس (اسکریپت PHP) BONUS: Contact Form Submission (PHP Script)

مفاهیم بیشتر CSS - انتخابگرهای پیشرفته، انیمیشن و موارد دیگر More CSS Concepts - Advanced Selectors, Animation & More

• انتخابگرهای هدفمند Targeted Selectors

• انتخابگرهای شبه فرزند نهم nth-child Pseudo Selectors

• قبل و بعد از انتخابگرهای کاذب before & after Pseudo Selectors

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

• سایه های متن Text Shadows

• متغیرهای CSS (ویژگی های سفارشی) CSS Variables (Custom Properties)

• انیمیشن Keyframe 1 Keyframe Animation 1

• انیمیشن Keyframe 2 Keyframe Animation 2

• انتقال CSS CSS Transitions

• پاداش: تبدیل ملک BONUS: Transform Property

پروژه های کوچک با فریم های کلیدی، انتقال و غیره Mini Projects With Keyframes, Transitions, etc

• وب سایت ارائه [1] - مقدمه و HTML Presentation Website [1] - Intro & HTML

• وب سایت ارائه [2] - صفحه CSS Presentation Website [2] - Page CSS

• وب سایت ارائه [3] - انیمیشن متن Presentation Website [3] - Text Animation

• پوشش منوی همبرگر [1] - HTML و CSS پایه Hamburger Menu Overlay [1] - HTML & Base CSS

• پوشش منوی همبرگر [2] - ایجاد همبرگر Hamburger Menu Overlay [2] - Creating The Hamburger

• پوشش منوی همبرگر [3] - متحرک کردن خطوط همبرگر Hamburger Menu Overlay [3] - Animating The Hamburger Lines

• پوشش منوی همبرگر [4] - پوشش منو Hamburger Menu Overlay [4] - Menu Overlay

• جدول زمانی دانش [1] - HTML و CSS پایه Knowledge Timeline [1] - HTML & Base CSS

• جدول زمانی دانش [2] - جعبه ها و فلش ها Knowledge Timeline [2] - Boxes & Arrows

• جدول زمانی دانش [3] - پرسش های رسانه پاسخگو Knowledge Timeline [3] - Responsive Media Queries

• جدول زمانی دانش [4] - اسکرول در انیمیشن Knowledge Timeline [4] - Scroll In Animation

• پروژه منوی کشویی سریع Quick Dropdown Menu Project

شبکه CSS CSS Grid

• CSS Grid چیست؟ What Is CSS Grid?

• مبانی شبکه و ستون ها Grid Basics & Columns

• ردیف های شبکه Grid Rows

• پوشا ستون و ردیف Spanning Columns & Rows

• تناسب خودکار و Minmax Auto-Fit & Minmax

• مناطق الگوی شبکه Grid Template Areas

• پرسش های رسانه و شبکه Media Queries & The Grid

وب سایت NewsGrid NewsGrid Website

• معرفی پروژه Project Intro

• راه اندازی و فاویکون Setup & Favicon

• سبک‌های اصلی، متغیرها و نوار ناوبری Core Styles, Variables & Navbar

• ویترین با سبک های روکش و دکمه Showcase With Overlay & Button Styles

• صفحه اصلی شبکه مقالات Home Articles Grid

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

• درباره کانتینر صفحه و صفحه About Page & Page Container

• صفحه مقاله Article Page

• پرسش های رسانه ای پاسخگو Responsive Media Queries

• امتیاز: معرفی فتوشاپ (لوگوی NewsGrid) Bonus: Intro To Photoshop (NewsGrid Logo)

استقرار وب سایت با Netlify (رایگان) Website Deployment With Netlify (FREE)

• چگونه کار می کند How It Works

• Git & Pushing To Github Git & Pushing To Github

• Netlify Deploy & Form Submission Netlify Deploy & Form Submission

• نام دامنه سفارشی Custom Domain Name

یادگیری Sass Learning Sass

• ساس چیست؟ What Is Sass?

• راه اندازی محیط با Node-Sass Environment Setup With Node-Sass

• کامپایلر Koala Sass - جایگزین رابط کاربری گرافیکی Koala Sass Compiler - GUI Alternative

• متغیرها و جزئی ها Variables & Partials

• تودرتو و ساختار Nesting & Structuring

• وراثت و تضاد Inheritance & Contrast

• توابع، ترکیبات و موارد دیگر Functions, Mixins & More

وب سایت نمونه کارها با Sass Portfolio Website With Sass

• معرفی پروژه Project Intro

• راه اندازی پروژه Project Setup

• هدر و مسیر اصلی Header & Main Nav

• بخش تخصصی و آمار Specialize & Stats Section

• بخش فرآیند و پاورقی Process Section & Footer

• بخش اطلاعات درباره صفحه About Page Info Section

• درباره لوگوها و گواهینامه های صفحه About Page Logos & Testimonials

• گالری کاری با انتقال Work Gallery With Transitions

• صفحه تماس Contact Page

• پرسش های رسانه ای پاسخگو Responsive Media Queries

• استقرار و فرم تماس با فیلتر هرزنامه Deploy & Contact Form With Spam Filter

از اینجا به کجا بروم Where To Go From Here

• از اینجا به کجا بروم Where To Go From Here