html and css آموزش
21K subscribers
435 photos
211 videos
84 files
261 links
ادمین :
@Maryam3771


تعرفه تبلیغات:
https://t.me/alloadv/822
Download Telegram
html-handbook.pdf
1001.5 KB
📝 #HTML HANDBOOK

این کتاب با هدف کمک به شما در یادگیری سریع 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
👍2
This media is not supported in your browser
VIEW IN TELEGRAM
Isometric Card Grid

Isometric card grid. Implemented using CSS and JS.

code



💎 @htmlcss_channels
🙏3
برنامه‌نویسی وب دقیقاً یعنی چی؟

🔆 فرانت‌اند (Front-End): همون چیزیه که کاربر می‌بینه؛ ظاهر سایت، دکمه‌ها، رنگ‌ها، عکس‌ها، فرم‌ها. با HTML، CSS و JavaScript ساخته می‌شه.

💻 بک‌اند (Back-End): بخشیه که پشت‌صحنه کار می‌کنه؛ مثل ذخیره‌سازی اطلاعات، ثبت‌نام، ورود کاربران، ارتباط با پایگاه داده‌ها. Php بهترین زبان برای نوشتن این بخشه!

📲 اپلیکیشن‌نویسی (Web App یا PWA): ساختن برنامه‌هایی مثل نسخه‌ی وب اینستاگرام، دیجی‌کالا یا واتساپ که روی موبایل و دسکتاپ مثل اپ کار می‌کنن. Ionic، angular، Node.js برای اپلیکیشن‌نویسی بسیار کارآمد و حرفه‌ایه

#HTML #CSS #JavaScript


💎 @htmlcss_channels
👍84🔥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
🙏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
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
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
3🔥1🙏1
This media is not supported in your browser
VIEW IN TELEGRAM
🔘 CSS Modern Button Design with Hover Effects


#HTML #CSS #JavaScript

💎 @htmlcss_channels
1👍10🙏21🔥1
منابع فرانت‌اند (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
🙏52👍1
📣 وبینار رایگان "بازاریابی برای استارتاپ‌های تکنولوژی و شرکت‌های دانش‌بنیان"

📌در این وبینار چه خواهید آموخت؟
🔺 نقش بازاریابی در توسعه محصول در استارتاپ‌ها
🔺 موتور چسبنده
🔺 متریک‌های بازاریابی در این مرحله
🔺 رد شدن از دره مرگ

🗓 تاریخ: یکشنبه | ۱۲ مردادماه
زمان: ساعت ۱۹ الی ۲۱
🎙 سخنران: دکتر محمدمهدی پوریصبیر
کارآفرین سریالی، متخصص بازاریابی داده‌محور

🎟 ثبت نام رایگان :
➡️ zaya.io/e3r7c ⬅️

موسسه آموزشی توسعه
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
3
🗣️ دوره جــــامع OKR

🗣 سرفصل ها:
🔘 آشنایی با OKR
🔘 انواع طرز فکر
🔘 از مدیریت علمی تا آشنایی با MBO و OKR
🔘 اهداف و نتایج کلیدی موثر
🔘 مدیریت چرخه OKR
🔘 شناسایی و پیادهسازی KPI در سازمان
🔘 مربیگری OKR

🏛 موسسه توسعه

📌 مشاوره رایگان و مشاهده جزئیات دوره:
➡️ httb.ir/ux3US
➡️ httb.ir/ux3US
➡️ httb.ir/ux3US
Please open Telegram to view this post
VIEW IN TELEGRAM
Forwarded from علمساز
🧠 وقتی مدیریت با هوش مصنوعی می‌تونه ساده‌تر باشه، چرا سخت پیش بری؟

دوره تخصصی مدیریت هوشمند در ۴ بخش کاربردی:
🔖 مدیریت سرمایه انسانی با رویکرد AI
🔖 مارکتینگ هوشمند و هدفمند
🔖 رشد فروش با ابزارهای هوش مصنوعی
🔖 حسابداری سریع‌تر و دقیق‌تر

🎁 فروش نقد و اقساط با شرایط ویژه برای اعضای کانال

✔️ برای دریافت مشاوره رایگان و ثبت نام با این آیدی در ارتباط باشید : @elmsaz_admin14

📌 مدیریت آینده‌نگر یعنی استفاده از ابزارهای امروز برای تصمیم‌های بهتر فردا.

🔹 با ما همراه باشید
📱 Instagram |📱 Telegram |
Please open Telegram to view this post
VIEW IN TELEGRAM