ePortfolio

Evidence: CSS Float and Clearfix Problem-Solving

Challenge: When implementing floated images in my portfolio website, images were breaking out of their containers, causing layout collapse and misalignment.

Analysis Process:

• Used Chrome Developer Tools to inspect element behavior and identify the root cause
• Researched CSS float behavior and container collapse in documentation
• Evaluated multiple solutions: overflow hidden, clearfix classes, and modern flexbox alternatives
• Tested each approach to determine trade-offs and browser compatibility

Solution Implemented: After critical evaluation, I chose the clearfix pseudo-element technique because it provided the most robust, accessible solution without side effects. I created a reusable clearfix class that could be applied consistently across the site.

Reasoning: This solution demonstrated critical thinking by weighing multiple factors: browser compatibility, code maintainability, performance implications, and scalability for future development.

Evidence: Responsive Design Decision-Making

When designing the portfolio layout, I had to critically evaluate whether to use CSS Grid, Flexbox, or traditional floats for different components. This required:

• Analyzing the specific layout requirements for each page section
• Evaluating browser support and accessibility implications
• Considering maintenance and scalability of different approaches
• Making informed decisions based on technical constraints and user needs

I ultimately used a combination of techniques, applying critical thinking to select the right tool for each specific context rather than using a one-size-fits-all approach.

Evidence: Content Writing for Web Audiences

I wrote over 2,000 words of original content for my 5-page portfolio website, targeting a general audience reading level (8th-9th grade). This required:

• Audience Analysis: Understanding that web content needs to be scannable, concise, and accessible
• Clear Structure: Using headings, paragraphs, and lists to organize information hierarchically
• Professional Tone: Maintaining a professional yet approachable voice throughout
• Purpose-Driven Writing: Each page had specific communication goals (inform, persuade, engage)

I used readability statistics to ensure content was accessible, revised for clarity, and eliminated jargon where possible.

Evidence: Visual Communication Through Design

The portfolio website communicates through visual design elements:

• Color Psychology: Used a cohesive Material Design-inspired palette to convey professionalism and trust
• Typography Hierarchy: Implemented Google Fonts (Poppins for headings, Roboto for body) to guide readers through content
• White Space: Strategically used spacing to improve readability and reduce cognitive load
• Visual Hierarchy: Sized and styled elements to communicate importance and relationships

Evidence: Code Documentation and Comments

Effective communication extends to writing code that other developers can understand. I documented my CSS and HTML with:

• Clear, descriptive comments explaining complex logic
• Semantic HTML element names that communicate purpose
• Organized CSS structure with section headers
• Meaningful class and ID names using clear naming conventions

Evidence: Research and Resource Evaluation

When encountering technical challenges, I demonstrated information literacy by:

• Identifying Information Needs: Recognizing when I needed additional knowledge (e.g., CSS clearfix techniques, accessibility best practices)
• Locating Credible Sources: Using authoritative resources like MDN Web Docs, W3C specifications, and Material Design guidelines rather than unreliable sources
• Evaluating Source Quality: Distinguishing between official documentation, peer-reviewed resources, and anecdotal forum posts
• Synthesizing Information: Combining knowledge from multiple sources to solve complex problems

Evidence: Proper Attribution and Ethical Use

My portfolio project demonstrates ethical information use through:

• Design Attribution: Cited Material Design as inspiration for color palette and referenced layout concepts from mccdgm.net
• Google Fonts Licensing: Properly implemented Google Fonts following their usage guidelines and attribution requirements
• Original Content: Wrote 100% original content rather than copying from other sources
• Image Sources: Used only images I created or had rights to use, documenting sources in code comments

All external resources are properly documented in my CSS file comments, demonstrating academic integrity and professional ethics.

Evidence: Technical Documentation Skills

I created comprehensive project documentation including:

• Wireframes showing planning and design process
• Color palette document with research citations
• Content planning document with readability statistics
• Project plan outlining requirements and technical specifications

This documentation demonstrates the ability to organize, present, and preserve information for future reference.

Evidence: CSS Box Model Calculations

Implementing proper spacing and layout required mathematical precision:

• Box Model Math: Calculating total element width = content width + padding + border + margin
• Responsive Sizing: Using percentage-based widths and max-width constraints to create fluid layouts
• rem vs px Conversions: Converting between absolute and relative units for consistent spacing (1rem = 16px base)
• CSS Variables: Creating a mathematical spacing scale (0.5rem, 1rem, 2rem, 3rem, 4rem) based on consistent ratios

Evidence: Color Theory and Hexadecimal Values

Designing the color palette required understanding numerical color systems:

• Hexadecimal Notation: Working with hex color values (#2C3E50) representing RGB components
• Color Contrast Ratios: Calculating and verifying WCAG AA compliance (minimum 4.5:1 ratio for normal text)
• Opacity Values: Using decimal values (0-1) and percentages for transparency effects
• Color Relationships: Selecting colors based on color wheel relationships and harmony principles

Evidence: Performance Analysis and Optimization

I analyzed quantitative metrics to optimize website performance:

• File Size Analysis: Compressed images, reducing total payload from 10MB+ to under 2MB
• Code Statistics: Tracked lines of code (800 HTML, 500 CSS) to monitor complexity
• Word Count Goals: Achieved 250+ words per page (total 2,000+ words) meeting project requirements
• Readability Scores: Used Flesch-Kincaid grade level statistics to target 8th-9th grade reading level

Evidence: Media Query Breakpoints

Implementing responsive design required calculating optimal breakpoints:

• Analyzed common device widths (320px mobile, 768px tablet, 1024px desktop)
• Calculated percentage-based column widths for fluid grids
• Determined appropriate font size scaling based on viewport width
• Optimized image dimensions for different screen densities

Evidence: Web Accessibility and Inclusion

I prioritized accessibility to ensure my website serves all users, including those with disabilities:

• Screen Reader Support: Used semantic HTML5 elements (header, nav, main, footer) that screen readers can interpret correctly
• Alternative Text: Provided descriptive alt text for all 15+ images, enabling visually impaired users to understand visual content
• Keyboard Navigation: Ensured all interactive elements are accessible without a mouse, supporting users with motor disabilities
• Color Contrast: Achieved WCAG AA compliance for color contrast ratios, helping users with visual impairments read content
• ARIA Labels: Implemented ARIA attributes to enhance accessibility for assistive technologies
• Responsive Design: Created mobile-friendly layouts that work across all devices, supporting users in different economic situations who may only have mobile access

This demonstrates social responsibility by recognizing that the web should be accessible to everyone, regardless of ability or circumstances.

Evidence: Ethical Design and User Respect

The portfolio website demonstrates ethical design principles:

• No Dark Patterns: Clear, honest navigation and content without manipulative design tricks
• Privacy Respect: No tracking scripts, cookies, or data collection without user knowledge
• Performance Consideration: Optimized images and code to minimize data usage for users with limited bandwidth
• Honest Representation: All content is truthful and authentic, without misleading claims or false information

Evidence: Professional Ethics and Attribution

I demonstrated professional responsibility through proper attribution and ethical practices:

• Cited all design inspiration sources (Material Design, layout references)
• Used only images I created or had rights to use
• Properly attributed Google Fonts and external resources
• Wrote 100% original content, avoiding plagiarism
• Documented image sources in code comments for transparency

Evidence: Digital Citizenship and Community Contribution

My approach to this project demonstrates positive digital citizenship:

• Code Quality: Wrote clean, well-documented code that could benefit other learners
• Best Practices: Followed web standards and accessibility guidelines that contribute to a better web ecosystem
• Knowledge Sharing: Created a portfolio that could serve as an example for other students
• Sustainable Development: Used efficient code and optimized resources to reduce environmental impact of web hosting

Evidence: Understanding Diverse Perspectives

Throughout development, I considered diverse user needs:

• Designed for users of different ages, technical abilities, and cultural backgrounds
• Ensured content was readable at an 8th-9th grade level to be inclusive of various education levels
• Created responsive layouts that work across different devices and economic contexts
• Implemented accessibility features recognizing that users interact with technology in many different ways