Introduction:

When it comes to web development, there are three main languages that you need to know: HTML, CSS, and JavaScript. These three languages are the building blocks of every website on the internet, and together they form the backbone of web development.

Second Step: Languages

HTML :

HTML, or Hypertext Markup Language, is the foundation of every website. It's a markup language that is used to structure and define the content of a webpage.

Think of HTML as the skeleton of a webpage - it provides the structure and organization for all of the other elements. HTML uses tags to define the various elements of a webpage, such as headings, paragraphs, images, and links.

For example, the following HTML code defines a basic webpage structure:

<!DOCTYPE html>
<html>
  <head>
    <title>My Webpage</title>
  </head>
  <body>
    <h1>Welcome to My Webpage</h1>
    <p>This is some sample text.</p>
    <img src="image.jpg" alt="An image">
    <a href="https://www.example.com">Click here to go to Example.com</a>
  </body>
</html>

In this example, we have defined a basic webpage with a title, some sample text, an image, and a link. The tags used in this example include the <!DOCTYPE> declaration, the <html> tag that contains the entire webpage, the <head> tag that contains information about the webpage, and the <body> tag that contains the content of the webpage.

By learning HTML, you can create and structure the content of a webpage, which is essential for every web developer.

CSS :

CSS, or Cascading Style Sheets, is a language used to style and visually enhance the elements defined in HTML. Think of CSS as the "clothing" of a webpage - it adds color, fonts, layouts, and other visual elements to make the content more appealing and readable.

CSS works by using selectors to target specific HTML elements and applying styles to them. Styles can be applied using properties, such as color, font-size, and background-color, among others.

For example, the following CSS code styles the h1 element in our previous HTML example with a red color:

h1 {
  color: red;
}

In this example, we're using the h1 selector to target the heading element and applying the color property with a value of red.

CSS can be applied to HTML in several ways, including inline styles, internal styles, and external stylesheets. Learning CSS is essential for every web developer to make their websites visually appealing and user-friendly.

JavaScript :

JavaScript is a programming language used to add interactivity and functionality to a webpage. It allows developers to create dynamic and responsive web pages, providing users with a more engaging and personalized experience.

JavaScript works by manipulating the Document Object Model (DOM), which is a programming interface for web documents. By using JavaScript to manipulate the DOM, developers can change the content, style, and behavior of a webpage on the fly, in response to user actions or other events.

For example, the following JavaScript code changes the text of a webpage when a button is clicked:

let button = document.querySelector('button');
let text = document.querySelector('p');

button.addEventListener('click', function() {
  text.textContent = 'Hello, world!';
});

In this example, we're using JavaScript to select a button and a paragraph element using the querySelector method. We're then adding an event listener to the button that changes the text content of the paragraph to 'Hello, world!' when it's clicked.

JavaScript can also be used for more advanced functionality, such as form validation, creating animations, and communicating with servers. By learning JavaScript, developers can create more interactive and engaging web pages that provide users with a better experience.

EXTRA Terms :

I will introduce some key terms that are essential for understanding web development and that you can look for it to better understand them:

Accessibility

Basics of SEO

Responsive Web Design

Liaichi's Blog