آموزش ساخت وبسایت: ۱۰ وبسایت را از صفر بسازید - آخرین آپدیت

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

آموزش ساخت وب‌سایت Learn how to Build Websites

• مقدمه دوره Introduction to Course

• نحوه استفاده از این دوره How to use this course

• منابع دوره Course resources

• منابع آنلاین دوره Course Resources Online

• راه‌اندازی وب‌سایت Getting a website

• HTML، CSS و JavaScript چیست؟ what is HTML CSS and JavaScript

• لیست منابع Resource List

مبانی HTML برای ساخت وب‌سایت HTML Foundations for building websites

• مقدمه یادگیری HTML Introduction to learning HTML

• اصول اولیه HTML Basics of HTML

• نحوه ساخت یک قالب پایه HTML How to create a basic HTML template

• کد منبع قالب پایه HTML Basic HTML template source code

• عنوان‌ها، پاراگراف‌ها و شکست خط: ساختاردهی محتوا Headings Paragraphs and Line Breaks Content Structuring

• افزودن تصاویر به HTML Adding images into HTML

• لیست‌های مرتب و نامرتب Ordered Lists Unordered Lists

• لینک‌ها: مسیرهای نسبی در مقابل مسیرهای مطلق Hyperlinks Relative paths vs Absolute Paths

• Div و Span، Tel و Mailto Divs and Spans Tel and Mailto

• عناصر معنایی HTML5 HTML5 Semantic Elements

• انتقال محتوای ساخته شده به ویرایشگر Transfer build content to editor

• نمونه ساختار صفحه HTML پایه Basic HTML page structure sample

• ایجاد یک قالب پایه HTML Create a basic HTML template

• آزمون HTML HTML Quiz

• نحوه ساخت فرم‌های HTML How to create HTML forms

• انواع ورودی HTML5 HTML5 Input types

• عناصر اضافی فرم Additional Form Elements

• منابع فرم Form Resources

• نتیجه‌گیری HTML HTML conclusion

مبانی CSS برای ساخت وب‌سایت CSS Foundations for building websites

• مقدمه CSS Introduction to CSS

• انتخاب عناصر HTML با CSS CSS selecting elements from HTML

• کار با رنگ‌ها در CSS Working with CSS colors

• گزینه‌های پس‌زمینه CSS CSS Background options

• افزودن فونت‌ها Adding Fonts

• شبه‌کلاس‌ها و الگوهای طراحی Pseudo classes and design patterns

• استفاده از خاصیت Float Using the Float property

• مدل جعبه: حاشیه‌ها (Margins) Box Model Margins

• مدل جعبه: Padding (اختصاری) Box Model Padding shorthand

• CSS برای ساخت نوار پیمایش CSS to create a navbar

• خاصیت‌های نمایش در CSS Display properties CSS

• مدیریت سرریز در CSS CSS overflow handling

• جایگاه‌دهی عناصر با CSS CSS positioning elements

• اصلاحات و به‌روزرسانی‌های CSS CSS tweaks and updates

• Media Queries: واکنش‌گرا کردن وب‌سایت شما Media Queries making your website Responsive

• خلاصه HTML و CSS HTML CSS summary

• کد منبع HTML و CSS Source Code HTML and CSS

• نتیجه‌گیری CSS CSS Conclusion

جاوااسکریپت سریع برای ساخت وب‌سایت Quick JavaScript for building websites

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

• جاوااسکریپت چیست؟ What is JavaScript

• نحوه افزودن جاوااسکریپت به صفحات وب How to add JavaScript in web pages

• اصول اولیه جاوااسکریپت، ابزارهای توسعه، نحوه کامنت‌گذاری و موارد دیگر Basics of JavaScript Dev Tools How to Comment and more

• مقدمه بر متغیرها در جاوااسکریپت Introduction to Variables within JavaScript

• درک متغیرها Understanding Variables

• کد منبع متغیرها Variables Source Code

• آرایه‌ها و اشیاء Arrays and Objects

• کار با آرایه‌ها و اشیاء Working with Arrays and Objects

• استفاده و به‌روزرسانی مقادیر آرایه Using and updating array values

• کد منبع آرایه و شیء Array and Object Source Code

• مقدمه بر توابع Introduction to Functions

