Web development has become an indispensable part of the modern world. Whether you are a blogger, an e-commerce company owner, or a software engineer, it is important to have basic knowledge of web technologies. In this comprehensive guide, we will delve into the fundamental building blocks of web development: HTML, CSS, JavaScript, DOM, and React.

1. HTML: The Basic Structure of the Web

1.1. Introduction to HTML

HTML (HyperText Markup Language) is the markup language that defines the basic structure of web pages. Browsers interpret HTML code to visually render web pages. HTML structures and gives meaning to content using a series of tags.

1.2. Basic HTML Tags

Some of the most basic tags used in HTML are:

<html>: The root element of an HTML document.
<head>: Contains meta-information about the document (title, style definitions, character set, etc.).
<title>: Defines the document title that appears in the browser tab or window title.
<body>: Contains the content of the web page (text, images, links, etc.).
<h1> - <h6>: Heading tags. <h1> represents the most important heading, while <h6> represents the least important heading.
<p>: Paragraph tag.
<a>: Hyperlink (link) tag.
<img>: Image tag.
<ul> and <ol>: Unordered and ordered list tags.
<li>: List item tag.
<div>: Division tag.
<span>: Inline division tag.

1.3. HTML Example


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>A Simple HTML Page</title>
</head>
<body>
    <h1>Hello World!</h1>
    <p>This is a simple HTML page.</p>
    <a href="https://www.example.com">Go to Example.com</a>
</body>
</html>

1.4. Innovations Brought by HTML5

HTML5 is the latest version of HTML and has brought significant innovations to the field of web development. New semantic tags (<article>, <aside>, <nav>, <header>, <footer>, etc.), video and audio support (<video> and <audio> tags), canvas (<canvas>), and local storage are features that came with HTML5.

2. CSS: Styling Web Pages

2.1. Introduction to CSS

CSS (Cascading Style Sheets) is a style language that defines how HTML elements are displayed. CSS is used to control colors, fonts, layouts, and other visual properties. By separating CSS from HTML, style definitions can be kept in a central location, making web pages easier to manage.

2.2. CSS Selectors

CSS selectors are used to determine which HTML elements to apply styles to. The most common CSS selectors are:

Element Selectors: Using the name of the HTML element (e.g., p, h1, a).
Class Selectors: Selectors that start with . and select elements with a specific class (e.g., .baslik).
ID Selectors: Selectors that start with # and select the element with a specific ID (e.g., #ana-baslik).
Attribute Selectors: Selectors that select elements with a specific attribute or attribute value (e.g., a[href], input[type="text"]).

2.3. CSS Syntax

CSS rules consist of two parts: a selector and a declaration block. The declaration block consists of property-value pairs.


selector {
    property: value;
    other-property: other-value;
}

2.4. CSS Example


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

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

.uyari {
    color: red;
    font-weight: bold;
}

2.5. Methods of Applying CSS to HTML

There are three basic methods for applying CSS to HTML:

Inline Style: Style is defined using the style attribute of the HTML element.
Internal Style: Style is defined within the <style> tag in the <head> section of the HTML document.
External Style: CSS rules are defined in a separate .css file and linked to the HTML document with the <link> tag.

Best practice is to keep CSS rules in an external file. This makes the code more organized and manageable.

3. JavaScript: Adding Interactivity to Web Pages

3.1. Introduction to JavaScript

JavaScript is a programming language that adds interactivity and dynamism to web pages. Many operations can be performed with JavaScript, such as responding to user interactions, validating data, creating animations, and communicating with the server.

3.2. Basic JavaScript Concepts

Variables: Areas used to store data (var, let, const).
Data Types: Numbers, texts (string), boolean (true/false), null, undefined.
Operators: Arithmetic operators (+, -, *, /), comparison operators (==, !=, >, <), logical operators (&&, ||, !).
Control Structures: if, else, for, while loops.
Functions: Reusable code blocks.
Events: User interactions (click, mouse movement, key press, etc.).

3.3. JavaScript Example


<button onclick="showAlert()">Show Alert</button>

<script>
function showAlert() {
    alert("Hello World!");
}
</script>

3.4. DOM Manipulation

JavaScript can access and modify HTML elements through the DOM (Document Object Model). This allows web pages to be updated dynamically.


<p id="demo">First Text</p>

<script>
document.getElementById("demo").innerHTML = "New Text";
</script>

3.5. JavaScript Libraries and Frameworks

The JavaScript ecosystem includes many libraries and frameworks that facilitate web development. jQuery, React, Angular, and Vue.js are some of the most popular.

4. DOM: Structure of Web Pages

4.1. Introduction to DOM

The DOM (Document Object Model) is a programming interface that represents the content and structure of a web page. It treats the HTML document as a tree structure and allows languages like JavaScript to access and modify this structure.

4.2. DOM Tree

In the DOM tree, each HTML tag is represented as a node. The root node is the <html> tag. Other nodes can be element nodes, text nodes, and attribute nodes.

Visual Explanation: The HTML document is thought of as a tree structure. At the top is the <html> tag, under which are the <head> and <body> tags. Each tag represents a node containing other tags and texts within it.

4.3. DOM Access and Manipulation

JavaScript provides various methods for accessing and modifying the DOM:

document.getElementById(id): Selects the element with the specified ID.
document.getElementsByClassName(className): Selects all elements with the specified class.
document.getElementsByTagName(tagName): Selects all elements with the specified tag.
document.querySelector(selector): Selects the first element that matches the CSS selector.
document.querySelectorAll(selector): Selects all elements that match the CSS selector.

Some of the methods used to modify the DOM:

element.innerHTML: Changes the content of the element.
element.setAttribute(attribute, value): Sets an attribute of the element.
element.removeAttribute(attribute): Deletes an attribute of the element.
element.appendChild(node): Adds a child node to the element.
element.removeChild(node): Deletes a child node from the element.

4.4. DOM Events

DOM events are used to respond to events that occur on a web page (user interactions, page loading, etc.). JavaScript captures events through event listeners and executes a specific block of code.

For example, to capture a button click event:


<button id="myButton">Click!</button>

<script>
document.getElementById("myButton").addEventListener("click", function() {
    alert("Button Clicked!");
});
</script>

5. React: Developing Modern Web Applications

5.1. Introduction to React

React is a popular JavaScript library developed by Facebook and used to create user interfaces (UI). Thanks to its component-based architecture, virtual DOM (Virtual DOM), and declarative approach, it is possible to develop high-performance and scalable web applications with React.

5.2. React Components

React applications consist of components, which are small, independent, and reusable pieces. Each component manages its own data (state) and interface (UI). Components can be combined with other components to create more complex interfaces.

Step-by-Step Instruction: To create a React component, first a JavaScript function or class is defined. This function or class returns the JSX code that defines the component's interface. JSX is an HTML-like syntax and makes it easier to write React components.

5.3. JSX

JSX (JavaScript XML) is an extension that allows you to use HTML-like syntax within JavaScript. It is used to define the interface of React components. JSX code is converted to JavaScript code during the compilation phase.


const element = <h1>Hello, React!</h1>;

5.4. React State and Props

State: Represents the data within a component. State has a direct impact on the component's behavior and interface. When the state changes, the component is automatically re-rendered.

Props (Properties): Represents the data passed to a component from the outside. Props are used to customize the component's behavior and interface. Props cannot be modified by the component (readonly).

5.5. React Example


import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Counter: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

export default Counter;

5.6. React Router

React Router is a library that allows you to navigate between different pages (views) in React applications. It is used to create single-page applications (SPAs). Companies offering Web Software Services often use technologies like React Router to develop modern and user-friendly web applications.

6. Web Development Tools and Resources

6.1. Code Editors

The most popular code editors used for web development are:

Visual Studio Code (VS Code)
Sublime Text
Atom
Notepad++

6.2. Browser Developer Tools

All modern browsers have developer tools that are used to inspect web pages, debug errors, and analyze performance. These tools can be used to inspect HTML, CSS, and JavaScript code, monitor network requests, and view console messages.

6.3. Version Control Systems

Git is the most popular version control system used in web development projects. Git is used to track code changes, manage different versions, and facilitate collaboration. Platforms such as GitHub, GitLab, and Bitbucket are used to host Git repositories and collaborate.

6.4. Package Managers

npm (Node Package Manager) and Yarn are package managers used in JavaScript projects. These tools are used to install, update, and manage dependencies for the project.

7. Real-Life Examples and Case Studies

7.1. E-commerce Website Development

When developing an e-commerce website, you may need to use many different technologies, such as HTML to structure product pages, CSS to create the site design, JavaScript to integrate shopping cart operations and payment systems, and React to create dynamic user interfaces.

7.2. Blog Platform Development

When developing a blog platform, you can follow steps such as structuring HTML articles, creating the blog design with CSS, integrating comment systems and search functions with JavaScript, and creating a user-friendly admin panel with React.

7.3. Social Media Application Development

When developing a social media application, you may encounter complex processes such as structuring HTML user profiles and posts, creating the application design with CSS, integrating real-time messaging and notification systems with JavaScript, and developing mobile applications with React Native.

8. Frequently Asked Questions

8.1. Where should I start learning web development?
It is best to start learning web development with HTML, CSS, and JavaScript. After learning these basic technologies, you can move on to more advanced libraries and frameworks like React.
8.2. Which code editor should I use?
Visual Studio Code (VS Code) is a popular and powerful option for web development. It is free and can be customized with many extensions.
8.3. Is React difficult to learn?
React's learning curve can be a bit steep, but if you have basic JavaScript knowledge, it is possible to learn React. You can better understand React by practicing a lot and developing sample projects.
8.4. Which resources can I use for web development?
Platforms like MDN Web Docs, W3Schools, freeCodeCamp, and Udemy are great resources for learning web development.

9. Comparative Tables

9.1. Frontend Framework Comparison

Framework	Advantages	Disadvantages	Use Cases
React	Component-based, virtual DOM, large community	Learning curve, JSX	Single-page applications, dynamic UIs
Angular	Full framework, TypeScript, strong architecture	Complex, large size	Large-scale applications, enterprise projects
Vue.js	Easy to learn, flexible, lightweight	Smaller community, fewer resources	Small and medium-sized projects, prototypes

9.2. CSS Preprocessor Comparison

Preprocessor	Advantages	Disadvantages	Features
Sass	Variables, nested rules, mixins, functions	Requires compilation	Ideal for large projects
Less	Variables, nested rules, mixins, functions	Requires compilation	Simpler syntax
Stylus	Flexible syntax, variables, functions	Less popular	Suitable for minimalist projects

10. Conclusion and Summary

In this comprehensive guide, we have deeply examined HTML, CSS, JavaScript, DOM, and React, which are the fundamental building blocks of web development. We learned how to structure web pages with HTML, style them with CSS, add interactivity with JavaScript, access HTML elements with DOM, and develop modern web applications with React. Since web development is a constantly evolving field, it is important to continue learning and keep up with new technologies. We wish you success!

Custom Server Services

Standard Servers

Knowledge Base