آموزش کلاس Master Developer Web Front-End با استفاده از HTML، CSS و JavaScript [ویدئو]

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

دوره مقدماتی توسعه وب Introduction to web development course

• معرفی توسعه وب Web development introduction

• به توسعه وب جلویی خوش آمدید Welcome to front end web development

اینترنت چگونه کار می کند How the internet works

• نام های DNS و آدرس های IP DNS Names and IP addresses

• کد اینترنت Code of the internet

• HTML و CSS چگونه کار می کنند HTML and CSS how they work

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

• توسعه وب و نحوه کار آن Web development and how it works

• سمت سرور سمت مشتری باطن استاتیک پویا Dynamic Static Frontend Backend Client Side Server Side

• ویراستاران ایجاد کد ظاهری Editors creating frontend code

• مرورگرهای توسعه وب Web development Browsers

• ساختار فایل File Structure

• میزبانی وب سایت ها Hosting websites

• فایل های وب سایت خود را به سرور خود برسانید Get your website files to your server

• منابع و اطلاعات توسعه دهنده وب Web developer Resources and info

مبانی HTML Basics of HTML

• HTML چیست What is HTML

• نحوه نوشتن و تمرین HTML How to Write and Practice HTML

• چگونه یک دیگ بخار HTML ایجاد کنیم How to create an HTML boilerplate

• تمرین ایجاد یک فایل HTML boilerplate Exercise creating a boilerplate HTML file

• برچسب های خود بسته متا تگ ها و ویژگی ها Self Closing tags Meta tags and attributes

• تگ های سرفصل Heading Tags

• به روز رسانی قالب Update template

• برچسب های رایج P BR HR متن جداگانه Common tags P BR HR separate text

• نظرات Clean Code و موارد دیگر Clean Code Comments and more

• متن از پیش فرمت شده HTML HTML preformatted text

• منابع کدهای کاراکتر HTML HTML Character Codes resources

• تمرین Recreate as HTML Exercise Recreate as HTML

تگ های بیشتر HTML HTML more tags

• نمونه های نشانه گذاری HTML HTML Markup Examples

• هایپرلینک های HTML HTML hyperlinks

• ویژگی هایپرلینک Hyperlink Attributes

• نحوه ایجاد نشانک های HTML How to create HTML bookmarks

• لینک ایمیل HTML mailto email link HTML mailto

• تمرین ایجاد نوار ناوبری برای وب سایت Exercise Create Navbar for website

• افزودن تصاویر به وب سایت ها Adding Images to websites

• تمرین ایجاد پورتفولیوی بند انگشتی Exercise Create Thumbnail portfolio

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

• لیست توضیحات HTML HTML Description List

• لیست های تو در تو HTML HTML Nested Lists

• لیست تمرین خدمات Exercise List of services

• جداول HTML HTML tables

• HTML شامل چندین سلول HTML spanning multiple cells

• یک ظاهر طراحی سریع نکته Quick Tip Styling

• جدول HTML تمرین Exercise HTML table

• معرفی فرم های HTML HTML forms introduction

• فرم تماس HTML Contact Form HTML

• انواع ورودی HTML5 جدید New HTML5 input types

• عناصر فرم HTML Form elements HTML

• محتوا را فرم دهید Form content

• تمرین ایجاد فرم تماس Exercise Create Contact Form

• عناصر معنایی HTML5 HTML5 semantic elements

• صفحات iframe HTML HTML iframe pages

• تمرین ایجاد یک وب سایت Exercise Create a Website

مقدمه ای بر CSS Introduction to CSS

• وب سایت های با و بدون CSS Websites with and without CSS

• نحوه اضافه کردن CSS به صفحات HTML How to add CSS to HTML Pages

• انتخاب بازرس CSS Making selections CSS inspector

• Divs و گستره انتخاب محتوا Divs and spans content selection

• کلاس تگ شناسه انتخاب CSS CSS selection id tag class

• مقادیر HEX RGB RGBA را رنگ می کند Colors HEX RGB RGBA values

• CSS مقادیر رنگ را نامگذاری کرد CSS named color values

• تصاویر پس زمینه CSS CSS background images

• عبارت کوتاه نویسی پس زمینه CSS CSS background shorthand statement

• کوتاه نویسی حاشیه های CSS CSS borders shorthand

• طرح کلی مرز CSS CSS border Outline

• حاشیه های CSS CSS Margins

• بالشتک CSS CSS padding

• CSS Box Model Dev Tools CSS Box Model Dev Tools

• ارتفاع و عرض CSS CSS height and Width

• چالش مدل جعبه Box Model Challenge

