0% found this document useful (0 votes)
5 views

2.Hands-on_HTML

Uploaded by

lohithjkofficial
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
5 views

2.Hands-on_HTML

Uploaded by

lohithjkofficial
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 2

Web Designing Practices

Practices# :2

Topic : HTML

1. Create a personal portfolio webpage for yourself that includes:


• A header with your name and a brief introduction.
• A section showcasing your skills (with a list of at least 3 skills).
• Another section with a list of your recent projects (each with a short description).
• A contact section at the bottom with your email address and social media links.

Requirements:
• Use semantic HTML elements like <header>, <section>, and <footer>.
• Include headings, paragraphs, and lists where appropriate.

2. Design a simple blog page that includes:


• A header with the blog's title.
• A section for the main blog post with a title, date, and multiple paragraphs.
• A sidebar with a list of recent posts (use an unordered list).
• A footer with the author's name and a link to a "Contact" page.

Requirements:

• Use <article> for the blog post and <aside> for the sidebar.
• Include elements like <h1>, <h2>, <p>, and <ul>.
3. Design a product landing page for a new electronic gadget. The page should include:
• A large image of the product at the top.
• A section with a product description and its key features (use a list).
• A pricing section with different pricing options (use a table).
• A call-to-action button like "Buy Now" at the bottom.

Requirements:
• Use semantic HTML elements such as <section>, <table>, and <button>.
• Make sure the table includes rows and columns for different pricing tiers.

4. Design a webpage for a restaurant's menu. The page should include:


• A header with the restaurant's name and logo (use a placeholder image).
• A section for starters, main courses, and desserts, each with a list of dishes (use
an unordered list for each).
• Include the price of each dish next to its name.
• A contact section at the bottom with the restaurant's address and opening hours.

Requirements:
• Use <header>, <section>, and <footer> for structure.
• Use <ul> and <li> for menu items and <strong> to highlight the prices.

5. Design a simple photo gallery webpage for a photography portfolio. The page should
include:
• A header with the photographer’s name.
• A grid of images, each representing a photo in the portfolio (you can use
placeholder images).
• Below each image, there should be a title or short photo description.

Requirements:
• Use <img> tags for the photos and organize them using <div> or <section>.
• Provide text descriptions or titles for each photo using <figcaption> or <p>.

You might also like