Front End Development – Themeforest

About Course

এই কোর্সটি মূলত তাদের জন্য, যারা Front-End Web Developer হিসেবে নিজেকে গড়ে তুলতে চান এবং ফ্রিল্যান্সিং কিংবা মার্কেটপ্লেসে (বিশেষ করে ThemeForest) কাজ করতে আগ্রহী। আপনি যদি সম্পূর্ণ নতুন হয়ে থাকেন, তবুও ধাপে ধাপে প্রতিটি টপিক শেখানো হবে – একদম বেসিক থেকে লাইভ প্রজেক্ট পর্যন্ত।

এই কোর্সে আপনি শিখবেন:

✅ HTML5, CSS3, Bootstrap, Tailwind CSS, Sass
✅ JavaScript, jQuery, GSAP Animation
✅ React JS ও Next JS দিয়ে কম্পোনেন্ট বেইজড ও মডার্ন ওয়েব অ্যাপ তৈরি
✅ Redux দিয়ে global state management
✅ GitHub-এ কোড আপলোড ও ভার্সন কন্ট্রোল
✅ ThemeForest স্ট্যান্ডার্ড অনুযায়ী ডিজাইন করা
✅ ফাইল স্ট্রাকচার, ইমেজ অপ্টিমাইজেশন, লাইভ সার্ভারে আপলোড
✅ Contact Form PHP দিয়ে কাজ করার প্র্যাকটিক্যাল গাইড
✅ SEO Friendly ও স্পিড অপটিমাইজড ওয়েবসাইট বানানো
✅ লাইভ প্রজেক্ট: আপনার কাজকে ThemeForest ও অন্যান্য মার্কেটপ্লেসে বিক্রয়যোগ্য করে তৈরি করা
✅ প্রফেশনাল প্রেজেন্টেশন ও ক্লায়েন্ট ডেলিভারির গাইডলাইন
✅ Upwork, Fiverr Marketplace Guideline
✅ Out of Marketplace Job Guideline

🔥 কোর্স শেষে যা অর্জন করবেন:
একদম প্রফেশনাল লেভেলের ডিজাইন ও ডেভেলপমেন্ট স্কিল
আপনার নিজস্ব তৈরি করা ThemeForest প্রজেক্ট
ক্লায়েন্টের সামনে সাবমিট করার মত করে তৈরি Website Theme
একটি পরিপূর্ণ ওয়েবসাইট যেটি আপনি ক্লায়েন্টকে দিতে পারবেন
নিজেকে একজন Front-End Developer হিসেবে আত্মপ্রকাশের সুযোগ
আপনার একটি Freelance Portfolio ওয়েবসাইট
Webdeployer Academy থেকে সার্টিফিকেট

Course Content

Module 1: Web Development Basics
What is Web Development? Frontend vs Backend vs Full Stack How ThemeForest works What makes a template/theme ThemeForest-Ready?

Course Introduction

14:56
What is Web Development?

15:34
Frontend vs Backend vs Full Stack

05:42
How ThemeForest works

06:57
Who Are you

Module 2: Core Web Fundamentals
Give your computer a Coding Environment and start you journey with HTML, CSS

Environment Setup

09:23
HTML5 Markup Language – Part 1

51:50
HTML5 Markup Language – Part 2

28:16
HTML5 Markup Language – Part 3

22:40
Project 1 – HTML Standard Markup

28:33
CSS3 Basic To Advance Part – 1

01:12:00
CSS3 Basic To Advance Part – 2

53:32
CSS3 Basic To Advance Part – 3

39:12
CSS3 Basic To Advance Part – 4

01:07:01
CSS3 Basic To Advance Part – 5

01:11:48
Project 2: Animation Mestry

23:00
Project 3 Part 1: Landing Page Intro & Setup

25:22
Project 3 Part 2: Start Creating Sokla Landing Page

01:05:40
Project 3 Part 3: Sokla Landing Page Design

22:57
Project 3 Part 4: School & Studing Section Design

38:59
Project 3 Part 5: Footer Section Design

35:44
Project 3 Part 6: Make it Responsive

01:08:00
How To Free Deploy Your Website

Module 3: CSS Frameworks
Learn CSS FrameWorks for super fast work

SaSS Full Tutorial

28:04
SaSS Watch Tricks
Project 3 – Convert Figma Design To Sass Landing Page Part 1

