1. What is HTML?

HTML stands for HyperText Markup Language. It is the standard markup language used to create the structure of web pages.

HTML is not a programming language. It is a markup language that uses elements and tags to describe the structure and meaning of content.

What Can HTML Create?

• Headings and paragraphs
• Links and navigation
• Images and multimedia
• Lists and tables
• Forms and input controls
• Semantic page structures

2. HTML Document Structure

A standard HTML document contains a document type declaration, an HTML root element, a head section and a body section.

<!DOCTYPE html>

<html>

<head>

    <title>My Website</title>

</head>

<body>

    <h1>Welcome</h1>

    <p>This is my first webpage.</p>

</body>

</html>

Important Parts

• <!DOCTYPE html> tells the browser that the document uses HTML5.
• <html> is the root element.
• <head> contains metadata and resources.
• <body> contains the visible page content.

3. HTML Elements

An HTML element generally consists of an opening tag, content and a closing tag.

<p>This is a paragraph.</p>

Here, <p> is the opening tag, the text is the content, and </p> is the closing tag.

Empty Elements

Some HTML elements do not require a closing tag.

<br>

<hr>

<img src="photo.jpg" alt="Photo">

4. HTML Attributes

Attributes provide additional information about an HTML element.

<a href="https://example.com">
    Visit Website
</a>

Here, href is an attribute of the anchor element.

Common Attributes

• id
• class
• href
• src
• alt
• title
• style

5. HTML Headings

HTML provides six levels of headings from <h1> to <h6>.

<h1>Main Heading</h1>

<h2>Section Heading</h2>

<h3>Subsection Heading</h3>

<h4>Heading 4</h4>

<h5>Heading 5</h5>

<h6>Heading 6</h6>

6. HTML Paragraphs

The <p> element is used to define a paragraph.

<p>
    HTML is used to structure web pages.
</p>

<p>
    CSS is used to style web pages.
</p>

7. HTML Links

Links are created using the <a> element.

<a href="https://www.google.com">
    Visit Google
</a>

Open Link in New Tab

<a href="https://www.google.com"
   target="_blank">

    Visit Google

</a>

8. HTML Images

The <img> element displays an image on a webpage.

<img src="images/student.jpg"
     alt="Student studying">

Important Attributes

• src specifies the image location.
• alt provides alternative text.
• width controls the width.
• height controls the height.

9. HTML Lists

Unordered List

<ul>

    <li>HTML</li>

    <li>CSS</li>

    <li>JavaScript</li>

</ul>

Ordered List

<ol>

    <li>Login</li>

    <li>Select Course</li>

    <li>Start Learning</li>

</ol>

10. HTML Tables

Tables are used to represent structured tabular data.

<table border="1">

    <tr>

        <th>Name</th>

        <th>Course</th>

    </tr>

    <tr>

        <td>Rahul</td>

        <td>C#</td>

    </tr>

    <tr>

        <td>Priya</td>

        <td>Python</td>

    </tr>

</table>

11. HTML Forms

Forms allow users to enter and submit information.

<form>

    <label>Name:</label>

    <input type="text" name="name">

    <br><br>

    <label>Email:</label>

    <input type="email" name="email">

    <br><br>

    <button type="submit">
        Submit
    </button>

</form>

12. HTML Input Controls

HTML provides different input types for collecting different kinds of data.

<input type="text">

<input type="email">

<input type="password">

<input type="number">

<input type="date">

<input type="radio">

<input type="checkbox">

<input type="file">

<input type="submit">

13. HTML Labels

The label element provides a text description for a form control.

<label for="email">
    Email Address
</label>

<input type="email"
       id="email"
       name="email">

14. What is CSS?

CSS stands for Cascading Style Sheets. CSS is used to control the appearance and layout of HTML elements.

With CSS we can control colors, fonts, spacing, borders, dimensions, layouts, animations and responsive behavior.

p {
    color: blue;
    font-size: 18px;
}

The selector p selects paragraph elements, while the declarations define their appearance.

15. Inline CSS

Inline CSS is written directly inside the style attribute of an HTML element.

<p style="color: blue; font-size: 20px;">

    Welcome to ELearnHub

</p>

16. Internal CSS

Internal CSS is written inside a <style> element in the HTML document.

<style>

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

</style>

17. External CSS

External CSS is stored in a separate .css file.

<link rel="stylesheet"
      href="style.css">

body {
    font-family: Arial;
}

h1 {
    color: blue;
}

18. CSS Selectors

Selectors determine which HTML elements a CSS rule applies to.

Element Selector

p {
    color: blue;
}

Class Selector

.title {
    color: red;
}

HTML:

<h1 class="title">
    Welcome
</h1>

ID Selector

