Master the Art of Frontend Development
Creative Frontend
ফ্রন্টেন্ড ডেভেলপমেন্ট বর্তমানে ওয়েব ডেভেলপমেন্টের জনপ্রিয় একটি স্কিল | খুব demanding এই স্কিলকে আরো ইন্টারেস্টিং করতে Codemanbd নিয়ে এসেছে "ক্রিয়েটিভ ফ্রন্টেন্ড" নামে যার মাধ্যমে আপনি শিখতে যাচ্ছেন
Play Video
এই কোর্সের মধ্যে যা যা শিখানো হবে
- যারা কোডিং নিয়ে সামনে এগিয়ে যেতে চায় তাদের সবচেয়ে বড় বাধা হলো, কোড শিখতে গিয়ে প্রব্লেম এ পরলে, সাপোর্ট না পাওয়া অথবা সল্যুশন খুঁজতে গিয়ে দিন পার করে ফেলা । তাই কোডম্যান বিডি এর ক্রিয়েটিভ ফ্রন্টএন্ড কোর্স এ থাকছে লাইভ কোডিং ক্লাস এর পাশাপাশি জুম্ ওয়ান অন ওয়ান সাপোর্ট সিস্টেম, তাই যে কেও কোনো সমস্যায় পড়লেই সাপোর্ট নিয়ে এগিয়ে যেতে পারবে ।
- কোর্স এর সাথে থাকছে, ফাইভার ও আপওয়ার্ক ক্র্যাশ প্রোগ্রাম। এছাড়াও এক মাসের ইন্টারভিউ ও মার্কেটপ্লেস প্রিপারেশন এ দেখবো কিভাবে এই প্রজেক্ট গুলোর এর মাধ্যমে ইন্টারভিউতে কিভাবে সহজেই নিজের স্কিল এবং পোর্টফোলিও শো করে যেকোনো এন্ট্রি-মিড্ লেভেলের ফ্রন্ট এন্ড ডেভেলপার job win করা যায় ।
- এই কোর্সের মাধ্যমে বাস্তবিক কিছু প্রোজেক্ট/ প্রবলেম সলভিং / ওয়েবসাইট ডিজাইন / ওয়েব অ্যাপ্লিকেশন কমপ্লিট করব যেটা স্টুডেন্টদের কোডিং শেখার প্রতি আগ্রহ বাড়াতে এবং ইন্টারঅ্যাকটিভ ওয়েবসাইট এবং ফাংশনালিটি তৈরি করতে সাহায্য করবে |
- ক্লাসের সাথে থাকছে 12+ ইন্টারেক্টিভ প্রজেক্ট যেগুলো আপনাকে প্রাকটিক্যাল স্কিলে অনেক বেশি সাহায্য করবে।
- রেসপনসিভ ওয়েব ডিজাইনের জন্য থাকছে HTML,CSS, Flexbox, Grid তাছাড়াও Boostrap5 এবং TailwindCSS মত পাওয়ারফুল CSS Framework |
- Javascript এর সাহায্যে প্রোগ্রামিং ফান্ডামেন্টাল, OOP, Aynsc- Await, JSON, Web APIs, DOM Manupulation বেপারে ভালো ভাবে ধারণা নিয়ে আমরা পরিচিত হবো বর্তমান যুগে সব চেয়ে জনপ্রিয় ফ্রন্টএন্ড লাইব্রেরি React JS & Google Cloud Storage Firebase যা শিখে আমরা তৈরি করে ফেলব দুটি রিয়েল ওয়ার্ল্ড ইন্টারেক্টিভ প্রজেক্ট |
৳ 6,000
Course Features
- 12 AMAZING PROJECTS
- LIVE CLASS FROM ANYWHERE
- LIVE SUPPORT ANYTIME
- RECORDED VIDEOS AFTER CLASS
- BASIC COMPUTER SKILL
- BRANDING & DIGITAL SKILL
- GOOGLE CLASSROOM
- FIVERR-UPWORK CRASH
- JOB HUNTING SESSION
কোর্স মডিউল
HTML Modules
1. What is HTML?
2. Create your First HTML File
3. HTML Tags and Common Elements
4. HTML Attributes
5. Tables
6. HTML Document Structure
7. Head Element
8. Body Element
9. Absolute/Relative File Paths
10. Links and Buttons
11. List Elements
12. Block quote
13. Inline Elements
14. Images
15. Audio Files
16. Video Files
17. Vector Graphics & Illustrations
1. Headings and Paragraphs
2. Lists and Blocks
3. Bold & Italic
4. HTML Charsets, Entities and Symbols
5. Semantic Structural Elements
6. Navigation
7. Non-semantic Elements (“div” and “span”)
8. HTML Comments
9. The “Section” Element
10. HTML Forms
11. Different Types of Inputs
12. Choosing Between a set of options
13. Creating and Previewing Our First Page/ Layout Elements
14. Convert our Content into HTML Markup
15. Code Formatting
16. Marking up our Homepage
17. Identify Remaining Content Types as HTML Elements
18. Link Separate Pages Together
19. Troubleshooting
20. Uploading Content to a Web Server
SCSS/SASS
1. Intro
2. Installation
3. sass vs scss extension
4. Live Sass Compiler for VS Code
5. Sass Variables
6. Style rules
7. Sass Nesting
8. Functions
9. Operators
10. Comments
11. Sass String
12. Sass @import
13. Sass @mixin
14. Sass @extend
Projects we are going to build!
- Todo App using Javascript with Local Storage
- Build a Business Landing page with HTML & CSS
- Create a personal website with Flexbox
- Build blog layout using CSS Grid
- Creating animated responsive Real Estate website using Bootstrap 5
- Saas Landing page using Tailwind CSS
- Build a Chrome Extension
- Creating an Image Downloader website
- Creating an Expense Tracker with React JS & Firebase
- Building a modern Project Management Tool with React & Firebase
- Build Animated Sections with GSAP
- Build Modern Portfolio with React JS
Javascript
1. Start Working With JS
2. How to run JS in vs code editor
3. JS Essential
4. Variable
5. Data types
6. Array
7. Function
8. Operator
9. If else
10. Loops
11. Selector
12. Event
13. DOM Manipulation
14. Async & Await
React JS
React Basics
– Using the React CDN
– Creating a React Component. -JSX Templates
– Template Expressions
– Click Events
– Making a React Site
– Project Structure
– Running the Application
-Using Images
– Using Stylesheets
Intro to State & useState
Why We Need State
– Using useState
– How State & Rendering Works
– Outputtung Lists
– Using Previous State
– Conditional Templates
– Rules of useState
Components and Props
– Multiple Components
– Making a Title Component
– props
-React Fragments
– Children Props
– Functions as Props
– Event List Component
Styling React Applications
– Using a Global Stylesheet
– Component Stylesheets
– Inline Styles
– Dynamic Inline Styles
– Conditional CSS
– CSS Modules
User Input & Events
– Forms & Labels in React
– The onChange Event
– Controlled Inputs
– Submitting a Form
– Adding a New Event to the State
– The useRef Hook
– Select Boxes
Fetching Data & useEffect
– New Project & JSON Server Setup
– Why We Need useEffect
– Fetching Data with useEffect
– The Dependency Array
– Function Dependencies & useCallback
-Making a Custom Fetch Hook
– Adding a Loading State
– Handling Errors
– Why We Need Cleanup Functions
– Aborting Fetch Requests (Cleanup Function)
– useEffect Gotcha
PROJECT – Expense Tracker
PROJECT – Project Management Tool
Firebase
– Firebase Config Setup
– Getting Firestore Documents
– Real-Time Data (custom hook)
– Adding Documents
– Deleting Documents
– Setting up Firebase Auth
– Signing Users Up
– Logging Users Out
-Logging Users In
– Adding Auth Context
– Dispatching Actions
– Route Guards & Redirects
– Assigning Users to Books
– Firestore Queries
PROJECT – Expense Tracker
PROJECT – Project Management Tool
Tailwind CSS
1. Intro & Setup
2. HTML Template
3. Linking tailwind css to Html file
4. @apply Directive
5. Tailwind config
6. Layout
7. Typography
8. Colors
9. Background
10. Display
11. Margin, Padding, spacing
12. Sizing
13. Border
14. Flexbox
15. Grid
16. Shadow, Box-shadow, Z-index
17. Effects
18. Filters
19. Tables
20. Transition and animation
21. Transform
22. Interactivity
23. SVG
24. States (Hover, focus, active..etc)
25. Responsive
26. Responsive navigation
27. Using precursors
28. Custom Class
29. Variants
30. Plugin
31. Presets
32. Optimizing for production
Git & Github
1. Git & Github Intro
2. What is version control system & why we need this?
3. Github (github.com) – Basic Usage:
a. Create a Professional Github Profile
b. Details about Github Repository
c. Github Codespaces
d. Github Organizations
e. Projects
f. Stars & Gists
g. Github Settings:
i. Profile
ii. Account
iii. Appearance
iv. Account Security
v. Emails
vi. SSH & GPG Keys
vii. Repositories
viii. Package ix. Organizations
x. Developer Settings
h. Create new Repositories
4. Difference between Git & Github
5. Git Environment Setup & Configuration
6. Basic Commands for Working on Projects:
a. Create files
b. Delete Files
c. Update or Rename Files
d. Open projects in Code Editor using Command Line
7. Creating & Setup in Projects:
a. Git initialization (git init)
b. Git Clone (Clone projects from Github Repositories)
8. Important Commands:
a. Check File Status
b. Add all files to Git
c. Commit Changes
d. Stage to Temporary Memory
e. Remove File
f. File rename and Move to another Directory
g. Back to Previous Commit
9. Git Branching & Merging:
a. Check Branch
b. Create Branch
c. Delete Branch
d. Branch Switching
e. Branch Merge
f. Stash
10. Sharing & Updating Projects:
a. Pull any Branches from Github
b. Push any Branches from Github
c. Fetching & Remote
11. Other Important Commands:
a. Git Help Command
b. Git GUI for your Environment
c. Major Parts or Command Line Interfaces
d. Gitignore
12. Add Local Project to Github Repositories:
a. Add remote repository URL to local project directory
b. Upload All Project Files Using Command Line
c. See all changes from Remote Repository
d. Compare Code
e. Create Projects
f. Github Canban Board to track full project roadmap
g. Create Issues
h. Solve & Update Issue Status
i. Add Time for Each Projects/Issues
j. Details about Pull Request:
i. Compare two branches
ii. Attach two separate branch to one another
k. Add project contributors
l. Github Pages:
i. Host your HTML files to github pages & Generate links
m. Release Projects by Version
n. Package Publish
o. Repository Settings
p. Git Fork to Other Developer’s Projects
q. Contribute to Other Developer’s Projects
r. Create Organizations
s. Manage Teams With Github
And, Have fun with a lot of extra functionalities with git & github….
CSS Modules
1. CSS – Introduction
2. CSS – How to use CSS?
3. Basic Syntax and Selectors
4. Advanced Syntax and Selectors
5. CSS Hierarchy
6. Colors, Background and Opacity
7. Advanced CSS – Media Queries
8. CSS – Formatting and Styling Text
9. CSS – Adding Borders
10. CSS – Margin and Padding
11. CSS – Styling Lists
12. CSS – Styling Links
13. CSS – Styling Buttons
14. CSS – Fonts and Adding Icons
15. CSS – Working with Display Values
16. CSS – Display value: Inline-Block
17. CSS – Positioning HTML Elements Part-1
18. CSS – Positioning HTML Elements Part-2
19. CSS – Handling Content Overflow
20. CSS – Floating HTML Elements
21. CSS – Box Model
22. CSS – Box Sizing
23. CSS – Adding Shadows
24. CSS – Combinators
25. CSS – Pseudo Classes
26. CSS – Pseudo Elements
27. CSS – Adding Backgrounds
28. CSS – Gradients
29. CSS – Handling Text Overflow
30. CSS – Project-1
31. CSS – Project-2
32. CSS – Project-3
33. CSS – Project-4
34. CSS – Project-5
35. CSS – Introduction to Responsive Web Design
36. CSS – Viewport
37. CSS – Dynamic Size
38. CSS – Introduction to Media Queries
39. CSS – Responsive Webpage Design using Media Queries
40. Introduction
41. Flex Container & Flex Items
42. Immediate Child Only
43. Flexbox Axes
44. Flexbox Module
45. Parent Properties
46. Display
47. block vs inline
48. flex-direction
49. flex-wrap
50. flex-flow
51. justify-content [row]
52. justify-content [column]
53. space-around vs space-evenly
54. align-items [row]
55. baseline
56. align-items [column]
57. align-content
58. Child Properties
59. order
60. flex-grow
61. flex-grow calculation
62. flex-shrink
63. flex-shrink calculation
64. flex-basis
65. flex-basis vs widths
66. flex
67. align-self
68. Flexbox Properties
69. Aligning with Auto Margins
70. Introduction to Grid Layout
71. Grid Container
72. Explicit Grid
73. Minimum and Maximum Grid Track Sizes
74. Repeating Grid Track 75. Grid Gaps (Gutters)
76. Positioning Items by Grid Line Numbers
77. Spanning Items Across Rows and Columns
78. Naming Grid Lines
79. Positioning Items by Line Names
80. Naming and Positioning Items by Lines with the Same Name
81. Naming and Positioning Items by Grid Areas
82. Implicit Grid
83. Implicitly Named Grid Areas
84. Implicitly Named Grid Lines
85. Layering Grid Items
86. Aligning Grid Items (Box Alignment)
87. Aligning Grid Tracks
88. CSS – Transform Property
89. CSS – Align Elements using Transform Property
90. CSS – Transition Property
91. CSS – Animation Property
92. CSS – Flying Rocket Animation using Animation Property
Bootstrap 5
1. Introduction of Bootstrap
2. Installation & Environment Setup
3. Bootstrap Class for layout
4. Bootstrap 5 Breakpoints
5. Default z-index for the elements
6. Headings & Typography
7. Text Alignment & Display
8. Floats & Fixed Positions
9. Colors & Background
10. Margin & Padding
11. Border and sizing
12. Button & Button Group
13. Navbar & Navs
14. Badges & List Groups
15. Breadcrumbs
16. Progress bar
17. Tables and pagination
18. Working with Cards
19. Media Object
20. Jumbotron
21. Spinners and Toasts
22. Form Controls
23. Checkboxes/Form Checks
24. Custom Inputs
25. Input Groups and Icons
26. Inline Forms
27. Magic of Flexbox
28. Super Useful Grid System
29. Alerts
30. Dropdowns
31. Carousel Slider
32. Collapse and accordion
33. Tooltips
34. Popovers
35. Modals
36. ScrollSpy and smooth scrolling
Website Section Overview
1. Hero
2. Services
3. Content
4. Testimonial
5. Blog box
6. Team member
7. Pricing
8. Google maps
9. Contact forms
10. Footer
11. Course Outline
12. Review
13. Comment
14. Menu(top, left, right)
15. Footer Navigation For Mobile
16. Call to action
17. Blog page
18. Login/Register
19. Pre-loader
20. Content Loading Animation
21. Contact
22. FAQ
HTML5
CSS3
Javascript
Boostrap5
Tailwind CSS
Github
React JS
Firebase
Swiper JS
Frequently Ask Questions (FAQ)
01
যারা ফ্রন্ট এন্ড ওয়েব ডেভেলপার হতে চায়। যারা একদম শূন্য থেকে শুরু করে শেষ পর্যন্ত ফ্রন্ট এন্ড ওয়েব ডেভেলপমেন্ট শিখে ফ্রন্টএন্ড ডেভেলপার হিসেবে কোন ওয়েব অথবা সফটওয়্যার কোম্পানিতে চাকরি করতে চায়, তাদের জন্য। এছাড়াও ফ্রিল্যান্স মার্কেটপ্লেস এও ফ্রন্ট এন্ড ওয়েব ডেভেলপার এর যথেষ্ট চাহিদা রয়েছে।
02
আমাদের সকল কোর্স এর মতো এই কোর্সটিও একদম বিগেনারদের জন্য। অর্থাৎ পূর্বের কোনো অভিজ্ঞতা ছাড়াই যে কেও কোর্সটি করতে পারবে। এছাড়াও আমাদের সাপোর্ট টিম তো থাকছেই।
03
ক্রিয়েটিভ ফ্রন্টএন্ড কোর্স এর টেকনিকাল পার্ট শেষ করতে ৪ মাস সময় লাগবে। তারপর ২ মাস ফ্রিল্যান্স মার্কেটপ্লেস ও লোকাল জব এর জন্য রেডি করা হবে। টোটাল ৬ মাস সময় লাগবে কোর্সটি শেষ হতে।
04
কোর্সটিতে আমরা HTML 5, CSS, Bootstrap 5, tailwind css, javascript, react js, firebase, sass, oop শিখবো। উপরে প্রতিটি টপিক এর আউটলাইন দেয়া আছে।
05
কোর্সটি করার জন্য আগে থেকে প্রোগ্রামিং জানা থাকা লাগবে না। যে কেও কোর্সটি করতে পারবে। তবে এই কোর্সটি সঠিক ভাবে শেষ করার জন্য প্রতিদিন অন্তত ৩-৫ ঘন্টা সময় দিতে হবে।
06
অন্তত পক্ষে কোর i3 অথবা i5 এর একটি ডেস্কটপ অথবা ল্যাপটপ লাগবে। মোবাইল দিয়ে কখনোই কোডিং শিখা সম্ভব নয়।
07
কোনো কোর্স-ই আপনাকে গ্যারান্টি দিতে পারবে না আপনি কোর্স করার পর ই চাকুরী পাবেন অথবা ফ্রিল্যান্স মার্কেটপ্লেস এ ভালো করতে পারবেন। এটা সম্পূর্ণ আপনার উপর নির্ভর করবে। তবে আমাদের আগের ব্যাচ গুলোর অনেক স্টুডেন্ট ভালো স্যালারি তে ডেভেলপমেন্ট কোম্পানি তে জব করছে।
আপনাদের সাথে থাকছেন মেন্টর
Minhazul Asif
Founder & CEO CodemanBD
- 7 Courses
- 10,123+ Students
মিনহাজুল আসিফ, গত ৮.৫ বছর ধরে ওয়েব ডেভেলপমেন্ট সেক্টর এ আপওয়ারর্ক, ফাইভার এবং পিপল পার আওয়ার এ ফ্রীলান্সিং করে মাসে ২৫০০ থেকে ৩০০০ ডলার ইনকাম করছেন।
ফ্রীলান্সিং ছারাও তিনি ইউটিউব চ্যানেল, ডিজিটাল এবং ফেসবুক মার্কেটিং, অ্যাফিলিয়েট মার্কেটিং, লিড জেনারেশন এবং নিজের ওয়েব ডেভেলপমেন্ট টিম দিয়েও অনলাইন এ ইনকাম করছেন…Read More
Aiman Shafi
Frontend Developer & CMS Expert
- 2 Courses
- 1072+ Students
মেন্টর আইমান শাফি এমেরিকা বেসড ২ টি ও UK বেসড ১ টি ওয়েব ডেভেলপমেন্ট কোম্পানি এর সাথে ফুল স্ট্যাক ওয়েব ডেভেলপার হিসেবে কাজ করেছেন । এই পর্যন্ত ১৮৭+ প্রজেক্ট কমপ্লিট করেছেন । এবং পাশাপাশি তিনি ফ্রীল্যানসিং মার্কেটপ্লেস সফল ভাবে ওয়েব এপ্লিকেশন, ওয়েব ডেভেলপমেন্ট ও ই-কমার্স ডেভেলপমেন্ট নিয়ে কাজ করছেন.।
