مـدرس
جدیدثبت‌نام دوره تابستان آغاز شد
بوتکمپ تخصصی
فرانت‌اند آنلیم
این بوتکمپ برای کسانی طراحی شده که می‌خواهند فرانت‌اند را جدی، عملی و هدفمند یاد بگیرند. مسیر شما با آموزش، تمرین، پروژه و همراهی منتورها به سمت مهارت واقعی پیش میرود.
طول دوره22 جلسه
تاریخ شروع1405/04/18
مدت زمان110 ساعت
htmlcssjs
داشبورد عملکرد
در بوت کمپ فرانت اند چه میگذرد
عملکرد شرکت‌کنندگان و تیم‌ها را به صورت لحظه‌ای دنبال کنید (تابستان ۱۴۰۵)
۰جلسات باقی‌مانده
۲۹جلسه برگزار شده
۱۰۰چالش حل شده
۱٬۴۴۹بالاترین امتیاز
تیم برتر دوره
WAGWAN
امتیاز۱٬۴۴۹
چالش حل شده۱۰۰
منتورsorenax
سه شرکت‌کننده برتر
۴۲۰
۲
۴۹۰
۱
۳۹۲
۳
ده نفر برتر بوتکمپ
رتبهکاربرچالش‌های حل شدهامتیاز
۱
ابوالفضل خوارزمی@A.Kharazmi
۳۲
۴۹۰
۲
سوگل فلاح@Sgl-Flh
۳۰
۴۲۰
۳
پارسا شعبانی@Parsa_shabani
۲۸
۳۹۲
۴
بدون نام@mahdis
۲۲
۲۸۵
۵
ملینا معصومی@melz
۲۲
۲۸۰
۶
بدون نام@mli-shm
۲۰
۲۳۵
۷
امیرحسین دودانگه@Abacetre
۱۵
۲۲۵
۸
فاطمه آذینفرد@NA07
۱۵
۱۹۸
۹
بدون نام@Hesam_Amiran1
۱۶
۱۹۴
۱۰
رضا خدری@Rez
۱۳
۱۹۳
پیشرفت جلسات
۱۰۰٪تکمیل شده
۲۹برگزار شده
۰باقی‌مانده
آمار کلی
کل ارسال‌ها
۳۹۰ ارسالتعداد جلسات
۲۹ جلسهوضعیت دوره
در حال برگزاریدر حال برگزاری
بوتکمپ فعلی در حال برگزاری است
دوره بعدی با سرفصل‌های به‌روز، پروژه‌های جدید و امکانات بیشتر آماده ثبت‌نام است. همین حالا بوتکمپ جدید را ببینید.
دوره بعدیبهار ۱۴۰۵
ظرفیتمحدود
تخفیفویژه
1405/04/18تاریخ شروع
22 جلسهتعداد جلسات
110 ساعتمدت زمان
5تعداد اساتید و منتور ها
نقشه راه آموزشی
مسیر یادگیری گام به گام از مبانی تا تسلط کامل و ورود به بازار کار
01جلسه ۱ و ۲HTML و ساخت محتوا
2 جلسه22 مبحث
جلسه ۱ و ۲
HTML و ساخت محتوا
2 جلسه22 مبحث
جلسه ۱
مقدمات وبسایت و آشنایی با تگ ها
مقدمه وب
تگ و ساختار HTML
قوانین
html , head , body tags
title
Typography tags
img , link & routing
attributes
button
جلسه ۲
تگ های بیشتر و پیشرفته تر
meta tags
DOCTYPE
media tags
form & inputs
label
type , for , id , placeholder
textarea
select
div
header , footer , section
lists
table
favicon
02جلسه ۲ تا ۵CSS و دیزاین وبسایت
4 جلسه41 مبحث
جلسه ۲ تا ۵
CSS و دیزاین وبسایت
4 جلسه41 مبحث
جلسه ۲
آشنایی با CSS
مقدمات CSS
قوانین
color
background
inline css
style tag
link to css
class & id
جلسه ۳
ویژگی (property) های بیشتر
fonts
colors structure
margin
padding
width
height
alignment
borders
shadows
displays
positions
جلسه ۴
استایلینگ پیشرفته CSS
background image
gradients
before & after
filters
z-index
opacity
pointer events
transitions
animations
transform
selectors
variables
functions
ratio
units
mask
priorities
جلسه ۵
واکنش گرایی (Responsive)
flex
grid
media screen
overflow
min & max
03جلسه ۶ و ۷استفاده از TailwindCSS
2 جلسه14 مبحث
جلسه ۶ و ۷
استفاده از TailwindCSS
2 جلسه14 مبحث
جلسه ۶
TailwindCSS برای توسعه دهندگان CSS
نگرش و نحوه عملکرد Tailwind
منفعت و دلیل استفاده
نصب و راه اندازی
Mapping
Typography and Spacing
Colors, Borders, Shadows
Flex & Grid in Tailwind
Positioning & Layout
Responsive
Hover, Focus, Active states
Transforms & Transitions
Arbitrary values
Theme customization
Reusable patterns
پروژه عملی
پیاده سازی Landing Page واقعی
در این پروژه به کمک Tailwind و CSS یک پروژه حقیقی برای شما پیاده سازی شده و ترفند های کاربردی هرکدام برای استفاده واقعی به شما ارائه میشود. برای مثال شرایط و زمان درست استفاده از هرکدام از این دو مهارت به شما گفته خواهد شد. این پروژه به صورت تلفیقی از هر دو مهارت به صورت همزمان استفاده میکند.
04جلسه ۸ تا ۱۲JavaScript و برنامه نویسی
5 جلسه129 مبحث
جلسه ۸ تا ۱۲
JavaScript و برنامه نویسی
5 جلسه129 مبحث
جلسه ۸
JS مقدماتی
مفاهیم پایه
اصول و قوائد
Input & Output
Console
Variables
Data types
Operators
Type conversion
Strings
Numbers
Booleans
null / undefined
Template literals
Control flow
if / else
switch
ternary operator
logical operators
comparison operators
truthy / falsy
Loops
for
while
do while
break / continue
Functions
function declaration
function expression
parameters / arguments
default parameters
return
scope
global scope
local scope
block scope
hoisting
جلسه ۹
JS متوسط
Arrays
array creation
index
length
push / pop
shift / unshift
slice
splice
forEach
map
filter
find
some / every
includes
join
spread operator with arrays
Objects
object creation
properties
methods
bracket notation
dot notation
nested objects
this keyword
Object.keys / values / entries
spread operator with objects
destructuring
array destructuring
object destructuring
جلسه ۱۰
JS DOM و دستکاری بصری
DOM چیست
document object
window object
querySelector
querySelectorAll
getElementById
getElementsByClassName
textContent
innerHTML
classList
add / remove / toggle / contains
style property
setAttribute
getAttribute
createElement
appendChild
append
removeChild
remove
Events
addEventListener
click
input
change
submit
keydown / keyup
mouseenter / mouseleave
event object
target
preventDefault
stopPropagation
event delegation
Forms
form submission
input value
form validation basics
localStorage
setItem / getItem / removeItem
پروژه عملی
پروژه ساخت Todo List با کمک JS DOM
ذر این پروژه با استفاده از مباحث ارائه شده ، نحوه به کار بردن DOM در JS نمایش داده شده و چگونگی کنترل رویداد ها ، استایل دادن برنامه ریزی شده ، دیباگ کردن و استفاده در پروژه واقعی به خوبی برای شرکت کنندگان شفاف میشود. هدف این جلسه آشنایی با JS در پروژه های واقعی بوده و انتظار میرود هر شخص به خوبی بتواند این مهارت ها را در محیظ واقعی به کار ببرد.
جلسه ۱۲
JS پیشرفته
Async JavaScript
synchronous vs asynchronous
callback
Promise
.then / .catch
async / await
try / catch
Fetch API
GET request
POST request
کار با JSON
handling loading state
handling error state
empty state
ES6+ Features
import / export
modules
default export
named export
rest parameters
مرور spread operator
optional chaining
nullish coalescing
callback functions
returning functions
closures (basic)
05جلسه ۱۳ تا ۱۹ReactJS و تحول دنیای فرانت اند
7 جلسه37 مبحث
جلسه ۱۳ تا ۱۹
ReactJS و تحول دنیای فرانت اند
7 جلسه37 مبحث
جلسه ۱۳
React پایه
معرفی React و مزیت ها
JSX
components
props
children
component composition
جلسه ۱۴
React مقدماتی
Vite setup
project structure
conditional rendering
list rendering
event handling
useState
controlled inputs
جلسه ۱۵
React متوسط
props vs state
lifting state up
parent-child communication
useEffect
component architecture
جلسه ۱۶
API و نحوه عملکرد
fetch in React
useEffect
async / await
loading state
error handling
rendering API data
پروژه عملی
پروژه Blog UI با API
در این پروژه روش استفاده از اطلاعات واقعی API و کنترل و نمایش آن با React به شرکت کنندگان نشان داده میشود. پس از این نشست ، شرکت کنندگان قادر خواهند بود فرانت اند یک وبسایت کامل را به صورت حرفه ای پیاده سازی و توسعه دهند.
جلسه ۱۸
React پیشرفته
useRef
custom hooks
Context API
shared state
performance basics
جلسه ۱۹
Redux و React حرفه ای
global state
Redux Toolkit
configureStore
createSlice
Provider
useSelector
useDispatch
async thunk
06جلسه ۲۰ تا ۲۲NEXT.JS ، فرانت اند در بالاترین سطح
3 جلسه18 مبحث
جلسه ۲۰ تا ۲۲
NEXT.JS ، فرانت اند در بالاترین سطح
3 جلسه18 مبحث
جلسه ۲۰
Next.js پایه و Routing
Next.js چیست
App Router
folder-based routing
page
layout
dynamic routes
route groups
Server Components
Client Components
جلسه ۲۱
Next.js ، ویژگی ها و قابلیت ها
Server-side fetch
async components
caching
loading state
error state
Next Link
Next Image
Metadata
SEO
پروژه عملی
پروژه نهایی Movie App
در این پروژه ، شرکت کننده با تسلط بر تمام دانسته های مورد نیاز برای پیاده سازی یک وبسایت کامل و حرفه ای در جلسه شرکت میکند و هرآنچه برای ورود به بازار کار و انجام یک پروژه حقیقی نیاز دارد به او داده میشود. هدف این است که بعد از جلسه اختتامیه ، هرکس از تجربه و سبک عملکرد مدرس دوره به عنوان یک برنامه نویس واقعی در این مسیر استفاده کند.
نخبگان تکنولوژی
اساتید و تیم منتورینگ بوتکمپ
منتورهای این بوتکمپ، مهندسان ارشد شرکت‌های برتر هستند که به‌جای تکرار مبانی، تجربه‌ی واقعی‌شان از دنیای کار را به شما منتقل می‌کنند.
منتور و مربی
منتور و مربی
منتور و مربی
منتور و مربی
سوالات متداول
پاسخ ابهامات شما اینجاست. اگر سوال دیگری دارید، پشتیبانی ما آماده پاسخگویی است.