• متغیرهای محلی و سراسری در توابع Local Global Variables in functions

• کد منبع توابع Source code Functions

• مقایسه سه‌تایی Ternary Comparison

• دستورات شرطی Conditional Statements

• دستورات Switch Switch Statements

• کد منبع: دستورات و شرط‌ها Source Code Statements conditions

• مقدمه بر حلقه‌ها Introduction to looping

• حلقه‌های For در جاوااسکریپت JavaScript For Loops

• کد منبع حلقه‌ها Source Code Loops

• مقدمه بر DOM (مدل شیء سند) Introduction to the Document Object Model

• دسترسی به عناصر صفحه از طریق جاوااسکریپت Accessing Page Elements from JavaSCript

• انتخاب عناصر از طریق جاوااسکریپت Selecting Elements via JavaScript

• کد منبع: انتخاب عناصر Source Code Selecting

• به‌روزرسانی CSS با جاوااسکریپت Updating CSS with JavaScript

• کد منبع CSS Source Code CSS

• رویدادهای جاوااسکریپت JavaScript Events

• شنونده‌های رویداد (انتخاب عناصر) Event Listeners selecting elements

• کد منبع شنونده‌ها Source Code Listeners

• addEventListener: گزینه‌های بیشتر برای راه‌اندازی رویداد addEventListener More events trigger options

• کد منبع addEventListener Source Code addEventListener

• با جاوااسکریپت چه کارهایی می‌توانید انجام دهید؟ What can you do with JavaScript

• نتیجه‌گیری: مرور جاوااسکریپت JavaScript Overview Conclusion

jQuery سریع برای ساخت وب‌سایت Quick jQuery for building websites

• مقدمه بر استفاده از jQuery Introduction to using jQuery

• jQuery چیست و چرا از آن استفاده می‌کنیم؟ What is jQuery and why do we use it

• شروع کار با jQuery Getting Started with jQuery

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

• مقادیر از عناصر انتخابگر متعدد Each value from mulitple selector elements

• به‌روزرسانی عناصر از طریق jQuery Updating elements via jQuery

• کد منبع: انتخابگرهای HTML Source Code Selectors HTML

• انتخابگرهای CSS و jQuery CSS selectors and jQuery selectors

• مقدمه بر اتصال رویداد Introduction to event binding

• شنونده‌های رویداد jQuery: رویدادهای ماوس Event Listeners jQuery Mouse Events

• کد منبع رویداد Event source code

• راه‌اندازهای رویداد کیبورد Keyboard event triggers

• کد منبع: رویدادهای کیبورد Source Code keyboard events

• شنونده‌های رویداد تغییر اندازه و اسکرول روی شیء window Resize and Scroll event listeners on window object

• کد منبع شیء Window Source Code Windows Object

• پیدا کردن مقادیر ورودی از فرم با jQuery Finding input values from form jQuery

• پیمایش عناصر با jQuery jQuery Traversing elements

• انتخاب عناصر از محتوای HTML Select elements from HTML content

• کد منبع: انتخاب Source Code Selection

• jQuery در کار با CSS jQuery working with CSS

• کد منبع CSS Source Code CSS

• پنهان و نمایش بخش‌های صفحه Hide and Show page sections

• افکت‌های jQuery: محو شدن jQuery effects Fading

• کد منبع افکت‌های jQuery jQuery Effects Source Code

• افکت‌های کشویی jQuery JQuery Sliding Effects

• jQuery Animate jQuery Animate

• کد منبع Source Code

• AJAX با jQuery آسان شد: JSON و موارد دیگر jQuery AJAX made easy JSON and more

• بارگذاری داده‌ها در HTML از طریق jQuery Loading data into HTML via jQuery

• AJAX با jQuery: متدهای get و getJSON jQuery AJAX get getJSON

• AJAX با jQuery AJAX with jQuery

• کد منبع Source Code

• نتیجه‌گیری jQuery jQuery conclusion

• منابع jQuery Resources jQuery

• استفاده از map و each در jQuery using map and each within jQuery

• کد منبع map و each Source Code map and each

بوت‌استرپ چیست؟ What is Bootstrap

• مقدمه بر استفاده از بوت‌استرپ Introduction to using Bootstrap

• دریافت قالب راه‌اندازی بوت‌استرپ Get Bootstrap Setup Template

