My Learning Journal

A responsive personal blog website documenting a web development learning journey. Built with HTML, CSS, and modern responsive design principles.

🌟 Features

• Fully Responsive Design: Optimized for desktop, tablet, and mobile devices
• Modern CSS Grid & Flexbox: Contemporary layout techniques
• Semantic HTML: Accessibility-first approach with proper ARIA labels
• Fluid Typography: Uses CSS clamp() for scalable text across all screen sizes
• Interactive Elements: Hover effects and smooth transitions
• Blog Post System: Featured hero post with grid-based blog cards
• Multiple Pages: Home, About, and individual blog post pages

🖼️ Screenshot

🚀 Live Demo

Check out my Learning Journal here! View Live Site

📱 Responsive Breakpoints

• Desktop: 1200px+ (Large screens)
• Large Tablet/Small Laptop: 1024px - 1199px
• Tablet: 768px - 1023px
• Mobile: 480px - 767px
• Small Mobile: 320px - 479px

🗂️ Project Structure

my-learning-journal/
├── index.html              # Homepage with hero section and blog grid
├── css/
│   ├── index.css           # Main stylesheet with global styles
│   ├── about.css           # About page specific styles
│   └── blog-post.css       # Blog post page specific styles
├── pages/
│   ├── about.html          # About page with profile and recent posts
│   └── blog-post.html      # Individual blog post detail page
└── images/
    ├── smile.png           # Logo icon
    ├── mario.jpg           # Profile photo
    ├── hero-img.png        # Hero background image
    └── blog-image-*.png    # Blog post thumbnails

🎨 Design Features

• Fluid Typography: CSS clamp() for responsive text scaling
• Grid System: Auto-fit minmax for flexible blog card layouts
• Flexbox Navigation: Responsive header with mobile-friendly navigation

🛠️ Technical Implementation

CSS Architecture

• Mobile-First Design: Base styles for mobile with progressive enhancement
• CSS Custom Properties: Consistent spacing and sizing
• Modern CSS Features:
  • CSS Grid for layout
  • Flexbox for alignment
  • CSS clamp() for responsive typography
  • CSS transitions for smooth interactions

Accessibility Features

• Semantic HTML5 elements
• ARIA labels and roles
• Proper heading hierarchy
• Alt text for images
• Keyboard-friendly navigation
• High contrast ratios

Performance Optimizations

• Efficient CSS organization
• Image lazy loading
• Minimal external dependencies
• Clean, semantic markup

🚀 Getting Started

1. Clone or download the project files
2. Open index.html in your web browser
3. Navigate between pages using the header menu
4. Test responsiveness by resizing your browser window

🎯 Learning Objectives Demonstrated

This project showcases proficiency in:

• Responsive web design principles
• CSS Grid and Flexbox layouts
• Modern CSS techniques (clamp, custom properties)
• Semantic HTML and accessibility best practices
• Mobile-first development approach
• Cross-browser compatibility
• Project organization and file structure

📝 Future Enhancements

Potential improvements could include:

• JavaScript for interactive features
• Blog post filtering and search
• Dark mode toggle
• Animation libraries integration
• CMS integration for dynamic content
• Performance optimizations (image optimization, CSS minification)

👨‍💻 Author

• GitHub: David McCullough
• LinkedIn: David McCullough
• Portfolio: My Portfolio

Created as part of a web development learning journey. This project demonstrates fundamental front-end development skills and responsive design principles.

---

Built with ❤️ and lots of learning