In this blog, I’ll share with you a brief roadmap on how you can start to code and build your website online. To start writing code, you first need to have a code editor installed on your system. The most popular choice for the code editor among developers is the VScode editor. To get started, you first need to understand the basic languages e.g. HTML, CSS, and Javascript. HTML is a markup language, CSS is used to style HTML elements, and Javascript loads dynamic content without refreshing the page. You can understand it better by looking at the image below, where the skeleton of the body is described as HTML, the outer skin is described as CSS, and his action is Javascript. If you want to learn more about the basic languages, you can follow the below link Get started with Javascript Get started with CSS A client-side language such as HTML, CSS, or Javascript is responsible for displaying content on a browser (front-end). If we want to perform server-side tasks like a filesystem and connect with the database; then we need to learn server-side languages e.g. Nodejs, and PHP. You have the option to choose between different server-side languages. If you are a WordPress lover, then PHP is the way to go. If you want to write Javascript on the server, then Nodejs is the option. As mentioned, Javascript is used to load dynamic content (UI) without refreshing the page e.g. validating user input, popup modal/ads, toggling dark and light mode, etc. But if the UI of the website becomes more complex, then handling it with Javascript could be a very lengthy task. So, we need a more robust UI library, Reactjs. React is the JavaScript library for building user interfaces and is the most popular among developers. It helps you manage a lot of things easier with features like Virtual DOM(normal DOM updates are slow), handling data with states, component-based structure, etc. Along with ReactJS, we need a framework that makes our development workflow smoother e.g. Page route, SSR, SSG, code automation, image optimization, etc. The most popular React frameworks are Gatsbyjs and NextJS. As I’m more inclined towards Gatsbyjs, here I’ll discuss the Gatsbyjs framework. Gatsby is a modern web framework built on top of React and GraphQL. We can use Gatsbyjs to build both static and dynamic sites. To get started with Gatsbyjs, you can choose the . In the Gatsby project, any file located in the folder serves as a page route. To start running the Gatsby project, we can execute the below command in the terminal. Gatsby starter template **.js src/pages npm run develop After, Your site is now running at http://localhost:8000 To perform a backend task, you need a backend server. Luckily, in Gatsby, we can write serverless functions without running servers. To create a serverless function, we can create a file at the location in the project. In the front end, we can execute the serverless function by sending HTTP requests to the respective API route. **.js src/api For example, the file located at create the API route at . So to execute the respective function from the frontend, we can send the HTTP response to the respective API route as shown in the below code: newsletter.js src/api http://localhost:8000/api/newsletter import axios from "axios"

async function onSubmit(data: { name, email }) {
 let subscribe = await axios.post(`/api/newsletter`, {
 name: String(data.name),
 email: String(data.email),
  });

 if (subscribe?.data?.message === "success") {
 console.log("Great!!!");
  }
} To store the user’s data we need a database. There are many options to choose between the database e.g SQL or non-SQL. To interact with the database, we need a server e.g. Express web server. We can’t interact with the database using the client (front-end). Some of the database companies allow the developer to perform CRUD (create, read, update, and delete) operations on the database using the . API In such a case, we have an API layer on top of the database layer. Instead of interacting directly with the database, we can send the HTTP requests to the API route to perform the CRUD operation. In this way, we can perform CRUD operations with both clients (frontend) and server sides applications. For example, Sanity_io is the unified content platform. To mutate and retrieve the data from the Sanity server, we can send the HTTP request to the respective API route along with the query parameter. To deploy your website, you need to have a public domain and a host server. If you don’t have a public domain, don’t worry you can host your website on the subdomain of the host server. The most popular hosting website are listed below. Netlify GitHub Pages Heroku Vercel Render Surge Firebase Depending on the hosting website, you might have many options to build and deploy your website. But, the approach that we can follow is to push your code on Github (ship your code) and then deploy it on the netlify server as shown below is the hosting platform to host your assert/code live on the web. Netlify triggers a build command whenever you push your code up on Github. After your website is successfully built, netlify generates a public URL that you can visit to view your website. Netlify Final Words I’ve briefly discussed how you can build your website online. To start off, practice some code online and get your hands dirty with some side projects. Some of the projects that you start doing right now are listed below: Build a responsive website with HTML, CSS, and Javascript Build a todo list with React Project Store users’ details in the database. In case you are interested in a more in-depth course, you can check out the . Gatsby js course Also published . here

Heroku

18 Best Productivity Apps For Remote Workers

Great to have you here.

Nominated for 2022 - HackerNoon Contributor of the Year - Code

Nominated for 2022 - HackerNoon Contributor of the Year - Developer Tools

Nominated for 2022 - HackerNoon Contributor of the Year - Productivity

Nominated for 2022 - HackerNoon Contributor of the Year - Coding Skills

Nominated for 2022 - HackerNoon Contributor of the Year - Css

Nominated for 2022 - Remote Work Warrior

Too Long; Didn't Read

Make resilience your competitive advantage

A Very Early Introduction to Building your Own Web App With Code

A Very Early Introduction to Building your Own Web App With Code

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

18 Best Productivity Apps For Remote Workers

100 Stories To Learn About Html5

12 Websites to Take Your CSS Skills From Beginner to Pro

21 Valuable HTML & CSS Code Snippets for Web Developers

20 Best Free HTML5, CSS3, Bootstrap Landing Page Templates in 2018

18 Best Productivity Apps For Remote Workers

100 Stories To Learn About Html5

12 Websites to Take Your CSS Skills From Beginner to Pro

21 Valuable HTML & CSS Code Snippets for Web Developers

20 Best Free HTML5, CSS3, Bootstrap Landing Page Templates in 2018

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps