roadmap.sh
Frontend Developer Roadmap: What is Frontend Development?
Learn what Frontend Development is, what frontend developers do and how to become a modern frontend developer using our community-driven roadmap.
منابع فرانتاند (Front-end)
ـــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــ
🎯 Roadmap (roadmap.sh)
1. HTML: Semantic HTML, SEO Basics, Accessibility
2. CSS: Flex Box, CSS Grid, Responsive Design, Animations
3. JavaScript: Core Concepts, Modern ES Features, Browser APIs
4. Version Control Systems: Git, GitHub
5. Package Managers: NPM, PNPM
6. Deployment Services: Netlify, Vercel
7. Module Bundlers: Vite
8. Linters & Formatters: ESLint, Prettier
9. CSS Pre-Processors & Architecture: PostCSS, BEM
10. CSS Frameworks: Tailwind CSS, Shadcn UI
11. JavaScript Frameworks: Astro, Vue --> Nuxt, React --> Next
12. Type Checkers: TypeScript
13. Testing: Vitest, Cypress, Playwright
14. Progressive Web Apps: Core Concepts, Vite PWA Plugin
15. API Querying: REST APIs, GraphQL, Apollo
16. Mobile Applications: React Native, Capacitor, Ionic
17. Desktop Applications: Electron, Tauri
🎯 Bonus
- SVG Icons: Icônes, Tabler Icons, Boxicons, Ionicons, Font Awesome
- Performance Best Practices
- JavaScript Style Guide
- Frontend Guidelines
🎯 دورههای آموزشی جامع
- آموزش HTML و CSS (کورس یودمی Jonas Schmedtmann)
- آموزش Advanced CSS (کورس یودمی Jonas Schmedtmann)
- آموزش JavaScript (کورس یودمی Jonas Schmedtmann)
- آموزش Git و GitHub (کورس یودمی Mosh Hamedani)
- آموزش Tailwind CSS (کرشکورس یوتوب Brad Traversy)
- آموزش Vue (کورس یودمی Andrei Neagoie)
- آموزش Nuxt (کورس یودمی Laith Harb)
- آموزش React (کورس یودمی Jonas Schmedtmann)
- آموزش Next (کورس یودمی Mosh Hamedani)
- آموزش TypeScript (کورس یودمی Maximilian Schwarzmüller)
- آموزش Clean Code (کورس یودمی Maximilian Schwarzmüller)
نکته: با استفاده از نرمافزار PotPlayer میتونین ویدیوها رو با زیرنویس فارسی مشاهده کنین.
#HTML #CSS #JavaScript
💎 @htmlcss_channels
ـــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــ
🎯 Roadmap (roadmap.sh)
1. HTML: Semantic HTML, SEO Basics, Accessibility
2. CSS: Flex Box, CSS Grid, Responsive Design, Animations
3. JavaScript: Core Concepts, Modern ES Features, Browser APIs
4. Version Control Systems: Git, GitHub
5. Package Managers: NPM, PNPM
6. Deployment Services: Netlify, Vercel
7. Module Bundlers: Vite
8. Linters & Formatters: ESLint, Prettier
9. CSS Pre-Processors & Architecture: PostCSS, BEM
10. CSS Frameworks: Tailwind CSS, Shadcn UI
11. JavaScript Frameworks: Astro, Vue --> Nuxt, React --> Next
12. Type Checkers: TypeScript
13. Testing: Vitest, Cypress, Playwright
14. Progressive Web Apps: Core Concepts, Vite PWA Plugin
15. API Querying: REST APIs, GraphQL, Apollo
16. Mobile Applications: React Native, Capacitor, Ionic
17. Desktop Applications: Electron, Tauri
🎯 Bonus
- SVG Icons: Icônes, Tabler Icons, Boxicons, Ionicons, Font Awesome
- Performance Best Practices
- JavaScript Style Guide
- Frontend Guidelines
🎯 دورههای آموزشی جامع
- آموزش HTML و CSS (کورس یودمی Jonas Schmedtmann)
- آموزش Advanced CSS (کورس یودمی Jonas Schmedtmann)
- آموزش JavaScript (کورس یودمی Jonas Schmedtmann)
- آموزش Git و GitHub (کورس یودمی Mosh Hamedani)
- آموزش Tailwind CSS (کرشکورس یوتوب Brad Traversy)
- آموزش Vue (کورس یودمی Andrei Neagoie)
- آموزش Nuxt (کورس یودمی Laith Harb)
- آموزش React (کورس یودمی Jonas Schmedtmann)
- آموزش Next (کورس یودمی Mosh Hamedani)
- آموزش TypeScript (کورس یودمی Maximilian Schwarzmüller)
- آموزش Clean Code (کورس یودمی Maximilian Schwarzmüller)
نکته: با استفاده از نرمافزار PotPlayer میتونین ویدیوها رو با زیرنویس فارسی مشاهده کنین.
#HTML #CSS #JavaScript
💎 @htmlcss_channels
🙏5❤3👍1
This media is not supported in your browser
VIEW IN TELEGRAM
JavaScript-Questions
is a repository with questions and answers on #JavaScript, which will help improve the knowledge of the language and prepare for technical #interview
github
#HTML #CSS #JavaScript
💎 @htmlcss_channels
is a repository with questions and answers on #JavaScript, which will help improve the knowledge of the language and prepare for technical #interview
github
#HTML #CSS #JavaScript
💎 @htmlcss_channels
❤4👍1
🆕️ فونت جدید گوگل شخصی سازی شده برای برنامه نویسها است. کامنت های کد را دیگه به حالت ایتالیک نمینویسد و سبک جدید دارد.
❗️رایگان و برای همه قابل استفاده است.
https://www.producthunt.com/posts/google-sans-code
💎 @htmlcss_channels
❗️رایگان و برای همه قابل استفاده است.
https://www.producthunt.com/posts/google-sans-code
💎 @htmlcss_channels
Product Hunt
Google: Organizing the world's information | Product Hunt
Search the world's information, including webpages, images, videos and more. Google has many special features to help you find exactly what you're looking for.
This media is not supported in your browser
VIEW IN TELEGRAM
Beautiful open-source animation engine for the web: anime.js
MIT-licensed, lightweight, and actively maintained.
Love it.
source: animejs.com
💎 @htmlcss_channels
MIT-licensed, lightweight, and actively maintained.
Love it.
source: animejs.com
💎 @htmlcss_channels
❤4
طراحی سایت شده مجموعهای از اصول و استاندارد که باید رعایت بشه، ولی هنوزم میشه سایتهای شخصی یا رزومه رو یکم خلاقانه و متفاوت ساخت، مثل:
https://www.sharyap.com/
که مراحل طراحی و ساختش رو هم توضیح داده:
https://youtu.be/_tWh4cYCTv0?si=xPUoYvU9PVxfgwTF
💎 @htmlcss_channels
https://www.sharyap.com/
که مراحل طراحی و ساختش رو هم توضیح داده:
https://youtu.be/_tWh4cYCTv0?si=xPUoYvU9PVxfgwTF
💎 @htmlcss_channels
👍3❤1🙏1
open source UI library, tons of components, CSS and Tailwind
https://github.com/uiverse-io/galaxy
💎 @htmlcss_channels
https://github.com/uiverse-io/galaxy
💎 @htmlcss_channels
❤2
Forwarded from هشتگ تبلیغ تخصصی (گسترده)
🗣 سرفصل ها:
🏛 موسسه توسعه
➖➖
Please open Telegram to view this post
VIEW IN TELEGRAM
❤2
This media is not supported in your browser
VIEW IN TELEGRAM
Parallax effect for bakery card
HTML & CSS & JS
The code is available on the site 👇
</CODE>
💎 @htmlcss_channels
HTML & CSS & JS
The code is available on the site 👇
</CODE>
💎 @htmlcss_channels
❤4
open source icon library for web and mobile projects
https://github.com/Richard9394/MingCute
💎 @htmlcss_channels
https://github.com/Richard9394/MingCute
💎 @htmlcss_channels
❤4🙏1