آموزش برنامه‌نویسی کودکان - آشنایی با HTML، CSS و JavaScript! - آخرین آپدیت

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

مقدمه Introduction

• مقدمه دوره Introduction to the course

• اینفوگرافیک کدنویسی کودکان Kids Coding infographic

• کدنویسی رایگان Programming freebie

بریم شروع کنیم Let's Begin

• چه زبان هایی را یاد خواهیم گرفت؟ What Languages are we going to be learning?

• بیایید برای سرگرمی چیزی کدنویسی کنیم Let's code something for fun

• اولین تجربه کدنویسی ما Our first coding experience

• تبریک می گم! Congratulations!

• تفاوت های زبان های کدنویسی Differences of coding languages

• ادامه زبان های برنامه نویسی Programming languages continued

• بیشتر در مورد زبان های برنامه نویسی More about programming languages

• متغیرها Variables

• متغیرهای عدد صحیح Integer Variables

• متغیرهای بولی Boolean variables

• کاراکترها Characters

• ورودی و خروجی کاربر User input and output

• ورودی کاربر User input

• مختصات Coordinates

• ریاضیات Math

• کامپیوترها چگونه ریاضی انجام می دهند How computers do math

• باقیمانده و توان Modulo and exponents

• دستورات شرطی اگر If statements

• شرط در دستور شرطی اگر The condition in the if statement

• دستورات شرطی اگر و در غیر این صورت If and else statements

• دستورات شرطی اگر در غیر این صورت If else statements

• عملگر بزرگتر از Greater than operator

• کوچکتر از Less than

• برابر است Equals

• برابر نیست Does not Equal

• شرایط و عملگرها Conditions and operators

• عملگرهای یا Or operators

• دستورات شرطی چندگانه Multi conditional statements

• مختصات X، Y در دستورات شرطی X, Y cordinates in if statements

• حلقه ها Loops

• حلقه های for For loops

• حلقه های do while Do while loops

• آرایه ها Arrays

• اولین آزمون ما Our first quiz

بیایید HTML را یاد بگیریم Let's Learn HTML

• 1. یافتن ویرایشگر HTML در زمان واقعی 1. Finding the real time HTML editor

• 2. صحبت درباره ویرایشگر و <!DOCTYPE> 2. Talking about the editor and <!DOCTYPE>

• 3. اضافه کردن تگ های html و body 3. Adding an html and body tag

• 4. اضافه کردن تگ پاراگراف 4. Adding the paragraph tag

• 5. اضافه کردن سرفصل ها و صحبت در مورد سرفصل های مختلف 5. Adding headers and talkinga bout different headers

• 6. صحبت در مورد قالب بندی متن در ویرایشگر و در خروجی 6. Talking about text formating in the editor and in the output

• 7. اضافه کردن خطوط شکسته به کد. 7. Adding breaks to the code.

• 8. اضافه کردن قالب بندی متن. تاکید 8. Adding in text formatting. Emphisize

• 9. اضافه کردن متن قوی 9. Adding in strong text

• 10. اضافه کردن قالب بندی متن دیگر 10. Adding in other text formatting

• 11. اضافه کردن لینک 11. Adding links

• 12. استایل دهی متن لینک 12. Styling link text

• 13. اضافه کردن عکس 13. Adding an image

• 14. ویرایش ارتفاع و عرض عکس 14. Editing the hieght and the width of an image

• 15. اضافه کردن ویژگی alt به تگ عکس 15. Adding the alt property to an image tag

• 16. اضافه کردن لینک قابل کلیک به عکس 16. Adding a clickable link to an image

• 17. کامنت ها 17. Comments

• 18. جداول 18. Tables

• 19. جداول، اضافه کردن ستون 19. Tables, adding columns

• 20. اضافه کردن ردیف به جداول 20. Adding rows to tables

• 21. نحوه کامنت گذاری موثر 21. How to comment effectively

• 22. صحبت در مورد پیچیدگی کد 22. Talking about code complexity

• 23. اضافه کردن سرتیتر جدول به علاوه ویرایش متن با تگ ها 23. Adding a table header plus editing the text with takes

