Created by Turbolearn AI

Project Setup and Initial Structure

We're diving into a practical project to solidify our HTML knowledge. This project
involves creating a webpage with different sections. You'll also get a homework
project to reinforce the concepts learned.

Project Overview
The goal is to replicate a webpage consisting of various sections:

Intro section
Education section
Work Experience section
Skills section
Achievements section
Projects section

The aim is to create a similar webpage, focusing on structure and content.

Breaking Down the Structure

Let's break down the webpage into manageable sections:

Header Section: Contains the name (as a heading) and social handles (contact,
LinkedIn, GitHub).
Image/Bio Section: An image alongside a brief "About" section.

Structuring Elements
Headings: Use <h1>, <h2>, <h3>, etc., tags for titles.
Text: Use <p> (paragraph) tags for text content.
Links: Implement <a> (anchor) tags for creating hyperlinks.
Images: Use <img> tags to embed images.
Lists: Employ <ul> (unordered list) and <ol> (ordered list) tags for lists.

Step-by-Step Implementation

Page 1
 Created by Turbolearn AI

1. Folder Creation
Create a dedicated folder for the project. For example, lecture10.

2. HTML File
Create an index.html file within the folder.

3. Boilerplate Code
Use Emmet (!) to generate the basic HTML structure.

4. Generic Container (<div>)

Wrap the entire content inside a <div>.

The <div> tag serves as a generic container for grouping and styling
elements. It helps in organizing the structure of the webpage.

5. Section 1: Header
Create a <div> for the first section, containing the name and contact details.

Page 2
 Created by Turbolearn AI

<div>
<h1>Love Babbar</h1>
<p>Contact: [email protected]</p>
</div>
```## Section Creation and Table Representation

Initially, the presenter sets up the basic structure with **paragraphs**,

To create a more structured layout, the presenter considers a section with

* **Column 1**: Contains the image.

* **Column 2**: Contains the paragraph.

## Constructing a Table in HTML

To implement the two-column layout, the HTML `<table>` element is used. Th

* The first `<td>` contains an `<img>` tag, which displays the image.
* The second `<td>` contains a `<p>` tag, which displays the paragraph.

## Education Section

A new section for "Education" is created.

* The section starts with an `<h2>` heading: `Education`.

* An unordered list `<ul>` is used to list educational details.
* Each list item `<li>` contains information about the education.

## Work Experience Section

A "Work Experience" section is created, similar to the education section,

* The section starts with an `<h2>` heading: `Work Experience`.

* Within the "Work Experience" section, there are subsections for each j
* Each job subsection contains:
* An `<h3>` heading with the company name.
* A paragraph describing the role.
* An unordered list detailing responsibilities or achievements.

## Skills Section

A "Skills" section is created to list technical skills.

* The section starts with an `<h2>` heading: `Skills`.

* An unordered list `<ul>` is used to list the skills.
* Each list item `<li>` contains a skill.

## Achievements Section

An "Achievements" section is created to highlight accomplishments.

* The section starts with an `<h2>` heading: `Achievements`.

* An unordered list `<ul>` is used to list the achievements.
* Each list item `<li>` contains a description of the achievement.
## Unordered Lists and Items

Page 3
 Created by Turbolearn AI

Here's a breakdown of creating an unordered list with specific content in

1. Create an **unordered list**.
2. Add **three items** to the list.
3. Each item contains:
* A **heading**.
* A **paragraph**.
* Another **paragraph** with an **anchor tag**.
* Yet another **paragraph** with an **anchor tag**.

## Coding the List Items

Let's translate that structure into code. Suppose we have an unordered lis

Here's a walk through for the first item:

1. Create a **heading**:
* Content: "Library".
2. Create a **paragraph** after the heading.
3. Create another **paragraph** after the first one:
* Content: "Hosted Link".
4. Create a final **paragraph** that includes an anchor tag:
* Text: "Get Hubly".
* Link: `abcd.com` (or any desired URL).

The code is copied and adjusted for the other list items, changing heading

## Building Page Sections

### Friendily Chat App Section

* **Heading**: "Friendily Chat App".

* **Paragraph**: Insert a descriptive message.
* Include a **link to a blog**.

### Third List Item

* Add a heading, then a paragraph.

* Include hosted link and a GitHub link.
* Replace placeholders with actual content.

## Verifying the Project

Ensure the sections render correctly on the page.

## <footer> Adding a Footer Section

To add a footer section:

1. Use the `<footer>` tag.

2. Add a paragraph inside the footer.
3. Include the desired text, like a copyright notice.

```html
<footer>
<p>Copyright 2024</p>
</footer>

Page 4
 Created by Turbolearn AI

Special Characters
If special characters like the copyright symbol don't render correctly, use named or
numeric codes. For example, to display the copyright symbol ©, use &copy; or &#169;.

Analyzing the Code Structure

The website structure can be broken down into sections and elements:

1. Enclose the entire page within a <div>.

2. Consider sections for different parts of the content.
3. Use headings (<h1>, <h2>) for titles.
4. Use <p> for paragraphs.
5. Use <a> for anchor tags (links).

Section Breakdown

Page 5
 Created by Turbolearn AI

Header Section:
An <h1> tag for the main heading.
Paragraphs for additional details.
Anchor tags for links.
Image and Paragraph Section:
Consider this as a table with a single row and two columns.
One column contains an image.
The other contains a paragraph.
Skills Section:
An <h2> tag for the section heading.
An unordered list (<ul>) for listing skills.
Achievements Section:
An <h2> tag for the section heading.
An unordered list for achievements.
Projects Section:
An <h2> tag for the section heading.
List items (<li>) for each project.
Each list item contains:
An <h3> tag.
A paragraph.
A paragraph with an anchor tag.
Another paragraph with an anchor tag.

Frequently Asked Questions Section

The goal is to create an interactive section where clicking a question reveals the
answer.

Adding the FAQ Section

Before the footer, add a "Frequently Asked Questions" section with a heading:

Page 6
 Created by Turbolearn AI

<h2>Frequently Asked Questions</h2>

```## Details Tag: Creating Interactive FAQs

The **details** tag is used to create a question with a hidden answer that

Here's a breakdown:

1. **Details Tag**: The outer container.

2. **Summary Tag**: Holds the question.
3. **Content**: The answer, placed below the summary tag.

Here's the basic HTML structure:

```html
<details>
<summary>Question</summary>
Answer
</details>

Summary Tag
The summary tag is nested inside the details tag. It lets you specify a question that
the user can click on to reveal or hide the answer.

Example

<details>
<summary>What is your name?</summary>
My name is [Your Name].
</details>

Practice Questions
Here are some questions using the details tag:

Page 7
 Created by Turbolearn AI

<details>
<summary>Question 1</summary>
Answer 1
</details>

<details>
<summary>Question 2: How do I get started?</summary>
Answer 2
</details>

<details>
<summary>Question 3: Can I customize the settings?</summary>
Answer 3
</details>

<details>
<summary>Question 4</summary>
Answer 4
</details>

<details>
<summary>Question 5</summary>
Answer 5
</details>

Homework: Product Catalog

Create a product catalog with the following features:

A heading
Bookmarks for different sections (e.g., Electronics, Clothing, Home)
Sections for each category with:
Headings
Text (possibly bold)
Paragraphs
Images
Links

Goal: Clicking a bookmark navigates to the corresponding section on the same page.

Tags to use

Page 8
 Created by Turbolearn AI

<div>
Headings (<h1>, <h2>, etc.)
<p>
<strong> or <b> for bold text
<img>
<a> (anchor tag) for links and bookmarks

Page 9