• قالب پایه بوت‌استرپ Basic Bootstrap Template

• کانتینرهای طرح‌بندی بوت‌استرپ Bootstrap Layout Containers

• کد منبع کانتینرها Source Code Containers

• مقدمه بر سیستم گرید Introduction to the Grid

• کد منبع Source Code

• کاربردهای بیشتر با سیستم گرید Do more with the Grid

• کد منبع گرید Grid Source

• جامبوترون در بوت‌استرپ 4 Jumbotron Bootstrap 4

• کد منبع جامبوترون Source Jumbotron

• حاشیه‌ها (Margins) و Padding در بوت‌استرپ Margins and Padding Bootstrap

• منابع: حاشیه‌ها و Padding در بوت‌استرپ Resources Margins and Padding Bootstrap

• ابزارهای رنگ بوت‌استرپ 4 Bootstrap 4 Color Utilities

• کد منبع رنگ‌ها Source Code Colors

• ابزارهای بوت‌استرپ 4 Bootstrap 4 Utilities

• کد منبع ابزارها Utilities Source

• جداول بوت‌استرپ 4 Bootstrap 4 Tables

• کد منبع جداول Source Code Tables

• تصاویر واکنش‌گرا در بوت‌استرپ Bootstrap Images Responsive

• کد منبع تصاویر Source Code Images

• دکمه‌های بوت‌استرپ Bootstrap Buttons

• کد منبع دکمه‌های بوت‌استرپ Buttons Source Bootstrap

• فرم‌های بوت‌استرپ 4 Bootstrap 4 Forms

• گروه‌بندی دکمه‌ها: رادیو و چک‌باکس‌ها Button Grouping Radio and Checkboxes

• کد منبع فرم‌ها Forms Source

• هشدارهای بوت‌استرپ 4 Bootstrap 4 Alerts

• نشان‌های (Badges) بوت‌استرپ 4 Bootstrap 4 Badges

• نوار پیشرفت بوت‌استرپ Bootstrap Progress bar

• کد منبع Source Code

• کارت‌های بوت‌استرپ 4 Bootstrap 4 Cards

• کد منبع کارت‌ها Cards Source Code

• گروه‌بندی لیست بوت‌استرپ Bootstrap List Group

• کد منبع گروه‌بندی لیست Source Code List Groups

• نوار پیمایش واکنش‌گرا در بوت‌استرپ NavBar Responsive Bootstrap

• لیست ناوبری بوت‌استرپ 4 Nav List Bootstrap 4

• کد منبع نوار پیمایش Source Code NavBar

• اسلایدر (Carousel) بوت‌استرپ 4 Bootstrap 4 Carousel

• کد منبع اسلایدر Carousel Source Code

• پنجره مودال (Modal) بوت‌استرپ 4 Bootstrap 4 Modal

• کد منبع مودال Source Code Modal

• منابع بوت‌استرپ Bootstrap Resources

• به‌روزرسانی‌های نسخه بتای بوت‌استرپ 4 Bootstrap 4 Beta Updates

ساخت یک وب‌سایت سریع و ساده با HTML و CSS Create a quick simple website using HTML and CSS

• وب‌سایت 1: مقدمه Website 1 Introduction

• HTML و وایرفریم HTML and WireFrame

• ساختار HTML را بسازید Build HTML structure

• کد منبع ساختار HTML HTML structure Source Code

• افزودن محتوای نگهدارنده Add Placeholder content

• افزودن استایل به ساختار HTML Add Styling to HTML Structure

• نحوه تبدیل لیست نامرتب به نوار پیمایش How to turn Unorderd List into a Navbar

• کد منبع نوار پیمایش Source Code Navbar

• اندازه‌های رسانه صفحه: واکنش‌گرا کردن وب‌سایت Media Screen Sizes make it responsive

• ستون‌های واکنش‌گرا Responsive Columns

• پاکسازی شناوری (Floating)، جابجایی بخش‌ها Clear Floating move around sections

• فونت‌های گوگل و سفارشی‌سازی Google Fonts and Customizing

• کد منبع HTML Source Code HTML

• کد منبع CSS Course Code CSS

• وب‌سایت 1: نتیجه‌گیری Website 1 Conclusion

