Task 1: Create a Basic HTML Page
Objective: Learn how to structure a simple HTML document.
- Create a file named
index.html - Add basic structure with
<!DOCTYPE>,<html>,<head>, and<body> - Inside the body, add a heading and a paragraph
Task 2: Add Images and Links
Objective: Practice using <img> and <a> tags.
- Insert an image with
alttext - Create a list of 3 useful links related to web development
Task 3: Structure a Blog Post
Objective: Learn semantic HTML elements.
- Use tags like
<article>,<header>,<footer>,<section> - Include a title, publication date, author name, and article content
Task 4: Create a Navigation Menu
Objective: Build a reusable menu structure.
- Use an unordered list
<ul>with list items<li>and links<a> - Add an
idorclassto style it later with CSS
Task 5: Apply External CSS
Objective: Link CSS file and apply basic styles.
- Create a
style.cssfile - Link it to your HTML using
<link rel="stylesheet" href="style.css"> - Style background color, text color, and font
Task 6: Responsive Layout with Flexbox
Objective: Use Flexbox to align items.
- Create a flex container with two columns
- Use CSS to make them side-by-side on desktop and stacked on mobile
Task 7: Interactive Button
Objective: Add hover effects with CSS.
- Create a
<button>element - Use CSS to change color on hover
Task 8: Form Styling
Objective: Style form inputs and layout.
- Create a contact form with name, email, and message fields
- Use CSS to make it visually appealing and mobile friendly
Task 9: Use Media Queries
Objective: Make content adapt to screen sizes.
- Add
@mediarules to change font size and layout on smaller screens
Task 10: Final Mini-Project
Objective: Combine all skills into a single webpage.
- Create a personal portfolio or fictional product page
- Include navigation, sections, images, and responsive design
- Publish on GitHub Pages