HTML is the foundation of any website. It structures the content and tells browsers how to display text, links, images, and other elements. Learning HTML is the first step in web development.

Fun Facts

• HTML stands for HyperText Markup Language
• HTML was invented by Tim Berners-Lee
• Elements are defined using opening and closing tags
• The very first website created by Tim Berners-Lee in 1991 is still online
• HTML is not a programming language-it's a markup language

 <h1>Welcome to My Website</h1>
 <p>This is a paragraph in HTML</p>
        

CSS (Cascading Style Sheets) controls how HTML elements appear on the page. With CSS, you can change colors, fonts, layout, and more.

There are different ways to include CSS: inline, internal, and external. Modern websites mostly use external stylesheets for maintainability.

• CSS styles HTML elements visually
• Uses selectors to target elements (e.g., h1, .class, #id)
• Properties like color, font-size, margin, and padding
• Can use media queries for responsive design
• Preprocessors like SASS extend CSS features

 h1 {
   color: blue;
  font-size: 2rem;
 }
        

JavaScript makes websites interactive. You can update content dynamically, validate forms, and respond to user actions like clicks.

It runs in the browser and is essential for building modern web apps, especially when combined with HTML and CSS.

• JavaScript is a programming language for the web
• Adds interactivity like click events and animations
• Uses functions and variables to control behavior
• Can manipulate HTML with the DOM (Document Object Model)
• Popular libraries include jQuery, React, and Vue

 document.querySelector('h1').addEventListener('click', () => {
  alert('You clicked the heading!');
  });
        

React is a JavaScript library for building user interfaces. It uses components—small, reusable pieces of UI—to build large applications efficiently.

React leverages JSX (JavaScript + XML) and manages app state through hooks like useState and useEffect. It's widely used for SPAs (Single Page Applications).

• Component-based architecture
• Uses JSX to combine HTML with JavaScript
• State management via hooks
• Declaritive rendering with virtual DOM
• Scales well complex UIs

function App() {
 const [count, setCount] = React.useState(0);
 return (
   <div>
     <p>You clicked {count} times</p>
     <button onClick={() => setCount(count + 1)}>Click Me</button>
              </div>
  );
}
          

Tailwind CSS is a utility-first framework that allows you to style your components directly in your HTML or JSX using pre-defined classes.

It eliminates the need to write custom CSS for most elements and is highly customizable via its config file. It's especially powerful when combined with React.

• Utility-based styling framework
• Speeds up development with pre-built classes
• Easy to make responsive designs
• Highly customizable and theme-able
• Ideal for rapid UI prototyping

<pre class="bg-gray-900 text-green-300 p-2 rounded">
 <code>npm install my-lib</code>
</pre>