Basics of Web Developement and Designing Simple Webpage

Introduction to Web Development – Learn the Basics from Scratch

1. What Is Web Development?

Web development is the process of creating, building, and maintaining websites and web applications that run on the internet.

Whenever you visit websites such as Google, YouTube, Amazon, or Instagram, you are using something created through web development.

Web development involves writing code, designing layouts, managing information, and creating interactive features that allow users to interact with websites.

Examples of websites:

• Educational websites

• Shopping websites

• Personal portfolio websites

• Social media platforms

• Banking websites

• Business websites

2. How Does a Website Work?

When you enter a website address in your browser, several things happen:

1. You enter a website URL (for example, www.google.com).

2. Your browser sends a request to the website's server.

3. The server processes the request and sends the required files.

4. Your browser reads the HTML, CSS, and JavaScript files.

5. The browser displays the website on your screen.

Important terms:

• Browser: Software used to access websites, such as Google Chrome, Firefox, and Microsoft Edge.

• Server: A computer or system that stores and delivers website resources.

• Client: The device or browser requesting information from a server.

• URL: The address used to access a website.

• HTTP/HTTPS: Protocols used for communication between browsers and web servers.

3. Types of Web Development

Web development is generally divided into three major areas.

A. Front-End Development

Front-end development focuses on the part of a website that users can see and interact with.

Examples:

• Navigation menus

• Buttons

• Images

• Text

• Website layouts

• Forms

The main technologies are:

• HTML

• CSS

• JavaScript

B. Back-End Development

Back-end development handles the server-side operations of a website.

It manages:

• User authentication

• Database operations

• Processing information

• Server communication

• Business logic

Popular back-end technologies include:

• Python

• Java

• PHP

• JavaScript (Node.js)

C. Full-Stack Development

Full-stack development involves working with both front-end and back-end technologies.

A full-stack developer can build the user interface and also develop the server-side functionality of a website.

4. Three Main Technologies of Web Development

The three fundamental technologies used in front-end development are HTML, CSS, and JavaScript.

A. HTML – HyperText Markup Language

HTML is used to create the basic structure of a website.

It tells the browser what content should appear on a webpage.

Example:

<!DOCTYPE html>
<html>
<head>
    <title>My First Website</title>
</head>
<body>

    <h1>Welcome to My Website</h1>
    <p>This is my first webpage.</p>

</body>
</html>

Explanation:

• <!DOCTYPE html> – Declares an HTML5 document.

• <html> – Root element of the webpage.

• <head> – Contains page information and metadata.

• <title> – Defines the browser tab title.

• <body> – Contains visible webpage content.

• <h1> – Creates a main heading.

• <p> – Creates a paragraph.

Common HTML Tags

Tag	Purpose
<h1> to <h6>	Headings
<p>	Paragraph
<br>	Line break
<hr>	Horizontal line
<a>	Hyperlink
<img>	Image
<ul>	Unordered list
<ol>	Ordered list
<li>	List item
<div>	Block container
<button>	Button
<input>	Input field

B. CSS – Cascading Style Sheets

CSS is used to style and design HTML elements.

It controls:

• Text colours

• Background colours

• Font sizes

• Spacing

• Borders

• Layouts

• Responsive designs

Example:

body {
    background-color: lightgray;
    font-family: Arial, sans-serif;
}

h1 {
    color: darkblue;
    text-align: center;
}

p {
    font-size: 18px;
    color: black;
}

Explanation:

• body – Selects the body element.

• background-color – Changes the background colour.

• font-family – Changes the font.

• color – Changes text colour.

• text-align – Aligns text.

• font-size – Changes text size.

Three Ways to Apply CSS

1. Inline CSS – Written directly inside an HTML element using the style attribute.

2. Internal CSS – Written inside a <style> element in the HTML document.

3. External CSS – Written in a separate .css file and connected using a <link> element.

C. JavaScript – Programming Language

JavaScript makes websites interactive and dynamic.

It can be used to:

• Display messages

• Validate forms

• Respond to button clicks

• Change webpage content

• Create interactive menus

• Build web applications

Example:

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Example</h2>

<button onclick="showMessage()">Click Me</button>

<script>
function showMessage() {
    alert("Welcome to Web Development!");
}
</script>

</body>
</html>

When the user clicks the button, JavaScript displays a message.

5. Understanding HTML, CSS and JavaScript Together

Think of building a website like constructing a house:

• HTML = Structure of the house.

• CSS = Interior design and appearance.

• JavaScript = Interactive features and functionality.

All three technologies work together to create modern websites.

6. Tools Required for Web Development

You do not need expensive software to start learning web development.

The basic tools are:

1. Code Editor

• Visual Studio Code

• Notepad++

• Notepad

2. Web Browser

• Google Chrome

• Microsoft Edge

• Mozilla Firefox

3. Basic Computer Knowledge

A computer or laptop is recommended for practising and building websites.

7. How to Create Your First Website

Follow these steps:

Step 1: Open Visual Studio Code or Notepad.

Step 2: Create a new file named index.html.

Step 3: Write the following code:

<!DOCTYPE html>
<html>
<head>
    <title>My First Webpage</title>
</head>

<body>

    <h1>Welcome to My First Website!</h1>

    <p>Hello! My name is Rohith.</p>

    <h2>About Me</h2>

    <p>I am learning web development.</p>

    <button>Click Here</button>

</body>
</html>

Step 4: Save the file.

Step 5: Open the saved index.html file in your web browser.

Congratulations! You have created your first webpage.

8. What Is Responsive Web Design?

Responsive web design is an approach that makes websites adjust to different screen sizes and devices.

A responsive website should work properly on:

• Desktop computers

• Laptops

• Tablets

• Smartphones

Example of a basic responsive CSS rule:

@media (max-width: 600px) {
    body {
        font-size: 14px;
    }

    h1 {
        font-size: 24px;
    }
}

This media query applies different styles when the screen width is 600 pixels or less.

9. Important Web Development Terminology

Term	Meaning
Front-End	User-facing part of a website
Back-End	Server-side functionality
HTML	Webpage structure
CSS	Webpage styling
JavaScript	Webpage interactivity
Domain	Human-readable website address
Hosting	Service that makes a website accessible online
Database	Organised storage of information
Framework	Tools and structure for developing applications
Responsive Design	Design that adapts to different screen sizes

10. Practice Exercises

Test your understanding by completing these exercises.

Exercise 1: What is the full form of HTML?

Exercise 2: Which technology is used to style a webpage?

Exercise 3: Which language makes a website interactive?

Exercise 4: What is the purpose of the <h1> tag?

Exercise 5: Which HTML tag is used to insert an image?

Exercise 6: What is the difference between front-end and back-end development?

Exercise 7: Create a simple webpage containing:

• Your name as a heading.

• A paragraph about yourself.

• Your favourite hobby.

• An image.

• A button.

11. Answers to Practice Exercises

1. HyperText Markup Language.

2. CSS.

3. JavaScript.

4. It creates a top-level heading.

5. <img>.

6. Front-end handles the user interface, while back-end handles server-side operations and data processing.

7. The student should create an HTML document containing all the requested elements.

12. Conclusion

Web development is an important skill in today's digital world. Learning HTML, CSS, and JavaScript provides a strong foundation for creating websites and web applications.

Start with HTML, understand CSS, and then practise JavaScript. Consistent practice and small projects will help you gradually improve your development skills.

Remember: Every professional website developer started by learning the basics. Start small, practise regularly, and keep building!

End of Lesson 1 – Introduction to Web Development.