๐Ÿ–ฅ️ HTML เค”เคฐ CSS เคธे เค…เคชเคจी เคชเคนเคฒी เคตेเคฌเคธाเค‡เคŸ เค•ैเคธे เคฌเคจाเคं – Beginners เค•े เคฒिเค Step-by-Step เค—ाเค‡เคก

-

 


๐Ÿ”ง HTML เค”เคฐ CSS เค•्เคฏा เคนोเคคे เคนैं?

๐Ÿ”ธ HTML (HyperText Markup Language)

เคฏเคน เคตेเคฌเคธाเค‡เคŸ เค•ा เคธ्เคŸ्เคฐเค•्เคšเคฐ เคฌเคจाเคคा เคนै। เคœैเคธे เคเค• เค˜เคฐ เค•ी เคฆीเคตाเคฐें, เคฆเคฐเคตाเคœ़े เค”เคฐ เค–िเคก़เค•िเคฏाँ เคนोเคคी เคนैं, เคตैเคธे เคนी เคตेเคฌเคธाเค‡เคŸ เค•ी เคนเคก्เคกिเคฏाँ (skeleton) HTML เคธे เคฌเคจเคคी เคนैं।

๐Ÿ”ธ CSS (Cascading Style Sheets)

เคฏเคน HTML เค•े เคธ्เคŸ्เคฐเค•्เคšเคฐ เค•ो เคธुंเคฆเคฐ เค”เคฐ เค†เค•เคฐ्เคทเค• เคฌเคจाเคคा เคนै। เคฏाเคจी เคฐंเค—, เคซॉเคจ्เคŸ, เคฒेเค†เค‰เคŸ, เคเคจिเคฎेเคถเคจ เค†เคฆि เคธเคฌ เค•ुเค› CSS เคธे เค•िเคฏा เคœाเคคा เคนै।

๐Ÿ› ️ เคœ़เคฐूเคฐी Tools

✅ 1. Code Editor:

๐Ÿ‘‰ VS Code – เคธเคฌเคธे เคชॉเคชुเคฒเคฐ เค”เคฐ เคฏूเคœเคฐ เคซ्เคฐेंเคกเคฒी เคเคกिเคŸเคฐ

✅ 2. Browser:

๐Ÿ‘‰ Google Chrome เคฏा Mozilla Firefox – เค†เคชเค•ी เคตेเคฌเคธाเค‡เคŸ เค•ो เคฆेเค–เคจे เค•े เคฒिเค

✅ 3. Live Server Extension (VS Code เคฎें):

๐Ÿ‘‰ เคนเคฐ เคฌाเคฐ เคซाเค‡เคฒ เค–ोเคฒเคจे เค•ी เคœ़เคฐूเคฐเคค เคจเคนीं, เคธीเคงे เคฒाเค‡เคต เคช्เคฐीเคต्เคฏू

๐Ÿ“„ Step-by-Step: เคšเคฒिเค เคตेเคฌเคธाเค‡เคŸ เคฌเคจाเคคे เคนैं!

๐Ÿงฑ 1. Basic HTML Structure









๐Ÿ” Explained:

  • <!DOCTYPE html>: HTML5 เคกेเค•्เคฒเคฐेเคถเคจ

  • <html>: เคชूเคฐी เคตेเคฌเคธाเค‡เคŸ เค•ा container

  • <head>: เคตेเคฌเคธाเค‡เคŸ เค•ा hidden เคนिเคธ्เคธा (title, meta tags เค†เคฆि)

  • <body>: เคตेเคฌเคธाเค‡เคŸ เค•ा visible เคนिเคธ्เคธा

๐ŸŽจ CSS เคœोเคก़เคจा (Style เคฒाเคจे เค•ा เคŸाเค‡เคฎ!)

๐ŸŸข เคคीเคจ เคคเคฐीเค•े เคนोเคคे เคนैं CSS เคœोเคก़เคจे เค•े:

  1. Inline CSS
<p style="color: blue;">Hello World!</p>