• 24. لیست های نامرتب. 24. Un ordered lists.

• 25. لیست مرتب 25. Ordered List

• 26. لیست های درون لیست ها 26. Lists within lists

• 27. لیست های تعریف 27. Definition lists

• 28. اضافه کردن لیست های نامرتب به لیست های تعریف 28. Adding unordered lists to defintion lists

• 29. بازی با HTML 29. Playing around with HTML

• 30. تگ های عنوان 30. Title Tags

• 31. تگ های Div 31. Div tags

• 32. صحبت در مورد سطح بلوکی و سطح درون خطی و تگ های span 32. Talking about block level and inline level an span tags

• 33 HTML 33 HTML

• 34. راه حل تست شماره 1 34. Test #1 Solution

• 35. تست شماره 2 35. Test #2

• 36 HTML 36 HTML

• 37. تست شماره 3 37. Test #3

• 38. راه حل تست شماره 3 38. Test #3 solution

• 39. تست شماره 4 39. Test #4

• 40. راه حل تست 4 40. Test 4 Solution

• 41. تست شماره 5 41. Test #5

• 42. راه حل تست شماره 5 42. Test #5 Solution

• 43. تست شماره 6 43. Test # 6

• 44. راه حل تست 6 44. test 6 solution

• 45. تست شماره 7 45. Test # 7

• راه حل تست 7 Test 7 Solution

• 46. تست شماره 8 46. Test #8

• 48. راه حل تست 8 48. test 8 solution

• 49. تست شماره 9 49. Test #9

• 50. راه حل تست 9 50. Test 9 solution

• 51. فرم ها 51. Forms

• 52. نوع ورودی رمز عبور 52. The password input type

• 53. نوع ورودی رنگ 53. The color input type

• 55. نوع ورودی تاریخ 55. Date input type

• 56. اضافه کردن نوع ورودی فایل 56. Adding in a file input type

• 57. نوع ورودی محدوده 57. Range input type

• 58. اضافه کردن فیلد جستجو 58. Adding in a search field

• 59. اضافه کردن دکمه ارسال 59. Adding in a submit button

• 62. مقدمه ای بر استایل ها 62. Introduction to styles

• 60. اضافه کردن انواع ورودی دکمه رادیویی 60. Adding in radio button input types

• 61. اضافه کردن نوع ورودی چک باکس 61. Adding in a checkbox input type

• 61. بیشتر در مورد دکمه های رادیویی 61. More on radio buttons

• 63. استایل پاراگراف 63. Paragraph styles

• 64. اضافه کردن رنگ پس زمینه و چندین ویژگی 64. Adding in the background color and multiple attributes

• 64. بیشتر در مورد تگ ها و استایل ها 64. More on tags and styles

• 65. تراز کردن متن 65. Aligning text

• 66. اضافه کردن حاشیه چپ و راست 66. Adding in a margin of both left and right

• 67. اضافه کردن استایل به جدول 67. Adding styles to a table

• 68. تراز کردن جدول در مرکز 68. Aligning a table to the center

• 69. اضافه کردن حاشیه به جدول 69. Adding in a margin to the table

• 70. تغییر عرض نقاط استایل 70. Changing the witdth of the style points

• 71. تغییر فونت در استایل 71. Changing the font in the style

• 72. پاکسازی پروژه و تغییر رنگ ها با اعداد 72. Cleaning up the project and changing the colors with numbers

• 73. اضافه کردن ستون با جدول و ساخت وب سایت 73. Adding in columns with table and building a website

• 74. اضافه کردن ویژگی های استایل قبلی 74. Adding in the previous style attributes

• 75. تغییر رنگ سلول 75. Changing the cell color

• 76. تغییر عرض سلول 76. Changing the cell width

• 77. برگرداندن رنگ ها به رنگ اصلی 77. Changing the colors back to the original color

• 78. تراز عمودی متن به بالا 78. Align the text vertically to the top

• 79. صحبت در مورد اندازه ها و آگاهی از اندازه های بزرگتر 79. Talking about the sizes and being aware of bigger size

