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

دانلود How to create Websites Build 10 Websites From Scratch

نکته: ممکن هست محتوای این صفحه بروز نباشد ولی دانلود دوره آخرین آپدیت می باشد.
نمونه ویدیوها:
توضیحات دوره:

در این دوره آموزشی، شما مهارت‌های زیر را کسب خواهید کرد:

  • بیش از ۱۰ وب‌سایت کامل را از صفر بسازید و نمونه کار حرفه‌ای خود را به شدت تقویت کنید.
  • نحوه ایجاد وب‌سایت‌ها با استفاده از HTML، CSS و JavaScript را بیاموزید.
  • انواع مختلفی از وب‌سایت‌ها را طراحی و پیاده‌سازی کنید.
  • قابلیت‌ها و کارکردهای HTML، CSS و JavaScript را به طور کامل درک کنید.
  • وب‌سایت‌های پویا (Dynamic) بسازید.
  • محتوای وب تعاملی (Interactive) ایجاد کنید.
  • یک وب‌سایت را از ابتدا تا انتها طراحی و توسعه دهید.

پیش‌نیازها: دسترسی به کامپیوتر و اشتیاق به یادگیری.

آیا می‌خواهید به یک توسعه‌دهنده وب حرفه‌ای تبدیل شوید و به دنبال نقطه‌ی شروعی مناسب هستید؟ پس این دوره آموزشی برای شماست!

نمونه کار حرفه‌ای خود را بسازید و به یک توسعه‌دهنده وب متخصص تبدیل شوید.

با بیش از ۳۰ ساعت آموزش ویدیویی با کیفیت HD، که تمام آنچه برای ورود به دنیای توسعه وب و ساختن پایه‌ای قوی برای ایجاد وب‌سایت‌های خود از صفر نیاز دارید را به شما نشان می‌دهد.

یکی از بهترین روش‌های یادگیری، مشاهده مثال‌های کد است که در پروژه‌های وب واقعی پیاده‌سازی و مورد استفاده قرار می‌گیرند. در این دوره با رویکرد یادگیری کاربردی، ما نه تنها زبان‌های اصلی و پایه توسعه وب فرانت‌اند را پوشش می‌دهیم، بلکه با مثال‌های فراوان به شما نشان می‌دهیم چگونه از آن‌ها استفاده کنید. نحوه عملکرد این زبان‌ها را در پروژه‌های مختلف مشاهده خواهید کرد.

یکی از بزرگترین چالش‌ها هنگام ورود به دنیای توسعه وب، یافتن نقطه شروعی مناسب است. در این دوره، کشف خواهید کرد که چگونه HTML، CSS و JavaScript می‌توانند در کنار هم کار کنند تا وب‌سایت‌های مدرن، پویا و تعاملی بسازند که برای دنیای واقعی آماده هستند. اگر با هیچ یک از زبان‌های مورد استفاده برای ایجاد وب‌سایت‌ها در طول دوره آشنایی ندارید، ما تمام مباحث را پوشش می‌دهیم. HTML، CSS، JavaScript و jQuery را بیاموزید؛ می‌توانید هر آنچه را که می‌خواهید یاد بگیرید، زیرا تمام محتوا در هر زمان برای شما در دسترس است. اگر در یک حوزه خاص بیشتر از بقیه به کمک نیاز دارید، جای نگرانی نیست؛ به مثال‌های متعددی از کد منبع که در یک پروژه واقعی به کار گرفته شده‌اند، دسترسی خواهید داشت.

هر آنچه برای یادگیری طراحی و توسعه وب نیاز دارید، در یک مکان! یک دوره جامع و عظیم! می‌توانید تمام محتوا را مشاهده کنید یا فقط بخش‌هایی را که در زمان نیاز دارید تماشا کنید.