#header {
    background: black;
}

HTML:

<div id="header">
    Header
</div>

19. CSS Colors

CSS supports multiple ways to specify colors.

h1 {
    color: red;
}

p {
    color: #333333;
}

div {
    color: rgb(50, 50, 50);
}

Common Formats

• Named colors
• HEX values
• RGB
• RGBA
• HSL

20. CSS Fonts

CSS provides properties for controlling typography.

body {
    font-family: Arial, sans-serif;
}

h1 {
    font-size: 32px;
    font-weight: 700;
}

p {
    line-height: 1.6;
}

21. CSS Backgrounds

body {
    background-color: #f5f5f5;
}

.header {
    background-color: #111827;
    color: white;
}

Background Image

.banner {

    background-image: url("banner.jpg");

    background-size: cover;

    background-position: center;

}

22. CSS Borders

.card {

    border: 1px solid #dddddd;

    border-radius: 10px;

}

The border-radius property is commonly used to create rounded corners.

23. CSS Box Model

Every HTML element can be understood as a box. The CSS box model consists of:

• Content
• Padding
• Border
• Margin

.card {

    width: 300px;

    padding: 20px;

    border: 1px solid #ccc;

    margin: 20px;

}

24. CSS Display

The display property controls how an element participates in the layout.

.box {
    display: block;
}

.menu-item {
    display: inline-block;
}

.hidden {
    display: none;
}

Common Values

• block
• inline
• inline-block
• flex
• grid
• none

25. CSS Position

The position property controls how an element is positioned within the page.

.box {
    position: relative;
}

.menu {
    position: absolute;
    top: 50px;
    right: 20px;
}

Common Position Values

• static
• relative
• absolute
• fixed
• sticky

26. CSS Flexbox

Flexbox is a one-dimensional layout system used to arrange elements in rows or columns.

.container {

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 20px;

}

Common Flexbox Properties

• display
• flex-direction
• justify-content
• align-items
• flex-wrap
• gap

27. CSS Grid

CSS Grid is a two-dimensional layout system designed for rows and columns.

.container {

    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 20px;

}

Grid is especially useful for card layouts, dashboards and complex page structures.

28. CSS Media Queries

Media queries allow CSS to apply different styles depending on the screen size or device characteristics.

.container {

    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

}


@media (max-width: 768px) {

    .container {

        grid-template-columns: 1fr;

    }

}

29. Responsive Images

Images should adapt to the available width of their container.

img {

    max-width: 100%;

    height: auto;

}

This prevents an image from overflowing its container on smaller screens.

30. Mobile-Friendly Layout

A responsive website should be designed so that users can comfortably interact with it on smaller screens.

.navigation {

    display: flex;

    gap: 20px;

}


@media (max-width: 600px) {

    .navigation {

        flex-direction: column;

    }

}

Responsive Design Principles

• Use flexible widths.
• Use responsive images.
• Avoid unnecessary fixed dimensions.
• Use Flexbox or Grid for layouts.
• Test the website on multiple screen sizes.

31. HTML & CSS Mini Project

Responsive Student Profile Card

Let's combine HTML and CSS to create a simple responsive student profile card.

<div class="profile-card">

    <img src="student.jpg"
         alt="Student">

    <h2>Rahul Kumar</h2>

    <p>MCA Student</p>

    <p>
        Interested in Web Development
        and Software Engineering.
    </p>

    <a href="#">
        View Profile
    </a>

</div>

.profile-card {

    width: 300px;

    padding: 25px;

    margin: 30px auto;

    text-align: center;

    background: white;

    border: 1px solid #ddd;

    border-radius: 12px;

    box-shadow:
        0 5px 20px
        rgba(0,0,0,0.1);

}


.profile-card img {

    width: 100px;

    height: 100px;

    border-radius: 50%;

    object-fit: cover;

}


.profile-card a {

    display: inline-block;

    padding: 10px 18px;

    background: #ea580c;

    color: white;

    text-decoration: none;

    border-radius: 6px;

}

What You Practiced

• HTML structure
• Images
• Headings and paragraphs
• Links
• CSS selectors
• Spacing
• Colors
• Borders
• Border radius
• Box shadow

HTML & CSS Course Summary

You have learned the core concepts required to create structured and styled web pages using HTML and CSS.

Topics Covered

• HTML Fundamentals
• HTML Elements and Attributes
• Headings and Paragraphs
• Links and Images
• Lists
• Tables
• Forms and Input Controls
• CSS Fundamentals
• CSS Selectors
• Colors and Typography
• Backgrounds and Borders
• CSS Box Model
• Display and Position
• Flexbox
• CSS Grid
• Media Queries
• Responsive Web Design
• Practical Mini Project