آموزش طراحی وب برای مبتدیان: HTML، CSS و JavaScript - آخرین آپدیت

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

شروع به کار: مرور کلی دوره و مقدمه Getting Started: Course Overview and Introduction

• مقدمه Introduction

تسلط بر HTML: ساختاردهی صفحات وب Mastering HTML: Building the Structure of Webpages

• ایجاد اولین فایل HTML: تنظیمات اولیه Creating Your First HTML File: Setting Up the Basics

• درک عنوان‌ها و پاراگراف‌ها: سازماندهی محتوا Understanding Headings and Paragraphs: Organizing Content

• تسلط بر ویژگی‌های HTML: سفارشی‌سازی عناصر Mastering HTML Attributes: Customizing Your Elements

• عناصر بلوکی در مقابل عناصر درون‌خطی: ساختاربندی طرح‌بندی صفحه Block vs. Inline Elements: Structuring Your Page Layout

• ایجاد لیست‌ها در HTML: لیست‌های مرتب، نامرتب و تعریفی Creating Lists in HTML: Ordered, Unordered, and Definition Lists

• پیوند دادن و جاسازی تصاویر: بهبود محتوا با چندرسانه‌ای Linking and Embedding Images: Enhancing Content with Multimedia

• ساخت فرم‌ها و فیلدهای ورودی: جمع‌آوری داده‌های کاربر Building Forms and Input Fields: Collecting User Data

• ایجاد صفحه پروفایل شخصی: جمع‌بندی آموخته‌ها Creating a Personal Profile Page: Putting It All Together

• تمرین: تمرین مهارت‌های HTML Homework Challenge: Practice Your HTML Skills

• کار با جداول: نمایش داده‌ها در قالب ساختاریافته Working with Tables: Displaying Data in a Structured Format

• طراحی فرم ثبت‌نام: ثبت‌نام آسان کاربر Designing a Signup Form: User Registration Made Easy

• ادغام چندرسانه‌ای: عناصر صوتی و تصویری در HTML Integrating Multimedia: Audio and Video Elements in HTML

• استفاده از آی‌فریم‌ها: جاسازی یکپارچه محتوای خارجی Using Iframes: Embedding External Content Seamlessly

• درک عناصر معنایی: نوشتن HTML تمیز و سئوپسند Understanding Semantic Elements: Writing Clean and SEO-Friendly HTML

• ساخت طرح‌بندی وبلاگ: بکارگیری دانش HTML Building a Blog Layout: Applying Your HTML Knowledge

• اعتبارسنجی ساده فرم: تضمین دقت ورودی کاربر Simple Form Validation: Ensuring User Input Accuracy

• اعتبارسنجی پیشرفته فرم: بهبود تجربه کاربری Advanced Form Validation: Enhancing User Experience

• تگ‌های متا HTML و مبانی سئو: افزایش دید سایت شما HTML Meta Tags and SEO Basics: Boosting Your Site's Visibility

• نوارهای پیشرفت و سنجش: تجسم داده‌ها با HTML Progress Bars and Meters: Visualizing Data with HTML

استایل‌دهی با CSS: طراحی وب‌سایت‌های زیبا و واکنش‌گرا Styling with CSS: Designing Beautiful and Responsive Websites

• مقدمه به CSS: جان بخشیدن به صفحات وب شما Introduction to CSS: Bringing Your Webpages to Life

• انتخابگرهای CSS 2_css selectors

• استایل‌های حاشیه در CSS: ایجاد طرح‌بندی‌های جذاب Border Styles in CSS: Creating Attractive Layouts

• رنگ‌ها و پس‌زمینه‌ها: افزایش جذابیت بصری Colors and Backgrounds: Enhancing Visual Appeal

• پس‌زمینه‌های CSS CSS BackGrounds

• استایل‌دهی فونت و متن: بهبود خوانایی و طراحی Font and Text Styling: Improving Readability and Design

• متن CSS CSS Text

• مدل جعبه‌ای: حاشیه بیرونی، حاشیه داخلی و حاشیه توضیح داده شد The Box Model: Margin, Padding, and Border Explained

• موقعیت‌دهی عناصر: ایستا، نسبی، مطلق و ثابت Positioning Elements: Static, Relative, Absolute, and Fixed

• طرح‌بندی فلکس‌باکس: ساخت طراحی‌های واکنش‌گرای مدرن Flexbox Layout: Building Modern Responsive Designs

• طرح‌بندی گرید پایه 8_Basic Grid Layout

• مبانی طرح‌بندی گرید: ساختاربندی صفحات وب پیچیده Grid Layout Basics: Structuring Complex Web Pages

• سرریز طرح‌بندی CSS CSS Layout OverFlow

• مثال‌های پیشرفته گرید: طرح‌بندی‌های حرفه‌ای صفحه Advanced Grid Examples: Professional Page Layouts

• انتقال‌های CSS: افزودن جلوه‌های انیمیشن روان CSS Transitions: Adding Smooth Animation Effects

• انیمیشن‌های CSS: جان بخشیدن به وب‌سایت شما CSS Animations: Bringing Your Website to Life

• طراحی واکنش‌گرا با Media Queries: وب‌سایت‌های سازگار با موبایل Responsive Design with Media Queries: Mobile-Friendly Websites

• ساخت صفحه فرود واکنش‌گرا: بکارگیری تکنیک‌های CSS Building a Responsive Landing Page: Applying CSS Techniques

اصول جاوا اسکریپت: افزودن تعامل و عملکرد JavaScript Essentials: Adding Interactivity and Functionality

