Mini Dev Missions

HTML Focus

Personal Bio Page

Your name, a short bio, and a list of hobbies.
Use <h1>, <p>, and <ul>.
Bonus: Add a photo with <img>.

Basic Contact Page

Include a simple form with: Name field (<input type="text">)
Email field (<input type="email">)
Message box (<textarea>)
Submit button (<button>).
Great for practicing form semantics.

Reading List

A list of books or articles you want to read.
Use <ul> or <ol> with links to external resources (<a>).

Recipe Page

Title of a dish, ingredients as a list, and steps as ordered list.
Practice using <section>, <article>, and <figure> for structure.

HTML Resume

Sections: Contact info, work experience, education, skills.
Use proper headings (<h2>) and semantic layout.

CSS Focus

Profile Card

Practice: borders, padding, text alignment, background colors.

HTML: Your name, profile picture, a short bio, and social links.
CSS: Add rounded corners (border-radius). Style the profile picture as a circle. Center the card with margin and text-align: center.

Colour Palette Display

Practice: colors, flexbox/grid, hover effects.
Create a grid of colored boxes representing a palette.
CSS: Use display: grid to align them nicely. Add hover effects like opacity or a slight scale-up.

Bonus: Label each color using <p> tags and style with contrasting text.

Digital Business Card

Practice: typography, spacing, positioning.
Content: Name, role, contact details, and a short tagline.
CSS: Use a stylish Google Font.
Play with spacing using padding and line-height.
Create a clean, modern "business card" feel.

Javascript Focus

Counter App

Core skills: DOM manipulation, event listeners, variables.

What it does: A number starts at 0, and you have +, -, and Reset buttons to change it. Key JS concepts: addEventListener() to detect button clicks.

Updating text content using element.textContent. Basic if conditions (e.g., prevent negative numbers).

Extra challenge: Make the counter text change color when the number is positive or negative.

To Do List

Core skills: creating/deleting elements, loops, event handling.

What it does: Lets you add tasks to a list and mark them as complete.
Key JS concepts: Capturing input field text (.value). Dynamically creating list items (document.createElement). Toggling a "completed" class when clicked.

Updating text content using element.textContent. Basic if conditions (e.g., prevent negative numbers).

Extra challenge: Add a "Clear Completed" button to remove finished tasks.