• 80. اضافه کردن سرتیتر جدول به ستون ها 80. Adding in a table header to the columns

• 81. اضافه کردن 81. Adding the

• 82. زمان ساخت وب سایت خودتان 82. Time to make your own website

• 83. ذخیره وب سایت HTML شما 83. Saving your HTML website

• 84. تست 1 84. Test 1

• 85. راه حل تست 1 85. Test 1 solution

• 86. تست 2 86. Test 2

• 87. راه حل تست 2 87. Test 2 solution

• آزمون HTML HTML quiz

CSS CSS

• 1. مقدمه CSS 1. Introduction to CSS

• 2. کمی بیشتر درباره CSS صحبت می کنیم 2. Talking a little more about css

• 3. کمی درباره وب سایت JS bin صحبت می کنیم 3. Talking a bit about the JS bin website

• 4. بیایید شروع کنیم و درباره CSS صحبت کنیم 4. Lets get our hands dirty and talk about CSS

• 5. اضافه کردن کد CSS بیشتر 5. Adding some more CSS code

• 6. قدرت CSS 6. The power of CSS

• 7. تنظیم رنگ ها با مقادیر RGB 7. Setting colors to RGB values

• 8. اضافه کردن تصویر پس زمینه 8. Adding a background image

• 9. گزینه های بیشتر تصویر پس زمینه 9. More background image options

• 10. تراز کردن متن 10. Aligning text

• 11. تبدیل متن 11. Text transform

• 12. تورفتگی متن 12. Indenting text

• 13. تزئینات متن 13. Text decorations

• 14. تغییر فونت ها در CSS 14. Changing fonts in CSS

• 15. فونت های سریف، فونت های sans-serif و فونت های monospace 15. Serif fonts, sans-serif fonts and monospace fonts

• 16. فونت های بیشتر مانند cursive و fantasy 16. More fonts like cursive an fantasy

• 17. سبک های فونت 17. Font - styles

• 18. راه های دیگر استفاده از خانواده فونت 18. Other ways to use the font family

• 19. اضافه کردن وزن پررنگ به فونت های شما 19. Adding bold weight to your fonts

• 20. فونت های جایگزین 20. Fail safe fonts

• 21. اضافه کردن نقاط استایل به تگ های دیگر 21. Adding in styling points to other tags

• 22. تغییر نوع استایل لیست برای لیست های نامرتب 22. Changing the list style type for un ordered lists

• 23. تغییر استایل لیست های مرتب 23. Changing ordered lists styles

• 24. اضافه کردن یک تصویر به عنوان آیتم لیست 24. Adding a image as the list item

• 25. جداول در CSS 25. Tables in CSS

• 27. تغییر عرض و ارتفاع سلول های جدول 27. Changing the width and height of the table cells

• 26. اضافه کردن نقاط استایل به جداول 26. Adding in style points to tables

• 28. تغییر رنگ پس زمینه در جداول 28. Changinge the background color in tabkes

• 29. فاصله گذاری جدول 29. Table padding

• 30. اضافه کردن تصویر پس زمینه به جدول 30. Adding a background image to a table

• 31. تگ های A 31. A tags

• 32. اضافه کردن 32. Adding in

• 33. بیشتر در مورد تگ های A 33. More about a tags

• 34. فاصله، حاشیه، مارجین 34. Padding, border, margin

• 35. سبک حاشیه 35. Border style

• 37. ادامه سبک های حاشیه 37. Border styles continued

• 38. شفافیت 38. Opacity

• 39. اضافه کردن شناسه کلاس 39. Adding the class id

• 40. تگ های Div و CSS 40. Div tags and CSS

• 41. تگ های Span 41. Span tags

• 42. تغییر تگ های جدول 42. Changing table tags

• 43. تنظیمات بیشتر روی جداول و شناسه کلاس 43. More adjusting on tables and class ID

• 44. اضافه کردن شناسه های کلاس بیشتر به جداول. این بار بخش داده های جدول 44. Adding more class IDs to tables. This time the table data section