41:02
Project 3 SaSS Landing Page Part 2

51:17
Project 3 SaSS Landing Page Part 3

57:00
Project 3 SaSS Landing Page Part 4

02:14:37
Bootstrap 5 Part – 1

24:00
Bootstrap 5 Part – 2

47:32
Bootstrap 5 Part – 3
Project 4 – Convert Landing Page To Bootstrap Website
Tailwind CSS Mestry ( coming soon )

Module 4: UI/UX Design & Dev Tools
Learn How to use figma for better web design.

Figma Account Create
Figma Tools
Photopea Tools
Flaticon
Instant Pick a Color

02:26
Fonts – Ninja

03:09
Chrome Developer Tools
Wappalyzer Extension
Copyright Free Image download for Web Design
Color Mestry

Module 5 : Essential JavaScript
Important JS

Javascript Intro & Environment Setup
JS Console & Code Runner
Variables With Data Types
String Methods
Arithmetic Operators
Assignment Operators
Comparison and Logical Operators
Number Methods
Js Array, Array Methods
Javascript Object
Javascript Function
Javascript Condition
Javascript Loop
DOM Manipulation Part – 1
DOM Manipulation Part – 2
JavaScript Event
Read More / Read Less Text Toggle Project
Javascript To-Do List Project

Module 6: JQuery Plugins for Theme Development
JQery Plugin

Getting Started with jQuery: Basics & Setup
Building a Sticky Navigation
Creating a Slick Slider – Part 1 (Setup & Basics)
Slick Slider – Part 2 (Advanced Features & Settings)
Fixing Slick Slider Overflow Issues Like a Pro
Adding Animations to Slick Slider with jQuery
Swiper Slider Integration – Part 1 (Initial Setup)
Swiper Slider – Part 2
Magnific Popup for Media Lightboxes
Filtering Gallery Items with Isotope JS
Enhancing UX with WOW.js Scroll-Based Animations
Odometer.js: Building Animated Number Counters
Scroll Animations Made Easy with AOS.js
Typing Text Effects with Typed.js Library
Creating Countdown Timers with jQuery
Custom Placeholder
Select 2 JS
Bottom To Top JS
Parallax Scrolling Effect
Get started with GSAP Animation
GSAP To & Form
GSAP Stagger Animation
GSAP Repeat and YoYo
GSAP Timeline
GSAP ScrollTrigger
GSAP Scrub Property
GSAP Pin Property

Module 7: Become a Themeforest Expert

Module 8: Theme Development Project for Themeforest (Live Approval)
HTML, CSS, BOOTSTRAP, JAVASCRIPT

Module 9: React.js Basic To Advance
Introduction to React Components, Props, State React Hooks (useState, useEffect) Conditional Rendering, Lists, Keys Forms & Controlled Components React Router Deploy React App (Netlify, Vercel)

React Js Course Content Plan
Let’s talk About React
Create a New React Project Using Vite
Understanding the Standard File & Folder Structure in a Project
Before You Get Started
Building Functional Components and Nesting Them Effectively
Writing markup with JSX and Adding styles
How to Install Tailwind CSS on Your React Project
Displaying Data
Conditional Rendering
Rendering Lists
Responding to events
Updating the Screen based on Click Event
Sharing Data between Components using Props
Project: Create a Counter App Using React and Tailwind CSS
Project: Team Members List App
State Management with useState in React
Project: Interactive Product List with “Add to Cart” Functionality
Handling Lists and Keys in React
Project: Dynamic Todo List App
Make a React and Tailwind CSS Template for Reusing Multiple Times
Handling Form Submissions and Validation part-01
Handling Form Submissions and Validation part-02
Lifting State Up: Share states between sibling components
Project: Build a Temperature Converter using Lifting State Up concept
Component Lifecycle with Use Effect
Project: Build a Timer App with Start/Stop Functionality
Project: Listening to Window Resize Events (using Subscriptions with useEffect)
Working with APIs (Data Fetching) with the Meal DB project
What is Single Page Applications(SPAs)?
React Router Basics
Implement Nested Routing
Apply Active Color to the NavLinks
Create Multiple Layout using React Router (Dashboard Layout, Projects, and more)
Project: Dynamic Route Segment (:id) by Building A Blog Project
Optional Route Segments in React Router (with Practical Example)
Splats or Catch All Routes (*) in React Router with a project (File Explorer)
useNavigate Hooks of React Router
Project: Blog Search Functionality using URL Search Params
End of React Router

