🔖 توضیحات تکمیلی برای دوستانی که میخوان در حوزه وب تازه شروع به کار بکنن طبق گام ‌های زیر پیش برن :


🔆 معرفی #html :
زبان HTML یک زبان نشانه گذاری است ، به اين معنی که بخش های مختلف توسط اجزايی به نام تگ از هم جدا شده ، که هر کدام دارای کاربرد و خواص مربوط خود هستند . اين تگ ها به مرورگر اعلام می کنند که هر بخش از صفحه چه نوع عنصری است و بايد به چه صورت نمايش داده شود .

🔆 معرفی #css :
زبان CSS سرنام واژه های Cascading Style Sheets می باشد و برای مدیریت ظاهر صفحات وب از آن استفاده می شود. در واقع اگر طراحی صفحات وب را به پروسه ساخت یک خانه تشبیه کنیم، زبان تگ نویسی HTML معادل اسکلت بندی ساختمان است و CSS معادل ظاهر و نمایی است که در ساختمان بکار می بریم. بنابراین برای طراحی صفحات وب علاوه بر HTML باید CSS را نیز فرابگیرید.

🔆 معرفی #JavaScript :
زبان JavaScript یکی از زبان‌های پرطرفدار وب می‌باشد که هم به صورت ساخت یافته و هم به صورت شی گرا مورد استفاده قرار می گیرد. جاوا اسکریپت درون کدهای HTML قرار می‌ گیرد و بر روی مرورگر بازدید کننده اجرا می‌شود. جاوا اسکریپت توانایی تغییر در محتویات المان‌ های نمایش داده شده را دارد به گونه ای که امکان پویا سازی صفحات وب را فراهم می‌آورد.

🔆 معرفی #jQuery :
زبان jQuery یک کتابخانه از جاوا اسکریپت است که با امکانات بیشتر و استفاده از دستورات کمتر میتوان صفحه وب را پویا کرد ! دقت داشته باشید که برای یادگیری جی کوئری حتما باید به جاوا اسکریپت تسلط داشته باشید و تفاوت اصلی در کوتاه نوشته تر شدن دستورات در جی کوئری است !

🔆 معرفی #bootstrap :
در اصل Bootstrap مجموعه ای از ابزارهای رایگان برای ایجاد صفحات وب و نرم افزارهای تحت وب است که شامل دستورات HTML، CSS و توابع جاوا اسکریپت جهت تولید و نمایش فرم ها، دکمه ها، تب ها، ستون ها و سایر المان های مورد نیاز طراحی وب می باشد.

🔆 معرفی #php :
زبان PHP مخفف PHypertext Preprocessor یک زبان قدرتمند ( Cross-Platform , Html embeded ) برای ساخت وب سایت های پویا و داینامیک است . یک زبان سمت سرور که اسکریپت های آن بر روی سرور اجرا می شود . با استفاده از زبان php ، شما می توانید سایت ها و پورتال های بزرگ سازمانی را با قدرت طراحی و برنامه نویسی کنید . php در نسخه های مختلفی به بازار عرضه شد که در حال حاضر نسخه ۵ آن توسط توسعه دهندگان php به کاربران و برنامه نویسان ارائه شده است . با آمدن php 5 تحول جدیدی در php ایجاد شد به صورتی که Microsoft سازنده زبان Asp بار دیگر از رقیب خود یعنی php عقب افتاد.

با ما همراه باشید:
🆔 @code_pedia

#javascript

ساخت ساعت دیجیتال با جاوا اسکریپت و css کداش همینه که در تصویر هست

با کدپدیا همراه باشید

Responsive Admin Dashboard with Light & Dark Mode


In this tutorial, I'm going to show you how to use modern #HTML, #CSS, and #JavaScript to create a completely responsive admin dashboard with light and dark mode theme functionality. We'll be using CSS Variables, CSS Grid, CSS Flexbox, Media queries for our responsive design, and CSS  transitions and animations for some cool animation effects

Source Code : https://github.com/AsmrProg-YT/Dashboard-Designs 



🆔 @code_pedia

Password Generator Using #HTML, #CSS & #JavaScript




🆔 @code_pedia

Create a Responsive Mini Portfolio Website Design Using #HTML #CSS & #JavaScript

آموزشی که قطعاااااا کاربردی براتون


🆔 @code_pedia

Make a Responsive Search Bar in #HTML #CSS & #JavaScript





🆔 @code_pedia

#HTML, #CSS, and #JavaScript All-in-One For Dummies

#pdf

🆔 @code_pedia

Complete JavaScript Cheatsheet


♨️ چیت شیتهای بیشتری لازم دارید ؟؟ با لایک اطلاع بدید که بازم بفرستم 👍



#cheatsheet #HTML5 #CSS3 #javascript

🆔 @code_pedia

Responsive Construction Website Design Using HTML CSS And JavaScript

code:
https://github.com/bedimcode/responsive-construction-website


CDN ICON:
https://cdnjs.com/libraries/remixicon

