3.1 Website Development

Introduction

The development of a website first needs a plan, next tools & resources are chosen & gathered, and then it is constructed. It is important to first understand the purpose of the website and the actions you would like visitors to do. Next, you design the navigation layout and appearance of the website. The website is then created using code to accomplish your desired goals. Upon completion, you test the system to ensure proper functioning. The website is finally launched and accessible to everyone.

Definition

Website Development is the process of planning, designing, building, testing, and launching a website. It involves both front-end (what users see) and back-end (what happens behind the scenes) development.

Main Idea

A website development can be split into two segments:

• Front-end (client-side)
• Back-end (server-side)

The most common reasons for this split are:

• Website development & maintenance is easier when the front-end and back-end are kept apart.
• Not everyone is an expert at both. Developers may each concentrate on their areas of expertise because front-end and back-end developers work independently.

While back-end developers take care of the technical details like databases and server logic, front-end developers focus on making the website appear attractive and be user-friendly.

Core Concept

Front-end Development

In a website, the front-end comprises everything you see and interact with, such as buttons and images. It is designed to be user-friendly. Front-end developers are responsible for making the website attractive and user-friendly. To do this, they use languages like HTML, CSS, and JavaScript.

Front-end is also referred to as client-side.

Back-end Development

The back-end is where all the data resides and is displayed on a demand basis. Since the data generally resides on the server, the back-end is also referred to as server-side. Back-end developers ensure that everything functions properly behind the website. Back-end developers work on the aspects of the website that you cannot see, such as data management, which they accomplish using a variety of coding languages like Ruby, Python, PHP, etc.

Detailed Explanation

How Front-end and Back-end Work Together

When a user interacts with a webpage, the front-end sends requests to the back-end, which processes these requests, interacts with databases, and generates dynamic content.

Example: Online Store

For developing an online store and to run it smoothly, both front-end and back-end are required.

• Shops are created using front-end technologies like HTML, CSS, and JavaScript, for items to be purchased by the visitors.
• On the other hand, a database comprising item details, cost, and stock, etc., resides on the back-end.
• When a customer places an order, the order information is sent from the front-end to the back-end.
• The back-end then checks the data, updates the database, and administers the stock.

Responsive Design

Websites with responsive design adjust their functionality and layout to fit different screen sizes, including those of desktop computers, tablets, and mobile phones.

One-size-fits-all website design was the norm in the past, which led to awkward presentations on smaller devices. This problem is solved with responsive design, which makes use of adaptable layouts via which items are scaled in proportion to the screen in terms of percentages rather than fixed pixel values. For example, to improve accessibility on a mobile device, a desktop menu may change to a stacked menu.

Client-Server Architecture

The client-server architecture describes how front-end and back-end communicate:

• Client (Front-end): The user's device (computer, tablet, smartphone) running a web browser.
• Server (Back-end): A computer that stores the website's data and logic.
• Internet: The communication medium between client and server.
• Central Data Source: The database where all data is stored.

When a user requests a webpage, the client sends a request to the server over the internet. The server processes the request, retrieves data from the database, and sends the response back to the client.

Intermediate Level

At the intermediate level, you should understand the technologies involved.

• HTML: Structure and content.
• CSS: Styling and layout.
• JavaScript: Interactivity and dynamic behavior.

• Ruby, Python, PHP, Java, Node.js: Server-side programming languages.
• MySQL, PostgreSQL, MongoDB: Databases.
• Apache, Nginx: Web servers.

• Uses media queries to adjust layout based on screen size.
• Uses flexible grids and flexible images.
• Uses percentage-based widths instead of fixed pixels.

Important Points

• - Website development has two main parts: front-end and back-end.
• - Front-end = client-side (HTML, CSS, JavaScript).
• - Back-end = server-side (Ruby, Python, PHP, databases).
• - Front-end is what users see; back-end is what happens behind the scenes.
• - Responsive design adjusts layout to different screen sizes.
• - Client-server architecture describes how front-end and back-end communicate.
• - Online stores require both front-end and back-end.

Remember

• - Front-end = client-side.
• - Back-end = server-side.
• - Front-end = HTML, CSS, JavaScript.
• - Back-end = Ruby, Python, PHP, databases.
• - Responsive design = adjusts to screen size.
• - Client-server = communication model.
• - Both front-end and back-end needed for a complete website.

Common Mistakes

• - Confusing front-end with back-end.
• - Thinking that front-end is only about design (it also includes interactivity).
• - Assuming that back-end is not needed for simple websites (some simple sites may not need a back-end, but most do).
• - Forgetting that responsive design is important for mobile users.
• - Thinking that HTML, CSS, and JavaScript are back-end languages (they are front-end).
• - Confusing the client with the server.

Quick Revision

• Website development = front-end + back-end.
• Front-end: client-side, HTML, CSS, JavaScript, what users see.
• Back-end: server-side, Ruby, Python, PHP, databases, behind the scenes.
• Responsive design: adjusts layout to screen size.
• Client-server architecture: client (front-end) requests, server (back-end) responds.
• Online stores require both front-end and back-end.

60-Second Revision

• Front-end = client-side (HTML, CSS, JavaScript).
• Back-end = server-side (Ruby, Python, PHP, databases).
• Front-end = what users see.
• Back-end = behind the scenes.
• Responsive design = adjusts to screen size.
• Client-server = communication model.
• Warning: Don't confuse front-end with back-end; they are different parts of website development.