XQA
Back to Web Development
2026-01-307 min read

Introduction (Web Development)

Learn Introduction (Web Development) step by step with clear examples and exercises.

Title: Introduction to Web Development (HTML/CSS)

Why This Matters

Web development is a crucial skill today, enabling you to create and design websites that are accessible to millions of users worldwide. HTML (HyperText Markup Language) and CSS (Cascading Style Sheets) are the building blocks of web development, allowing developers to structure content and style web pages respectively. Understanding these technologies will open doors to a wide range of career opportunities, from freelance web design to full-time positions at tech companies.

The Impact of Web Development

Web development is an essential skill for creating engaging, user-friendly websites that can help businesses grow and reach their target audience effectively. With the rise of e-commerce, social media platforms, and online services, the demand for skilled web developers continues to increase.

Prerequisites

Before diving into HTML and CSS, it's essential to have a basic understanding of the following:

  1. Familiarity with computers and operating systems (Windows, Mac, Linux)
  2. Basic computer navigation skills (using file explorers, text editors, etc.)
  3. Understanding of how web browsers work (Chrome, Firefox, Safari, etc.)
  4. A text editor for writing HTML/CSS code (Sublime Text, Notepad++, Visual Studio Code)
  5. Basic understanding of file paths and directory structures
  6. Familiarity with version control systems such as Git
  7. Understanding of basic web design principles (color theory, typography, layout)

Core Concept

HTML Basics

HTML is used to structure content on a web page. It consists of elements (also known as tags), which are enclosed in angle brackets < >. Here's an example of a simple HTML document:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My First Web Page</title>
</head>
<body>
<h1 id="main-heading">Welcome to My Website!</h1>
<p class="intro-paragraph">This is a paragraph.</p>
<img src="my-image.jpg" alt="A beautiful landscape image" class="landscape-image">
<nav>
<ul>
<li><a href="about.html">About Us</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="contact.html">Contact Us</a></li>
</ul>
</nav>
</body>
</html>

In the example above, we have an HTML document with a DOCTYPE declaration, an html element that contains a head and a body. The head section includes a meta tag for character encoding and a title for the web page. The body section contains an h1 heading (a first-level heading) with an ID attribute, a p paragraph with a class attribute, an image with an alt attribute, and a navigation menu with links to other pages on our website.

CSS Basics

CSS is used to style HTML elements, allowing developers to customize the appearance of their web pages. CSS rules are applied to HTML elements using selectors, properties, and values. Here's an example of a simple CSS rule:

h1 {
color: red;
font-size: 36px;
line-height: 1.2;
text-align: center;
margin: 0 auto; /* centers the heading horizontally */
}

.intro-paragraph {
font-size: 18px;
line-height: 1.5;
}

.landscape-image {
width: 100%;
max-width: 800px;
height: auto;
display: block;
margin: 0 auto; /* centers the image horizontally */
}

In this example, we have CSS rules that target the h1, .intro-paragraph, and .landscape-image classes to style their respective HTML elements. To apply these CSS rules to our HTML document, we would link an external stylesheet or include the CSS code within a style tag in the HTML file or inside a separate .css file.

Worked Example

Let's create a simple web page using HTML and CSS:

  1. Create a new text file named index.html.
  2. Add the following HTML code to the file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My First Web Page</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1 id="main-heading">Welcome to My Website!</h1>
<p class="intro-paragraph">This is a paragraph.</p>
<img src="my-image.jpg" alt="A beautiful landscape image" class="landscape-image">
<nav>
<ul>
<li><a href="about.html">About Us</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="contact.html">Contact Us</a></li>
</ul>
</nav>
<style>
h1 {
color: red;
font-size: 36px;
line-height: 1.2;
text-align: center;
margin: 0 auto; /* centers the heading horizontally */
}

.intro-paragraph {
font-size: 18px;
line-height: 1.5;
}