• 45. سرتیتر جدول با شناسه کلاس 45. Class ID table header

• 46. شناسه کلاس با لیست های نامرتب. 46. Class ID with unordered lists.

• 47. لیست های مرتب و کلاس ها 47. Orderlists and classes

• 48. شناسه های کلاس آیتم لیست 48. List item class IDs

• آزمون CSS CSS Quiz

JavaScript JavaScript

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

• 2. سرگرمی بیشتر با کنسول 2. More fun with the console

• 3. سرگرمی بیشتر با کنسول 3. More fun with the console

• 4. سرگرمی بیشتر با کنسول به حروف بزرگ و کوچک 4. More fun with the console to uppercase to lowercase

• 5. بیشتر در مورد متدها و براکت ها 5. More on methods and brackets

• 6. اعداد تصادفی 6. Random numbers

• 7. بیشتر در مورد گرد کردن 7. More on rounding

• 8. حداقل و حداکثر 8. Minimums and maximums

• 9. توان ها 9. Exponents

• 10. جاوا اسکریپت و HTML 10. Javascript and HTML

• 11. چاپ متن روی صفحه 11. Printing text to the screen

• 12. دکمه ها و فراخوانی کد جاوا اسکریپت 12. Buttons and calling javascript code

• 13. توابع جاوا اسکریپت 13. Javascript functions

• 14. اضافه کردن تگ های اسکریپت و صحبت در مورد توابع با نام مشابه 14. Adding script tags and talking about similar named fucntions

• 15. کامنت ها و اهمیت آنها 15. Comments and their importance

• 16. تغییر متن 16. Changing the text

• 17. تغییر متن سرتیتر 17. Changing the header text

• 18. فضاهای خالی 18. White Spaces

• 19. متغیرها 19. Variables

• 20. سرگرمی بیشتر با متغیرها 20. More fun with variables

• 21. تعریف بیش از یک متغیر در هر خط 21. Declaring more than one variable per line

• 22. سرگرمی بیشتر با متغیرها 22. More fun with variables

• 23. ریاضی با متغیرها 23. Math with variables

• 24. تغییر رنگ متن 24. Changing the color of the text

• 25. محاسبه گر درآمد 25. Income calculator

• 26. محاسبه گر درآمد 2 26. Income calculator 2

• 27. محاسبه گر درآمد - اضافه کردن قابلیت و کامنت های بیشتر 27. Income calculator - adding more functionality and comments

• 28. اضافه کردن ارقام واقعی تر 28. Adding more realistic figures

• 29. اضافه کردن هزینه های بیشتر 29. Adding in more expenditures

• 30. اضافه کردن قابلیت های بیشتر 30. Adding in more functionality

• 31. ساخت یک برنامه جدید 31. Making a new app

• 32. نهایی کردن برنامه پول 32. Finalizing the money app

• 33. دستورات شرطی اگر 33. If statements

• 34. نحوه کار دستور شرطی اگر 34. How an if statement works

• 35. دستورات در غیر این صورت 35. Else statements

• 36. دستورات اگر در غیر این صورت 36. Else if statements

• 37. بزرگتر و کوچکتر در دستورات شرطی اگر 37. Greater than and less than in if statements

• 38. بزرگتر و مساوی 38. Greater than and equal to

• 39. نابرابر 39. Not equal to

• 40. شرایط چندگانه 40. Multiple conditions

• 41. عملگر یا 41. Or operator

• 42. رشته ها و دستورات شرطی اگر 42. Strings and if statements

• 43. اشیاء 43. Objects

• 44. خصوصیات اشیاء 44. Objects properties

• 45. بیشتر در مورد خصوصیات اشیاء 45. More on Object properties

• آزمون جاوا اسکریپت JavaScript Quiz

• آزمون نهایی 5 سواله. Final 5 question quiz.

سخنرانی جایزه: 90% تخفیف دوره های کودکان Bonus Lecture: 90% Off Kids Courses

• سخنرانی جایزه: 90% تخفیف دوره های کودکان Bonus Lecture: 90% Off Kids Courses