Project 2: My Biodata Website

:information_source: Project Overview Difficulty Level: Beginner
Estimated Time: 2-3 hours (split across 2 weeks)
Skills Practiced:

• HTML structure and elements
• CSS styling and classes
• Image integration
• List creation
• Page layout with divisions

Real-World Connection: Creating personal biodata websites is a fundamental skill in web development. Professional developers often create portfolio sites, about pages, and personal profiles using these same techniques!

:emoji:️ Project Roadmap

graph LR
    A[Start] --> B[Part 1: HTML Structure]
    B --> C[Add Title & Heading]
    C --> D[Upload Images]
    D --> E[Create Lists]
    E --> F[Part 2: CSS Styling]
    F --> G[Style Text & Colors]
    G --> H[Create Classes]
    H --> I[Add Divisions]
    I --> J[Final Testing]
    J --> K[Submit Project]

:white_check_mark: Before You Start Checklist

• I have watched the video tutorial
• I have clicked the "Remix this!" link and cloned the project
• I understand the difference between HTML (structure) and CSS (styling)
• I have personal images ready to upload (or know which ones to use)
• I have thought about what hobbies and details to include

Project Overview & Sample User Interface

Activity Instruction: Remix this!

[Make sure you click clone word]

We will construct my biodata project for 2 weeks as Part 1 and Part 2. Click to see an overview of layout.

Part One: HTML Elements

In Part 1, you just focus on creating content with only HTML elements.

tip What is HTML? HTML (HyperText Markup Language) is the foundation of every website! Think of it as the skeleton that gives structure to your webpage - just like how a house needs a frame before you can paint it!

One. Create a title and heading for your website

Start by adding a title that appears in the browser tab and a main heading that visitors will see on your page.

:warning: Common Pitfall Make sure you understand the difference between:

• <title> - Shows in the browser tab
• <h1> - Shows as the main heading on your page Many students mix these up!

2. Upload images for your biodata

Images make your biodata come alive! You can upload personal photos or use appropriate placeholder images.

tip Best Practice Keep your image files reasonably sized (under 1MB) for faster loading. In real web development, optimized images mean happier visitors!

3. Use ordered or unordered list blocks to add details about your hobbies, and ensure the alignment is set to left

Lists help organize information clearly:

• Unordered lists (<ul>) use bullet points - perfect for hobbies!
• Ordered lists (<ol>) use numbers - great for step-by-step items!

:dart: Milestone Checkpoint 1

Before moving to Part 2, make sure you have:

• A working title and heading
• At least one image uploaded and displaying
• A list of hobbies (minimum 3 items)
• All text content you want to include

Part 2: CSS Styling

Now it's time to make your biodata beautiful! CSS is like the paint and decorations for your HTML structure.

tip What is CSS? CSS (Cascading Style Sheets) controls how your HTML elements look. If HTML is the skeleton, CSS is the skin, clothes, and makeup that makes your website attractive!

You may change the style, color, font, and alignment of your heading by using this block:

Creating CSS Classes

You are encouraged to create classes for the added colors/styles and add specific details accordingly. For example, the details of your basic information and also your hobby.

:warning: Common Pitfall Remember to use a period (.) before class names in CSS! For example:

• Correct: .my-class
• Wrong: my-class This is a very common mistake!

Organizing with Divisions

You should have at least three divisions, as shown in example expected output.

tip Real-World Connection In professional web development, <div> elements are used to create sections and layouts. Think of them as invisible boxes that help organize your content!

Additional Requirements:

• Make sure to include at least three types of colors in your project
• Center-align the image, heading, and slogan
• To create a gap between one step and another, you may use this block:

:dart: Milestone Checkpoint 2

Before considering your project complete:

• Applied CSS styling to your heading
• Created at least 3 different colored sections
• Center-aligned images and headings
• Added proper spacing between sections
• Created custom CSS classes for different elements

:hammer_and_wrench: Debugging Tips

Having trouble? Here are common issues and solutions:

Problem: My image isn't showing

Solution: Check that:

• The image file is properly uploaded
• The filename matches exactly (including capitalization)
• You're using the correct image block

Problem: My CSS isn't applying

Solution: Make sure:

• Your class names match between HTML and CSS
• You included the period (.) before class names in CSS
• The CSS block is properly connected

Problem: Elements aren't centered

Solution: Use the CSS property text-align: center for text and headings. For images, you might need to put them in a centered div!

tip Debugging Like a Pro Real web developers use browser developer tools to debug. While we can't do that in EduBlocks, the habit of checking your code step-by-step is invaluable!

Required Elements

Make sure your biodata website includes:

• :white_check_mark: Website title and heading
• :white_check_mark: Personal images
• :white_check_mark: Lists for hobbies and details (left-aligned)
• :white_check_mark: At least 3 divisions with different sections
• :white_check_mark: CSS styling with at least 3 different colors
• :white_check_mark: Center-aligned images, headings, and slogans
• :white_check_mark: Proper spacing between sections

:rocket: Extension Challenges

Finished early? Try these advanced challenges:

Challenge One: Add a Navigation Menu

Create links to different sections of your biodata page

Challenge 2: Gradient Backgrounds

Instead of solid colors, try creating gradient backgrounds for your sections

Challenge 3: Hover Effects

Add CSS that changes colors when someone hovers over certain elements

Challenge 4: Add a Footer

Create a footer section with contact information or social media links

Challenge 5: Responsive Design

Make your biodata look good on both desktop and mobile screens

tip Going Beyond These challenges introduce concepts used in professional web development. Don't worry if they seem difficult - you're already thinking like a real developer by trying them!

Project Submission

Final Testing Checklist

Before submitting, test your project:

• All images load correctly
• All text is readable and properly styled
• Colors are applied as intended
• Spacing looks good between sections
• The page looks complete and professional

When you have completed your "My Biodata Website" project, submit it using the link below:

Submit Your Project Here

:warning: Important Make sure to test your webpage before submitting! View it in preview mode and check that everything works as expected.

:tada: Congratulations! You've just built your first styled webpage! This is a huge milestone in your web development journey. The skills you've learned here - HTML structure and CSS styling - are the foundation of every website on the internet!