...

Master the Art of Frontend Development

Creative Frontend

ফ্রন্টেন্ড ডেভেলপমেন্ট বর্তমানে ওয়েব ডেভেলপমেন্টের জনপ্রিয় একটি স্কিল | খুব demanding এই স্কিলকে আরো ইন্টারেস্টিং করতে Codemanbd নিয়ে এসেছে "ক্রিয়েটিভ ফ্রন্টেন্ড" নামে যার মাধ্যমে আপনি শিখতে যাচ্ছেন

Play Video

এই কোর্সের মধ্যে যা যা শিখানো হবে

৳ 6,000

Course Features

কোর্স মডিউল

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!

  1. Todo App using Javascript with Local Storage
  2. Build a Business Landing page with HTML & CSS
  3. Create a personal website with Flexbox 
  4. Build blog layout using CSS Grid
  5. Creating animated responsive Real Estate website using Bootstrap 5
  6. Saas Landing page using Tailwind CSS
  7. Build a Chrome Extension
  8. Creating an Image Downloader website
  9. Creating an Expense Tracker with React JS & Firebase
  10. Building a modern Project Management Tool with React & Firebase
  11. Build Animated Sections with GSAP
  12. 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

Group 34465112

Github

Group 344654

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

মিনহাজুল আসিফ, গত ৮.৫ বছর ধরে ওয়েব ডেভেলপমেন্ট সেক্টর এ আপওয়ারর্ক, ফাইভার এবং পিপল পার আওয়ার এ ফ্রীলান্সিং করে মাসে ২৫০০ থেকে ৩০০০ ডলার ইনকাম করছেন।

ফ্রীলান্সিং ছারাও তিনি ইউটিউব চ্যানেল, ডিজিটাল এবং ফেসবুক মার্কেটিং, অ্যাফিলিয়েট মার্কেটিং, লিড জেনারেশন এবং নিজের ওয়েব ডেভেলপমেন্ট টিম দিয়েও অনলাইন এ ইনকাম করছেন…Read More

Aiman Shafi | Frontend Developer | WordPress Expert | Codemanbd mentor

Aiman Shafi

Frontend Developer & CMS Expert

মেন্টর আইমান শাফি এমেরিকা বেসড ২ টি ও UK বেসড ১ টি ওয়েব ডেভেলপমেন্ট কোম্পানি এর সাথে ফুল স্ট্যাক ওয়েব ডেভেলপার হিসেবে কাজ করেছেন । এই পর্যন্ত ১৮৭+ প্রজেক্ট কমপ্লিট করেছেন । এবং পাশাপাশি তিনি ফ্রীল্যানসিং মার্কেটপ্লেস সফল ভাবে ওয়েব এপ্লিকেশন, ওয়েব ডেভেলপমেন্ট ও ই-কমার্স ডেভেলপমেন্ট নিয়ে কাজ করছেন.।

কিভাবে কোর্স কিনবেন?

Course Fee:

6000 TK