Step-by-Step: CodeShikhi Components diye ekta Full Website banano
Header, Hero, Features, Gallery, Pricing, Testimonial, Contact, Footer — kon component ke kothay bosale ekta professional website toiri hoy, image + guide diye purota dekhano holo.
Ei guide-e amra step-by-step dekhabo — CodeShikhi component library theke kon component ke kothay bosale ekta complete, professional website toiri hoy. Protita step-e ekta image + explanation deya ache, tai beginner der jonneo bujhte kono somossha hobe na.
Step 1 — Header / Navigation Bar
Sob website-er shurute thake header. Ekhane thake logo, menu (Home, About, Services, Contact) ar ekta CTA button. CodeShikhi-r "Header / Navbar" category theke pochhondo moto ekta design niye niba. Menu link gulo #about, #services emon section id er sathe match korbe.
Step 2 — Hero Section
Header er thik niche Hero section. Ei part-e boro headline, ekta chhoto description, ar 1–2 ta CTA button (jemon "Get Started", "Learn More") thake. Sathe ekta boro image ba illustration diyo — visitor prothom eitai dekhbe, tai eta hoye uthbe website-er "face".
Step 3 — Features / Services
Ekhane tumi ki ki service dao / product-er ki ki feature ache seta 3–6 ta card-e dekhabe. Protita card-e ekta icon, ekta title, ekta chhoto description. CodeShikhi-r "Features" ba "Services" category theke grid style component nite paro.
Step 4 — About Section
Ei section-e tomar company / product er chhoto golpo bolba — kotha theke shuru, ki lokkho, keno tomake choose korbe. Left-e image, right-e text — ei layout ta emon jaigay khub bhalo lage.
Step 5 — Gallery / Portfolio / Work Showcase
Tomar kaj / product er visual proof ekhane. Grid ba masonry layout-e 6–9 ta image. CodeShikhi-r "Gallery" ba "Portfolio" category dekho.
Step 6 — Testimonials / Reviews
Real customer der kotha visitor der trust barai. 3 ta testimonial card e naam, chhobi, star rating ar chhoto ekta quote thakle valo hoy.
Step 7 — Pricing Table
Jodi tumi service becho, tobe 3 ta plan (Basic / Pro / Premium) rakho. Majher ta ke highlight koro (border color ba scale). Prottek plan-e feature list ar ekta "Choose plan" button.
Step 8 — FAQ Section
Common questions gulo accordion style-e dao. Eta support load kome dey ar visitor er confusion dur kore.
Step 9 — Contact Section
Contact form: name, email, message. Sathe address, phone, email, ar ekta small Google map thakle professional dekhay.
Step 10 — Footer
Sob shob-shese footer. Ekhane thakbe: quick links, social icons, copyright, ar newsletter subscription form (optional).
Full Order — ek nojore
- Header / Navbar
- Hero
- Features / Services
- About
- Gallery / Portfolio
- Testimonials
- Pricing
- FAQ
- Contact
- Footer
<div class="container">...</div> er moddhe rakhle content page-er center-e sundor vabe boshbe. Ar ekta website-e Header & Footer ekbar-i dite hobe — bar bar na.
Sesh kotha
Ei 10 ta step follow korle tumi ek din-er moddhe ekta full functional, professional look-er website banate parbe — kono framework shikha chara sudhu HTML + CSS diyei. Notun component add korte chaile CodeShikhi-r component library ghure dekho, protita category-te 8–12 ta creative design ache.