• شروع به کار با جاوا اسکریپت: مقدمه و تنظیمات Getting Started with JavaScript: Introduction and Setup

• کار با متغیرها: ذخیره‌سازی و مدیریت داده‌ها Working with Variables: Storing and Managing Data

• درک انواع داده: رشته‌ها، اعداد و بولی‌ها Understanding Data Types: Strings, Numbers, and Booleans

• عملگرها و محاسبات پایه: انجام عملیات ریاضی Operators and Basic Calculations: Performing Mathematical Operations

• الحاق رشته: ترکیب متن به صورت پویا String Concatenation: Combining Text Dynamically

• تعامل کاربر: استفاده از هشدارها، اعلان‌ها و لاگ‌های کنسول User Interaction: Using Alerts, Prompts, and Console Logs

• توابع در جاوا اسکریپت: بلوک‌های کد قابل استفاده مجدد Functions in JavaScript: Reusable Code Blocks

• ساخت یک ماشین حساب ساده: بکارگیری توابع و عملیات Building a Simple Calculator: Applying Functions and Operations

• عبارات شرطی: If، Else If و Else توضیح داده شد Conditional Statements: If, Else If, and Else Explained

• شرایط چندگانه: عبارات If تو در تو و Switch Cases Multiple Conditions: Nested If Statements and Switch Cases

• عملگرهای منطقی: ترکیب کارآمد شرایط Logical Operators: Combining Conditions Efficiently

• استفاده از حلقه‌ها: خودکارسازی وظایف تکراری Using Loops: Automating Repetitive Tasks

• بررسی اعداد زوج: کاربرد عملی حلقه‌ها و شرایط Checking Even Numbers: Practical Use of Loops and Conditions

• آرایه‌ها در جاوا اسکریپت: ذخیره‌سازی مقادیر متعدد Arrays in JavaScript: Storing Multiple Values

• توابع آرایه: دستکاری داده‌ها با متدهای داخلی Array Functions: Manipulating Data with Built-In Methods

• حلقه زدن در آرایه‌ها: پردازش کارآمد داده‌ها Looping Through Arrays: Efficient Data Processing

• کار با اشیاء: ساختار داده جفت کلید-مقدار Working with Objects: Key-Value Pair Data Structure

• ساخت یک لیست کارهای ساده: ترکیب اشیاء و آرایه‌ها Building a Simple To-Do List: Putting Objects and Arrays Together

• دستکاری DOM: دسترسی و اصلاح عناصر HTML DOM Manipulation: Accessing and Modifying HTML Elements

• مدیریت رویدادها: تعاملی کردن صفحه شما Event Handling: Making Your Page Interactive

• رویدادهای ماوس: کلیک، هاور و موارد دیگر Mouse Events: Click, Hover, and More

• رویدادهای صفحه کلید: ثبت ورودی کاربر Keyboard Events: Capturing User Input

• پروژه کوچک: رویدادهای تعاملی صفحه کلید Mini Project: Interactive Keyboard Events

• اعتبارسنجی فرم با جاوا اسکریپت: اطمینان از صحت ورودی کاربر Form Validation with JavaScript: Ensuring Accurate User Input

• پروژه تغییر دهنده رنگ: استایل‌دهی پویا با جاوا اسکریپت Color Changer Project: Dynamic Styling with JavaScript

ایجاد یک ساعت دیجیتال: اپلیکیشن وب بلادرنگ Creating a Digital Clock: Real-Time Web Application

• ساختاربندی ساعت دیجیتال با HTML و CSS Structuring the Digital Clock with HTML and CSS

• جان بخشیدن به ساعت دیجیتال با جاوا اسکریپت Bringing the Digital Clock to Life with JavaScript

ساخت یک ماشین حساب: پروژه عملی جاوا اسکریپت Building a Calculator: Hands-On JavaScript Project

• ایجاد طرح‌بندی ماشین حساب با HTML Creating the Calculator Layout with HTML

• استایل‌دهی ماشین حساب با CSS Styling the Calculator with CSS

• عملکردی کردن ماشین حساب با جاوا اسکریپت Making the Calculator Functional with JavaScript

وب‌سایت نمونه کار: جمع‌بندی آموخته‌ها Portfolio Website: Putting It All Together

• ایجاد ساختار پروژه: برنامه‌ریزی نمونه کار Creating the Project Structure: Planning Your Portfolio

• ساخت نوار ناوبری و نوار کناری: طرح‌بندی HTML Building the Navigation Bar and Sidebar: HTML Layout

• استایل‌دهی نوار ناوبری و نوار کناری: طراحی یکپارچه Styling the Navigation Bar and Sidebar: Consistent Design

• بخش درباره من: معرفی حرفه‌ای خودتان About Me Section: Introducing Yourself Professionally

• استایل‌دهی Navbar و Sidebar Styling the Navbar and Sidebar

• ساخت بخش پروژه‌ها Building the Projects Section

• ایجاد ساختار پاورقی Creating the Footer Structure

• بهبود بخش درباره من Enhancing the About Me Section

• استایل‌دهی نوارهای پیشرفت و عناصر Styling Progress Bars and Elements

• طراحی پروژه‌ها و فرم تماس Designing the Projects and Contact Form

• نهایی کردن و پرداختن به جزئیات پاورقی Final Touches for the Footer

• افزودن تعامل با جاوا اسکریپت Adding Interactivity with JavaScript

• متحرک سازی بخش مهارت‌ها با جاوا اسکریپت Animating Skills Section with JavaScript

• نهایی‌سازی و پرداختن به پروژه Finalizing and Polishing the Project