How To Create A Complete Website From Top To Bottom.

By /
Rate this post

In this blog, we’ll discuss the process of creating a complete website i.e How to create a complete website from top to bottom and we will know about some of the technology that we can use in the back-end as well as in the front-end of our website.

How to create a complete website from top to bottom

Introduction

Nowadays, most people have smartphones or any digital devices with them for the process of communication as well as for sharing or taking information by the use of the internet, and most of the time we are using browsers like Chrome, Brave, Opera, etc to search our query by inputting some combination of keywords in the search bar, after searching we get some sort of results shared by the search engine like for google search bar, there is a google search engine which takes our query and shares a list of websites with us accordingly.

In this process when we entered into the browser whatever we are able to see in front of us is called the front-end of any website and after inputting some value into the search bar and hitting the search button the background process for sending responses back to users is called backend process which is also called as backend logic execution because backend runs on the basis of some algorithm which takes inputs and acts accordingly.

Let’s take a deeper look into this process, the person who does some activity on the browser and gives some input to some website is called a client-side process/activity and after hitting some button in this case, the search button and the result returned by the algorithm that starts their execution after the hit of a button is known as server-side process/activity. So the front-end is normally referred to for the user interface i.eUI development for interaction with websites and the back-end is normally referred to as hidden logic that generated output and sends it to the user accordingly.

Frontend Of Website

Front-ent is an important part of any website because it is responsible for the attractions of users and it gives some sort of feel to our end users hence the total time spent on the website increases ultimately which is good for Seo as well.

To create the front-end of any website we basically deal with Html, CSS, and Javascript but there are some frameworks or we can say libraries available for designing the front end of any website, and to start working with these tools we should know the basic of Html, CSS, and Javascript. So let’s discuss this thing a little bit more.

Basics Of Websites:

  1. HTML
    • HTML stands for Hypertext Markup Language.
    • Html basically contains some tag’s in a specific order and every tag provides a way to create things that will be visible to the end user for example there is the title tag that displays the title on the top of the window bar where the fav-icon is visible to us (<title>www.codewithdc.com</title>).
    • Refer to Code Block: Basic website code below that contains some basic HTML code which you can save as main.html and run accordingly.
  2. CSS
    • CSS stands for cascading style sheet.
    • CSS provides a way to design the HTML element/ tag and we identify every tag uniquely with the help of tag ID or Through their class name.
    • CSS can be divided into three parts as followed:-
      • Inline CSS: Inline CSS gives us the flexibility to add design using style attributes under that tag. eg <div style="color:blue" class="change"><p>codewithdc.com</p></div>
      • Internal CSS: Internal CSS helps to design a website internally means adding a style tag under the head tag separate from the designed tag. for example <head><style>.change{color:blue;}</style></head>
      • External CSS: External CSS helps design website elements externally by adding all the design elements inside style.css (note: file name can be anything with .css extension) and we can link that file inside HTML code inside the head tag for example <link rel="text/Stylesheel" href="style.css">
  3. Javascript
    • Javascript is mainly used for form validation code and It is also known as scripting language from which we can script our website behavior for example after clicking some button another button would appear or if the wrong MCQ answer is chosen then the background would become red otherwise green
    • Nowadays, Javascript is the most widely used Scripting language for web development.

Predefined Tool For Front-end Development:

  1. React:
    • React is a JavaScript library provided by Facebook for designing the front-end/UI of a website.
    • React is used to create a single-page application like rendering all things on one page only.
    • React gives us the flexibility to create a reusable component.
  2. Bootstrap:
    • Bootstrap is the most popular CSS Framework.
    • Bootstrap is the fastest way for UI development for a website because bootstrap provides some predefined classes and IDs from which we can use it and customize our website accordingly.
    • To apply bootstrap to our website we must their document once which is listed on getbootstrap.com.
  3. SASS:
    • SASS stands for Syntactically Awesome Stylesheet which is also known as CSS pre-processor
    • SASS helps us to reduce the repetition of code which reduces the size of our file.
    • SASS is a CSS pre-processor because in CSS we are doing some repetition but SASS has some features from which this problem is solved completely.

<!DOCTYPE html>
<html>
<head>
<title>www.codewithdc.com</title>
</head>
<body>
<nav> This is a navigation bar from which we can navigate other pages like Home, About us, Disclaimer, Main menu. </nav>
<header> This is a header tag which contains some introductory information about document</header>
<article> This is an article tag which is used for holding articles on the webpage and this helps search engine to understand the content of any website and it accordingl.
<h1> welcome to codewithdc home page</h1>
<p> this paragraph tag</p>
<i> hi this text will convert into italic form after execution</i>
<strong> this is important</strong>
</article>
<!-- this is a comment tag  --/>
<script> Inside this tag we write some javascript code for changing behaviour of website </script>
</body>
</html>

                                                                                              <!-- Basic website code -->