مزایای برجسته این دوره آموزشی:

  • ✔ نمونه کار خود را به شدت تقویت کنید – بیش از ۱۰ وب‌سایت واقعی و کاربردی را از صفر بسازید. داشتن یک نمونه کار قوی برای نمایش وب‌سایت‌هایی که می‌توانید بسازید و همچنین استفاده از آن‌ها به عنوان قالب‌های قابل سفارشی‌سازی برای هر نیاز طراحی وب. از آنجا که هر وب‌سایتی به روش یکسانی ایجاد نمی‌شود، در این دوره ۱۰ نمونه از وب‌سایت‌های مدرن را به شما ارائه می‌دهیم. از جمله وب‌سایت‌های تک‌صفحه‌ای، وب‌سایت‌های ریسپانسیو با بوت‌استرپ، وب‌سایت‌های با افکت پارالاکس و موارد دیگر. این سایت‌ها کاملاً منحصر به فرد و به صورت سفارشی در طول دوره ساخته شده‌اند.

  • ✔ پوشش کامل پیش‌نیازها و آماده‌سازی برای یادگیری مهارت‌های کلیدی – ما بخش‌های کاملی برای توضیح HTML، CSS، JavaScript و jQuery در نظر گرفته‌ایم که می‌توانید از آن‌ها به عنوان مرجعی جامع برای اطلاعات بیشتر درباره کدنویسی مورد استفاده در ساخت وب‌سایت‌ها بهره ببرید. بدون محتوای اضافی، مستقیماً به سراغ سینتکس‌های پرکاربرد و ضروری برای ساخت وب‌سایت‌های مدرن می‌رویم.

  • ✔ قطعه کدهای اضافی و کاربردی – هر آنچه برای جان بخشیدن به وب‌سایت شما نیاز است. نحوه ساخت یک فرم تماس وب کاملاً کاربردی را بیاموزید که قادر به ارسال ایمیل از طریق وب‌سایت شما باشد. رویدادهای موس و تکنیک‌های دیگر برای پویا و تعاملی کردن وب‌سایت شما. به علاوه، به‌روزرسانی‌های منظم و محتوای جدیدتر نیز ارائه می‌شود.

  • ✔ منابع مورد نیاز شمایاد بگیرید چگونه مانند یک توسعه‌دهنده وب و طراح وب فکر کنید. نحوه شروع ایجاد وب‌سایت‌ها، چگونگی برنامه‌ریزی طراحی وب خود و موارد دیگر. بهترین منابع و لینک‌ها را برای ارتقاء مهارت‌های خود در ساخت وب‌سایت کشف کنید. کد منبع مربوط به مراحل مختلف پروژه و همچنین کد منبع پروژه‌های تکمیل‌شده در این دوره گنجانده شده است. این بدان معناست که با این دوره، شما به ۱۰ قالب سفارشی برای استفاده در پروژه‌های خود دسترسی خواهید داشت.

  • ✔ توسعه وب حرفه‌ای – به تمام منابع مورد نیاز دسترسی داشته باشید و همزمان با یادگیری توسعه وب، نمونه کار خود را بسازید. در پایان این دوره، شما آماده خواهید بود تا وب‌سایت‌ها را از صفر بسازید. به سرعت وارد دنیای کسب و کار شوید و شروع به کار کنید. از یک توسعه‌دهنده وب باتجربه بیاموزید که چگونه وب‌سایت‌های حرفه‌ای ساخته می‌شوند! ما به شما انواع وب‌سایت‌هایی را نشان می‌دهیم که می‌توانید به سرعت بسازید و تقاضای بالایی در بازار دارند.

هیچ جزئیاتی ناگفته نمی‌ماند؛ این دوره مملو از محتوای با کیفیت بالا است که آماده استفاده شما در هر زمان و در صورت نیاز می‌باشد. هر سطح مهارتی که داشته باشید، ما تضمین می‌کنیم که ارزش واقعی را در این دوره خواهید یافت. همه چیز را در دسترس خود داشته باشید، هر زمان که به آن نیاز پیدا کردید.

این دوره توسط یک مدرس حرفه‌ای با بیش از ۱۸ سال تجربه صنعتی تدریس می‌شود! آموزشی گام به گام که مشابه آن را در هیچ کجای دیگری نخواهید یافت. ما شما را در تمام مراحل یادگیری نحوه ایجاد وب‌سایت‌ها از صفر راهنمایی می‌کنیم. در پایان این دوره، احساس راحتی و اطمینان کامل خواهید داشت و آماده شروع به ساخت وب‌سایت‌های خود خواهید بود. همین حالا شروع کنید، از آنچه شما قادر به انجام آن هستید، شگفت‌زده خواهید شد. رویاهای آنلاین خود را با وب‌سایت‌های مدرن به واقعیت تبدیل کنید.

