Introduction to Web Development: HTML, CSS, JavaScript
Web development is the process of creating websites and web applications that run on the internet. It involves a combination of different technologies and programming languages working together to deliver content and functionality to users. The core technologies that every web developer needs to know are HTML, CSS, and JavaScript.
HTML (HyperText Markup Language)
HTML is the foundation of any webpage. It provides the structure and content of the page using a system of elements or 'tags'. These tags define headings, paragraphs, links, images, forms, and other elements of the page.
My First Webpage
Welcome to My Webpage
This is a paragraph of text.
In this example:
declares the document type and version of HTML.
is the root element of the page.
contains meta-information like the title of the page.
contains the visible content of the page.
defines a top-level heading.
defines a paragraph of text.
CSS (Cascading Style Sheets)
CSS is used to control the presentation and styling of HTML elements. It allows developers to define how the content of a webpage looks, including colors, fonts, layout, and responsiveness across different devices.
h1 {
color: blue;
text-align: center;
}
p {
font-size: 16px;
line-height: 1.5;
}
This CSS code will:
- Make all
headings blue and center-aligned.
- Set the font size of all
paragraphs to 16 pixels and adjust the line height for better readability.
CSS can be applied in three ways:
- Inline CSS: Directly within HTML elements.
- Internal CSS: Within a
tag inside the
of the HTML document.
- External CSS: In a separate
.css
file, linked to the HTML document.
JavaScript
JavaScript is a programming language that adds interactivity and dynamic functionality to webpages. It runs on the client-side (in the user's browser) and allows developers to create interactive elements, handle user events, make asynchronous requests, and manipulate the DOM (Document Object Model).
function showAlert() {
alert('Hello, World!');
}
// Adding an event listener to a button
const button = document.querySelector('button');
button.addEventListener('click', showAlert);
In this example:
showAlert()
is a JavaScript function that displays an alert box with the message 'Hello, World!'.- The code selects a button element and adds an event listener that triggers the
showAlert()
function when the button is clicked.
Getting Started
To start with web development, you’ll need:
- A Text Editor: VSCode, Sublime Text, or Atom.
- A Web Browser: Chrome, Firefox, or Safari.
- Basic Knowledge: Familiarity with computer basics and file management.
Conclusion
HTML, CSS, and JavaScript are the foundational technologies for web development. Understanding these technologies is essential for creating modern, interactive, and responsive websites. Start with HTML to structure your content, add CSS to style it, and use JavaScript to make it interactive. Happy coding!