HTML and CSS Learning Assignments

1. Basic HTML Structure

Objective: Create a simple webpage with a proper HTML structure.

Requirements:

Use <html>, <head>, <body>, and <title> tags.
Add a heading (<h1>), a paragraph (<p>), and a list (<ul> or <ol>).

Skills Learned: HTML document structure, basic tags, and content organization.

2. Styling Text and Colors

Objective: Apply basic CSS to style a webpage.

Requirements:

Change the text color, font size, and font family using CSS.
Set a background color for the webpage.
Use both inline and external CSS.

Skills Learned: CSS basics, inline vs. external styles, text and color styling.

3. Building a Simple Navigation Bar

Objective: Create a navigation bar with links to other sections of the page.

Requirements:

Use <nav> and <a> tags.
Style the navigation bar using CSS (e.g., horizontal layout, hover effects).

Skills Learned: Links, navigation, and basic layout styling.

4. Adding Images and Multimedia

Objective: Enhance a webpage with images and a video.

Requirements:

Add an image using <img> and set its width and height.
Embed a YouTube video using <iframe>.
Use captions or alternative text (alt attribute).

Skills Learned: Embedding multimedia and using attributes for accessibility.

5. Creating Forms

Objective: Design a basic form for user input.

Requirements:

Add input fields for text, email, and password using <input>.
Include a dropdown menu, radio buttons, and a submit button.
Style the form using CSS.

Skills Learned: Form elements, user input, and styling forms.

6. CSS Box Model Exploration

Objective: Understand and practice the CSS box model.

Requirements:

Create a card layout with content inside boxes.
Use padding, margin, border, and box-shadow.
Apply different background colors to demonstrate the box model.

Skills Learned: Box model, spacing, and border styling.

7. Responsive Web Design Basics

Objective: Make a webpage responsive using CSS.

Requirements:

Use media queries to adjust the layout for different screen sizes.
Create a simple layout that switches from a single-column to multi-column on larger screens.

Skills Learned: Media queries, responsive design principles.

8. Typography and Fonts

Objective: Explore font styling and typography options.

Requirements:

Use Google Fonts to add a custom font to your webpage.
Apply font-weight, letter-spacing, and line-height for better readability.

Skills Learned: Typography, font styling, and integrating external resources.

9. Building a Personal Portfolio Page

Objective: Create a personal portfolio webpage to showcase your work.

Requirements:

Include sections like "About Me," "Projects," and "Contact."
Add links to social media profiles.
Use a consistent color scheme and layout.

Skills Learned: Structuring multi-section pages, linking, and visual design.

10. Creating a CSS Grid or Flexbox Layout

Objective: Practice advanced layout techniques using CSS Grid or Flexbox.

Requirements:

Design a layout with a header, footer, sidebar, and main content area.
Use CSS Grid or Flexbox to position elements.
Ensure the layout adapts well to different screen sizes.

Skills Learned: CSS Grid, Flexbox, and layout design.