• حاشیه های خودکار عناصر خود را در CSS مرکز کنید Auto Margins Center your elements CSS

• ویژگی فونت CSS CSS font property

• ویژگی CSS Text CSS Text property

• ویرایشگرها و گزینه‌های ابزار توسعه Chrome Chrome dev tools editors and options

• افزودن خانواده فونت فونت های گوگل Adding Font families Google Fonts

• CSS ارتفاع خط Line Height CSS

• فاصله حروف CSS CSS letter spacing

• لینک های CSS CSS links

• یک ظاهر طراحی جدول CSS CSS table styling

• نمایش و پنهان کردن عناصر CSS Display and Hiding elements CSS

• نمایش چالش درون خطی 4 مربع Display Inline 4 squares Challenge

• ویژگی های موقعیت CSS CSS position Properties

• نکات طراحی DevTools DevTools Design Tips

• چالش کدنویسی از یک لیست نامرتب یک NavBar بسازید Coding Challenge Make a NavBar from an unordered list

• راه حل چالش کد Code Challenge Solution

استفاده از CSS برای ساخت طرح بندی صفحات وب Using CSS to build webpage layouts

• معرفی بخش شناورها Floats section introduction

• اطلاعات بیشتر درباره Floats More about Floats

• معرفی Floats Intro to Floats

• تصاویر شناور CSS در یک خط با متن CSS Float images inline with text

• تصاویر کوچک شناور CSS CSS float thumbnails

• HTML طرح بندی صفحه اصلی CSS را می سازد HTML build basic page layout CSS

• سایت 2 ستونی CSS 2 column CSS site

• در عرض چند دقیقه یک صفحه 2 ستونی ایجاد کنید Create a 2 column page layout in minutes

• صفحه وب 3 ستونی ایجاد کنید Create 3 column webpage

• رفع رنگ پس زمینه ارتفاع 3 ستون 3 column height background color fix

CSS پیشرفته Advanced CSS

• CSS Combinators CSS Combinators

• کلاس های شبه CSS CSS Pseudo Classes

• عناصر شبه CSS CSS Pseudo Elements

• انتخابگرهای CSS بر اساس ویژگی ها CSS Selectors by attributes

• CSS Media Queries راز طراحی واکنشگرا CSS Media Queries secret to responsive design

با CSS کارهای بیشتری انجام دهید Do more with CSS

• تصاویر پس زمینه چندگانه CSS Multiple Background Images CSS

• ویژگی های جعبه عنصر CSS Element box properties CSS

• گزینه های حاشیه بیشتر CSS3 More border options CSS3

• شیب پس زمینه CSS background gradients CSS

• انیمیشن CSS3 CSS3 Animation

استفاده از CSS ایجاد یک وب سایت Apply CSS create a website

• HTML یک ساختار اولیه وب سایت با HTML ایجاد می کند HTML build a basic website structure with HTML

• از CSS برای ساخت نوار ناوبری استفاده کنید Apply CSS build a navbar

• ایجاد 2 ستون CSS منطقه محتوای اصلی Build 2 Column main content area CSS

• پیوندهای Sidemenu در CSS شناور می شوند Sidemenu links hover CSS

• بهینه سازی وب سایت CSS CSS website tweak

جاوا اسکریپت کارهای بیشتری را در صفحه وب شما انجام می دهد JavaScript do more on your web page

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

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

• اشکال زدایی و نظر دادن جاوا اسکریپت Debugging and commenting JavaScript

• انواع داده های پایه جاوا اسکریپت JavaScript Basic Data Types

• متغیرهای جاوا اسکریپت JavaScript Variables

• قوانین متغیر جاوا اسکریپت JavaScript Variable Rules

• تمرین 1 خروجی به کنسول پیوند به فایل js Exercise 1 Output to console link to js file

• نوع داده Null در مقابل جاوا اسکریپت تعریف نشده Data type Null vs Undefined JavaScript

• اعلان چندین متغیر به طور همزمان جاوا اسکریپت Declaring multiple variables at once JavaScript

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

• جاوا اسکریپت مقادیر افزایش و کاهش Increment and Decrement Values JavaScript

• جاوا اسکریپت اپراتورهای واگذاری Assignment Operators JavaScript

• مقایسه اپراتورهای جاوا اسکریپت Comparison Operators JavaScript

• عملگرهای رشته جاوا اسکریپت JavaScript String Operators

• عملگرهای منطقی جاوا اسکریپت JavaScript Logical Operators

ملزومات کدنویسی جاوا اسکریپت JavaScript coding essentials

• جاوا اسکریپت را سریع و هشدار دهید prompt and alert JavaScript