2.Internal CSS
body {
  background-color: #f0f0f0;
  font-family: Arial, sans-serif;
}
h1 {
  color: #ff6600;
  text-align: center;
}
p {
  font-size: 18px;
}

3. External CSS (Recommended!)
๐Ÿ‘‰ เคเค• เคจเคˆ เคซ़ाเค‡เคฒ เคฌเคจाเคं: style.css











๐Ÿ‘‰ HTML เคฎें เค‡เคธे เคœोเคก़ें:
<link rel="stylesheet" href="style.css">

๐Ÿง‘‍๐Ÿ’ป เคเค• Mini Project – "My Profile Website"

๐Ÿ“ Files:

  • index.html

  • style.css

๐Ÿ’ก HTML Code:
















๐ŸŽจ CSS Code:




















๐Ÿ“ฆ Extra Tips

✅ เคตेเคฌเคธाเค‡เคŸ เค•ो GitHub เคชเคฐ เค…เคชเคฒोเคก เค•เคฐें
✅ Responsive Design เค•े เคฒिเค เค†เค—े เคšเคฒเค•เคฐ Media Queries เคธीเค–ें
✅ JavaScript เคธीเค–เค•เคฐ เคตेเคฌเคธाเค‡เคŸ เคฎें เค‡ंเคŸเคฐเคเค•्เคถเคจ เคœोเคก़ें

๐Ÿ”š Conclusion

เค…เคฌ เค†เคช HTML เค”เคฐ CSS เค•ी เคฎเคฆเคฆ เคธे เคเค• เคฌेเคธिเค• เคฒेเค•िเคจ เคช्เคฐोเคซेเคถเคจเคฒ เคฆिเค–เคจे เคตाเคฒी เคตेเคฌเคธाเค‡เคŸ เคฌเคจा เคธเค•เคคे เคนैं। เคถुเคฐुเค†เคค เคฎें เคœिเคคเคจा เคœ़्เคฏाเคฆा เคช्เคฐैเค•्เคŸिเคธ เค•เคฐोเค—े, เค‰เคคเคจी เคœเคฒ्เคฆी เค†เคช Master เคฌเคจ เคœाเค“เค—े। เคตेเคฌเคธाเค‡เคŸ เคฌเคจाเคจा เคธिเคฐ्เคซ เค•ोเคกिंเค— เคจเคนीं, เค•्เคฐिเคเคŸिเคตिเคŸी เคญी เคนै। ❤️

  • Web Development

  • HTML Tutorial

  • CSS Guide

  • Beginner Web Design

  • Coding in Hindi

  • Ankur's Digital Diary

  • Website Kaise Banaye

  • Tech Blog Hindi

  • Learn Coding

  • Frontend Development






Comments

Post a Comment

Popular posts from this blog

✨ PGDCA เคธे Tally เคคเค• – เคฎेเคฐी Skills เค•ी Digital Journey ๐Ÿ“… เคชोเคธ्เคŸेเคก เค‘เคจ: 15 เค…เคช्เคฐैเคฒ 2025 ✍️ เคฒेเค–เค•: Ankur Jha

