WDD 131: Dynamic Web Fundamentals

Status: In Progress

This repository contains coursework for WDD 131 at BYU-Idaho, focusing on creating dynamic, responsive web experiences using HTML, CSS, and JavaScript.

📚 Course Content

Main Portfolio

• index.html - Personal portfolio homepage featuring an about section, web development resources, and links to projects and social profiles

Projects & Assignments

Temple Album (temples.html)

• Interactive temple photo gallery with filtering functionality
• Demonstrates DOM manipulation and event handling
• Responsive design across multiple screen sizes
• Navigation menu with hamburger menu toggle

Week 01: CSS Fundamentals

• basic-layout.html - Building responsive layouts with CSS Grid and Flexbox

Week 02: JavaScript Interactivity

• bom.html - Book of Mormon chapter browser with dynamic content
• responsive-menu.html - Hamburger menu with toggle functionality (event listeners)
• media-query.html - Responsive design patterns with media queries
• new-date.html - Dynamic date handling and manipulation with JavaScript
• debugging.html - Debugging techniques and console practices

🎯 Key Skills Developed

• DOM Manipulation - Selecting and modifying HTML elements with JavaScript
• Event Handling - Responding to user interactions (clicks, toggles)
• Responsive Design - Creating layouts that work across all screen sizes
• CSS Grid & Flexbox - Modern layout techniques
• JavaScript Fundamentals - Variables, functions, event listeners

📍 Structure

wdd131/
├── index.html              # Main portfolio page
├── temples.html            # Temple gallery project
├── scripts/                # JavaScript files
│   ├── temples.js          # Gallery filtering logic
│   ├── getdates.js         # Date utility functions
├── styles/                 # CSS stylesheets
│   ├── base.css
│   ├── temples.css
│   ├── temples-large.css
├── week01/                 # Week 1 assignments
│   └── basic-layout.html
└── week02/                 # Week 2 assignments
    ├── bom.html
    ├── responsive-menu.html
    ├── media-query.html
    ├── new-date.html
    └── debugging.html

🔑 Key Takeaway

JavaScript brings interactivity to web pages. Event listeners and DOM manipulation are fundamental for creating dynamic user experiences.