How to build websites

Under the Hood

The story begins when a non-computer science student is about to learn how to build products or how to build a website.

I started my journey 5 years ago without any background in computer science, the only aim was to learn how to build websites, I was overwhelmed when I saw my friend writing code and building a website on his Windows laptop 7 years ago, and that was the turning point in my life.

Fast forward to 7 today in 2025, still feels like DAY 1 because every day is a learning day.

Today I will take this opportunity to write a detailed blog on how to build a production-based website.

Take a coffee as it would be a long article.

What is a website?

That’s the first question to ask yourself before building anything.

Website is a platform that serves the customer, yeah, I use the word “serve” not “servers” so treat it accordingly.

Every website you use is a service by the author or so-called developers, the people like us.

For the newcomers, service means providing value, creating impact and solving problems and by servers meaning running and operating 24 hours without any interruptions, it’s a computer.

Every website is a plain HTML, nothing more than that,t nothing less.

HTML is a simple document containing a few lines of code that runs on the computer or browser.

Each HTML file is a code written in english only, but with a proper syntax different from plain English we usually write on pen and paper.

The HTML language contains elements that are displayed and interactive on the website, such as Button, Input, Tabs, Tables, List, Card, Image, Audio, Video, Canva and so on.

If you are just starting your journey in software development, read everything about HTML on https://www.w3schools.com/

HTML can be viewed both in Google Chrome and locally on our computer. However, to see the output, we need a browser. The reason we need a browser to run HTML is that it acts as an interpreter, understanding and rendering the HTML code into a visual format.

The browser processes the HTML, to display the web page as intended for users.

HTML elements do not contain any styling, meaning colors, font sizes and other specific details, and for that we need CSS, to add some beauty to the website or HTML elements.

The combination of HTML and CSS creates the beautiful interfaces as intended or created.

Why I use the word as created meaning it’s in our hand as a developer to create n numbers of HTML + CSS combinations, simply explaining why we have tonnes of different looking websites in the world.

2 same HTML combinations can look different because of CSS, because of different styling a developer has added onto the HTML.

HTML + CSS combinations can’t trigger events, when the button is clicked, what to do? and how to do? is not in the hands of HTML elements nor is it controlled by CSS. JavaScript is not the main culprit behind every event the user triggered on the website.

What is an event?

Event is a function call for developers, but for simple people, it’s an event. We throw a party, we bring a beer, this is an event. Clicking a button and making a purchase is an event. Event is a simple function triggered using JavaScript on the browser, and each JavaScript code can be called as an event.

JavaScript is a scripting language that runs on the browser because the browser has the V8 engine(Chrome browser) that can read, compile, transpile and execute it.

Everything we write in programming is an object.

The HTML element, CSS stylings, JavaScript code, C++ classes, transpilers, compilers, syntaxes, all are just an Object.

Once you understand this, everything is easy to understand.

JavaScript can do way more than any other language, it can be used in machine learning, backend server development and data scraping because it can be run outside the browser on the server empowered by Node.js, a JavaScript run-time environment.

Once this is clear, we move ahead with combining HTML, JavaScript and CSS to create a website.

• HTML is the arrangement of elements
• CSS provides alignments and styling
• JavaScript handles the events

Earlier, before React came into existence, websites is usually created using the vanilla framework, no server-side rendering and no JSX (JavaScript in HTML)syntax.

React is a different or modern way of building websites, but that is not the only way to build websites, the reason is because the website is not JSX code, it’s again the combination of HTML, CSS and JS.

JSX and React are developed later in the 21st century.

Way back in 2000, the only way to develop a website was to create HTML and CSS and store it in the computer as a zip file or a folder and run the HTML file locally on every computer to use the website.

Sounds funny and stupid, but that’s one simple problem that leads the developer to bring a so-called “Browser” into the world.

Fast forward to 2025, I’ll still say that every website is just an HTML and CSS executing a JavaScript code.

Slowly, slowly people can build a website by creating HTML, CSS and JS files and storing them on the server and running on the browser by sending that HTML, CSS and JS folder over the internet.

How to send that file over the internet?

That the job of a server is to send the store file/folder or website from the database to the user's computer or browser, and then the user's browser runs the HTML and JS to finally provide a website. Earlier, before JSX the same thing was done by the servers, and building a website needs a combination of HTML, CSS and JS to build a dynamic website.

Multi-page vs Single-page apps

Multi-page websites that have multiple pages or every points, vanilla JS apps.

A single-page website that has one entry point or one file to start the entire app, React and Next.js apps.