-
Image
  ๐Ÿ”น เคถुเคฐुเค†เคค เคเค• เคธเคตाเคฒ เคธे เคนुเคˆ… เคœเคฌ เคฎैंเคจे เค–ुเคฆ เคธे เคชूเค›ा – "เคฎैं เคธिเคฐ्เคซ เคเค• เคซीเคฒ्เคก เคคเค• เค•्เคฏों เคธीเคฎिเคค เคฐเคนूं?"  เคฎेเคฐे เค…ंเคฆเคฐ เคนเคฎेเคถा เคเค• เคŸेเค•्เคจिเค•เคฒ เค•ीเคก़ा เคฅा, เคœो เคจเค เคธ्เค•िเคฒ्เคธ เคธीเค–เคจे เค•ो เค‰เค•เคธाเคคा เคฐเคนเคคा เคฅा। ๐Ÿ’ป PGDCA: เค•ंเคช्เคฏूเคŸเคฐ เค•ी เคฆुเคจिเคฏा เค•ा เคชเคนเคฒा เคฆเคฐเคตाเคœ़ा PGDCA (Post Graduate Diploma in Computer Applications) เคฎेเคฐे เคฒिเค เคธिเคฐ्เคซ เคเค• เค•ोเคฐ्เคธ เคจเคนीं เคฅा – เคฏे เคฎेเคฐे เค…ंเคฆเคฐ เค•े เคกिเคœिเคŸเคฒ เค•्เคฐिเคเคŸเคฐ เค•ो เคœเค—ाเคจे เคตाเคฒी เคšाเคฌी เคฅी। เคฏเคนाँ เคฎैंเคจे เคธीเค–ा: Microsoft Office เค•ा เคช्เคฐो เคฒेเคตเคฒ เคฏूเคœ़ เคฌेเคธिเค• เคช्เคฐोเค—्เคฐाเคฎिंเค— (C, Java) DBMS (เคกेเคŸाเคฌेเคธ เค•ी เคฌेเคธिเค• เคธเคฎเค) เค”เคฐ เคธเคฌเคธे เค–ाเคธ: เคธोเคšเคจे เค•ा เคคเคฐीเค•ा เคฌเคฆเคฒเคจा ๐Ÿ“Š Tally: เคจंเคฌเคฐों เค•ी เคญाเคทा เคฎें เคฎเคนाเคฐเคค PGDCA เค•े เคฌाเคฆ เคœเคฌ เคฎैंเคจे Tally เคธीเค–ा, เคคो เคเค• เคจเคˆ เคฆुเคจिเคฏा เค–ुเคฒी। เคฏเคน เคธिเคฐ्เคซ เค…เค•ाเค‰ंเคŸिंเค— เคŸूเคฒ เคจเคนीं เคฅा – เคฏे เคเค• เคช्เคฐैเค•्เคŸिเค•เคฒ เคฒाเค‡เคซ เคธ्เค•िเคฒ เคฌเคจ เค—เคฏा: GST, Inventory, เค”เคฐ Payroll เคœैเคธी เคšीเคœें เคธเคฎเคเคจा เค›ोเคŸे เคฌिเคœเคจेเคธ เค•ो เคกिเคœिเคŸเคฒ เค…เค•ाเค‰ंเคŸिंเค— เคฎें เคฎเคฆเคฆ เค•เคฐเคจा Freelancing เค•ा เคชเคนเคฒा เค—ेเคŸเคตे ๐Ÿ”ง Skills เคœो เคฎैंเคจे เคธीเค–े เค”เคฐ เคœो เคธीเค–เคจें เคนैं ๐Ÿ”น เคธीเค–ी เค—เคˆ Skills ๐Ÿ”น เค…เคญी เคธीเค– เคฐเคนा เคนूँ MS Office Mastery React Native App Dev Tally with GST C++ Programming Blogging & SEO Node.js +...
Read more

๐ŸŒง️ เค›เคค्เคคीเคธเค—เคข़ เค•े เคฌเคธ्เคคเคฐ เคฎें เคฎाเคจเคธूเคจ เค•ा เคœाเคฆू – เคฎेเคฐी เค†ँเค–ों เคธे ๐Ÿ—“️ เคฏाเคค्เคฐा เค•ा เคธเคฎเคฏ: เคฎाเคจเคธूเคจ 2024 ๐Ÿ“ เคธ्เคฅाเคจ: เคฌเคธ्เคคเคฐ, เค›เคค्เคคीเคธเค—เคข़

