Chapter 01
What is frontend development
Think of a website like a book. Frontend is the cover, the text, and the layout, not the printing machine.
A frontend developer builds what users see: titles, buttons, forms, images, menus. The tool they use is called HTML, a simple text file that tells the browser what each piece of content is. CSS paints it. JavaScript makes it move. That is the whole foundation. React and Next.js just help write those three things faster at scale.
Chapter 02
Why Nepal frontend developers skip HTML
It is like learning to paint walls before the walls exist. The result shakes and falls when someone touches it.
HTML arrives late. Deploy never arrives.
You graduate knowing the word "React" but unable to write a working form from scratch. Campus WiFi hides what Ncell exposes.
Dragging Elementor widgets is income, not craft.
Five years inside a theme builder with no parallel project is five years of not learning the document. Take the ticket. Write your own site alongside it.
React before HTML is building on sand.
React generates HTML. If you do not understand the HTML React generates, you cannot debug it. You copy Stack Overflow until something breaks and you have no idea why.
Fast on office WiFi is still homework.
Throttle DevTools to mid mobile. Most Nepal sites die there. That gap is your opportunity. Read why Nepal frontend is slow.
Chapter 03
How to learn frontend development step by step
Each step earns the next one. Think of it as building a house, you pour the floor before you add the roof.
- 01 HTML first
Write a page that makes sense without CSS or JavaScript
Headings, paragraphs, a form, a navigation, proper labels. View source on good sites. When HTML bores you, you are ready for step two.
- 02 CSS by hand
Build one full design, colours, spacing, layout, without any kit
Type scale, flexbox, grid, mobile-first media queries. Do this once from scratch. Then every kit, Tailwind, Bootstrap, makes sense because you understand what it replaces.
- 03 JavaScript basics
Learn to debug before you learn to copy-paste
Open DevTools. Make a button change text. Fetch data from an API. When it breaks, read the error message. That debugging skill is what separates real developers from tutorial followers.
- 04 React and Next.js
Build something a stranger can open, not a localhost demo
Components make HTML reusable. Next.js makes pages fast and indexable. Deploy to Vercel. Point a domain at it. That URL is your first real credential. OpenListener is Next.js 14.
- 05 Measure on Ncell
Run Lighthouse and fix everything until it scores above 90
Compress images. Fix layout shift. Remove render-blocking scripts. Sub-second first paint on a throttled Ncell connection is the number you show a founder. See Lighthouse 98 on OpenListener.
Chapter 04
Frontend tools: HTML, CSS, JavaScript, React, and Next.js
Do not memorise names. Understand the job each tool was built to do, then the name sticks itself.
The skeleton, tells the browser what every piece of content is
A heading. A paragraph. A button. A form field. Without HTML, the browser has no idea what it is looking at. Google does not either.
The skin, controls every visual thing you see on screen
Colour, font size, spacing, layout, animations. Without CSS every website looks like a plain Word document with blue links.
The muscles, reacts to user actions in real time
Click a button → something changes. Scroll → a menu appears. Type → results update. Without JavaScript every page is a static poster.
The organiser, breaks a big page into small reusable pieces
Write a card component once. Use it thirty times. When the design changes, update one file. React also manages complex state like a shopping cart that remembers what you added.
The engine, makes React pages fast, deployable, and findable on Google
Pre-builds pages on the server so they load fast on slow networks. Handles routing, images, fonts, and deployment in one tool. This is what turns a demo into a real product.
The report card, tells you exactly what is slow and broken
Built into Chrome. Runs in 30 seconds. Gives a score 0,100 for performance, accessibility, SEO, and best practices. A score above 90 is a number you show in an interview.
Chapter 05
How to get a frontend job in Nepal with a live website
Two developers. Same salary ask. One gets the call. Here is the difference.
Developer A: three years, a degree, twenty GitHub repos. All run on localhost. Their site takes six seconds to load on Ncell. Developer B: one year, one live product that scores 94 on Lighthouse and loads in under a second on a real Nepali phone. Developer B gets the call.
Chapter 06
What to learn after frontend development
You do not need to master all three. Learn enough of each to stop waiting for another team.
The API your HTML talks to
When your form submits, data goes somewhere. That somewhere is backend. Learn enough to read a 401 error and fix it without waiting for another team.
Open this pageGoogle reads your HTML too
Good semantic HTML is good SEO. One H1. Fast load. Crawlable links. Frontend and SEO are the same document seen by two different readers.
Open this pageLet AI write the first draft
Describe the page you want. The AI writes the HTML, CSS, and React. Your job is to test it, measure it on Ncell, and fix what is wrong. Frontend judgment does not go away.
Open this pageNext.js on real Ncell speed
Real performance numbers on real Nepal data. Not a tutorial recorded on California fibre. The fixes are different when the constraint is real.
Open this page