ساخت یک وب‌سایت تک‌صفحه‌ای واکنش‌گرا Build a single Page responsive website

• مقدمه: وب‌سایت 2 Introduction Website 2

• ایجاد وایرفریم وب‌سایت Create a wireframe of website

• ساخت ساختار صفحه HTML برای استایل‌دهی Build HTML page structure in prep for Styling

• ساخت منوی ناوبری و محتوای صفحه Build Navigation Menu and Page Content

• ساخت تگ‌های HTML: تودرتو کردن عناصر معنایی Build HTML tags Nesting of Semantic Elements

• افزودن استایل به صفحه وب شما Adding Styling to your webpage

• لینک کردن به کتابخانه‌ها، فونت‌های گوگل و موارد دیگر Linking to Libraries Google Fonts and more

• استایل‌دهی هدرهای چسبنده و بخش‌ها Sticky Headers Section Styling

• ساخت نوار پیمایش با CSS Build a navigation bar with CSS

• افزودن تصاویر پس‌زمینه Add background images

• متن بخش با RGBA Section text rgba

• رسانه CSS برای طراحی وب واکنش‌گرا CSS media for responsive web design

• به‌روزرسانی منو برای واکنش‌گرایی هنگام تغییر اندازه Update menu to be Responsive on resize

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

• افزودن رویدادهای کلیک: ایجاد تعامل برای کاربران Add Click events create interactions for users

• استفاده از jQuery برای دریافت موقعیت پیکسلی عناصر HTML use jQuery to get pixel position of HTML elements

• اسکرول دینامیک صفحه وب Scroll webpage dynamically

• پنهان کردن منو هنگام کلیک بر روی صفحه کوچک Hide menu when clicked on small screen

• رفع نهایی مشکلات: وب‌سایت کامل شد Final Fix of issues completed website

• کد منبع HTML وب‌سایت تک‌صفحه‌ای Source Code Single page website HTML

• کد منبع CSS وب‌سایت تک‌صفحه‌ای Source Code Single Page website CSS

• نتیجه‌گیری: وب‌سایت 2 Conclusion website 2

قالب وب‌سایت واکنش‌گرا Responsive Website Template

• وب‌سایت 4: مقدمه - نوارهای پیمایش واکنش‌گرا Website 4 Introduction Responsive Navbars

• طرح وایرفریم وب‌سایت Website Wireframe plan

• ساخت طرح‌بندی ساختار HTML Build HTML Structure Layout

• کد منبع ساختار HTML HTML Structure Source Code

• عناصر شناور Floating Elements

• به‌روزرسانی عناصر هدر Update header elements

• ساخت منوی ناوبری CSS Build nav menu CSS

• جایگاه‌دهی CSS و کد منبع منوی ناوبری CSS positioning and nav menu source code

• به‌روزرسانی ناحیه لوگو، حاشیه‌ها و Padding Margins Padding Logo area update

• کد منبع Source Code

• کد منبع CSS Source Code CSS

• به‌روزرسانی استایل: به‌روزرسانی‌های منوی ناوبری update styling nav menu updates

• به‌روزرسانی wrapper اصلی: تنظیم آیتم انتخاب شده در منو Main wrapper update set selected item in menu

• استفاده از jQuery برای دریافت مقدار URL صفحه Use jQuery to get URL page value

• کلاس‌های دینامیک jQuery jQuery Dynamic Classes

• کد منبع Source Code

• افزودن فونت‌های وب (فونت‌های گوگل) به وب‌سایت Add web fonts Google Fonts to website

• استایل‌دهی صفحه انتخابی select page styling

• تغییر اندازه تصاویر محصولات Images products resize

• خلاصه بخش Section Summary

• کد منبع HTML Source Code HTML

• کد منبع CSS Source Code CSS

• کد منبع JS Source Code JS

• منابع Resources

• وب‌سایت 4: نتیجه‌گیری Website 4 Conclusion

قالب وب‌سایت واکنش‌گرای دو ستونی Two Column Responsive Website Template

• وب‌سایت 5: مقدمه ستون‌ها Website 5 Columns Introduction

• طرح‌ریزی وب‌سایت: طرح اولیه طراحی Website Planning Design Sketch

• ساخت ساختار HTML Building HTML structure

• HTML: افزودن محتوای نگهدارنده HTML adding placeholder content

