آموزش راهنمای کامل برای Front-End Dev-HTML، CSS و JavaScript (2024)

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

معرفی Introduction

• مقدمه Intro

• نحوه ایجاد پروژه در VS Code How to create a project in VS Code

• ساختار فایل html (نوشتن اولین کد ما) html file structure (Writing our first code)

به HTML شیرجه بزنید Dive into HTML

• تگ های HTML HTML Tags

• ویژگی های HTML HTML Attributes

• عناصر HTML HTML Elements

• قالب بندی HTML HTML Formatting

• تگ های عنوان HTML HTML Heading Tags

• پاراگراف های HTML HTML Paragraphs

• تگ های عبارت HTML HTML Phrase tags

• برچسب های تصویر HTML HTML Image Tags

• تگ های div HTML HTML div tags

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

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

• ساختار و نحو CSS CSS structure and syntax

• سبک دادن به بخش های مختلف Styling different sections

• استایل بدن Body Styling

• استایل های مختلف برای بخش های مختلف Different Styling for different sections

• مدل جعبه CSS CSS Box Model

• CSS Border، Padding و Margin CSS Border, Padding and Margin

• فونت های CSS، تزیین متن و تبدیل، فاصله کلمات و حروف CSS fonts, text-decoration and Transform, word and letter Spacing

• CSS درس 9 CSS lesson 9

• بلوک های CSS CSS blocks

• نوار کناری CSS و محتوای اصلی CSS sidebar and main Content

• یک ظاهر طراحی شده فرم Form styling

• بخش بیرونی Section outro

بخش جاوا اسکریپت JavaScript section

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

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

• کار با کنسول Working with Console

• مقدمه ای بر انواع داده های پایه جاوا اسکریپت Intro to JavaScript Basic Data Types

• الحاق رشته و لفظ رشته String Concatenation and String literals

• روش های رشته ای String Methods

• پذیرش ورودی کاربر در جاوا اسکریپت Accepting user input in JavaScript

• تبدیل نوع Type conversion

• اپراتورها Operators

• کار با اعداد Working with Numbers

ساخت داشبورد دانش آموزان با استفاده از HTML، CSS و جاوا اسکریپت Building a Students Dashboard using HTML, CSS and JavaScript

• راه اندازی و معرفی پروژه Project Setup and Introduction.

• طراحی بدنه و هدر Body and header Styling

• تنظیم نمادهای مواد setting up material icons

• کار با آیکون های متریال working with material icons

• منوی پیمایش یک ظاهر طراحی شده Styling Navigation Menu

• کار با کارت های داشبورد Working with Dashboard cards

• کارت های داشبورد یک ظاهر طراحی شده Styling Dashboard Cards

• مقدمه ای بر نمودارها Introduction to Charts

• تجسم داده ها نمودار میله ای Bar Chart Data Visualization

• اجرای نمودارهای ترکیبی Mixed charts implementation.

• پاسخگو کردن داشبورد به صفحه های مختلف Making the dashboard responsive to different screens

• صیقل دادن داشبورد ما Polishing our dashboard