.landscape-image {
width: 100%;
max-width: 800px;
height: auto;
display: block;
margin: 0 auto; /* centers the image horizontally */
}
</style>
</body>
</html>
  1. Create another text file named styles.css. Add the following CSS code to the file:
body {
background-color: lightblue;
}

h1 {
color: red;
font-size: 36px;
line-height: 1.2;
text-align: center;
margin: 0 auto; /* centers the heading horizontally */
}

p {
font-size: 18px;
line-height: 1.5;
}

img {
width: 100%;
max-width: 800px;
height: auto;
display: block;
margin: 0 auto; /* centers the image horizontally */
}
  1. Save both files in the same folder.
  2. Open the index.html file with a web browser (Chrome, Firefox, etc.) to view your first web page.

Common Mistakes

  1. Forgetting to close HTML tags: Always remember to close your HTML tags properly, such as ``

,

, and .

  1. Incorrectly nesting HTML elements: Ensure that you are correctly nesting HTML elements within one another (for example, a p element should be nested within an h1, not the other way around).
  2. Ignoring whitespace in HTML: Whitespace matters in HTML! Make sure to include appropriate amounts of space between elements and attributes for proper rendering.
  3. Overlooking CSS syntax: Ensure that your CSS rules are correctly formatted, with a selector, property, and value separated by a colon (e.g., h1 { color: red; }).
  4. Not testing in multiple browsers: Test your web pages in various browsers to ensure compatibility across different platforms.
  5. ### Common Mistakes - Best Practices
  • Using meaningful HTML element names: Use semantic HTML elements such as header, footer, nav, and article instead of generic ones like div.
  • Organizing your HTML code: Keep your HTML code clean and easy to read by using indentation, comments, and logical grouping.
  • Validating your HTML and CSS: Use online tools such as the W3C Markup Validation Service (https://validator.w3.org/) and the Jigsaw CSS Validator (http://jigsaw.w3.org/css-validator/) to ensure that your code is error-free.

Practice Questions

  1. Write an HTML document that includes a heading, paragraph, and an image with a caption. Use semantic HTML elements where appropriate.
  2. Create a CSS rule that styles all h2 elements to have a font size of 24 pixels and a line height of 1.3.
  3. Modify the example from the Worked Example section to include a navigation menu with links to other pages on your website using semantic HTML elements.
  4. ### Practice Questions - Best Practices
  • Using meaningful attribute values: Use descriptive attribute values that accurately describe their purpose (e.g., use alt attributes for images instead of title).
  • Organizing CSS code: Keep your CSS organized by grouping related rules together in modules or files, and use comments to explain complex sections of code.
  • Testing on multiple devices: Test your web pages on various devices (desktops, tablets, smartphones) to ensure that they are responsive and accessible.

FAQ

  1. What is the purpose of HTML?
  • HTML is used to structure content on a web page, providing a way to organize and display text, images, videos, and more.
  1. What is the purpose of CSS?
  • CSS is used to style HTML elements, allowing developers to customize the appearance of their web pages by controlling properties such as colors, fonts, layout, and animations.
  1. How do I link an external stylesheet to my HTML document?
  • In the head section of your HTML document, include a link tag with the rel, href, and type attributes set to "stylesheet", the path to your CSS file, and "text/css" respectively (e.g., ``).
  1. What is the difference between HTML and XHTML?
  • HTML is a free-form markup language that allows for greater flexibility in tag structure, while XHTML requires strict adherence to XML syntax rules (e.g., properly closing all tags and using lowercase letters for tag names).
  1. What are some best practices for writing clean and maintainable HTML/CSS code?
  • Use semantic HTML elements, write meaningful attribute values, use comments to explain complex sections of code, and keep your CSS organized by grouping related rules together in modules or files. Additionally, test your web pages on various devices and validate your HTML and CSS to ensure error-free code.
Introduction (Web Development) | Web Development | XQA Learn