• کد منبع HTML Source Code HTML

• ایجاد استایل برای صفحه وب Create Stlying for webpage

• دوره CSS CSS Course

• جایگاه‌دهی هدر با CSS Header positioning with CSS

• ساخت یک نوار منوی ناوبری Create a Navigation Menu Bar

• اصلاحات سریع: تصویر و ناوبری Quick Fixes image and nav

• ساخت یک وب‌سایت 2 ستونی making a 2 column website

• اصلاحات سریع CSS Quick Tweaks of CSS

• استایل‌دهی فوتر بزرگ 3 ستونی 3 Column Fat Footer Styling

• کد منبع HTML و CSS Source Code HTML and CSS

• واکنش‌گرا کردن کامل وب‌سایت شما Making your website Fully Responsive

• به‌روزرسانی اندازه‌های رسانه Updating media sizes

• ایجاد صفحات وب اضافی Create additional web pages

• کد منبع صفحه HTML index.html HTML index.html page source code

• کد منبع CSS style.css CSS style.css source code

• وب‌سایت 5: نتیجه‌گیری Website 5 Conclusion

وب‌سایت منوی ساده بوت‌استرپ Simple Bootstrap Menu website

• بوت‌استرپ به‌روز شد Bootstrap Updated

• تغییرات بوت‌استرپ 4 نسبت به بوت‌استرپ 3 Bootstrap 4 Changes from Bootstrap 3

• وب‌سایت 6: مقدمه بر نوارهای پیمایش بوت‌استرپ Website 6 Introduction to Bootstrap Navbars

• طرح‌ریزی وب‌سایت Website Planning

• ساخت ساختار صفحه HTML Building HTML page Structure

• افزودن بوت‌استرپ به یک وب‌سایت adding Bootstrap to a website

• افزودن محتوای نگهدارنده Adding placeholder content

• کد منبع HTML Source Code HTML

• افزودن استایل‌دهی پیش‌فرض Adding Default Styling

• به‌روزرسانی بخش لوگو و شعار Update Logo Slogan section

• ساخت نوار پیمایش با عنصر فعال Create a Navbar with Active element

• پیام خوش‌آمدگویی صفحه اصلی Index Page welcome message

• کد منبع Source Code

• ایجاد یک ناحیه محتوای دو ستونی Create a two column content area

• ایجاد عنصر فوتر Create Footer Element

• واکنش‌گرا کردن آن Make it responsive

• راه‌اندازی فونت Awesome Setting up font awesome

• به‌روزرسانی نوار پیمایش برای واکنش‌گرایی Update navbar to be responsive

• جاوااسکریپت برای پنهان و نمایش عناصر JavaScript to Hide and Show Elements

• کد منبع: نوار پیمایش اول Source Code First NavBar

• ساخت یک نوار پیمایش واکنش‌گرای دیگر Create another responsive Navbar

• کد منبع: نوار پیمایش دوم Source Code Second NavBar

• نحوه افزودن کتابخانه جاوااسکریپت بوت‌استرپ How to add Bootstrap JavaScript Library

• افزودن نوار پیمایش منوی بوت‌استرپ Add Bootstrap Menu NavBar

• نوار پیمایش منوی بوت‌استرپ Bootstrap Menu Navbar

• کد منبع بوت‌استرپ Source Code Bootstrap

• ایجاد صفحات وب‌سایت Create website pages

• ویرایشگر کد آنلاین Online Code Editor

• لینک‌ها و منابع Links and Resources

• وب‌سایت 6: نتیجه‌گیری Website 6 Conclusion

وب‌سایت تک‌صفحه‌ای با افکت پارالاکس Single Page website with Parallax Website

• وب‌سایت 7: مقدمه بر پس‌زمینه‌های پارالاکس Website 7 Parallax Backgrounds Introduction

• ایجاد وایرفریم وب‌سایت Create Wireframe of Website

• ساختار HTML: ایجاد منوی ناوبری HTML structure create Navmenu

• ایجاد بخش‌های HTML Creating HTML sections

• کد منبع HTML پایه Basic HTML source Code

• محتوای نگهدارنده Placeholder content

• اعمال CSS به HTML Apply CSS to HTML

• نحوه ساخت نوار پیمایش از UL How to create a Navbar from UL