Multi-page apps need to handle connection between JavaScript and HTML files via script tags, and the same for CSS using an HTML link tag.

Connecting the files was easy, but managing states in multi-page apps was very difficult.

Tracking the user authentication state in all browser tabs was tough in the multi-page apps, and that is why browsers had to introduce the memory concept known as cookies, local storage, to store the application states and easily manage them.

Browser with HTML, CSS, JavaScript code, cookies and local storage helps to develop a dynamic website.

Back in 2008, anyone could build a dynamic website, store user data, display it and do a lot more.

From time to time developers realised that multi-page apps are quite difficult to manage and develop, and back in 2012, the Facebook team brought a new way of writing JavaScript, HTML and CSS inline together and runs on the browser that is JSX syntax.

JSX !== React

People thought JSX === React, no, not really.

React is a framework that compares the virtual DOM with the actual DOM to manage/update/read and delete the website states.

Later on, the Vercel team released the new framework on top of React and named it Next.js

Next.js is the most popular and widely used framework in 2025/24. Next is a framework for multi-page apps, but it brings a new concept called server-side rendering.

Server-side means now single-page apps or React apps can be run directly on the local server supported by Node.js that sends the HTML file and JavaScript code in the bundle to the local server to finally run the website locally.

Now, this local server-side apps can be served on the other computers using the same concept of server-side rendering, enabling building server-side apps easily and running on the server itself.

Next.js or any server-side apps, takes the JSX code or single-page apps, builds the bundle of JS, HTML and CSS file and finally uses the Node.js server to run it on the browser (locally or on the internet)

This one simple explanation of server-side apps anyone can easily build their server-side apps by following the above concept.

• Write JSX code using the React framework
• Use Node.js to create a runtime server
• Write the function to create the bundle of JSX code
• Runs the bundle using Node runtime on the browser

Why do we need this server-side rendering if React was already working well?

Server side rendering empowers the developer to bring more features and capabilities in a static website.

Server-side rendering brings a capability to directly talk to the server, eradicating the dependency on browser cookies/local storage.

Once our app/website is on, the server-side rendering enables the server connection to do more things on the website, such as managing states, storing user data, fetching data, updating and deleting data.

Next.js server-side rendering technique brings more features such as

• Data fetching
• Page routing
• Server functions to run your backend in the frontend
• Cookies and State management

…etc

State Management

Managing states need a package in every React app and that is taken care of by Redux.

Redux does not come with redux toolkit

• Slice — Update the redux store
• Store — Store the redux data
• Actions/Dispatchers — Trigger the redux slice to update the store

Quite simple logic, 3 managers to read, update, trigger the web app storage. Redux can’t be used in multi-page apps because it only works with React apps. Redux itself follows the flux concept flowing in one direction and having states managed centrally.

Redux brings the same ideologies to the React apps to easily manage the states in the React apps. Redux flux concepts can’t be broken or replaced, we have a few other libraries as well, such as

• Zustand
• Jotia
• MobX

But Redux is far better to build production and dynamic websites.

UI libraries

This is also the new concept for React apps or single-page apps.

Multi-page apps do have a similar concept called CSS bootstrap that changes everything for multi-page apps. CSS bootstrap was the main reason behind the idea of UI libraries in React, and it was first done by Google, bringing Material UI library as the first React library (not sure but Ant Design).

UI libraries are nothing but reusable concepts, the ideology of not wasting time by doing the same thing again and again and that is why UI libraries came into the picture.

Simple logic is to install the UI libraries source code using npm in the multi-page app or react app and import the whatever component or code you want to reuse. Nowadays, we have more than 100+ UI libraries, and few top-rated libraries are as follows

• Ant Design
• Shadcn/UI
• Material UI
• Chakra UI
• Mantine.dev

a lot more.

Few more things to learn over here are how these UI libraries are built and how one can make their libraries.

Styling

Single-page apps handled styling in quite a different way. Since we can write CSS in JavaScript, so the syntax will change, and a lot more can be in terms of styling.

For styling, something similar to Bootstrap has emerged in the market, and that is Tailwind CSS.

Tailwind gives the power to build websites quickly, responsive and dynamic at the same time.

But we have other options as well to deal with styling in javascript code

• Styled components
• Emotionjs
• framer motion
• GSAP

All of them work very well with single-page apps or React/next apps.

APIs

JavaScript in the browser comes with a lot of powers. We can simply make API calls to any server in the world in our JavaScript using axios or Fetch.

Axios and fetch both packages help to make any server API call inside our JavaScript function.

Both can make an API call to Create/Read/Update/Delete the data on the server inside the JavaScript function.