font:
https://fonts.google.com/

icon:
https://remixicon.com/Responsive


Js function:
https://github.com/bedimcode/responsive-watches-website


Scroll Reveal:
https://scrollrevealjs.org/



Netlify:
https://www.netlify.com/



#HTML5 #CSS3 #javascript #ReactJS



🆔 @code_pedia

How to create responsive navigation bar with #HTML #CSS And #JavaScript



🆔 @code_pedia

Animated Login Page with #HTML, #CSS & #JavaScript


In this tutorial, we will learn how to use modern HTML, CSS, and JavaScript to create a complete Login Page Design with Login and Sign up  animations. We'll be using CSS Flexbox, CSS  transition for some cool  animation effects and also CSS keyfra





code:
https://github.com/AsmrProg-YT/Modern-Login?ref=morioh.com&utm_source=morioh.com

🆔 @code_pedia

#JavaScript Full Course For Beginners With JavaScript Projects Tutorial


we will learn the JavaScript with practical examples and explanation. This is the complete JavaScript course for beginners with step by step explanations. Within this course we will make 6 JavaScript projects too. You can add these JavaScript project in your resume and online portfolio. You can also download the notes of this JavaScript beginners course from below link.

Project 1 Assets: 
https://drive.google.com/file/d/1ZigDuLrXRTa4GI39NG5Q2xeAdPhvI-0s/view?usp=share_link 

Project 3 Assets:
https://drive.google.com/file/d/1MNHdIjbtCwwAq_lfIkGnOTo7i-YNeniQ/view?usp=sharing 

Project 4 Assets:
https://drive.google.com/file/d/1FoyUTDFzwrm_UGlcb3a1swczLZXE-koC/view?usp=share_link 

Project 6 Assets:
https://drive.google.com/file/d/1Xu3_IH8AvnyLP09-Tr-1uR7WpOYJEcRG/view?usp=sharing 



🆔 @code_pedia

7 GitHub repos for #JavaScript Developers!


1. https://github.com/getify/You-Dont-Know-JS

2. https://github.com/trekhleb/javascript-algorithms

3. https://github.com/30-seconds/30-seconds-of-code

4. https://github.com/thedaviddias/Front-End-Checklist

5. https://github.com/yangshun/front-end-interview-handbook

6. https://github.com/microsoft/Web-Dev-For-Beginners

7. https://github.com/sudheerj/reactjs-interview-questions



🆔 @code_pedia

🚀 (اکس لینت) oxlint اکنون از پلاگین‌های جاوااسکریپت پشتیبانی می‌کند!

اکس‌لینت (oxlint) - لینتر فوق‌سریع Rust-based - حالا قابلیت گسترش با پلاگین‌های JS/TS را دارد.

✨ قابلیت‌های جدید:
•نوشتن قوانین لینت سفارشی با جاوااسکریپت/تایپ‌اسکریپت
•یکپارچه‌سازی با اکوسیستم موجود ESLint
•عملکرد بالا با حفظ سرعت هسته Rust

🎯 نحوه استفاده:

// oxlint.config.js
export default {
  plugins: ['my-plugin'],
  rules: {
    'my-plugin/my-rule': 'error'
  }
}

⚡ مزایای کلیدی:

· سرعت ۵۰-۱۰۰ برابر سریع‌تر از ESLint
· پشتیبانی از پلاگین‌های موجود جامعه
· توسعه آسان قوانین سفارشی

این به روزرسانی oxlint را به انتخابی ایده‌آل برای پروژه‌های بزرگ با نیازهای خاص تبدیل می‌کند.

#JavaScript #TypeScript #Oxlint #Linting #WebDevelopment #Rust

🆔@code_pedia

🎯 تگ `<template>`: قابلیت هسته HTML که جاوااسکریپت من را ساده کرد

تگ <template> یک ابزار قدرتمند و ناشناخته در HTML است:

💡 تگ `<template>` چیست؟
- بخشی از HTML که در ابتدا رندر نمی‌شود
- قابل استفاده مجدد در runtime با جاوااسکریپت
- حافظه‌کار و بهینه برای المان‌های تکراری

🛠 مثال عملی:

<template id="user-card">
  <div class="card">
    <h3 class="name"></h3>
    <p class="email"></p>
  </div>
</template>

// استفاده از template
const template = document.getElementById('user-card');
const clone = template.content.cloneNode(true);

clone.querySelector('.name').textContent = 'John Doe';
clone.querySelector('.email').textContent = 'john@example.com';

document.body.appendChild(clone);

⚡️ مزایای کلیدی:
- کاهش پیچیدگی جاوااسکریپت
- عملکرد بهتر نسبت به innerHTML
- ساختار تمیز و قابل نگهداری
- جدا کردن منطق از نمایش

🎯 کاربردها:
- کامپوننت‌های داینامیک
- لیست‌های تکراری
- modalها و popupها
- ساختارهای پیچیده UI

#HTML #JavaScript #WebDevelopment #Frontend #Programming

🆔@code_pedia