• بخش‌های تمام صفحه و پیش‌فرض‌های پس‌زمینه Full page size sections and background defaults

• افزودن تصاویر پس‌زمینه Add background images

• متن خود را برجسته کنید Make your text standout

• تنظیم نوار پیمایش برای افکت‌های واکنش‌گرا Tweaking the navbar for responsive effects

• به‌روزرسانی‌ها و اصلاحات واکنش‌گرا Responsive Updates and Fixes

• نوار پیمایش برای صفحات کوچک Navbar for small screens

• افزودن فوتر و به‌روزرسانی بخش‌ها Adding Footer and updating sections

• کد منبع HTML و CSS Source Code HTML and CSS

• افزودن jQuery: ایجاد راه‌اندازهای رویداد Adding jQuery create event triggers

• اتصال رویدادهای پنجره با jQuery jQuery binding window events

• افزودن کتابخانه آیکون Adding icon library

• اسکرول متحرک با jQuery Animate Scrolling with jQuery

• منوی کشویی بالا با jQuery Slidemenu up jQuery

• افزودن افکت پارالاکس Add Parallax effect

• ساخت فرم تماس Create a Contact Form

• خلاصه وب‌سایت تک‌صفحه‌ای پارالاکس Single Page Parallax site summary

• کد منبع HTML و jQuery Source Code HTML jQuery

• کد منبع CSS Source Code CSS

• منابع resources

• وب‌سایت 7: نتیجه‌گیری Website 7 Conclusion

وب‌سایت تک‌صفحه‌ای با کنترل اسلایدر (Carousel) Single Page Carousel Control Website

• وب‌سایت 8: مقدمه Website 8 Introduction

• طرح وب‌سایت: وایرفریم Website Plan wireframe

• طراحی وب: ساختار HTML Web Design HTML structure

• افزودن محتوای طراحی نگهدارنده Adding placeholder design content

• تنظیم بخش‌های محتوا 100% Setup Content Sections 100%

• جایگاه‌دهی نوار پیمایش Position Navbar

• ایجاد نشانگرهای نوار پیمایش شناور Create floating navbar indicators

• کد منبع HTML و CSS HTML and CSS Course Code

• مقدمه سریع بر jQuery Quick introduction to jQuery

• jQuery برای انتخاب عناصر با هش jQuery to select elements with hash

• اسکرول متحرک با jQuery Animate Scroll jQuery

• اسکرول پنجره با jQuery و نقشه‌برداری اطلاعات بخش jQuery Scroll window and mapping of section info

• محاسبه اینکه پنجره در حال حاضر در کدام بخش قرار دارد Calculate which section the window is currently in

• تغییر فراخوانی‌ها به فعال هنگام اسکرول Change calls to active on scroll

• کد منبع HTML و jQuery Source Code HTML jQuery

• کد منبع CSS Source Code CSS

• بهینه‌سازی وب‌سایت Website Tweak

• واکنش‌گرا کردن آن Making it responsive

• به‌روزرسانی محتوای بخش Update section content

• شبه‌عناصر: تنظیم بخش‌ها Pseudo Elements setup sections

• تنظیمات نهایی طراحی Final adjustments on design

• نتیجه‌گیری کد منبع Source Code Conclusion

• کد منبع پروژه Source Code Project

• وب‌سایت 8: نتیجه‌گیری Website 8 Conclusion

وب‌سایت چندصفحه‌ای از صفر با کلاس فعال Multiple Page website from scratch with active class

• وب‌سایت 9: مقدمه - چند صفحه، چند ستون Website 9 Introduction mutiple page multiple column

• طرح‌ریزی وب‌سایت: طراحی وایرفریم Website Planning wireframe design

• ایجاد عناصر والد: ساختار HTML Create parent elements HTML structure

• افزودن منابع و محتوای نگهدارنده ساختگی Add resources and dummy placeholder content

• اعمال استایل به عناصر سطح بالای HTML Apply Styling to HTML top level elements

• ایجاد یک content wrapper Creating a content wrapper

• تنظیم و استایل‌دهی نوار پیمایش Navbar setup and styling

• ایجاد یک هدر Creating a header

• کد منبع HTML و CSS Source Code HTML and CSS

• تنظیم بخش‌ها: نوار کناری و فوتر Setting up sections sidebar and footer