• نوشتن محتوا در شیء سند HTML Writing content to the HTML document object

• اشیاء جاوا اسکریپت JavaScript Objects

• خروجی های پویا اشیاء جاوا اسکریپت JavaScript Objects Dynamic Outputs

• اشیاء جاوا اسکریپت در اشیاء JavaScript Objects within Objects

• مقادیر به روز رسانی جاوا اسکریپت JavaScript update values

• آرایه های جاوا اسکریپت JavaScript Arrays

• کار با روش های آرایه جاوا اسکریپت Working with Array Methods JavaScript

• روش های آرایه گسترش یافت Array Methods extended

• مرتب سازی و موارد دیگر با Arrays JavaScript Sorting and more with Arrays JavaScript

• بیشتر با Arrays JavaScript More with Arrays JavaScript

• اشیا و آرایه ها با هم Objects and Arrays together

• عبارت شرط if جاوا اسکریپت JavaScript if condition statement

• عبارت سوییچ جاوا اسکریپت JavaScript switch statement

• جاوا اسکریپت Do while حلقه می شود JavaScript Do while loops

• برای حلقه ها و جاوا اسکریپت بیشتر For loops and more JavaScript

• حلقه زدن آیتم ها در آرایه ها و اشیاء جاوا اسکریپت Looping items in arrays and objects JavaScript

• معرفی توابع جاوا اسکریپت JavaScript introduction to functions

• کار با توابع جاوا اسکریپت Working with JavaScript Functions

• توابع متغیرهای جهانی و محلی Global and Local Variables Functions

• عملکرد خود اجرا کننده Self-Executing function

• از عملکرد جاوا اسکریپت خارج شوید Break out of function JavaScript

• روش های رشته جاوا اسکریپت JavaScript String Methods

• رشته ها و آرایه ها Strings and Arrays

• اعداد به رشته ها به اعداد برمی گردند Numbers to strings back to numbers

• روش ریاضی جاوا اسکریپت JavaScript Math Method

• روش تاریخ جاوا اسکریپت JavaScript Date Method

جاوا اسکریپت DOM JavaScript DOM

• DOM چیست؟ What is the DOM

• مقدار Node را با استفاده از جاوا اسکریپت انتخاب کنید Select Node value using JavaScript

• اشیاء جاوا اسکریپت و انتخاب در DOM JavaScript Objects and selection within the DOM

• مدل شیء ویندوز Windows Object Model

• روش نوشتن سند document write method

• انتخاب عناصر با شناسه Selecting Elements by ID

• محتوای Output Div را از فرم ورودی به‌روزرسانی کنید Update Output Div content from input form

• عناصر بر اساس نام برچسب را انتخاب کنید Select Elements by Tag Name

• انتخاب عناصر بر اساس کلاس Selecting elements by Class

• انتخابگر درخواست سند document query Selector

• انتخاب هایی مانند CSS Making Selections like CSS

• عبور از DOM Traversing the DOM

• یک ظاهر طراحی شده را به عناصر پویا اضافه کنید Add styling to Elements Dynamically

• افزودن و حذف عناصر با استفاده از جاوا اسکریپت Append and Remove Elements using JavaScript

• شنوندگان رویداد را با استفاده از جاوا اسکریپت به عناصر اضافه کنید Add Event listeners to elements using JavaScript

• شنوندگان رویداد روی رویدادها کلیک می کنند Event listeners click events

• ماوس را روی عناصر قرار دهید تا رنگ پس‌زمینه را تغییر دهند Hover over elements make them change background color

• پنجره بازشو تصویر Image popup window

یک وب سایت تک صفحه ای از ابتدا HTML CSS JavaScript ایجاد کنید Create a single page website from scratch HTML CSS JavaScript

• بخش وب سایت تک صفحه ای معرفی آنچه در حال ساخت هستیم Single page website section introduction what we are building

• راه اندازی محیط توسعه development environment setup

• راه اندازی صفحه وب webpage setup

• ساختار و عناصر ناو را تنظیم کنید Setup Nav Structure and Elements

• سبک NavBar CSS Style NavBar CSS

• محتوای جای‌بان را به بخش‌ها اضافه کنید Add Placeholder Content to Sections

• نیشگون گرفتن و کشیدن سرصفحه NavBar و بخش ها Tweak Header NavBar and Sections

• بخش های ساخت CSS HTML CSS HTML Build Sections

• ساخت پاورقی صفحه Build Page Footer

• ترفندهای صفحه نهایی Final Page Tweaks

• JavaScript ScrollSpy Effect JavaScript ScrollSpy Effect

• نمای نهایی صفحه وب Webpage Final Overview