indiadigital
Home / Code / Web Basics: HTML & CSS
🌐 BEGINNER · CLASS 8+ · FREE COURSE

Web Basics: HTML & CSS

वेब की बुनियाद: HTML और CSS — असली वेब पेज बनाइए — पहली हेडिंग से लेकर मोबाइल-फ़्रेंडली दुकान पेज तक।

Learn HTML and CSS by building: a chai stall menu, an IPL points table, a school admission form and finally your own portfolio or shop page. Every challenge runs in your browser and is checked instantly.

Start lesson 1 →Final project
  • 14lessons
  • 25challenges
  • 8hto finish

Syllabus

Unit 1: Your first web page आपका पहला वेब पेज3 lessons

  1. Headings and paragraphsTags, the building blocks of every web page.2 challenges · 12 min
  2. Links and picturesConnect pages with links and draw pictures right inside HTML.2 challenges · 15 min
  3. Lists: menus and recipesBulleted and numbered lists with <ul>, <ol> and <li>.2 challenges · 12 min

Unit 2: Tables and forms टेबल और फ़ॉर्म2 lessons

  1. Tables: rows and columnsShow data neatly — from a class timetable to the IPL points table.2 challenges · 15 min
  2. Forms: a school admission formCollect information with inputs, labels, dropdowns and buttons.2 challenges · 18 min

Unit 3: CSS basics: colour and style CSS की बुनियाद: रंग और स्टाइल4 lessons

  1. CSS rules and selectorsStyle tags, classes and ids.2 challenges · 15 min
  2. Colours: names, hex and rgbExact colours like brands use them.2 challenges · 15 min
  3. Text and fontsFont families, alignment, spacing and capital letters.1 challenge · 12 min
  4. The box modelEvery element is a box: content, padding, border and margin.2 challenges · 18 min

Unit 4: Layout: flexbox, grid and phones लेआउट: फ़्लेक्सबॉक्स, ग्रिड और मोबाइल3 lessons

  1. Flexbox: navbars and card rowsLine things up in a row with display: flex.2 challenges · 18 min
  2. CSS grid: product galleriesRows and columns at once with display: grid.2 challenges · 15 min
  3. Responsive design for phonesUse @media rules so pages look great on small screens.2 challenges · 18 min

Unit 5: Final project: your own page अंतिम प्रोजेक्ट: आपका अपना पेज2 lessons

  1. A page with a proper structureheader, nav, main, section and footer.1 challenge · 12 min
  2. ★ Final project: portfolio or shop pagePut it all together in one responsive page.1 challenge · 40 min

Search by task, format or tool name.