• اصلاحات و رفع اشکالات CSS CSS tweaks and fixes

• افزودن Media Queries: واکنش‌گرا کردن آن Add media queries make it responsive

• افزودن Media Queries بیشتر Add additional media queries

• کد منبع Media Queries Source Code Media Queries

• تنظیم نوار پیمایش واکنش‌گرا Setup responsive navbar

• تنظیم منو برای تغییر کلاس Setup menu for toggle of class

• کد منبع HTML و CSS Source Code HTML and CSS

• افزودن راه‌انداز رویداد jQuery Add jQuery event trigger

• کد منبع jQuery jQuery source code

• تنظیم کلاس‌ها به‌صورت پویا Setting classes on the fly

• بهینه‌سازی‌ها و گزینه‌های صفحه Page Tweaks and options

• کد منبع با jQuery Source Code with jQuery

• ایجاد صفحات اضافی برای وب‌سایت Create additional pages for website

• به‌روزرسانی فرم تماس update contact form

• کد منبع Source Code

• وب‌سایت 9: نتیجه‌گیری Website 9 Conclusion

وب‌سایت تک‌صفحه‌ای با منوی پایین Single Page Bottom Menu website

• مقدمه وب‌سایت 10: HTML، CSS و jQuery با هم Introduction website 10 HTML CSS jQuery together

• طرح‌ریزی وایرفریم وب‌سایت Wireframe planning of website

• طراحی وب: ساختار صفحه HTML Web Design HTML Page structure

• افزودن محتوای نگهدارنده برای آماده‌سازی استایل‌دهی Add placeholder content to prepare for stlying

• تنظیم پیش‌فرض‌های CSS Setup CSS defaults

• ایجاد یک فوتر چسبنده: جایگاه‌دهی در پایین Create a sticky Footer position it at the bottom

• کد منبع Source Code

• گزینه‌های کدنویسی نوار پیمایش برای استایل‌دهی Navbar coding options for styling

• کد گزینه‌های نوار پیمایش Navbar options code

• افزودن استایل به بخش‌ها Add styling to sections

• کد منبع بخش‌ها Source Code Sections

• افزودن پوشش‌های پس‌زمینه بخش Add section background covers

• بهینه‌سازی تصاویر و تنظیمات CSS Image tweaks and adjustments to CSS

• به‌روزرسانی استایل هدر Header update style

• استایل‌دهی فرم تماس Contact form styling

• کد منبع HTML و CSS HTML CSS source Code

• افزودن jQuery به وب‌سایت Add jQuery to website

• اسکرول متحرک صفحه وب Animate scrolling of webpage

• به‌روزرسانی کلاس‌ها هنگام اسکرول update classes on scroll

• کد منبع با jQuery Source Code with jQuery

• فونت‌های گوگل و سایه‌های پس‌زمینه Google Fonts and Background shadows

• نحوه افزودن آیکون‌های اجتماعی How to add social icons

• منابع برای به‌روزرسانی CSS و سفارشی‌سازی Resources to update CSS and customize

• به‌روزرسانی‌های نهایی Final Updates

• کد منبع Source Code

• وب‌سایت 10: نتیجه‌گیری Website 10 Conclusion

ساخت یک فرم تماس Making a Contact form

• مقدمه بر ساخت فرم تماس Introduction to making a contact Form

• ایجاد ساختار HTML بوت‌استرپ Create HTML Bootstrap structure

• ایجاد ساختار فرم Create form structure

• افزودن نگهدارنده سشن PHP Add PHP session holder

• کد منبع فرم تماس Source Code Contact Form

• دریافت داده‌های GET و POST در PHP PHP Get Post Data

• بررسی ضد اسپم با استفاده از PHP AnitSpam Check using PHP

• ارسال ایمیل با PHP PHP send Email

• آپلود فایل و ارسال ایمیل به آدرس ایمیل Upload file and send email to email address

• رفع اشکالات فرم PHP PHP form Fixes

• کد منبع فرم ایمیل PHP PHP form Mail source Code

• تنظیم بررسی فرم jQuery jQuery Form Check setup

• نمایش/عدم نمایش پیام‌های خطای jQuery jQuery Toggle Error messages

• تست زنده فرم تماس وب Web Contact Form live Test

