Web Development Basics
Build and publish a real web page you can show someone. Understand how the web actually works before choosing a framework.
- 7 lessons
- about 15 minutes (estimate)
- Free
- Free BvLogic Certificate of Completion
- Video in English & اردو
- Exercises in اردو
- 21 quiz questions
- 7 exercises
- 1 graded lab
Earn your free BvLogic Certificate of Completion.
A digital credential issued by BvLogic Academy to recognize successful completion of this introductory learning activity.
Not a government qualification or regulatory certification.
That was a one-minute preview. The full course video is for signed-in learners. Sign in to watch it here, or create a free BvLogic ID; it takes a minute, and this course is added to it.
What you'll be able to do
- Explain what happens between typing an address and seeing a page.
- Write HTML that describes meaning, not just what things should look like.
- Style a page, and understand the box every element lives in.
- Build pages that work on the device most of your visitors will actually use.
- Make a page respond to a click, and know where JavaScript's limits are.
- Put your page on the internet, at a real address you can send to someone.
- Choose your next direction deliberately, knowing what each actually involves.
Course content
- 1 How the web works Explain what happens between typing an address and seeing a page.
- 2 HTML: structure before appearance Write HTML that describes meaning, not just what things should look like. Sign in to open
- 3 CSS: layout, colour and type Style a page, and understand the box every element lives in. Sign in to open
- 4 Making it work on a phone Build pages that work on the device most of your visitors will actually use. Sign in to open
- 5 A little JavaScript: making it react Make a page respond to a click, and know where JavaScript's limits are. Sign in to open
- 6 Publishing your page Put your page on the internet, at a real address you can send to someone. Sign in to open
- 7 Front-end, back-end or full stack? Choose your next direction deliberately, knowing what each actually involves. Sign in to open
Read what each lesson covers
- How the web works. DNS turns a name into an address, the browser requests the page and the server responds. Front-end runs in the browser and back-end on the server; a static page is the same for everyone.
- HTML: structure before appearance. A complete page in a few lines, tags in pairs, headings in order and only for real headings, and alt text on every image.
- CSS: layout, colour and type. Select by class, understand the box model (padding inside, margin outside), set box-sizing to border-box, and lay out rows with flexbox.
- Making it work on a phone. The viewport meta tag, max-width instead of fixed widths, images that shrink, media queries, small-screen design first, big tap targets and resized images.
- A little JavaScript: making it react. Find an element, listen for an event and change something, preferably by toggling a class. The visitor can see and change anything in JavaScript, so passwords and real checks belong on the server.
- Publishing your page. Free static hosting such as GitHub Pages, Netlify or Cloudflare Pages, index.html as the main file, lowercase file names, relative paths, and a hard refresh after updates.
- Front-end, back-end or full stack?. Front-end for interfaces, back-end for servers and databases, full stack for what most Pakistani jobs advertise. Build three more pages unaided, learn enough Git, and expect months rather than hours.
Course lab
Graded lab A published page for a real business Open the lab →Who this course is for
- Complete beginners who want to build and publish a real web page.
- Students deciding between front-end, back-end and full-stack work.
- Learners heading to the paid Full Stack programme.
Try the first exercise (in Urdu)
کوئی بھی website کھولیں، right-click کر کے View Page Source چنیں۔ آپ وہ HTML پڑھ رہے ہیں جو server نے بھیجی۔ <title> tag اور CSS files کے links ڈھونڈیں۔ یہی پوری گفتگو ہے، آپ کے سامنے۔
Using this in Pakistan
- A WordPress developer role advertised in Faisalabad on 30 September 2026 offered Rs 30,000 to 50,000 a month. Source
- Indeed puts web developer pay in Faisalabad at an average of Rs 36,349 a month, 19% below the national average. Source
- Freelance: Pakistani WordPress developers featured on Upwork charge about $3 to $15 an hour. Source
Questions
Is it really free?
Yes. No payment and no card; lesson 1 needs no account.
Is there a certificate?
Yes, when you complete every lesson.
Can I learn in Urdu?
Every lesson has an Urdu exercise alongside the English reading.
How long does it take?
About 15 minutes of reading, plus the exercises.
What comes next?
The paid Full Stack Web Development (PHP) programme, in Faisalabad and live online.
Full Stack Web Development (PHP)
Full Stack Web Development with PHP & Laravel
This free course is the introduction. The programme is taught by a trainer, marked by the academy, and carries the syllabus in full: the part an employer asks about.
See the full syllabus and feeRelated free courses
- Flutter BasicsUrdu video
- Node.js Backend BasicsUrdu video
- React BasicsUrdu video
- Shopify Theme DevelopmentUrdu video
- WordPress BasicsUrdu video
- Angular Basics
Web Development courses in Pakistan · All free courses · Government free courses open now