html-handbook.pdf
1001.5 KB
📝 #HTML HANDBOOK
این کتاب با هدف کمک به شما در یادگیری سریع HTML و آشنایی با موضوعات پیشرفته HTML نوشته شده است
👈برای دسترسی به سایر کتابهای طراحی و توسعه وب که تا الان تو کانال منتشر شده از #pdf استفاده کنید
💎 @htmlcss_channels
این کتاب با هدف کمک به شما در یادگیری سریع HTML و آشنایی با موضوعات پیشرفته HTML نوشته شده است
👈برای دسترسی به سایر کتابهای طراحی و توسعه وب که تا الان تو کانال منتشر شده از #pdf استفاده کنید
💎 @htmlcss_channels
🙏3
Vivus
A library for creating drawn animations using SVG. Many different animations are available, as well as the ability to create your own script for drawing SVG in any way you like.
https://maxwellito.github.io/vivus/
💎 @htmlcss_channels
A library for creating drawn animations using SVG. Many different animations are available, as well as the ability to create your own script for drawing SVG in any way you like.
https://maxwellito.github.io/vivus/
💎 @htmlcss_channels
👍2
✅ برنامهنویسی وب دقیقاً یعنی چی؟
🔆 فرانتاند (Front-End): همون چیزیه که کاربر میبینه؛ ظاهر سایت، دکمهها، رنگها، عکسها، فرمها. با HTML، CSS و JavaScript ساخته میشه.
💻 بکاند (Back-End): بخشیه که پشتصحنه کار میکنه؛ مثل ذخیرهسازی اطلاعات، ثبتنام، ورود کاربران، ارتباط با پایگاه دادهها. Php بهترین زبان برای نوشتن این بخشه!
📲 اپلیکیشننویسی (Web App یا PWA): ساختن برنامههایی مثل نسخهی وب اینستاگرام، دیجیکالا یا واتساپ که روی موبایل و دسکتاپ مثل اپ کار میکنن. Ionic، angular، Node.js برای اپلیکیشننویسی بسیار کارآمد و حرفهایه
#HTML #CSS #JavaScript
💎 @htmlcss_channels
🔆 فرانتاند (Front-End): همون چیزیه که کاربر میبینه؛ ظاهر سایت، دکمهها، رنگها، عکسها، فرمها. با HTML، CSS و JavaScript ساخته میشه.
💻 بکاند (Back-End): بخشیه که پشتصحنه کار میکنه؛ مثل ذخیرهسازی اطلاعات، ثبتنام، ورود کاربران، ارتباط با پایگاه دادهها. Php بهترین زبان برای نوشتن این بخشه!
📲 اپلیکیشننویسی (Web App یا PWA): ساختن برنامههایی مثل نسخهی وب اینستاگرام، دیجیکالا یا واتساپ که روی موبایل و دسکتاپ مثل اپ کار میکنن. Ionic، angular، Node.js برای اپلیکیشننویسی بسیار کارآمد و حرفهایه
#HTML #CSS #JavaScript
💎 @htmlcss_channels
👍8❤4🔥1
This media is not supported in your browser
VIEW IN TELEGRAM
Table Flipping
The effect on the images during scrolling. Implemented using CSS.
⤷ code
💎 @htmlcss_channels
The effect on the images during scrolling. Implemented using CSS.
⤷ code
💎 @htmlcss_channels
🙏3
This media is not supported in your browser
VIEW IN TELEGRAM
Animated Login Form using #HTML & #CSS
In this tutorial, we’ll build a *modern and animated Login Form* using just *HTML and CSS* — with smooth transitions, glowing borders, and floating labels.
💎 @htmlcss_channels
In this tutorial, we’ll build a *modern and animated Login Form* using just *HTML and CSS* — with smooth transitions, glowing borders, and floating labels.
💎 @htmlcss_channels
❤9
⚡️ Bolt.new: AI-Powered Full-Stack Web Development in the Browser
Bolt.new is an AI-powered web development agent that allows you to prompt, run, edit, and deploy full-stack applications directly from your browser—no local setup required. If you're here to build your own AI-powered web dev agent using the Bolt open source codebase
https://github.com/stackblitz/bolt.new
💎 @htmlcss_channels
Bolt.new is an AI-powered web development agent that allows you to prompt, run, edit, and deploy full-stack applications directly from your browser—no local setup required. If you're here to build your own AI-powered web dev agent using the Bolt open source codebase
https://github.com/stackblitz/bolt.new
💎 @htmlcss_channels
❤3🙏2
Complete Web Development Roadmap 👇👇
1. Introduction to Web Development
- What is Web Development?
- Frontend vs Backend
- Full Stack Development
- Roles and Responsibilities of Web Developers
2. HTML (HyperText Markup Language)
- Basics of HTML
- HTML5 Features
- Semantic Elements
- Forms and Inputs
- Accessibility in HTML
3. CSS (Cascading Style Sheets)
- Basics of CSS
- CSS Grid
- Flexbox
- CSS Animations
- Media Queries for Responsive Design
4. JavaScript (JS)
- Introduction to JavaScript
- Variables, Loops, and Functions
- DOM Manipulation
- ES6+ Features
- Async JS (Promises, Async/Await)
5. Version Control with Git
- What is Git?
- Git Commands (add, commit, push, pull, etc.)
- Branching and Merging
- Using GitHub/GitLab
- Collaboration with Git
6. Frontend Frameworks and Libraries
- React.js Basics
- Vue.js Basics
- Angular Basics
- Component-Based Architecture
- State Management (Redux, Vuex)
7. CSS Frameworks
- Bootstrap
- Tailwind CSS
- Materialize CSS
- CSS Preprocessors (SASS, LESS)
8. Backend Development
- Introduction to Server-Side Programming
- Node.js
- Express.js
- Django or Flask (Python)
- Ruby on Rails
- Java with Spring Framework
9. Databases
- SQL vs NoSQL
- MySQL/PostgreSQL
- MongoDB
- Database Relationships
- CRUD Operations
10. RESTful APIs and GraphQL
- REST API Basics
- CRUD Operations in APIs
- Postman for API Testing
- GraphQL Introduction
- Fetching Data with GraphQL
11. Authentication and Security
- Basic Authentication
- OAuth and JWT
- Securing Routes
- HTTPS and SSL Certificates
- Web Security Best Practices
12. Web Hosting and Deployment
- Shared vs VPS Hosting
- Deploying with Netlify or Vercel
- Domain Names and DNS
- Continuous Deployment with CI/CD
13. DevOps Basics
- Containerization with Docker
- CI/CD Pipelines
- Automation and Deployment
14. Web Performance Optimization
- Browser Caching
- Minification and Compression
- Image Optimization
- Lazy Loading
- Performance Testing
15. Progressive Web Apps (PWA)
- What are PWAs?
- Service Workers
- Web App Manifest
- Offline Functionality
- Push Notifications
16. Mobile-First and Responsive Design
- Mobile-First Approach
- Responsive Layouts
- Frameworks for Responsive Design
- Testing Mobile Responsiveness
17. Testing and Debugging
- Unit Testing (Jest, Mocha)
- Integration and End-to-End Testing (Cypress, Selenium)
- Debugging JavaScript
- Browser DevTools
- Performance and Load Testing
18. WebSocket and Real-Time Communication
- Introduction to WebSocket
- Real-Time Data with WebSocket
- Server-Sent Events
- Chat Application Example
- Using Libraries like Socket.io
19. GraphQL vs REST APIs
- Differences between REST and GraphQL
- Querying with GraphQL
- Mutations in GraphQL
- Setting up a GraphQL Server
20. Web Animations
- CSS Animations and Transitions
- JavaScript-Based Animations (GSAP)
- Performance Optimization for Animations
21. CMS (Content Management Systems)
- What is a CMS?
- Headless CMS (Strapi, Contentful)
- Customizing CMS with Plugins and Themes
22. Serverless Architecture
- Introduction to Serverless
- AWS Lambda, Google Cloud Functions
- Building Serverless APIs
Additional Tips:
- Building your own Portfolio
Web Development Resources 👇👇
Intro to HTML and CSS
Intro to Backend
Intro to JavaScript
Web Development for Beginners
Object-Oriented JavaScript
Best Web Development Resources
💎 @htmlcss_channels
1. Introduction to Web Development
- What is Web Development?
- Frontend vs Backend
- Full Stack Development
- Roles and Responsibilities of Web Developers
2. HTML (HyperText Markup Language)
- Basics of HTML
- HTML5 Features
- Semantic Elements
- Forms and Inputs
- Accessibility in HTML
3. CSS (Cascading Style Sheets)
- Basics of CSS
- CSS Grid
- Flexbox
- CSS Animations
- Media Queries for Responsive Design
4. JavaScript (JS)
- Introduction to JavaScript
- Variables, Loops, and Functions
- DOM Manipulation
- ES6+ Features
- Async JS (Promises, Async/Await)
5. Version Control with Git
- What is Git?
- Git Commands (add, commit, push, pull, etc.)
- Branching and Merging
- Using GitHub/GitLab
- Collaboration with Git
6. Frontend Frameworks and Libraries
- React.js Basics
- Vue.js Basics
- Angular Basics
- Component-Based Architecture
- State Management (Redux, Vuex)
7. CSS Frameworks
- Bootstrap
- Tailwind CSS
- Materialize CSS
- CSS Preprocessors (SASS, LESS)
8. Backend Development
- Introduction to Server-Side Programming
- Node.js
- Express.js
- Django or Flask (Python)
- Ruby on Rails
- Java with Spring Framework
9. Databases
- SQL vs NoSQL
- MySQL/PostgreSQL
- MongoDB
- Database Relationships
- CRUD Operations
10. RESTful APIs and GraphQL
- REST API Basics
- CRUD Operations in APIs
- Postman for API Testing
- GraphQL Introduction
- Fetching Data with GraphQL
11. Authentication and Security
- Basic Authentication
- OAuth and JWT
- Securing Routes
- HTTPS and SSL Certificates
- Web Security Best Practices
12. Web Hosting and Deployment
- Shared vs VPS Hosting
- Deploying with Netlify or Vercel
- Domain Names and DNS
- Continuous Deployment with CI/CD
13. DevOps Basics
- Containerization with Docker
- CI/CD Pipelines
- Automation and Deployment
14. Web Performance Optimization
- Browser Caching
- Minification and Compression
- Image Optimization
- Lazy Loading
- Performance Testing
15. Progressive Web Apps (PWA)
- What are PWAs?
- Service Workers
- Web App Manifest
- Offline Functionality
- Push Notifications
16. Mobile-First and Responsive Design
- Mobile-First Approach
- Responsive Layouts
- Frameworks for Responsive Design
- Testing Mobile Responsiveness
17. Testing and Debugging
- Unit Testing (Jest, Mocha)
- Integration and End-to-End Testing (Cypress, Selenium)
- Debugging JavaScript
- Browser DevTools
- Performance and Load Testing
18. WebSocket and Real-Time Communication
- Introduction to WebSocket
- Real-Time Data with WebSocket
- Server-Sent Events
- Chat Application Example
- Using Libraries like Socket.io
19. GraphQL vs REST APIs
- Differences between REST and GraphQL
- Querying with GraphQL
- Mutations in GraphQL
- Setting up a GraphQL Server
20. Web Animations
- CSS Animations and Transitions
- JavaScript-Based Animations (GSAP)
- Performance Optimization for Animations
21. CMS (Content Management Systems)
- What is a CMS?
- Headless CMS (Strapi, Contentful)
- Customizing CMS with Plugins and Themes
22. Serverless Architecture
- Introduction to Serverless
- AWS Lambda, Google Cloud Functions
- Building Serverless APIs
Additional Tips:
- Building your own Portfolio
Web Development Resources 👇👇
Intro to HTML and CSS
Intro to Backend
Intro to JavaScript
Web Development for Beginners
Object-Oriented JavaScript
Best Web Development Resources
💎 @htmlcss_channels
❤3🔥1🙏1
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❤2👍1
Forwarded from هشتگ تبلیغ تخصصی (گسترده)
کارآفرین سریالی، متخصص بازاریابی دادهمحور
➖➖➖➖➖➖➖
Please open Telegram to view this post
VIEW IN TELEGRAM
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
❤3
Forwarded from هشتگ تبلیغ تخصصی (گسترده)
🗣 سرفصل ها:
🏛 موسسه توسعه
Please open Telegram to view this post
VIEW IN TELEGRAM
Forwarded from علمساز
دوره تخصصی مدیریت هوشمند در ۴ بخش کاربردی:
🔹 با ما همراه باشید
Please open Telegram to view this post
VIEW IN TELEGRAM