Skip to content

HTML_CSS_Practice_Tasks_Slides.md

Latest commit

 

History

History
418 lines (307 loc) · 5.57 KB

HTML_CSS_Practice_Tasks_Slides.md

File metadata and controls

418 lines (307 loc) · 5.57 KB
Raw

HTML & CSS Practice Tasks

Beginner to Practical Level

Task 1 — Personal Introduction Page

HTML Topics

  • Heading
  • Paragraph
  • Link (<a>)
  • Line Break (<br>)
  • Horizontal Rule (<hr>)
  • Lists

Question

Create a Personal Introduction Page using HTML.

Requirements

  1. Add your name using a heading.
  2. Add a paragraph introducing yourself.
  3. Add another paragraph about your hobbies.
  4. Use <br> to create a line break.
  5. Use <hr> to separate sections.
  6. Create an Hobbies unordered list.
  7. Create a Skills ordered list.
  8. Add a link to your social media profile or favorite website using <a>.

Task 2 — Media Gallery

HTML Topics

  • Section
  • Image
  • Video
  • Audio
  • Heading
  • Paragraph

Question

Create a Media Gallery webpage using HTML.

Requirements

  1. Add a main heading: My Media Gallery.
  2. Create a section for images.
  3. Add at least 3 images.
  4. Add an image alt attribute.
  5. Create a video section.
  6. Add a video using <video>.
  7. Add video controls.
  8. Create an audio section.
  9. Add an audio file using <audio>.
  10. Add audio controls.
  11. Use <hr> between major sections.

Task 3 — Student Result Table

HTML Topics

  • Table
  • Heading
  • Paragraph
  • Table Rows
  • Table Headers
  • Table Data

Question

Create a Student Result webpage using HTML.

Requirements

Create a table with the following columns:

Roll No. Name Subject Marks Grade
101 Rahul HTML 85 A
102 Priya CSS 90 A+
103 Amit JavaScript 75 B
104 Neha HTML 95 A+

Instructions

  1. Add a main heading.
  2. Add a short paragraph.
  3. Use <table>.
  4. Use <tr>.
  5. Use <th> for headings.
  6. Use <td> for data.
  7. Add at least 5 student records.
  8. Add an <hr> after the table.

Task 4 — Student Registration Form

HTML Topics

  • Form
  • Label
  • Input
  • Select
  • Textarea
  • Button

Question

Create a Student Registration Form using HTML.

Requirements

Create fields for:

  1. Full Name
  2. Email
  3. Phone Number
  4. Password
  5. Date of Birth
  6. Gender
  7. Course
  8. Address
  9. Terms & Conditions
  10. Submit Button
  11. Reset Button

Additional Requirements

  • Use <form>.
  • Use <label> for every field.
  • Use appropriate input types.
  • Use radio buttons for gender.
  • Use <select> for course selection.
  • Use <textarea> for address.
  • Add a checkbox for Terms & Conditions.

Task 5 — Personal Profile Website

HTML + CSS

HTML Topics

  • Heading
  • Paragraph
  • Link
  • Image
  • List
  • Section
  • Semantic HTML
  • Video
  • Audio
  • Table
  • Form

CSS Topics

  • margin
  • padding
  • position
  • background-color
  • color
  • font-size
  • font-style
  • font-weight
  • transform
  • translate

Question

Create a complete Personal Profile Website using HTML and CSS.

Website Structure

Create the following sections:

  1. Header
  2. Navigation
  3. About Me
  4. Skills
  5. Projects
  6. Education
  7. Media
  8. Contact Form
  9. Footer

Semantic HTML

You must use:

<header>
<nav>
<main>
<section>
<article>
<footer>

About Section

Include:

  • Your name
  • Profile image
  • Introduction paragraph
  • A link to your social profile

Skills Section

Create a list of at least 5 skills.

Example:

  • HTML
  • CSS
  • JavaScript
  • React
  • Node.js

Projects Section

Create at least 3 project cards.

Each project should contain:

  • Project title
  • Description
  • Project link

Education Section

Create a table containing:

  • Degree
  • College
  • Year
  • Percentage/CGPA

Media Section

Add:

  • At least 2 images
  • One video
  • One audio file

Contact Section

Create a form containing:

  • Name
  • Email
  • Phone
  • Subject
  • Message
  • Submit button

CSS Challenge

Apply CSS to your Personal Profile Website.

Required Properties

Use:

margin
padding
position
background-color
color
font-size
font-style
font-weight
transform

Also use:

transform: translate();

Example

.profile-card {
    width: 400px;
    height: 250px;
    margin: 50px auto;
    padding: 20px;
    background-color: lightgray;
    color: black;
    font-size: 18px;
    font-style: normal;
    font-weight: bold;
    position: relative;
    transform: translate(0, 10px);
}

Bonus Task — Product Card

HTML + CSS

Create a Product Card.

Requirements

The card should contain:

  • Product image
  • Product name
  • Product description
  • Product price
  • Buy Now button

CSS Requirements

Use:

  • Width
  • Height
  • Margin
  • Padding
  • Background color
  • Text color
  • Font size
  • Font weight
  • Border
  • Border radius
  • Position
  • Transform
  • Translate

Bonus Task — Simple Landing Page

Create a simple Landing Page using HTML and CSS.

Required Sections

  • Header
  • Navigation
  • Hero section
  • About section
  • Services section
  • Contact section
  • Footer

Requirements

Use semantic HTML and apply the CSS properties learned in class.

Final Challenge 🔥

Build Your Own Website

Create any website of your choice.

Examples:

  • Portfolio Website
  • Restaurant Website
  • Travel Website
  • Gym Website
  • College Website
  • E-commerce Website
  • Blog Website

Mandatory HTML

Use at least:

  • Heading
  • Paragraph
  • Link
  • Image
  • List
  • Table
  • Form
  • Section
  • Semantic tags
  • Video or Audio

Mandatory CSS

Use at least:

  • Margin
  • Padding
  • Position
  • Background Color
  • Color
  • Font Size
  • Font Style
  • Font Weight
  • Transform
  • Translate

Goal

Build the complete website without copying a ready-made template.

Use your own HTML structure, content, and CSS.