In this guide, we will explore the foundational elements of web development, focusing on HTML and CSS. This is the first step in creating a website, and we will keep it simple to ensure clarity and understanding. ## Understanding HTML ### What is HTML? HTML, or Hypertext Markup Language, defines the structure of a website. Think of it as the skeleton of your web page. The two main components we will focus on are **tags** and **attributes**. ### HTML Tags HTML tags are the building blocks of a web page. They define elements and structure content within an HTML document. Tags are enclosed in angle brackets and usually come in pairs: an opening tag and a closing tag. For example: ```html

This is a paragraph.

``` ### Creating Your First HTML File To create a web page, start by creating a file named `index.html`. This file will contain your HTML code. You can use any text editor, such as VS Code, Sublime Text, or Eclipse. Once you create the file, you can open it in a web browser to see your web page. ### Basic HTML Structure A simple HTML document includes the following structure: ```html Your Page Title

Hello, World!

``` ### Common HTML Tags - **Headings**: Use `

` to `

` for headings of different sizes. - Paragraphs: Use `
` for paragraphs of text. - Images: Use the `` tag to display images. Example: ```html ``` - Links: Use the `` tag to create hyperlinks. Example: ```html Go to Google ``` - Divisions: Use `
` to create sections of your page. - Spans: Use `` for inline elements that only take up as much space as needed. ### Attributes in HTML Attributes provide additional information about an element and are included in the opening tag. For example, the `href` attribute in an anchor tag specifies the URL of the link. Attributes can enhance the functionality of HTML elements, such as opening links in a new tab with `target="_blank"`. ### What is CSS? CSS, or Cascading Style Sheets, is used to style your web pages. It allows you to control the layout, colors, fonts, and overall appearance of your website. ### Basic CSS Syntax CSS rules consist of a selector and a declaration block. For example: ```css h1 { color: red; font-size: 24px; } ``` ### Inline CSS You can apply styles directly within an HTML element using the `style` attribute. For example: ```html
Hello, World!
``` ### Common CSS Properties - Color: Changes the text color. - Background Color: Sets the background color of an element. - Font Size: Adjusts the size of the text. - Margin: Controls the space outside an element. - Padding: Controls the space inside an element. - Border: Adds a border around an element. ### CSS Positioning CSS allows you to position elements on a page. The most effective way to position elements is by using Flexbox. Flexbox enables you to align items in a container easily. For example: ```css display: flex; justify-content: center; align-items: center; ``` ## Building a Simple Web Page To illustrate the concepts learned, we will build a simple homepage using HTML and CSS. Here’s a basic structure: ```html Grow Application

Welcome to the Grow Application

Building for a growing India.
``` ## Conclusion In this guide, we covered the basics of HTML and CSS, including essential tags, attributes, and styling techniques. Understanding these fundamentals is crucial for anyone looking to build a website. In future lessons, we will delve into JavaScript and explore more advanced web development concepts. Happy coding!