-
Image
๐ŸŒฟ เคช्เคฐเคธ्เคคाเคตเคจा เคœเคฌ เคญी เค•ोเคˆ เคฎुเคเคธे เคชूเค›เคคा เคนै เค•ि เคฎैंเคจे เค…เคฌ เคคเค• เคธเคฌเคธे เค–ूเคฌเคธूเคฐเคค เค”เคฐ เคฏाเคฆเค—ाเคฐ เคŸ्เคฐिเคช เค•เคนाँ เค•ी เคนै, เคคो เคฎेเคฐा เคœเคตाเคฌ เคเค•เคฆเคฎ เคธाเคซ เคนोเคคा เคนै — เคฌเคธ्เคคเคฐ । เค›เคค्เคคीเคธเค—เคข़ เค•ा เคฏเคน เค•्เคทेเคค्เคฐ เคธिเคฐ्เคซ เคช्เคฐाเค•ृเคคिเค• เคธुंเคฆเคฐเคคा เค•ा เค˜เคฐ เคจเคนीं เคนै, เคฌเคฒ्เค•ि เคฏเคนाँ เค•ी เคฒोเค• เคธंเคธ्เค•ृเคคि, เคเคฐเคจे เค”เคฐ เคœंเค—เคฒ เค†เคค्เคฎा เค•ो เคญी เค›ू เคฒेเคคे เคนैं। 2024 เค•े เคฎाเคจเคธूเคจ เคฎें เคœเคฌ เคฎैं เคตเคนाँ เคชเคนुँเคšा, เคคो เคเคธा เคฒเค—ा เคœैเคธे เคงเคฐเคคी เคจे เคนเคฐिเคฏाเคฒी เค•ी เคšाเคฆเคฐ เค“เคข़ เคฒी เคนो। เคนเคฐ เคคเคฐเคซ เคนเคฐिเคฏाเคฒी, เคฌाเคฆเคฒ เค”เคฐ เคเคฐเคจों เค•ी เค†เคตाเคœ़ — เคเค•เคฆเคฎ เคซिเคฒ्เคฎी เค…เคจुเคญเคต เคฅा। ๐ŸŒŠ เคšिเคค्เคฐเค•ोเคŸ เคœเคฒเคช्เคฐเคชाเคค – เคญाเคฐเคค เค•ा เคจिเคฏाเค—्เคฐा เคšिเคค्เคฐเค•ोเคŸ เคœเคฒเคช्เคฐเคชाเคค เค•ो เคญाเคฐเคค เค•ा "เคจिเคฏाเค—्เคฐा เคซॉเคฒ्เคธ" เค•เคนा เคœाเคคा เคนै। เคฎाเคจเคธूเคจ เค•े เคธเคฎเคฏ เค‡เคธเค•ी เค—ूंเคœ เคฆूเคฐ เคคเค• เคธुเคจाเคˆ เคฆेเคคी เคนै। เคเคฐเคจे เค•े เค•िเคจाเคฐे เค–เคก़े เคนोเค•เคฐ เคœो เค ंเคกी เคฌौเค›ाเคฐ เคšेเคนเคฐे เคชเคฐ เคชเคก़เคคी เคนै, เคตो เคธाเคฐी เคฅเค•ाเคจ เคฆूเคฐ เค•เคฐ เคฆेเคคी เคนै। ๐Ÿ“ธ เคฎैंเคจे เคฏเคนाँ เค•ुเค› เคฌेเคนเคคเคฐीเคจ เคตिเคกीเค“ เคฒिเค เคฅे, เค–ाเคธเค•เคฐ เคฐेเคจเคฌो เค•े เคธाเคฅ เค—िเคฐเคคे เคชाเคจी เค•ी เคเคฒเค•! ๐Ÿƒ เคคीเคฐเคฅเค—เคข़ เคœเคฒเคช्เคฐเคชाเคค – เคœंเค—เคฒ เค•े เคฌीเคš เคœाเคฆू เคœเคนाँ เคšिเคค्เคฐเค•ोเคŸ เคตिเคถाเคฒ เคนै, เคตเคนीं เคคीเคฐเคฅเค—เคข़ เคธुเค•ूเคจ เคธे เคญเคฐा เคนुเค† เคนै। เคšाเคฐों เค“เคฐ เค˜เคจा เคœंเค—เคฒ, เค”เคฐ เคฌीเคš เคฎें เคชเคค्เคฅเคฐों เคธे เคฌเคนเคคा เคนुเค† เคเคฐเคจा – เคเค•เคฆเคฎ เคชिเค•्เคšเคฐ เคชเคฐเคซेเค•्เคŸ। ๐Ÿ‘ฃ เคฏเคนाँ เคŸ्เคฐेเค•िंเค— เค•เคฐเคจे เค•ा เคญी เคเค• เค…เคฒเค— เคนी เคฎเคœा เคฅा। เคฐाเคธ्เคคे เคฎें เคช...
Read more

