Project 3 - My Holiday Project

:information_source: Project Overview Difficulty Level: Intermediate
Estimated Time: 6-8 hours
Skills Practiced: HTML Structure, CSS Styling, Responsive Design, External Resources Integration, Design Principles

Learning Objectives

This project teaches:

HTML Sectionalization: Using div tags and semantic structure
CSS Integration: Linking external stylesheets
Background Design: Working with background images and gradients
Typography: Implementing Google Fonts
Color Theory: Using Color Hunt for palette selection
Icon Implementation: Font Awesome integration
Favicon Setup: Adding custom site icons
Responsive Design: Making websites mobile-friendly
Project Organization: Structuring files and assets
External Resources: Integrating third-party design tools

Project Roadmap

mermaid

graph LR
    A[🚀 Start] --> B[📋 Part 1: Setup & HTML]
    B --> C[🎨 Part 2: CSS & Styling]
    C --> D[📝 Part 3: Content & Resources]
    D --> E[🎯 Part 4: Icons & Polish]
    E --> F[📱 Part 5: Responsive Design]
    F --> G[✅ Complete!]
    
    style A fill:#e1f5e1
    style B fill:#e3f2fd
    style C fill:#fff3e0
    style D fill:#f3e5f5
    style E fill:#fce4ec
    style F fill:#e0f2f1
    style G fill:#c8e6c9

Project Guidelines

Before You Begin:

Open the StackBlitz template: My Holiday Template
Other alternative: you can download the source code template from StackBlitz Download Project button if you want to use IDE.
The template provides a starting structure for your character webpage
Follow the step-by-step instructions to build your complete project

Important: Before You Start

:warning: Critical Files Warning DO NOT DELETE the existing files in the template:

Package files

Any other files you didn't create

ONLY EDIT the necessary files (index.html, style.css, and your uploaded assets).

tip Pro Tip Create a backup of your project regularly by downloading it from StackBlitz. This helps you recover your work if something goes wrong!

Project Checklist

Required Assets:

Assets folder: 3 background images AND 11 photos
Content.txt file: 3 sections title AND content

Project Completion Goals

Part One: Project Preparation & HTML Structure

:dart: Milestone Checkpoint 1

By the end of Part 1, you should have:

Forked the StackBlitz template
Downloaded reference materials
Uploaded all required images (3 backgrounds + 11 photos)
Created basic HTML structure with div sections

Project Preparation:

Download the required resources:
- Expected output file
- Web page sectionalization file
Image Preparation: Gather the required images for your project and keep them ready for upload.
Open the StackBlitz Template: Go to My Holiday Template
- Click "Fork" (top left) to create your own editable copy.
- All your work will be saved online - no installation needed!
Content Preparation: Plan and write your web page content (titles and text for each section) directly in the index.html file within StackBlitz. You do not need a separate content.txt file.
Image Upload: Upload your images directly into the StackBlitz project's assets or appropriate folder.

:muscle: You've got this! Setting up might feel overwhelming at first, but once you see your first image appear on the page, you'll feel the excitement of bringing your holiday memories to life!

tip Best Practice Organize your images with descriptive names like beach-background.jpg or vacation-photo-1.jpg instead of generic names like img1.jpg. This makes your code more maintainable!

HTML Structure:

Build the web page content using index.html file
Sectionalize contents using <div> tags and create classes to style them with CSS.

html

{/* Example structure for your sections */}
<div class="hero-section">
  <h1>My Amazing Holiday</h1>
  <p>Welcome to my travel story...</p>
</div>

<div class="content-section">
  <h2>Day 1: Beach Adventures</h2>
  <img src="assets/beach-photo.jpg" alt="Beach sunset">
  <p>Description of your first day...</p>
</div>

Part 2: CSS Setup & Section Styling

:dart: Milestone Checkpoint 2

By the end of Part 2, you should have:

