Scribd
Upload
2 views

Web Development Task Brief - Week 2.docx

This document outlines an assignment focused on creating a functional HTML form, a blog post page using HTML5 semantic elements, and a product landing page with basic HTML and CSS integration. It includes specific objectives, requirements for form validation, accessibility considerations, and styling recommendations. Additionally, it provides submission details and resources for further learning.

Uploaded by

greatnesssylvia
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
2 views

Web Development Task Brief - Week 2.docx

This document outlines an assignment focused on creating a functional HTML form, a blog post page using HTML5 semantic elements, and a product landing page with basic HTML and CSS integration. It includes specific objectives, requirements for form validation, accessibility considerations, and styling recommendations. Additionally, it provides submission details and resources for further learning.

Uploaded by

greatnesssylvia
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 5

Forms, HTML5 and CSS

Enjoy 👀
OVERVIEW & PURPOSE

This assignment ensures you have created a working HTML file with the form and validation
logic, getting comfortable with HTML5 elements and CSS. Don’t worry about the length of the
pages. This is to add details that could aid you throughout the assignment.

Please remember to store the screenshots of both the code and the output in Google Docs and
submit just the link, not your drive. Increase the size of your fonts for better review and
feedback. Any questions should be asked on the Discord channel.

NB. Questions 1 and 2 are compulsory, while question 3 is optional.

Forms and User Input 🖊️


Objective: Create a fully functional survey form that collects user input, validates responses,
and submits the data.

Build a Simple Survey Form

1. Create a Form Layout:


a. Use the <form> element to structure your form.
b. Include at least 5 input types (text, email, radio buttons, checkboxes, number,
and textarea).
c. Use <select> for a dropdown list with multiple options.
d. Add a submit button that submits the form data.
2. Include Labels for Each Input Field:
a. Use the <label> element to associate descriptive text with each form input.
b. Ensure each label is properly linked to its corresponding input using the for
attribute.
3. Apply HTML5 Validation:
a. Make the email field required and validate for proper email format.
b. Add validation to ensure the user inputs a number between 1 and 100 in the
number field.
c. Ensure at least one checkbox or radio button is selected in the respective fields.
4. Styling (Optional, but Recommended):
a. Style the form using basic CSS.
b. Ensure the form is readable, well-spaced, and looks professional.

HTML5 Elements 👁️
Objective: Design and structure a blog post page using HTML5 semantic elements to improve
readability and SEO.

Create a Simple Blog Post Page

1. Use the Following HTML5 Semantic Elements:


a. <header>: Create a page header that contains the blog title and navigation
links (e.g., Home, About, Contact).
b. <nav>: Use this element to contain the navigation links.
c. <article>: The main content of the blog post should go inside this element.
d. <section>: Divide your blog post into sections with clear headings (e.g.,
Introduction, Main Content, Conclusion).
e. <aside>: Include a sidebar with additional information (e.g., links to related
posts or an author bio).
f. <footer>: Add a footer containing copyright information, links to social media,
and other relevant information.

2. Content Structure:
Write a sample blog post with at least 3 sections and meaningful content for each
section (minimum 300 words total).
a. Each section should have a heading (e.g., <h2> or <h3>).
b. Include at least one image using the <img> tag in your blog post.
3. Accessibility:
Ensure the structure is logical and accessible. Use alt attributes for images and ensure
all text is readable
Bonus: Add metadata in the <head> section, such as a <meta> description and
relevant keywords for SEO purposes.

4. Optional (for more advanced students):


Add links to external sources and ensure they open in a new tab and include a small
form in the aside for users to subscribe to a newsletter.

Basic HTML and CSS Integration


This might feel complex for those starting, but I promise you, if you follow the videos I have
sent, you will be fine. It doesn’t matter how it looks for now but you should just get
comfortable playing around with these technologies.

Objective: Build a product landing page using basic HTML and CSS integration. The page
should introduce a product, showcase its features, and provide a call-to-action (e.g., "Buy
Now", "Sign Up" or “Explore More”).

An Example of what you will be building


.
Design a Product Landing Page with Basic CSS
A Product can be anything, clothes, books, tools, music, and lots more. So think of a product
you would like to build.

1. Create the Basic Structure:


a. Use a proper HTML5 document structure.
b. Link your external stylesheet to the html file.
c. Divide the page into sections, including a header, main content area, and
footer.
2. Header Section:
a. The header should contain the product name or company logo and a
navigation bar with links (e.g., Home, Features, Pricing, Contact).
b. Use CSS to style the header (set the background color, align the navigation
links, and style the text).
3. Main Content Area:
a. Include a large heading introducing the product (e.g., “Welcome to Our
Product”).
b. Create a feature section using <section> tags. Each feature should be displayed
in a card-like format (you can use <div> for this).
c. Use images to visually represent features.
d. Add a call-to-action button (e.g., "Buy Now" or "Get Started") with CSS hover
effects (e.g., background color changes on hover).
4. Footer Section:
a. Include links to social media and a simple copyright notice.
b. Add a subscription form for a newsletter with email input and a submit button.
5. Footer Section:
a. Include links to social media and a simple copyright notice.
b. Add a subscription form for a newsletter with email input and a submit button.
6. CSS Styling:
a. Apply basic CSS to:
b. Style the header, main content, and footer (background colors, fonts, margins).
c. Align elements properly using flex.
d. Add padding and margin to create spacing between elements.
e. Style buttons and links.

Materials ⚒️
HTML Crash Course For Absolute Beginners

Learn HTML Forms In 25 Minutes

CSS Crash Course For Absolute Beginners

Learn CSS in 20 Minutes

Product Landing Page Tutorial using HTML CSS | How to make a Landing Page | Shanj…
Product Landing Page | Build & Deploy | HTML & CSS

Submission Details

Date: Friday, 27th September

Deadline: 11:59 PM

Submission Link: https://forms.gle/X4m5BHWqCY2fYTJMA

Ps: if you're confused, ask questions

You might also like