در دوره آموزش برنامه نویسی فرانت اند چه آموزش داده می شود؟
اگر می خواهید به عنوان یک برنامه نویس فرانت اند شروع به کار کنید این دوره را دوست خواهید داشت، روی پروژه هایی از قبیل یک صفحه ساده HTML تا یک پروژه جذاب ReactJS کار خواهیم کرد.در این دوره مباحث زیرا خواهید آموخت:
- مقدماتی اینترنت
- توسعه وب با اچ تی ام ال
- سی اس اس
- برنامه نویسی با جاوا اسکریپت
- فریمورک بوت استرپ
- کتابخانه ری اکت جی اس
- رزومه نویسی
- پیدا کردن شغل
- ICT
- Web development basics with HTML
- Cascading Style Sheets (CSS)
- JavaScript programming
- Bootstrap framework
- ReactJS library
- Resume
- How to find job
پیش نیاز های این دوره آموزشی
توانایی کار با کامپیوتر
توانایی جستجو در گوگل
فرانت اند چیست؟
برنامه نویسی فرانت اند (Front-end web development) روشی است برای تبدیل داده‌ها به یک رابط کاربر گرافیکی، از طریق استفاده از اچ‌تی‌ام‌ال، سی اس اس و جاوا اسکریپت، به طوری که کاربران بتوانند آن داده‌ها را مشاهده و تعامل کنند. چالش مرتبط این است که ابزارها و تکنیک های استفاده شده برای ایجاد فرانت اند یک وب سایت به طور مداوم تغییر می کنند.بنابراین برنامه نویس باید به طور مداوم از نحوه توسعه این زمینه آگاه باشد. هدف از طراحی سایت این است که اطمینان حاصل شود وقتی کاربران سایت را باز می کنند ، اطلاعات را در قالبی که خواندن آن آسان و مرتبط باشد می بینند. این مسئله با این واقعیت که کاربران اکنون از طیف وسیعی از دستگاهها با اندازه صفحه نمایش و وضوح متفاوت استفاده می کنند ، باعث می شود طراح مجبور شود هنگام طراحی سایت این جنبه ها را در نظر بگیرد . آنها باید اطمینان حاصل کنند که سایت آنها در مرورگرهای مختلف (مرورگر متقابل) ، سیستم عامل های مختلف (کراس پلتفرم) و دستگاه های مختلف (کراس دستگاه) به درستی ظاهر می شود ، که این امر نیاز به برنامه ریزی دقیق از طرف توسعه دهنده دارد.(منبع ویکی پدیا)
قبل از شروع برنامه نویسی وب باید یک دانش پایه از چگونگی کار کردن اینترنت داشته باشید
فصل اول آشنایی با زبان HTML
مقدمه رایگان
آشنایی با html
کد ادیتور رایگان
آشنایی با VSCode
Live Server ویدئو
آشنایی با اکستنشن Live Server
مثال ساده ای از HTML ویدئو
نگران این نباشید که تگهای HTML را هنوز یاد نگرفتید
المنتها ویدئو
آشنایی با ساختار المنتهای HTML
Attributes ویدئو
آشنایی با Attribute های HTML
المنتهای HTML ویدئو
Headings , Paragraphs , img
تمرین HTML تمرین
طراحی معرفی کتاب
Style ویدئو
معرفی Style Attribute
Formatting ویدئو
تگهای Formatting
Colors ویدئو
رنگها در HTML
CSS ویدئو
CSS در HTML
تمرین HTML تمرین
تکمیل طراحی معرفی کتاب
link ویدئو
لینکها در HTML
Table ویدئو
جداول در HTML
list ویدئو
انواع لیست ها در HTML
inline/block ویدئو
inline/block در HTML
class ویدئو
class در HTML
ID ویدئو
ID در HTML
Head ویدئو
Head در HTML
جاوااسکریپت ویدئو
Script در HTML
صفحه بندی ویدئو
HTML Layout
صفحه بندی flex ویدئو
HTML Flex Layout
تمرین سوم تمرین
طراحی صفحه دیجیکالا
تمرین چهارم تمرین
طراحی صفحه شهر کتاب
input ویدئو
المنتهای ورود اطلاعات در HTML
تمرین پنجم تمرین
طراحی سایت فروشگاه لباس کودک
فصل دوم،دوره آموزش CSS3
CSS Border ویدئو
آشنایی با Border
CSS Background ویدئو
آشنایی با Background
Margin Padding ویدئو
آشنایی با Margin و Padding
Box sizing ویدئو
آشنایی با Boxsizing در CSS
CSS Outline ویدئو
آشنایی با Outline در CSS
Text ویدئو
آشنایی با Text در CSS
Font ویدئو
آشنایی با Font در CSS
Icon ویدئو
آشنایی با Icon در CSS
Link ویدئو
آشنایی با استایل Link در CSS
List ویدئو
آشنایی با استایل List در CSS
max-width ویدئو
max-width در CSS
Position ویدئو
آشنایی با استایل Position در CSS
Overflow ویدئو
overflow در CSS
Float ویدئو
float در CSS
Inline-block ویدئو
inline-block در CSS
Align ویدئو
Align در CSS
Combinators ویدئو
combinators در CSS
Pseudo ویدئو
Pseudo در CSS
Navbar Style ویدئو
navbar در CSS
Dropdown ویدئو
Dropdown در CSS
فصل سوم ، آموزش جاوا اسکریپت
جاوا اسکریپت ویدئو
جاوا اسکریپت و کاربردهای متفاوت آن در برنامه نویسی
شروع کار ویدئو
شروع کار با جاوا اسکریپت
لینک کردن جاوا اسکریپت ویدئو
لینک کردن فایل جاوا اسکریپت به صفحه
value , variable ویدئو
متغیر ها و مقادیر در جاوا اسکریپت
JavaScript Data Type ویدئو
انواع نوع داده در جاوا اسکریپت
var-let-const ویدئو
تفاوتهای var let const
عملگرها ویدئو
عملگرها در جاوا اسکریپت
تمرین اول تمرین
تمرین اول جاوا اسکریپت
کار با متن ویدئو
Template Literal
If Else ویدئو
شرطها در جاوااسکریپت
Convert value Type ویدئو
تبدیل انواع داده در جاوا اسکریپت
Truly and Falsy ویدئو
Truly and Falsy در جاوا اسکریپت
Compare Value Type ویدئو
Compare Value Type در جاوا اسکریپت
Boolean Logic ویدئو
Boolean Logic در جاوا اسکریپت
تمرین دوم تمرین
تمرین دوم جاوا اسکریپت
switch case ویدئو
switch case در جاوا اسکریپت
Conditional Ternary Operator ویدئو
Conditional Ternary Operator در جاوا اسکریپت
Function ویدئو
Function در جاوااسکریپت
Function2 ویدئو
Function Declarations VS Expressions در جاوااسکریپت
Function3 ویدئو
Arrow Function در جاوااسکریپت
HTML in JavaScript ویدئو
Read and Write HTML در جاوااسکریپت
تمرین سوم تمرین
تمرین سوم جاوا اسکریپت
تمرین چهارم تمرین
تمرین چهارم جاوا اسکریپت
تمرین پنجم تمرین
تمرین پنجم جاوا اسکریپت
Array ویدئو
آرایه ها در جاوا اسکریپت
Array Methods ویدئو
کار با آرایه ها در جاوا اسکریپت
JSON ویدئو
کار با JSON در جاوا اسکریپت
تمرین ششم تمرین
تمرین ششم جاوا اسکریپت
For Loop ویدئو
کار با حلقه ها در جاوا اسکریپت
Using ForLoop ویدئو
استفاده کاربردی حلقه ها در جاوا اسکریپت
تو این قسمت بیش از ده تمرین تکمیلی اضافه میشه که با انجامش میتونی به بالاترین سطح آمادگی برسی
Expanding Cards ویدئو
قسمت اول
Expanding Cards ویدئو
قسمت دوم
Expanding Cards ویدئو
قسمت سوم
Expanding Cards
نمونه کد
Progress Steps ویدئو
قسمت اول
Progress Steps ویدئو
قسمت دوم
Progress Steps ویدئو
قسمت سوم
Progress Steps ویدئو
قسمت چهارم
Progress Steps
نمونه کد
Rotating Navigation ویدئو
قسمت اول
Rotating Navigation ویدئو
قسمت دوم
Rotating Navigation
نمونه کد قسمت دوم
Rotating Navigation ویدئو
قسمت سوم
Rotating Navigation
نمونه کد قسمت سوم
Hidden Search Widget ویدئو
قسمت اول
Hidden Search Widget ویدئو
قسمت دوم
Hidden Search Widget
نمونه کد قسمت دوم
Hidden Search Widget ویدئو
قسمت سوم
Hidden Search Widget
نمونه کد قسمت سوم
Blurry Loading ویدئو
قسمت اول
Blurry Loading ویدئو
قسمت دوم
Blurry Loading
نمونه کد قسمت دوم
Blurry Loading ویدئو
قسمت سوم
Blurry Loading
نمونه کد قسمت سوم
Scroll Animation ویدئو
قسمت اول
Scroll Animation ویدئو
قسمت دوم
Scroll Animation
نمونه کد قسمت دوم
Scroll Animation ویدئو
قسمت سوم
Scroll Animation مقاله
لینکهای مفید
دانلود بک گراند به فرمت svg:
ساخت border-radius :
https://9elements.github.io/fancy-border-radius
پالت رنگی:
getBoundingClientRect() :
https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect
Scroll Animation
نمونه کد قسمت سوم
Split Landing Page ویدئو
قسمت اول
Split Landing Page ویدئو
قسمت دوم
Split Landing Page
نمونه کد قسمت دوم
Split Landing Page ویدئو
قسمت سوم
Split Landing Page
نمونه کد قسمت سوم
Form Wave Animation ویدئو
قسمت اول
Form Wave Animation ویدئو
قسمت دوم
Form Wave Animation
نمونه کد قسمت دوم
Form Wave Animation ویدئو
قسمت سوم
Form Wave Animation
نمونه کد قسمت سوم
Form Wave Animation مقاله
لینکهای مفید
Sound board ویدئو
قسمت اول
Sound board ویدئو
قسمت دوم
Sound board
نمونه کد قسمت دوم
Sound board ویدئو
قسمت سوم
Sound board
نمونه کد قسمت سوم
Dad Jokes ویدئو
قسمت اول
Dad Jokes ویدئو
قسمت دوم
Dad Jokes
نمونه کد قسمت دوم
Dad Jokes ویدئو
قسمت سوم
Dad Jokes
نمونه کد قسمت سوم
Dad Jokes ویدئو
قسمت چهارم
Dad Jokes
نمونه کد قسمت چهارم
Dad Jokes مقاله
لینکهای مفید
تو این قسمت بیش از ده تمرین تکمیلی اضافه میشه که با انجامش میتونی به بالاترین سطح آمادگی برسی
Event Key Codes ویدئو
قسمت اول
Event Key Codes ویدئو
قسمت دوم
Event Key Codes ویدئو
قسمت سوم
Event Key Codes
نمونه کد قسمت دوم
Event Key Codes
نمونه کد قسمت سوم
FAQ ویدئو
قسمت اول
FAQ ویدئو
قسمت دوم
FAQ ویدئو
قسمت سوم
FAQ
نمونه کد قسمت دوم
FAQ
نمونه کد قسمت سوم
FAQ مقاله
لینکهای مفید
fontawesome:
https://fontawesome.com/v6.0/
sgv background:
https://www.svgbackgrounds.com/
css:
background-color: #FFD4C3; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 900'%3E%3Cpolygon fill='%23e84100' points='957 450 539 900 1396 900'/%3E%3Cpolygon fill='%23e66100' points='957 450 872.9 900 1396 900'/%3E%3Cpolygon fill='%23df351a' points='-60 900 398 662 816 900'/%3E%3Cpolygon fill='%23e67a0f' points='337 900 398 662 816 900'/%3E%3Cpolygon fill='%23c8283f' points='1203 546 1552 900 876 900'/%3E%3Cpolygon fill='%23f74111' points='1203 546 1552 900 1162 900'/%3E%3Cpolygon fill='%23c23260' points='641 695 886 900 367 900'/%3E%3Cpolygon fill='%23f75119' points='587 900 641 695 886 900'/%3E%3Cpolygon fill='%23c1377c' points='1710 900 1401 632 1096 900'/%3E%3Cpolygon fill='%23ae4560' points='1710 900 1401 632 1365 900'/%3E%3Cpolygon fill='%23c7438e' points='1210 900 971 687 725 900'/%3E%3Cpolygon fill='%23ed7f3b' points='943 900 1210 900 971 687'/%3E%3C/svg%3E"); background-attachment: fixed; background-size: cover;
آموزش ری اکت جی اس - جاوا اسکریپت مدرن
ری اکت جی اس ویدئو
یکی از قوی ترین لایبراری های جاوا اسکریپت
کامپوننت ویدئو
پاشنه آشیل قدرت ری اکت
نمونه ای از کامپوننت ویدئو
پاشنه آشیل قدرت ری اکت
var , let , const ویدئو
جاوا اسکریپت مدرن
Arrow Function ویدئو
جاوا اسکریپت مدرن
Import , Export ویدئو
جاوا اسکریپت مدرن
Class ویدئو
جاوا اسکریپت مدرن
Class methods and properties ویدئو
جاوا اسکریپت مدرن
Spread - Rest operator ویدئو
جاوا اسکریپت مدرن
Destructuring ویدئو
جاوا اسکریپت مدرن
Refrence and Primitive Type ویدئو
جاوا اسکریپت مدرن
array.map ویدئو
جاوا اسکریپت مدرن
آموزش ری اکت جی اس - مطالب پایه ای ری اکت جی اس
NodeJS ویدئو
نصب و راه اندازی NodeJS
Create React app ویدئو
ایجاد اولین پروژه ری اکت
ساختار پروژه ویدئو
ساختار فولدرها
JSX ویدئو
آشنایی با JSX
Component ویدئو
ساخت کامپوننت جدید
Component ویدئو
Dynamic Data in component
Component ویدئو
Children
React Hook ویدئو
(State + (Event-Method
Component ویدئو
Statefull - Stateles - Methods as props
State ویدئو
Bind State To input value
CSS ویدئو
CSS Class - Inline CSS
آموزش ری اکت جی اس - خطایابی
آشنایی با پیامهای خطا ویدئو
Undrestanding Error Message
ابزارهای گوگل کروم برای خطایابی ویدئو
Chrome Debug Tools
افزونه گوگل کرم برای کار با ری اکت ویدئو
React Developer Tools
آموزش ری اکت جی اس - ساختار پروژه و کار با کامپوننتها
ساختارسازی در پروژه های ری اکت ویدئو
Project Structure
تقسیم پروژه در کامپوننتها متفاوت ویدئو
Split Components
تقسیم بندی کامپوننت ها از نظر استیت ویدئو
Stateful Stateless
یوز افکت در کامپوننت های فانکشنال ویدئو
UseEffect
یوز افکت در کامپوننت های فانکشنال 2 ویدئو
UseEffect 2
ReactJS Performance ویدئو
React memo
DOM - Virtual DOM ویدئو
ReactJS Performance
آموزش استفاده از گیت و گیتهاب
مقدمه ای بر گیت ویدئو
Introduction To Git
مقدمه ای بر گیتهاب ویدئو
Introduction To GitHub
مسیر آموزش ویدئو
Introduction To Course
چرا و چگونگی استفاده از Command Prompt ویدئو
Why Command Prompt
نحوه کار با Command Prompt ویدئو
CMD1
نحوه کار با Command Prompt ویدئو
CMD2
نحوه کار با Command Prompt ویدئو
CMD3
نحوه کار با Command Prompt ویدئو
CMD4
نحوه کار با Command Prompt ویدئو
CMD5
آموزش استفاده از گیت
مقدمه ویدئو
Introduction
گیت چگونه کار می کند ویدئو
How Git Work
Repository ویدئو
Repository in Git
Branch ویدئو
Branch in Git
Install Git ویدئو
نصب گیت
Git Command: Status-init-add-commit-config ویدئو
دستورات گیت
Git Command: log-checkout ویدئو
دستورات گیت
work with branch ویدئو
کار با branch
how to merge branch ویدئو
کار با branch
Head in branch ویدئو
کار با branch
Detached-Head in branch ویدئو
کار با branch
Switch branch ویدئو
کار با branch
Delete Data ویدئو
حدف اطلاعات در گیت
Delete File From Working Directory ویدئو
حدف اطلاعات در گیت
Git Restore-clean ویدئو
حدف اطلاعات در گیت
Git Untagged ویدئو
حدف اطلاعات در گیت
Git Rest HEAD ویدئو
حدف اطلاعات در گیت
Git Remove Branch ویدئو
حدف اطلاعات در گیت
Detached Head usage ویدئو
Detached-Head-usage
gitignore. ویدئو
gitignore.
git cheat sheet ویدئو
لیست دستورات گیت
آموزش استفاده از گیتهاب
مقدمه ای بر گیتهاب ویدئو
Introduction To GitHub
گیت و گیتهاب ویدئو
Git-VS-GitHub
نحوه اتصال گیت به گیتهاب ویدئو
Git-to-GitHub
ثبت نام در گیتهاب ویدئو
Github-Registeration
ساخت ریپازیتوری در گیتهاب ویدئو
GitHub-New-Repository
ارسال پروژه روی گیتهاب ویدئو
GitHub-Push
در این قسمت به آموزش مهارتهای جانبی که دانشجویان عزیز تمایل به یاد گرفتن آن داشته اند می پردازیم
درخواست مشاوره
برای کسب اطلاعات بیشتر درباره این دوره درخواست مشاوره خود را ارسال کنید و یا با ما در تماس باشید.
درخواست مشاورهدوره های مرتبط
دوره نیمه خصوصی برنامه نویسی فرانت اند
آموزش نبمه خصوصی برنامه نویسی فرانت اند آموزش نیمه خصوصی برنامه نویسی فرانت اند از صفر تا ورود به بازار…
دوره خصوصی برنامه نویسی فرانت اند
آموزش خصوصی برنامه نویسی فرانت اند از صفر تا ورود به بازار کار. هشتاد ساعت آموزش، با کمترین نیاز به…
chat_bubble_outlineنظرات
رایگان!
حسین اشرفی پور
مدرس برنامه نویسیحسین اشرفی پور مدرس برنامه نویسی
قوانین ثبت دیدگاه