Axios, developers can now trigger JS event and perform CRUD operations on the single-page apps, making our website more dynamic.

Authentication

Authentication is the most crucial part of any website in the world. If that fails, nothing left on the website that remains unstolen.

Authentication is handled completely on the server for multi-page apps via JWT tokens, but nowadays in 2025, single-page apps have far more ways to handle authentication directly in the frontend.

• OAuth
• Session based authentication using cookies
• Third-party authentication using Clerk, Firebase
• Social logins/Email password authentications

Back in 2010, all the above types of authentication were handled directly by the servers and updates were sent to the frontend/client side browser.

But today in 2025, server-side rendering and single-page apps give developers a far easier way to manage user authentication states in the frontend.

Few libraries we have

• OAuth
• NextAuth
• Clerk
• Firebase
• Supabase
• Appwrite

Each of them helps to manage authentication in the multi-page apps.

Databases

The one cool power of server-side rendering is that it doesn’t need a dedicated server, this frontend website itself is a server because it is running using the Node.js server under the hood.

Right, if I’ve a server running my JSX code on the browser server, meaning I am already on the server, so I can simply connect/read/update to my backend database using this server only.

This brings to one more solution of a serverless database, a database without a server.

Earlier, we need a dedicated MongoDB, SQL database, connect it using Node.js servers and bring that to the frontend single-page apps using the API endpoints, API endpoints are connected using the axios library.

But now, we can simply connect the serverless database within our single-page react apps using axios and other open-source npm modules.

Some serverless databases we have

• Firebase
• Supabase
• Appwrite
• Pocketbase
• Neon database
• Drizzle ORM

Payments

Websites need payments, and server-side apps along with serverless databases make it an easy task.

Stripe, lemon squeezy, Razorpay, PayPal, Polar, Google Pay and other payment options work perfectly well with the serverless database to integrate payments, subscriptions on our website.

Some of the options we have are

• Stripe
• Razorpay
• Lemon Squeezy
• Paypal
• Polar
• Google Pay

Each payment option can be easily integrated in the Next.js app and with the help of a serverless database, we can store and track the user payment status.

In this way, one can even develop e-commerce and Netflix kind of one-time and subscription-based apps. Anyone can bring a payment inside the website to provide access to the paid content, and that simple concept gives birth to SAAS apps for a minimal subscription, hence explaining why building SAAS apps is the best way to earn $$$

Deployments

Once the app development is over, we can use Github to manage the version controls and handle the deployments.

In 2025, Vercel and a few other options are a solid choice for deploying frontend apps

• Vercel
• Hostinger
• Netlify
• Heroku
• Digital Ocean
• Github
• Google Cloud
• AWS

A lot more apps are available, but the above ones are the most popular choices.

Analytics

We need to track the visitors count, location, and other details for every website, and a few options we have in our baskets are as follows

• Google analytics
• Plausible
• Vercel analytics
• Amplitude
• Mixpanel

Emailing

Websites need email services to craft/send emails to the customers.

One way to communicate the message to the customers is using direct messages or cloud messaging via notifications, or another way is through emails.

Emailing service is quite common and single-page apps like Next.js have tonnes of community support like Resend, Mailchimp to easily craft emails in JSX and send to the bulk users.

Few emailing options for single-page apps

• Plunk
• Resend
• Mailchimp
• Sendgrid
• Cloudfare
• Loops
• Beeble

a lot more…

API keys

Most third-party tool needs an API key, and in single-page apps, to handle those API keys in the .env file, some do in the config files as well.

API keys can be extracted directly from the tool website, for example, the resend API key can be extracted from the Resend website dashboard, and the same goes with Stripe, Firebase and another serverless database.

Any third-party tool depends on an API key, has a dashboard to create and get the API key for each user. Each user has a unique API key as the API key is generated using the user email and other hash algorithms.

Once this is done, we are ready to build, launch and scale the website to millions of users.

Security

A secure website protects both user data and your reputation. Here are some best practices and tools:

• HTTPS & Secure Cookies: Always serve your site over HTTPS (using, for example, Let’s Encrypt).
• Content Security Policy (CSP): Prevent XSS attacks by defining which content can be loaded.
• API Security: Secure endpoints using authentication and proper validations.

Options & Tools:

• Helmet (for Node.js): Helps secure Express apps by setting various HTTP headers.
• OWASP Guidelines: Follow best practices as recommended by OWASP for web application security.

Testing and Quality Assurance

Quality assurance is critical to ensuring that your website functions correctly across devices and browsers. Consider the following:

Testing Types:

• Unit Testing: Test individual components (using frameworks like Jest or Mocha).
• Integration & End-to-End Testing: Validate the interaction between components and user flows (using Cypress or Selenium).

Tools:

• Jest: Widely used for unit and integration tests in JavaScript applications.
• Cypress: Great for comprehensive end-to-end testing.
• Selenium: Useful for cross-browser automation testing.

CI/CD and DevOps

Automating your development pipeline ensures faster, more reliable deployments. Look into these practices and tools:

Continuous Integration/Continuous Deployment (CI/CD):

• Automate testing, builds, and deployments to catch issues early.

Popular Tools:

• GitHub Actions: Seamlessly integrate with your Git repository for automated workflows.
• Travis CI, CircleCI, or Jenkins: Offer robust solutions for automating build and test pipelines.
• Deployment Platforms: Options like Vercel, Netlify, Heroku, and AWS can host your website reliably.

Responsive Design and Accessibility

Ensuring that your website looks great and is usable on all devices is essential. Consider these areas:

Responsive Design:

• Use CSS media queries and flexible grid layouts to adapt to different screen sizes.
• Frameworks: Bootstrap, Tailwind CSS (which you already mentioned), or Foundation.

Accessibility:

• Implement ARIA attributes and ensure screen reader compatibility.
• Tools: Use accessibility testing tools like axe or Lighthouse’s accessibility audits to validate compliance with WCAG guidelines.

SEO Best Practices

SEO is crucial for driving organic traffic to your website. Consider these strategies:

On-Page SEO:

• Optimize meta tags, structured data (using schema.org), and create sitemaps.
• Focus on mobile-friendliness and fast load times.

Tools & Options:

• Google Search Console: Monitor and optimize your site’s performance in search results.
• SEO Plugins or Libraries: Tools like Next SEO (for Next.js) can help manage meta tags and structured data.

Emerging Trends

Stay ahead by incorporating modern web development trends that improve performance and user experience:

Progressive Web Apps (PWAs):

• Use service workers to provide offline capabilities and app-like experiences.

Micro-Frontends & Headless CMS:

• Options: Headless CMS platforms like Strapi, Sanity, or Contentful decouple the backend from the frontend, offering flexibility in content management.

Serverless Functions:

Easily integrate backend functionality without managing a dedicated server using providers like Vercel’s serverless functions or AWS Lambda.

Legal and Compliance Considerations

Ensuring your website complies with legal standards builds trust with users and avoids potential fines:

• Privacy & Data Protection:
• Draft clear privacy policies and terms of service.
• Ensure compliance with GDPR, CCPA, and other regulations.

Cookie Consent & Management:

• Tools: Cookiebot and OneTrust help manage cookie consent and user tracking policies.
• Services: Platforms like iubenda provide customizable legal policies for websites.

User Experience (UX) and Design

Great UX and thoughtful design can set your website apart. Here are some points to consider:

• Prototyping and Design Tools:
• Options: Figma, Sketch, or Adobe XD are excellent for creating wireframes, prototypes, and design systems.

Testing

• Regularly conduct usability testing or A/B testing to refine the interface and functionality.
• Collect user feedback to iterate on design and ensure the website meets user expectations.

Conclusion

The entire concept of how HTML, CSS and JavaScript emerge is quite inspiring.

From single-page apps in 2025, we have a modern way of building websites. 2025 empowered developers not only with AI but a lot of open-source tools to bring dynamic SAAS tools easily without much problem.

A lot of open-source tools for almost every feature on the website are available in the open-source world, a few of them are Stripe, Plausible, Firebase, supabase, Resend, Plunk, etc.

Website development is becoming more fun but still needs good contributors to keep improving it for the betterment of society.

More to come in future, until next time, have a good day.

Shrey

Summary

Thisblog details building production-ready websites. It covers HTML for structure, CSSfor styling, and JavaScript for interactivity, emphasizing the evolution from multi-pageto single-page applications (React, Next.js). Key concepts include server-side rendering, state management (Redux), UI libraries (Material UI,Ant Design), and API integration (Axios). Modern tools like Node.js, Vercel, and serverless databases simplify development, enabling dynamic website creation.Thisblog details building production-ready websites. It covers HTML for structure, CSSfor styling, and JavaScript for interactivity, emphasizing the evolution from multi-pageto single-page applications (React, Next.js). Key concepts include server-side rendering, state management (Redux), UI libraries (Material UI,Ant Design), and API integration (Axios). Modern tools like Node.js, Vercel, and serverless databases simplify development, enabling dynamic website creation.