• بهینه‌سازی و تنظیمات فرم تماس وب Web Contact Form Tweaks and Adjustments

• کد منبع کامل فرم وب Complete Web Form Source Code

قطعه کدهای در عمل: کدهای مفید برای توسعه وب Code Snippets in Action Just Useful code for web development

• معرفی قطعه کدها Code Snippets Introduction

• تصاویر پاپ‌آپ با جاوا اسکریپت Popup Images using JavaScript

• کد منبع تصاویر پاپ‌آپ Source Code Popup Images

• شنونده‌های رویداد ماوس جاوا اسکریپت Mouse Event Listeners JavaScript

• کد منبع شنونده‌های رویداد ماوس Source Code Mouse Event Listeners

وب‌سایت تک صفحه‌ای با نسخه جدید بوت‌استرپ ۴ New Bootstrap 4 Version Single Page Website

• معرفی بخش وب‌سایت Website Section Introduction

• ایجاد قالب پایه بوت‌استرپ ۴ Basic Bootstrap 4 Template Creation

• کد منبع Source Code

• ایجاد نوار ناوبری بوت‌استرپ Create Bootstrap NavBar

• کد منبع نوار ناوبری Source Code NavBar

• بخش سربرگ Header Section

• ساخت بخش صفحه اصلی Build Home Section

• کد منبع صفحه وب Webpage Source Code

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

• کارت‌ها، گرید و ستون‌های بوت‌استرپ Bootstrap Cards Grid Columns

• کد منبع پروژه Project Source Code

• ایجاد گرید فرم تماس Create Contact Form Grid

• کد منبع پروژه Project Source Code

• فوتر و تنظیمات صفحه Footer and Tweak Page

• افزودن انیمیشن jQuery Add jQuery Animate

• کد منبع ایندکس Source Code Index

• کد منبع CSS Source Code CSS

• بخش: مرور کلی وب‌سایت Section Website Overview

• بخش: منابع Section Resources

وب‌سایت ساده بوت‌استرپ ۴ با نوار ناوبری پایین Simple Bootstrap 4 Website Bottom Navbar

• معرفی بخش وب‌سایت Website Section Introduction

• شروع سریع بوت‌استرپ Quick Start Bootstrap

• قالب شروع سریع Quick Start Template

• طراحی سریع صفحه Page Quick Design

• معرفی صفحه آغازین Splash Page Introduction

• نوار ناوبری بوت‌استرپ ۴ Bootstrap 4 NavBar

• کد منبع نوار ناوبری Source Code NavBar

• گرید بوت‌استرپ ۴ Bootstrap 4 Grid

• کارت‌های بوت‌استرپ ۴ Bootstrap 4 Cards

• کد منبع کارت‌ها Cards Source Code

• اندازه و فاصله فوتر Footer Sizing Spacing

• کد منبع Source Code

• سفارشی‌سازی CSS Customize CSS

• ابزارهای بوت‌استرپ ۴ Bootstrap 4 Utilities

• گزینه‌های کارت بوت‌استرپ ۴ Bootstrap 4 Card options

• مرور کلی وب‌سایت Website Overview

• منابع و کد منبع قابل دانلود Resources and downloadable source

پرسش و پاسخ و قطعه کدهای مفید (محتوای جایزه) Questions answers and Useful code snippets bonus content

• نحوه ایجاد فرم HTML برای ارسال به کلاینت ایمیل (ارسال فرم به ایمیل) How to create an HTML form to submit to email client Form submit to mail.

• کد منبع فرم تماس HTML با استفاده از قطعه کد Mailto Source Code HTML contact form using Mailto code snippet

• نحوه ایجاد پنجره پاپ‌آپ مودال جاوا اسکریپت How to Create a JavaScript Modal popup Window

• کد منبع پنجره پاپ‌آپ مودال جاوا اسکریپت JavaScript modal popup window source code

• جمع‌بندی وب‌سایت‌های کامل Complete Websites Conclusion

• مثال کدنویسی رنگین‌کمان CSS CSS rainbow Coding Example

بخش جایزه Bonus Section

• سخنرانی جایزه Bonus Lecture

• منابع آموزشی جایزه: محتوای قابل دانلود، مثال‌های عملی Bonus Educational Resources: Downloadable Content, Practical Examples