♨️ 10 تا از بهترین ریپازیتوری های توسعه وب
1. Web Developer-Roadmap :
https://github.com/kamranahmedse/developer-roadmap
2. 30-Seconds-Of-Code :
https://github.com/30-seconds/30-seconds-of-code
3. Awesome-Cheatsheets:
https://github.com/LeCoupa/awesome-cheatsheets
4. CSS-Protips :
https://github.com/AllThingsSmitty/css-protips
5. 33-JS-Concepts :
https://github.com/leonardomso/33-js-concepts
6. You-Dont-Know-JS :
https://github.com/getify/You-Dont-Know-JS/tree/2nd-ed
7. Front-End-Checklist :
https://github.com/thedaviddias/Front-End-Checklist
8. Javascript-Questions :
https://github.com/lydiahallie/javascript-questions
9. Clean-Code-Javascript :
https://github.com/ryanmcdermott/clean-code-javascript
10. free-programming-books :
https://github.com/EbookFoundation/free-programming-books
#github #web
☕️ @CodeExplore
1. Web Developer-Roadmap :
https://github.com/kamranahmedse/developer-roadmap
2. 30-Seconds-Of-Code :
https://github.com/30-seconds/30-seconds-of-code
3. Awesome-Cheatsheets:
https://github.com/LeCoupa/awesome-cheatsheets
4. CSS-Protips :
https://github.com/AllThingsSmitty/css-protips
5. 33-JS-Concepts :
https://github.com/leonardomso/33-js-concepts
6. You-Dont-Know-JS :
https://github.com/getify/You-Dont-Know-JS/tree/2nd-ed
7. Front-End-Checklist :
https://github.com/thedaviddias/Front-End-Checklist
8. Javascript-Questions :
https://github.com/lydiahallie/javascript-questions
9. Clean-Code-Javascript :
https://github.com/ryanmcdermott/clean-code-javascript
10. free-programming-books :
https://github.com/EbookFoundation/free-programming-books
#github #web
☕️ @CodeExplore
👍5🔥3❤2
☕️ افزونههای کاربردی کروم، برای توسعهدهندگان👨💻
👉 Wappalyzer
🔖 افزونه کاربردی، برای اینکه بفهمین صفحات وب رو با چه تکنولوژیهایی طراحی کردن...
👉 Clear Cache
🔖 تا حالا شده توی کد یه تغییری بدین و توی خروجی وب تغییری نبینید؟! اینجور وقتا باید حافظه کش رو خالی کنید که با این افزونه میتونید اتوماتیک این کار رو انجام بدین.
👉 WhatFont
🔖 وبسایتها چه فونتی استفاده میکنن؟! با این افزونه به این موضوع پی ببرین!
👉 ColorPick Eyedropper
🔖 با این افزونه میتونید رنگهای عناصر مختلف رو توی صفحات وب بردارین...
👉 CSS Viewer
🔖 با این افزونه میتونید سیاساس عناصر مختلف رو ببینید...
#web #developer #chrome
☕️ @CodeExplore
👉 Wappalyzer
🔖 افزونه کاربردی، برای اینکه بفهمین صفحات وب رو با چه تکنولوژیهایی طراحی کردن...
👉 Clear Cache
🔖 تا حالا شده توی کد یه تغییری بدین و توی خروجی وب تغییری نبینید؟! اینجور وقتا باید حافظه کش رو خالی کنید که با این افزونه میتونید اتوماتیک این کار رو انجام بدین.
👉 WhatFont
🔖 وبسایتها چه فونتی استفاده میکنن؟! با این افزونه به این موضوع پی ببرین!
👉 ColorPick Eyedropper
🔖 با این افزونه میتونید رنگهای عناصر مختلف رو توی صفحات وب بردارین...
👉 CSS Viewer
🔖 با این افزونه میتونید سیاساس عناصر مختلف رو ببینید...
#web #developer #chrome
☕️ @CodeExplore
❤20
سه تا از بهترین ابزار های ایده یابی طراحی سایت 🔥
با این سه تا سایت میتونید ایده های خفن طراحی سایت و برنامه نویسی پیدا کنید 😎
🔹pagecollective.com
🔹dribbble.com
🔹awwwards.com
#ideas #web #development
☕️ @CodeExplore
با این سه تا سایت میتونید ایده های خفن طراحی سایت و برنامه نویسی پیدا کنید 😎
🔹pagecollective.com
🔹dribbble.com
🔹awwwards.com
#ideas #web #development
☕️ @CodeExplore
🔥13❤🔥6⚡3
ساختار صفحه HTML از سه بخش اصلی تشکیل شده که براتون پایین توضیحات هر کدومشون رو قرار میدم :
این بخش حاوی اطلاعات کلی در مورد صفحه است، مانند عنوان صفحه، توضیحات صفحه، و همچنین متا تگهایی که میتوانند برای موتورهای جستجو مفید باشند.
: این بخش حاوی محتوای اصلی صفحه است، مانند متن، تصاویر، ویدیوها، و سایر عناصر HTML.
این بخش حاوی اطلاعاتی مثل حق کپی رایت، اطلاعات تماس، لینک مقالات و لینک شبکههای اجتماعی است و از اهمیت بسیار ویژهای برخوردار است.
ساختار کلی یک صفحه HTML به شکل زیر هست
#structure #web #پست_پیشنهادی
☕️ @CodeExplore
قسمت سر (head):
این بخش حاوی اطلاعات کلی در مورد صفحه است، مانند عنوان صفحه، توضیحات صفحه، و همچنین متا تگهایی که میتوانند برای موتورهای جستجو مفید باشند.
قسمت بدنه (body)
: این بخش حاوی محتوای اصلی صفحه است، مانند متن، تصاویر، ویدیوها، و سایر عناصر HTML.
قسمت پایانی (footer):
این بخش حاوی اطلاعاتی مثل حق کپی رایت، اطلاعات تماس، لینک مقالات و لینک شبکههای اجتماعی است و از اهمیت بسیار ویژهای برخوردار است.
ساختار کلی یک صفحه HTML به شکل زیر هست
:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>عنوان صفحه</title>
<meta name="description" content="توضیحات صفحه">
</head>
<body>
محتوای اصلی صفحه
</body>
<footer>
محتواهای دیگر
</footer>
</html>
#structure #web #پست_پیشنهادی
☕️ @CodeExplore
⚡18❤🔥3🔥3
تم های رایگان و متنوع بوت استرپ برای برنامه نویسان فرانت اند 🔝
این طرح ها آپدیت میشن و میتونید از این طرح ها توی طراحی ها استفاده کنید طرح ها همراه با کد هاشون قرار داده شدن⚡️
👉 https://bootswatch.com
#bootstrap #frontend #web
☕️ @CodeExplore
این طرح ها آپدیت میشن و میتونید از این طرح ها توی طراحی ها استفاده کنید طرح ها همراه با کد هاشون قرار داده شدن
👉 https://bootswatch.com
#bootstrap #frontend #web
Please open Telegram to view this post
VIEW IN TELEGRAM
⚡8🔥2❤🔥1
ریپازیتوری از برنامه های کاربردی وب آسیب پذیر 💯
یک فهرست جامع نگهداری شده از تمام برنامه های کاربردی وب آسیب پذیر برای یادگیری امنیت وب☄️
🌪 github.com/OWASP/OWASP-VWAD
#security #owasp #web
☕️ @CodeExplore
یک فهرست جامع نگهداری شده از تمام برنامه های کاربردی وب آسیب پذیر برای یادگیری امنیت وب
#security #owasp #web
Please open Telegram to view this post
VIEW IN TELEGRAM
⚡6❤🔥3🔥3
آیکن های آماده در فرمت های مختلف برای استفاده در طراحی های وب و موبایل 🔥
👉 pixelbuddha.net/freebie/web-and-mobile-icons-bundle
#icon #web #app
☕️ @CodeExplore
#icon #web #app
Please open Telegram to view this post
VIEW IN TELEGRAM
❤🔥7🔥4⚡2
#web #fullstack
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥17⚡6❤🔥4
دوتا منبع کاربردی و مفید برای یادگیری برنامه نویسی وب و اندروید همراه با مدرک معتبر که میتونید ازشون برای یادگیری برنامه نویسی استفاده کنید.
🔗 https://web.dev/learn
🔗 https://developer.android.com/courses
#web #android
☕️ @CodeExplore
#web #android
Please open Telegram to view this post
VIEW IN TELEGRAM
⚡8❤🔥3🔥1
#web #developer #tools
Please open Telegram to view this post
VIEW IN TELEGRAM
⚡6❤🔥2🔥1
#javascript #game_development #web
Please open Telegram to view this post
VIEW IN TELEGRAM
❤🔥9🔥4⚡2
- وقتی شما یک آدرس وب (URL) وارد میکنید، مرورگر یک درخواست به سرور ارسال میکند.
- سرور جواب را به مرورگر برمیگرداند که شامل محتوای صفحه (مثل HTML، CSS، جاوااسکریپت، و تصاویر) است.
- مرورگر HTML را تحلیل کرده و یک مدل درختی به نام DOM میسازد.
- CSS را هم تحلیل کرده و به DOM اضافه میکند تا مدل CSSOM ساخته شود.
- جاوااسکریپت هم اجرا میشود و ممکن است تغییراتی در DOM بدهد.
- مرورگر مدلهای DOM و CSSOM را به یک درخت رندرینگ تبدیل میکند.
- مکان و اندازه هر عنصر مشخص میشود و سپس عناصر به نمایش در میآیند.
- مرورگر به کلیکها، تایپها و اسکرولها پاسخ میدهد.
- این تعاملات ممکن است باعث درخواستهای جدید HTTP یا تغییرات در صفحه شوند.
- مرورگر از کش برای کاهش زمان بارگذاری صفحات استفاده میکند.
- کش مرورگر میتواند شامل فایلهای HTML، CSS، جاوااسکریپت، و تصاویر باشد.
- گوگل کروم: موتور Blink
- فایرفاکس: موتور Gecko
- سافاری: موتور WebKit
- مایکروسافت اج: موتور Blink
این فرآیندها به سرعت انجام میشن تا کاربر سریع تر وبسایت رو ببینه
#browser #web
Please open Telegram to view this post
VIEW IN TELEGRAM
⚡18🔥5❤🔥4
#ui #app #web #programming
Please open Telegram to view this post
VIEW IN TELEGRAM
uizard.io
UI Design Made Easy, Powered By AI | Uizard
UI design for apps, websites, and desktop software in minutes. If you can use Google Slides or PowerPoint, you can use Uizard!
🔥7⚡5❤🔥1
#site #web_scraping
Please open Telegram to view this post
VIEW IN TELEGRAM
⚡13❤🔥3🔥2
3 ابزار کاربردی برای طراحان سایت 🔥
1⃣ سایت Uicolors.app
با استفاده از این سایت میتونید کلی پالت رنگی زیبا و جذاب با دسترسی به کد رنگ هاش داشته باشید.
2⃣ اکستنشن CSS Viewer
با این اکستنشن میتونید کد های CSS صفحه یا المان های مختلف صفحه رو ببینید.
3⃣ سایت Cssgradient.io
یکی از مواردی که توی جذابیت طراحی بهتون کمک میکنه استفاده از گرادینت های جذاب و کاربرپسند هستش که توی این سایت میتونید کلی گرادینت جذاب رو یکجا داشته باشید.
#web #developer #tools
☕️ Telegram | Website | Discord
1⃣ سایت Uicolors.app
با استفاده از این سایت میتونید کلی پالت رنگی زیبا و جذاب با دسترسی به کد رنگ هاش داشته باشید.
2⃣ اکستنشن CSS Viewer
با این اکستنشن میتونید کد های CSS صفحه یا المان های مختلف صفحه رو ببینید.
3⃣ سایت Cssgradient.io
یکی از مواردی که توی جذابیت طراحی بهتون کمک میکنه استفاده از گرادینت های جذاب و کاربرپسند هستش که توی این سایت میتونید کلی گرادینت جذاب رو یکجا داشته باشید.
#web #developer #tools
☕️ Telegram | Website | Discord
❤🔥10😍2🔥1
سه تا ابزار محبوب که کار طراحای سایت رو راحتر میکنن💯
1- برای بهینه تر کردن فایل های CSS پروژه میتونی ازش استفاده کنی. فایلاتو آپلود میکنی و جاهایی کدهات که میتونه بهینه تر باشه رو بهت میگه.
🔗 https://projectwallace.com
2- دریافت دکمه های انیمیشن دار ، برای دارک مود سایت
🔗 https://toggles.dev
3- برای ساخت bento grid میتونی از سایت های پایین استفاده کنی که یکی برای CSS و یکی برای Tailwind هست
🔗 https://tailwindgen.com
🔗 https://cssgridgenerator.io
اگر دوست داری برای زمینه های دیگه هم ازین ابزارای محبوب بزاریم، ری اکشن بزن و برای دوستات هم بفرست🧡🔥
#web #design #tools
☕️ Telegram | Website | Discord
1- برای بهینه تر کردن فایل های CSS پروژه میتونی ازش استفاده کنی. فایلاتو آپلود میکنی و جاهایی کدهات که میتونه بهینه تر باشه رو بهت میگه.
🔗 https://projectwallace.com
2- دریافت دکمه های انیمیشن دار ، برای دارک مود سایت
🔗 https://toggles.dev
3- برای ساخت bento grid میتونی از سایت های پایین استفاده کنی که یکی برای CSS و یکی برای Tailwind هست
🔗 https://tailwindgen.com
🔗 https://cssgridgenerator.io
اگر دوست داری برای زمینه های دیگه هم ازین ابزارای محبوب بزاریم، ری اکشن بزن و برای دوستات هم بفرست🧡🔥
#web #design #tools
☕️ Telegram | Website | Discord
🔥8⚡2❤🔥1
🌀 ریپوی Jetzig یه فریمورک تحت وب مدرن و مینیماله که با زبان Zig نوشته شده. باهاش میتونی اپلیکیشنهای وب سریع و سبک بسازی بدون نیاز به زبان Python یا Node.
GitHub: https://github.com/jetzig-framework/jetzig
#zig #web #web_application #github #repo
☕️Telegram | Website | Discord
GitHub: https://github.com/jetzig-framework/jetzig
#zig #web #web_application #github #repo
☕️Telegram | Website | Discord
⚡6❤🔥2
زبان و فریمورک های رایج مورد استفاده توی هر کدوم چیه؟🧐
#languages #web #software #machine_learning
☕️Telegram | Website | Discord
#languages #web #software #machine_learning
☕️Telegram | Website | Discord
🔥13❤🔥2⚡1
🚀 اگه دنبال طرح و ایده برای نمونه کار برنامه نویسی وب میگردید سایت Portfolio Ideas مجموعه ای از نمونه های سایت های Portfolio رو که بیش از 130 طرح با استفاده از زبان ها و فریم ورک های مختلف فرانت اند و بک اند مثل React, TypeScript, Nextjs, Nodejs و... پیاده سازی شدن رو با لایسنس MIT قرار داده که خیلی راحت میتونید ازشون ایده بگیرید یا با داشتن ایده برای توسعه این نمونه کار ها مشارکت کنید.
🔗https://portfolio-ideas.vercel.app/
#portfolio #web
☕️Telegram | Website | Discord
🔗https://portfolio-ideas.vercel.app/
#portfolio #web
☕️Telegram | Website | Discord
🔥8⚡2❤🔥1😍1