Backend Of Website

For the Backend, we need some Programming language to make our website function and implement the logic for database and executions. Below are some programming languages that anyone can start with and note all the languages have their own pros and cons so need not worry when choosing one.

  • Programming Language:
    • Java:
      • Java is a general-purpose programming language mainly used for creating backend logic, web apps, games, android apps, etc.
      • Java is a strongly typed language which means that in java whatever we create like a variable we are declaring it as an integer or any datatype before using it otherwise we get some compile-time error.
      • Java is robust as well as platform-independent which means that java has the ability to run on any operating system independently, to achieve this we have to install Java Development Kit(JDK) or Java Virtual Machine(JVM) for that OS.
      • Java code is compiled by the Compiler which converts java code into bytecode which is also known as executable code.
    • Python
      • Python is a loosely typed programming language because while programming we are not assigning any data type to the variable we are simply giving some value to these variables and when the interpreter interprets this variable then this variable are converted on that data type accordingly.
      • Python is also known as scripting language which is a sub-type of programming language and python code is executed line by line by the Interpreter at run time.
    • C#
      • C# pronounced as C sharp is a programming language a little bit similar to java programming language due to its syntactical similarity.
      • C# is used in backend development and its mainly platform-dependent C# refers to the windows operating system as it is developed by Microsoft
      • We can use C# with the .Net framework for backend development.
      • We can prefer the C# programming language if we are going to work with the Microsoft product like developing desktop apps, creating widgets for windows, and working with azure, and the .Net framework.
    • Javascript
      • Nowadays, Javascript is also referred for backend development and it is possible with the help of Node.js and Express.js In the backend.
      • Where Node.js provides a runtime environment for Javascript in the backend of web development.
      • Express.js is referred to as a middleware framework that provides some predefined method to take a request from the client-side for example get, post, put, etc

Database For Websites

Database is an important concept for any websites to hold users data in a relational table like for example database for school will contain students table, teachers table, time table for every teachers and class and this will be having some sort of connection between them like there is one teacher from teacher table which hold 10th class for monitioring then teacher will be a unique key for that class and that’s why we should choose those databases which will help us to optimize the way of fetching data from the database and send it to the end users accordingly.

Their are mainly eight types of databases which are Centralised Database, Hierarchical Database, Object-Oriented Database, Relational Database, No-SQL Database, Cloud Database, Distributed Database, Network Database. But for now we discuss some mainly used databases like Relational Database and No-SQL Database.

  • Majorly Used Databases:-
    • Relational Database:
      • This database follows relational data model, which stores data in table and we can access that data through row(tuple) and columns(attribute). and this table can have fixed number of columns but limitless number of rows.
      • Relational database provides SQL(Structured Query language) to manipulate, stores and maintaining data into database by writing query in SQL language.
      • Existing Relational Database that we can work in the backend is MYSQL which enables us to do CRUD operations on our data.
      • We can use realtional database where structure matters.
    • No-SQL:-
      • No-SQL stands for not only sql.
      • Nosql database allows us to store any type of databases which we dont know currently but some data will be appear in future and we can add that data into our database without fear with the help Nosql.
      • Existing NO-SQL Databases are MongoDB which enables us to handle this data fluently.

Hosting And Domain

Hosting is a method from which we can store our website code remotely on server by the help of third party websites likes hostinger, godaddy, DigitalOcean ..etc. and for that we need to pay some amount to them. Storing our data remotely enables us to access that data from anywhere around the world and this hosting websites provides some predefined tools from which we can manage/customize our website accordingly. This websites also provides some sub-domain at start for accessing purpose or it is up to you.

Domain can be further divided in to two:-

  • Domain Name:- Domain name is our website name from which our website is accessible by name for example google is a domain name.
  • Domain:- Domain is an extension like .com for commercial, .in for india, .org for organization, .ai for artificial intelligence etc.
  • To register a domain for a website we need to go and register on DNS websites like godaddy, etc. And we need to pay for them according to domain extension.
  • note:- we can access our website using IP address also.

3 thoughts on “How To Create A Complete Website From Top To Bottom.”

Leave a Comment

Scroll to Top