CodeYantra
BUILD WITH ME · DAY 1 / 7

Profile Card

Aaj tum apna profile card banaoge — ek chhota card jisme tumhara naam, role, bio aur links honge. Sirf HTML + CSS, koi library nahi. Neeche wale editor me hi code karo, preview turant update hoga.

⏱ 15 min🎯 Beginner🛠 HTML + CSS basics, box model, grid center
  • div, h2, p, a aur class ka use
  • padding, margin, border-radius — box model
  • box-shadow se card ko "uthana"
  • 2 lines me perfect center — display: grid + place-items: center
  • linear-gradient wala gol avatar
Seedha code karo ↓Step by step

Aaj yeh banega 👇

Step by step

Har step me "Editor me daalo" dabao — ya best: khud type karo, haath se likha code yaad rehta hai. ✍️

1Card ka HTMLindex.html

  • .card ek dabba hai jisme saari cheezein hain.
  • .avatar me tumhare naam ke initials (AK) — photo ki jagah.
  • <p class="role"> aur <p class="bio"> — class dene se CSS me alag style de sakte ho.
  • Abhi preview boring dikhega — yahi normal hai, CSS abhi baaki hai 😄
  <div class="card">
    <div class="avatar">AK</div>
    <h2>Aarav Kumar</h2>
    <p class="role">Web Developer 💻</p>
    <p class="bio">BCA student who loves
      building things for the web.</p>
    <div class="links">
      <a href="#">GitHub</a>
      <a href="#">Instagram</a>
    </div>
  </div>

2Page center + white cardstyle.css

  • min-height: 100vh — body poori screen jitni lambi.
  • display: grid + place-items: center — card beech me aa jaata hai. ⭐ Yeh trick yaad rakho!
  • border-radius: 20px kone gol karta hai, box-shadow card ke neeche parchhai banata hai.
  • #0009 = kaala rang 60% opacity ke saath (last digit = transparency).
body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-items: center;
  background: #0f172a;
  font-family: sans-serif;
}

.card {
  width: 280px;
  padding: 32px 24px;
  text-align: center;
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 20px 40px #0009;
}

3Gol gradient avatarstyle.css

  • Width aur height barabar + border-radius: 50% = perfect circle ⭕
  • margin: 0 auto 12px — left-right auto se block beech me aata hai.
  • Andar ke text (AK) ko center karne ke liye phir wahi grid trick.
  • linear-gradient(135deg, …) — tircha (diagonal) rang badalta background.
.avatar {
  width: 90px;
  height: 90px;
  margin: 0 auto 12px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #6366f1, #ec4899);
  color: #fff;
  font-size: 32px;
  font-weight: bold;
}

4Text colors + pill buttonsstyle.css

  • .card h2 — sirf card ke andar wale h2 ko select karta hai.
  • a inline hota hai; display: inline-block se padding/margin sahi lagta hai.
  • border-radius: 999px = pill (capsule) shape — koi bhi bada number chalega.
  • text-decoration: none link ki underline hata deta hai.
.card h2 { margin: 0; }
.role { color: #6366f1; margin: 4px 0; }
.bio  { color: #64748b; line-height: 1.5; }

.links a {
  display: inline-block;
  margin: 4px;
  padding: 8px 16px;
  border-radius: 999px;
  background: #6366f1;
  color: #fff;
  text-decoration: none;
}

Tumhara editor 💻

code isi device par save hota hai

Ab ise apna banao 🎨

Atak gaye? Notes padho 📚

HTML NotesCSS Notes

Aage kya?

DAY 2
Responsive Navbar
Flexbox, media queries, mobile menu
Live ✓
DAY 3
To-do App
DOM, events, localStorage
Live ✓
DAY 4
Quiz App
Arrays, objects, score logic
Live ✓
DAY 5
Weather App
fetch, API, async / await
Live ✓
DAY 6
Portfolio Page
Day 1–5 ko jod ke ek site
Live ✓
DAY 7
Go LIVE 🚀
GitHub Pages par apna portfolio deploy
Live ✓

Naya day aate hi reel aayegi — @codeyantra follow karo 🔔