Scribd
Upload
47 views

HTML Projects

This document provides instructions for three tasks: 1. Design a simple one-page portfolio website using HTML to showcase skills and projects. 2. Design a webpage for an online food delivery system using HTML and CSS with pages for the homepage, about, menu, and contact. 3. Build a survey form using HTML and CSS with different input fields like name, email, age and options for radio buttons, checkboxes, and a submit button.

Uploaded by

Itasha Gupta
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
47 views

HTML Projects

This document provides instructions for three tasks: 1. Design a simple one-page portfolio website using HTML to showcase skills and projects. 2. Design a webpage for an online food delivery system using HTML and CSS with pages for the homepage, about, menu, and contact. 3. Build a survey form using HTML and CSS with different input fields like name, email, age and options for radio buttons, checkboxes, and a submit button.

Uploaded by

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

Task1:- Design Simple Portfolio Website

Design using HTML and CSS


Being a web developer and having a portfolio helps a lot while applying for
opportunities and acts as a showcase of our talent, so in this article, we will
learn how to make a simple one-page portfolio by just using HTML. This
portfolio might contain some very important information of yours like:
• about us section
• your projects
• your achievements
• your contact details
You can even add other details too in your portfolio and can make it more
beautiful. But this article focuses on beginners who are wanting to learn to
build their portfolio using simple HTML.
Prerequisite: Basic concepts of HTML like tags, attributes, forms, tables,
rows, columns, hyperlink etc.
Task 2:- Design a webpage for online food
delivery system using HTML and CSS

Files used:
• index.html
• contact.html
• style.css
index.html: First of all it has an header tag to display the name of the
company which is “Online FoodShop”. The navigation bar contains tabs of
“Home”, “About”, “Menu” and “ContactUs”. The navigation bar also consists
of the logo of the company followed by the background image with some
more details of the “Online FoodShop” along with the featured products.

contact.html: We have used input tags to enter the type of “query”, “name”,
“email-id”, “phone number” and “explanation” of the query. We have also
used radio buttons to enquire about the customer’s membership for “online
FoodShop “. The form also provides “Submit” and “Reset” buttons.

style.css: This is the stylesheet block which gives us the proper look of the
webpage.
• Header styling: It consists of two “head” tags. We have used font-
style “Ubuntu” to style the header and we also used proper colors
to make some text look attractive.
• Navigation bar styling: It basically consists of logo styling and
content styling. First of all we have considered the navigation bar
as a flexbox and assigned the flex-direction to “column”. We have
centered the logo image by display:block. We have used
the margin:auto property to center the image. Then we considered
the content of the navigation bar as a flexbox and then we have
positioned it properly.
• Background image styling: We used before pseudo selectors to
set the respective background images.
Task 3:- Build a Survey Form using HTML
and CSS
Prerequisite: Basics concepts of HTML and CSS like tags, ID, color, margin,
padding, font, text field, checkbox, radio button, etc.
Approach:
• The <form> element is used to create an HTML form for user input.
• Inside the form element, provide different options to the user
like name, email, age, etc. In HTML, we have different input
elements for different tasks. So, we are providing respective input
types according to the question (email for taking email input, text-
area for taking a large message, the name for taking name input,
etc.).
• We have also used the radio-button (let a user selection of the
provided choices.), check-button (let a user select zero or more
options of the provided choices), and submit-button (the button for
submitting the form data to a form-handler).

You might also like