آموزش دوره خلاقانه HTML5 و CSS3 - ساخت وب سایت های عالی

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

مبانی HTML5 HTML5 Basics

• به دوره خوش آمدید Welcome to the Course

• راه اندازی vsCode Setting up vsCode

• نصب برنامه های افزودنی Installing Extensions

• ایجاد یک تگ HTML Creating A HTML Tag

• چیدمان اولیه Basic Layout

• برچسب های متا Meta Tags

• برچسب های H و P H and P Tags

• تصاویر و ویدئو Images and Video

• A برچسب ها A Tags

• A برچسب ها A Tags

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

• لیست ها Lists

• نظرات Comments

• نظرات Comments

• جداول Tables

• کلاس ها و شناسنامه ها Classes and ID's

• معناشناسی HTML5 HTML5 Semantics

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

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

• بیایید CSS را یاد بگیریم Let's Learn CSS

• بیایید CSS را یاد بگیریم Let's Learn CSS

مبانی HTML5 HTML5 Basics

• به دوره خوش آمدید Welcome to the Course

• راه اندازی vsCode Setting up vsCode

• نصب برنامه های افزودنی Installing Extensions

• ایجاد یک تگ HTML Creating A HTML Tag

• چیدمان اولیه Basic Layout

• برچسب های متا Meta Tags

• برچسب های H و P H and P Tags

• تصاویر و ویدئو Images and Video

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

• لیست ها Lists

• جداول Tables

• کلاس ها و شناسنامه ها Classes and ID's

• معناشناسی HTML5 HTML5 Semantics

مبانی CSS CSS Basics

• نحوه استفاده از CSS How To Use CSS

• نحوه استفاده از CSS How To Use CSS

• نحو پایه Basic Syntax

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

• اختصاصی Specificity

• اختصاصی Specificity

• مدل جعبه Box Model

• بالشتک و حاشیه Padding and Margin

• Pixels، Rem، Em Pixels, Rem, Em

• Pixels، Rem، Em Pixels, Rem, Em

• یک ظاهر طراحی شده یک دکمه Styling A Button

• یک ظاهر طراحی شده یک دکمه Styling A Button

• انواع نمایشگر Display Types

• موقعیت ها Positions

• عناصر و کلاس های شبه Pseudo Elements and Classes

• عناصر و کلاس های شبه Pseudo Elements and Classes

• پروژه کوچک - چگونه طرح بندی ایجاد نکنیم (اختیاری) Mini Project - How not to create layouts (optional)

• پروژه کوچک - چگونه طرح بندی ایجاد نکنیم (اختیاری) Mini Project - How not to create layouts (optional)

مبانی CSS CSS Basics

• نحو پایه Basic Syntax

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

• مدل جعبه Box Model

• بالشتک و حاشیه Padding and Margin

• انواع نمایشگر Display Types

• موقعیت ها Positions

موبایل ریسپانسیو Mobile Responsive

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

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

• VH و WV VH and WV

• VH و WV VH and WV

موبایل ریسپانسیو Mobile Responsive

فلکس باکس Flexbox

• مبانی فلکس باکس Flexbox Basics

• مبانی فلکس باکس Flexbox Basics

• بیایید Flexbox را تمرین کنیم Let's Practice Flexbox

• بیایید Flexbox را تمرین کنیم Let's Practice Flexbox

فلکس باکس Flexbox

پروژه مسافرتی Travelly Project

• یادداشت مهم! Important Note!

• فایل های شروع Starter Files

• تنظیم کردن چیزها Setting things up

• ایجاد Nav & Hero ما Creating our Nav & Hero

• بخش کارت Card Section

• بخش فرم Form Section

• ارسال فرم ها Submitting Forms

• کد نهایی Final Code

پروژه مسافرتی Travelly Project

• یادداشت مهم! Important Note!

• قبل از اینکه پروژه خود را شروع کنیم Before we start our project

• قبل از اینکه پروژه خود را شروع کنیم Before we start our project

• فایل های شروع Starter Files

• فایل های شروع Starter Files

• تنظیم کردن چیزها Setting things up

• ایجاد Nav & Hero ما Creating our Nav & Hero

• ایجاد بخش شهر Creating the City Section

• ایجاد بخش شهر Creating the City Section

• بخش کارت Card Section

• بخش فرم Form Section

• ارسال فرم ها Submitting Forms

• کد نهایی Final Code

دسترسی Accessibility

• متن Text

دسترسی Accessibility

• مفاهیم Semantics

• مفاهیم Semantics

• تضاد Contrast

• تضاد Contrast

• صفحه کلید Keyboard

• صفحه کلید Keyboard

• متن Text

• برچسب ها و Alt Labels and Alt

• برچسب ها و Alt Labels and Alt

شبکه CSS CSS Grid

• گرید در مقابل فلکس باکس Grid vs Flexbox

شبکه CSS CSS Grid

• مبانی شبکه CSS CSS Grid Basics

• مبانی شبکه CSS CSS Grid Basics

• گرید در مقابل فلکس باکس Grid vs Flexbox

پروژه النا جوی Elena Joy Project

• فایل های شروع Starter Files

• برپایی Setup

• انیمیشن گیاهی Plant Animation

• انیمیشن برگر Burger Animation

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

پروژه النا جوی Elena Joy Project

• فایل های شروع Starter Files

• برپایی Setup

• اضافه کردن فونت Adding Fonts

• اضافه کردن فونت Adding Fonts

• صفحه اول First Page

• صفحه اول First Page

• انیمیشن گیاهی Plant Animation

• انیمیشن برگر Burger Animation

• رفع مشکلات کوچک Fixing Small Issues

• رفع مشکلات کوچک Fixing Small Issues

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

• گالری تصاویر Image Gallery

• گالری تصاویر Image Gallery

• صفحه تماس Contact Page

• صفحه تماس Contact Page

• قابلیت جاوا اسکریپت Javascript Functionality

• قابلیت جاوا اسکریپت Javascript Functionality

• کد نهایی Final Code

مبانی SASS Basics of SASS

مبانی SASS Basics of SASS

• SASS SASS

• SASS SASS

• بیایید یک ترفند جادویی یاد بگیریم Let's learn a magic trick

• بیایید یک ترفند جادویی یاد بگیریم Let's learn a magic trick

وب سایت نمونه کارها Portofolio Website

• فایل های شروع Starter Files

• کد نهایی Final Code

وب سایت نمونه کارها Portofolio Website

• فایل های شروع Starter Files

• فایل های شروع Starter Files

• راه اندازی نمونه کارها Portofolio Setup

• راه اندازی نمونه کارها Portofolio Setup

• ایجاد SVG و نماد Creating SVG & Icon

• ایجاد SVG و نماد Creating SVG & Icon

• Nav و بخش Nav and Section

• Nav و بخش Nav and Section

• متحرک سازی SVG ها Animating SVG's

• متحرک سازی SVG ها Animating SVG's

• موبایل دوستانه Mobile Friendly

• موبایل دوستانه Mobile Friendly

• صفحه پروژه Project Page

• صفحه پروژه Project Page

• خط پایان Finish Line

• خط پایان Finish Line

• کد نهایی Final Code

• کد نهایی Final Code

بهینه سازی و استقرار Optimize and Deploy

• بهینه سازی تصاویر Optimizing Images

بهینه سازی و استقرار Optimize and Deploy

• بهینه سازی تصاویر Optimizing Images

• HTML و CSS HTML & CSS

• HTML و CSS HTML & CSS

• گسترش Deployment

• گسترش Deployment

• متشکرم Thank You

• متشکرم Thank You