Module 10: Convert HTML Template To React Template – Themeforest

Module 11: Build Your Freelance Portfolio Website

Module 12: Start freelancing Career in Upwork, Fiverr, Agency, Out of marketplace

What is Fiverr?
Fiverr Account Create & Setup Guideline
How to create a Fiverr Gig & Published it?
How to Create a Payoneer Account & Withdraw Money?
How To Start Journey in Upwork?
Upwork Profile 100% Setup Guideline
Upwork Project Create Guideline
How to add Web Deployer Academy Certificate in Upwork?
How to Start a Hourly/Fixed Contract ( job ) in Upwork?
How to Submit A Job Proposals in Upwork?
Job Winning Tips
How to buy connect in Upwork?
Secret tools for Upwork & Fiverr

Bonus Topic: Ai Vibe Coding ( Coming Soon )
How to use ai for quickwork and better output.

Module 13: Next Js for Themeforest ( ALC Coming Soon )
Introduction to Next.js Pages and Routing Static vs Server Side Rendering (SSR) API Routes Image Optimization SEO-friendly Meta Tags

Student Ratings & Reviews

No Review Yet

About Course

What Will You Learn?

Course Content

Module 1: Web Development Basics What is Web Development? Frontend vs Backend vs Full Stack How ThemeForest works What makes a template/theme ThemeForest-Ready?

Course Introduction

What is Web Development?

Frontend vs Backend vs Full Stack

How ThemeForest works

Who Are you

Module 2: Core Web Fundamentals Give your computer a Coding Environment and start you journey with HTML, CSS

Environment Setup

HTML5 Markup Language – Part 1

HTML5 Markup Language – Part 2

HTML5 Markup Language – Part 3

Project 1 – HTML Standard Markup

CSS3 Basic To Advance Part – 1

CSS3 Basic To Advance Part – 2

CSS3 Basic To Advance Part – 3

CSS3 Basic To Advance Part – 4

CSS3 Basic To Advance Part – 5

Project 2: Animation Mestry

Project 3 Part 1: Landing Page Intro & Setup

Project 3 Part 2: Start Creating Sokla Landing Page

Project 3 Part 3: Sokla Landing Page Design

Project 3 Part 4: School & Studing Section Design

Project 3 Part 5: Footer Section Design

Project 3 Part 6: Make it Responsive

How To Free Deploy Your Website

Module 3: CSS Frameworks Learn CSS FrameWorks for super fast work

SaSS Full Tutorial

SaSS Watch Tricks

Project 3 – Convert Figma Design To Sass Landing Page Part 1

Project 3 SaSS Landing Page Part 2

Project 3 SaSS Landing Page Part 3

Project 3 SaSS Landing Page Part 4

Bootstrap 5 Part – 1

Bootstrap 5 Part – 2

Bootstrap 5 Part – 3

Project 4 – Convert Landing Page To Bootstrap Website

Tailwind CSS Mestry ( coming soon )

Module 4: UI/UX Design & Dev Tools Learn How to use figma for better web design.

Figma Account Create

Figma Tools

Photopea Tools

Flaticon

Instant Pick a Color

Fonts – Ninja

Chrome Developer Tools

Wappalyzer Extension

Copyright Free Image download for Web Design

Color Mestry

Module 5 : Essential JavaScript Important JS

Javascript Intro & Environment Setup

JS Console & Code Runner

Variables With Data Types

String Methods

Arithmetic Operators

Assignment Operators

Comparison and Logical Operators

Number Methods

Js Array, Array Methods

Javascript Object

Javascript Function

Javascript Condition

Javascript Loop

DOM Manipulation Part – 1

DOM Manipulation Part – 2

JavaScript Event

Read More / Read Less Text Toggle Project

Javascript To-Do List Project

Module 6: JQuery Plugins for Theme Development JQery Plugin

Getting Started with jQuery: Basics & Setup

Building a Sticky Navigation

Creating a Slick Slider – Part 1 (Setup & Basics)

Slick Slider – Part 2 (Advanced Features & Settings)

Fixing Slick Slider Overflow Issues Like a Pro

Adding Animations to Slick Slider with jQuery

Swiper Slider Integration – Part 1 (Initial Setup)

Swiper Slider – Part 2

Magnific Popup for Media Lightboxes