من اینجا هستم تا به شما در یادگیری طراحی وب و توسعه وب کمک کنم و آماده پاسخگویی به هر سؤالی هستم که ممکن است داشته باشید. هنگامی که آماده شدید، همین حالا به دوره بپیوندید و ساخت وب‌سایت‌های خود را از امروز آغاز کنید.


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

آموزش ساخت وب‌سایت 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

نمایش نظرات

آموزش ساخت وبسایت: ۱۰ وبسایت را از صفر بسازید
جزییات دوره
32.5 hours
436
Udemy (یودمی) Udemy (یودمی)
(آخرین آپدیت)
11,661
4.4 از 5
دارد
دارد
دارد
جهت دریافت آخرین اخبار و آپدیت ها در کانال تلگرام عضو شوید.

Google Chrome Browser

Internet Download Manager

Pot Player

Winrar

Laurence Svekis Laurence Svekis

پرفروش ترین مدرس دوره

نویسنده دوره طراحی وب و توسعه وب - آموزش حضوری و آنلاین به بیش از 1,000,000 دانش آموز در سطح جهان. کارشناس توسعه دهنده Google از سال 2020 GDE

من اینجا هستم تا به شما کمک کنم یاد بگیرید، به رویاهای خود برسید، امروز در این ماجراجویی شگفت انگیز به من بپیوندید
Google Developers Expert - GSuite

ارائه دوره های توسعه وب و دوره های استراتژی بازاریابی دیجیتال از سال 2002.

متخصص فناوری نوآور با طیف گسترده ای از تجربه دنیای واقعی. ارائه راه حل های دیجیتال هوشمند به صورت آنلاین برای مشاغل کوچک و تجاری.

"من به هر چیزی که مربوط به فناوری دیجیتال باشد علاقه دارم، از برنامه نویسی و چالش ایجاد تجربیات دیجیتال موفق لذت می برم. به عنوان یک توسعه دهنده با تجربه، اولین برنامه های کامپیوتری خود را در سال 1990 و اولین وب سایت خود را در سال 1998 ایجاد کردم. از به اشتراک گذاری مطالب خود لذت می برم. دانش با دیگران است و می خواهم به شما کمک کنم در فرصت های فوق العاده ای که اینترنت فراهم می کند به اشتراک بگذارید."

"یادگیری، درک با اشتیاق قوی برای آموزش. اینترنت فرصت های جدیدی را برای گسترش و به اشتراک گذاری دانش در اختیار ما قرار داده است."

می‌خواهید درباره تبدیل شدن به یک توسعه‌دهنده وب اطلاعات بیشتری کسب کنید، آیا می‌خواهید آزادی‌ای را که فناوری برای ما فراهم می‌کند، تجربه کنید؟ یاد بگیرید که چگونه چیزهای شگفت انگیز را به صورت آنلاین زنده کنید. فناوری همه ما را از طرق مختلف به هم متصل می کند. این درها را به روی کسانی باز می کند که آن را در آغوش می گیرند و یاد می گیرند که چگونه این ارتباطات را واقعی کنند.

"دوره های آموزشی من برای کمک به شما در دستیابی به اهداف، یادگیری و به روز رسانی مهارت ها طراحی شده اند"

سابقه و هدف : یک توسعه دهنده باتجربه برنامه های کاربردی وب، که روی چندین برنامه در سطح سازمانی، صدها وب سایت، راه حل های تجاری و بسیاری از برنامه های کاربردی وب منحصر به فرد و نوآور کار کرده است. زمینه های تخصصی توسعه برنامه های کاربردی وب عبارتند از HTML، CSS، JavaScript، JQuery، Bootstrap، PHP و MySQL. هر چیزی که مربوط به ایجاد وب و تجربه دیجیتال باشد. علاقه‌مند به هر کاری که با توسعه برنامه‌های کاربردی وب، برنامه‌نویسی تا بازاریابی آنلاین با تمرکز قوی بر رسانه‌های اجتماعی و SEO .

" درک فناوری وسیله ای برای ارتباط بهتر با کاربران فراهم می کند. همچنین درهای زیادی را باز می کند. دانش کلید موفقیت است و من می خواهم به شما کمک کنم تا آنچه را که فناوری ارائه می دهد تجربه کنید. من به فن آوری های وب علاقه مند هستم و مشتاقانه منتظر به اشتراک گذاشتن دانش و تجربه خود با شما هستم!"