Linked CSS file properly
Created styles for at least 3 sections
Applied background images successfully
Organized CSS with clear class names

CSS Setup and Design:

Use the provided style.css file in the StackBlitz template, or create one if it's missing.
Make sure style.css is linked in your index.html file (inside the <head> section).
Design your section dividers using background images and organize your CSS code for clarity and modularity.

:warning: Common Pitfall If your CSS isn't working, check these common issues:

Is the CSS file linked correctly? <link rel="stylesheet" href="style.css">

Are your class names spelled correctly in both HTML and CSS?

Did you forget the dot (.) before class names in CSS?

Section Styling:

Use custom classes to style each section divider and content area.
Apply your background images and other styles using these classes.

css

/* Example CSS for sections */
.hero-section {
  background-image: url('assets/hero-background.jpg');
  background-size: cover;
  background-position: center;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.content-section {
  padding: 60px 20px;
  max-width: 1200px;
  margin: 0 auto;
}

Part 3: Content Layout and Design Resources

:dart: Milestone Checkpoint 3

By the end of Part 3, you should have:

Implemented Google Fonts
Applied a consistent color palette
Completed styling for your first content section
Created an appealing visual hierarchy
Complete the layout for your first content section (for example, the first "sandwich" or main section).
Integrate a Google Font of your choice by adding the appropriate <link> tag in the <head> of index.html and referencing the font in your CSS.
Choose a color palette from Color Hunt and apply it to your website for a cohesive design.

tip Typography Tips Choose fonts that complement each other:

Use a decorative font for headings
Use a simple, readable font for body text
Limit yourself to 2-3 fonts maximum
Test readability on different screen sizes

html

{/* Example: Adding Google Fonts */}
<head>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&family=Dancing+Script:wght@700&display=swap" rel="stylesheet">
</head>

css

/* Example: Using the fonts in CSS */
h1 {
  font-family: 'Dancing Script', cursive;
  font-size: 3rem;
  color: #2c3e50; /* From your Color Hunt palette */
}

body {
  font-family: 'Montserrat', sans-serif;
  line-height: 1.6;
  color: #34495e; /* From your Color Hunt palette */
}

Part 4: Final Layout and Icons

:dart: Milestone Checkpoint 4

By the end of Part 4, you should have:

All content sections completed and styled
Favicon properly displayed
Font Awesome icons integrated
Consistent design throughout the page
Finish the layout for all remaining content sections, ensuring each section is styled and organized.
Add a favicon to your project by uploading an icon file and linking it in the <head> of index.html.
Use Font Awesome for icons:
- Add the Font Awesome CDN link to your <head>.
- Insert icons into your HTML where appropriate.

:warning: Icon Integration Remember to add Font Awesome BEFORE you try to use any icons:
html
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">

html

{/* Example: Adding favicon and Font Awesome */}
<head>
  {/* Favicon */}
  <link rel="icon" type="image/png" href="assets/favicon.png">
  
  {/* Font Awesome */}
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
</head>

{/* Example: Using Font Awesome icons */}
<div class="social-icons">
  <i class="fab fa-instagram"></i>
  <i class="fab fa-facebook"></i>
  <i class="fas fa-camera"></i>
  <i class="fas fa-map-marker-alt"></i>
</div>

Part 5: Responsive Design

:dart: Milestone Checkpoint 5

By the end of Part 5, you should have:

Mobile-friendly navigation
Images that scale properly
Text that's readable on all devices
Layout that adapts to different screens
Make your web page responsive so it looks good on all screen sizes.
Use CSS media queries and/or Bootstrap (if included) to adjust layouts for mobile, tablet, and desktop views.
Test your design using the StackBlitz preview window - resize the window to check how your site adapts.

:tada: Almost there! Responsive design can be tricky, but remember: you're not just making a website, you're creating an experience that everyone can enjoy, whether they're on a phone, tablet, or computer. Every adjustment you make brings your project closer to professional quality!

tip Responsive Design Best Practices

Start with mobile design first (mobile-first approach)
Use flexible units (%, rem, em) instead of fixed pixels
Test at common breakpoints: 320px, 768px, 1024px, 1440px
Make sure touch targets are at least 44x44 pixels on mobile

css

/* Example: Media Queries for Responsive Design */
/* Mobile styles (default) */
.content-section {
  padding: 20px;
  font-size: 16px;
}

.gallery {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

/* Tablet styles */
@media (min-width: 768px) {
  .content-section {
    padding: 40px;
    font-size: 18px;
  }
  
  .gallery {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
}

/* Desktop styles */
@media (min-width: 1024px) {
  .content-section {
    padding: 60px;
    max-width: 1200px;
    margin: 0 auto;
  }
  
  .gallery {
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
  }
}

"Give me some ideas for a travel blog post about a trip to the beach."
"Generate a list of activities to do on a holiday in the mountains."
"Write a short description of a historical landmark." (Give the landmark's name.)

Background Styling

Code with AI: Experiment with different background styles.

Prompts:

"CSS to create a gradient background from blue to green."
"CSS to add a background image with a fixed position."

Typography and Colors

Code with AI: Explore different font and color combinations.

Prompts:

"Suggest a good font pairing for a travel website."
"Generate a color palette for a website about nature."

Icons and Graphics

Code with AI: Find the perfect icon.

Prompts:

"Find an icon for a camera." (Specify the icon library you prefer, e.g., Font Awesome)
"Generate SVG code for a simple star icon."

Technical Skills Covered

HTML

Division tags and classes
Semantic structure
Content organization

CSS

External stylesheet linking
Background properties
Responsive design principles
Class-based styling

Design Resources

Google Fonts integration
Color Hunt palette selection
Font Awesome icons
Favicon implementation

Tools & Platforms

Glitch.com development environment
Asset management
File organization

Debugging Tips

Common Issues and Solutions

tip Debugging Checklist When something isn't working, check these in order:

Browser Console - Press F12 to check for errors
File Paths - Are all your links correct?
Spelling - Check class names match in HTML and CSS
Syntax - Look for missing semicolons, brackets, or quotes
Cache - Try hard refresh (Ctrl+F5 or Cmd+Shift+R)

Specific Problems:

Images Not Showing:

css

/* Wrong */
background-image: url(assets/image.jpg);  /* Missing quotes */
background-image: url("asset/image.jpg"); /* Wrong folder name */

/* Correct */
background-image: url("assets/image.jpg");

CSS Not Applying:

html

{/* Check your link tag */}
<link rel="stylesheet" href="style.css"> {/* Is the path correct? */}

{/* Check class names match */}
<div class="hero-section"> {/* HTML */}
.hero-section { } /* CSS - names must match exactly */

Layout Breaking on Mobile:

Check if you're using fixed widths (px) instead of flexible units (%, rem)
Ensure images have max-width: 100%
Test with browser developer tools' device emulator

.gallery-item {
  transition: transform 0.3s ease;
}

.gallery-item:hover {
  transform: scale(1.05);
  box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}

Challenge 2: Animated Hero Section

Add a parallax scrolling effect to your hero background:

css

.hero-section {
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

Challenge 3: Dark Mode Toggle

Implement a theme switcher:

javascript

function toggleTheme() {
  document.body.classList.toggle('dark-mode');
}

Challenge 4: Loading Animation

Create a smooth page entrance:

css

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.content-section {
  animation: fadeIn 1s ease-out;
}

Challenge 5: Custom Cursor

Design a unique cursor for your holiday theme:

css

body {
  cursor: url('assets/palm-tree-cursor.png'), auto;
}

tip Going Further These challenges help you:

Stand out from other projects
Learn advanced CSS techniques
Prepare for more complex web development
Have fun experimenting!

Submission

Submit your completed project here

Project 3: My Holiday