Master the Art of Frontend Development
Creative Frontend
Course Start: 15 September 2024
ফ্রন্টেন্ড ডেভেলপমেন্ট বর্তমানে ওয়েব ডেভেলপমেন্টের জনপ্রিয় একটি স্কিল | খুব demanding এই স্কিলকে আরো ইন্টারেস্টিং করতে Codemanbd নিয়ে এসেছে "ক্রিয়েটিভ ফ্রন্টেন্ড" নামে যার মাধ্যমে আপনি শিখতে যাচ্ছেন
এই কোর্সের মধ্যে যা যা শিখানো হবে
- যারা কোডিং নিয়ে সামনে এগিয়ে যেতে চায় তাদের সবচেয়ে বড় বাধা হলো, কোড শিখতে গিয়ে প্রব্লেম এ পরলে, সাপোর্ট না পাওয়া অথবা সল্যুশন খুঁজতে গিয়ে দিন পার করে ফেলা । তাই কোডম্যান বিডি এর ক্রিয়েটিভ ফ্রন্টএন্ড কোর্স এ থাকছে লাইভ কোডিং ক্লাস এর পাশাপাশি জুম্ ওয়ান অন ওয়ান সাপোর্ট সিস্টেম, তাই যে কেও কোনো সমস্যায় পড়লেই সাপোর্ট নিয়ে এগিয়ে যেতে পারবে ।
- কোর্স এর সাথে থাকছে, ফাইভার ও আপওয়ার্ক ক্র্যাশ প্রোগ্রাম। এছাড়াও এক মাসের ইন্টারভিউ ও মার্কেটপ্লেস প্রিপারেশন এ দেখবো কিভাবে এই প্রজেক্ট গুলোর এর মাধ্যমে ইন্টারভিউতে কিভাবে সহজেই নিজের স্কিল এবং পোর্টফোলিও শো করে যেকোনো এন্ট্রি-মিড্ লেভেলের ফ্রন্ট এন্ড ডেভেলপার job win করা যায় ।
- এই কোর্সের মাধ্যমে বাস্তবিক কিছু প্রোজেক্ট/ প্রবলেম সলভিং / ওয়েবসাইট ডিজাইন / ওয়েব অ্যাপ্লিকেশন কমপ্লিট করব যেটা স্টুডেন্টদের কোডিং শেখার প্রতি আগ্রহ বাড়াতে এবং ইন্টারঅ্যাকটিভ ওয়েবসাইট এবং ফাংশনালিটি তৈরি করতে সাহায্য করবে |
- ক্লাসের সাথে থাকছে 12+ ইন্টারেক্টিভ প্রজেক্ট যেগুলো আপনাকে প্রাকটিক্যাল স্কিলে অনেক বেশি সাহায্য করবে।
- রেসপনসিভ ওয়েব ডিজাইনের জন্য থাকছে HTML,CSS, Flexbox, Grid তাছাড়াও 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
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
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
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
Git & Github
1. Git & Github Intro
2. What is version control system & why we need this?
3. Github Usage & Commands
4. Vercel Deployment
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
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
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
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
HTML5
CSS3
Javascript
Tailwind CSS
React JS
Github
Firebase
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
কোনো কোর্স-ই আপনাকে গ্যারান্টি দিতে পারবে না আপনি কোর্স করার পর ই চাকুরী পাবেন অথবা ফ্রিল্যান্স মার্কেটপ্লেস এ ভালো করতে পারবেন। এটা সম্পূর্ণ আপনার উপর নির্ভর করবে। তবে আমাদের আগের ব্যাচ গুলোর অনেক স্টুডেন্ট ভালো স্যালারি তে ডেভেলপমেন্ট কোম্পানি তে জব করছে।