๐Ÿ–‹️ VS Code – เคฎेเคฐा Coding Playground: Netflix เคธे เคฒेเค•เคฐ AnkurTunes เคคเค•! By Ankur Jha | April 7, 2025

-
Image
  เคœเคฌ เคฎैंเคจे เคชเคนเคฒी เคฌाเคฐ Netflix เค–ोเคฒा เคฅा, เคฎेเคฐी เคจเคœเคฐ movies เคชเคฐ เคจเคนीं, เค‰เคธเค•े เคกिเคœाเค‡เคจ เคชเคฐ เค—เคˆ। Black background, eye-catchy red buttons, เค”เคฐ organized layout เคฆेเค–เค•เคฐ เคฆिเคฒ เคฎें เคธเคตाเคฒ เค‰เค ा – "เค•्เคฏा เคฎैं เคญी เค•ुเค› เคเคธा เคฌเคจा เคธเค•เคคा เคนूँ?" เคฌเคธ เค‰เคธी เคฆिเคจ เคฎैंเคจे VS Code เค‡ंเคธ्เคŸॉเคฒ เค•िเคฏा – เค”เคฐ เคฎेเคฐी coding journey เคถुเคฐू เคนो เค—เคˆ। ๐ŸŽฌ Netflix Clone – เคฎेเคฐी เคชเคนเคฒी Blockbuster Coding เคซिเคฒ्เคฎ เคฎैंเคจे HTML เค”เคฐ CSS เคธे เคเค•-เคเค• section เคฌเคจाเคจा เคถुเคฐू เค•िเคฏा। เค•ोเคˆ เคธिเค–ाเคจे เคตाเคฒा เคจเคนीं เคฅा, YouTube videos เค”เคฐ เค–ुเคฆ เค•ा logic เคนी เคฎेเคฐा teacher เคฅा। เคธเคฌเคธे เคชเคนเคฒे เคฌเคจाเคฏा navigation bar, เคซिเคฐ banner image เค‰เคธเค•े เคฌाเคฆ เคเค•-เคเค• movie card create เค•िเคฏा CSS Grid เค”เคฐ Flexbox เคธे layout เคฌเคจाเคฏा เคนเคฐ เคฌाเคฐ เคœเคฌ browser เคฎें เค•ुเค› เคธเคนी เคฆिเค–เคคा เคฅा, เคคो เคตो เค–ुเคถी เค•िเคธी blockbuster movie เค•े first-day-first-show เคœैเคธी เคนोเคคी เคฅी। Netflix Clone เคฎेเคฐे เคฒिเค เคธिเคฐ्เคซ เคเค• เคช्เคฐोเคœेเค•्เคŸ เคจเคนीं เคฅा — เคตो เคฎेเคฐी confidence เค•ी เคชเคนเคฒी เคธीเคข़ी เคฅी। ๐ŸŽง AnkurTunes – เคœเคฌ เค•ोเคก เคธे เคฎेเคฐी เคงुเคจ เคฌเคœเคจे เคฒเค—ी Netflix Clone เคฌเคจเคจे เค•े เคฌाเคฆ เคฎैं เค•ुเค› เคจเคฏा เค•เคฐเคจा เคšाเคนเคคा เคฅा — เค•ुเค› เคœो เคฎेเคฐे เคฆिเคฒ เคธे เคœुเคก़ा เคนो। เค”เคฐ เคคเคญी idea เค†เคฏा – เค•्เคฏों เคจा เค–ुเคฆ เค•ा Spotify Clone เคฌเคจाเคฏा เคœाเค? ...
Read more