HTML CSS & JavaScript
​​Project Overview
This project involves designing and developing a responsive website for educational purposes, focusing on fundamental web technologies: HTML, CSS, and JavaScript. Created as a learning tool for teachers and instructional design students, the website adheres to web standards, incorporating accessibility features, responsive layout adjustments, and interactive elements. This project was completed with guidance from my professor and additional resources like W3Schools. This website is currently hosted using the GitHub repository.
Target Audience
The primary audience for this project includes teachers and instructional design students seeking foundational knowledge of Backward Design theory.
​
Key Contributions​
Content Research and Structure
​
Developed a structured HTML layout including semantic elements, hyperlinks, forms, ordered/unordered lists, and embedded multimedia for cohesive navigation and user experience.​
Visual and Layout Design
​
​
​
Styled multiple pages using an external CSS file, applying combinator selectors, image styling, font settings, and responsive formatting to optimize display on both desktop and mobile.
​​
Interactive Functionality
​
​
​
Integrated basic JavaScript functions, including a color-change button for list items and an asynchronous fetch function to load content dynamically.
Challenges and Approach
Challenges
Ensuring responsive design and accessibility for various devices was a significant challenge, particularly adapting complex content for smaller screens.
Approach
Implemented media query techniques and responsive image handling to achieve optimal display across devices. Used semantic HTML and a simple, accessible layout, adhering to basic accessibility guidelines.
Design Process
HTML Structure
Built a semantic HTML structure with clear navigation, header, main content sections, and a form with labels and input fields for interactivity.
CSS Styling
Applied external stylesheet style.css to three webpages. Applied universal selectors and navigation styling to enhance usability. Incorporated layout elements such as margin, padding, and color, organized with CSS comments for clarity.
​
Responsive Design
Used the <meta> viewport tag and adaptive <div> containers to ensure a smooth transition from a two-column to a one-column layout on mobile devices.
JavaScript Functions
Created an unordered list with three items and a JavaScript function color() to change the color of the third list item on button click. Included an empty <p id="fetched"> tag and used JavaScript to fetch information from fetch-info.txt.
for enhanced user engagement.
Lessons Learned
Code Structuring for Accessibility
Building with a clean HTML structure and meaningful CSS selectors from the beginning improves both readability and accessibility.
​
Responsive Design Essentials
Adapting layout and styling for mobile responsiveness adds value to the user experience, especially when adhering to fundamental web standards.
​
Integration of External Tools
Leveraging GitHub for project hosting provided exposure to version control and allowed easy sharing of the completed website.
Yoga Website
​​Project Overview
This project focuses on creating an engaging and informative sample website for individuals interested in yoga, developed using the WIX platform. Designed to provide a calming and user-friendly experience, the website emphasizes the peaceful essence of yoga through mindful color choices, accessible layout, and relevant content. The project was a collaborative effort, incorporating web design best practices and user-centered design principles.
Target Audience
The website is intended for people interested in yoga, seeking information on its history, benefits, and philosophy, as well as guidance on beginning or deepening their practice.
​
Key Contributions​
Content Development
Created comprehensive content for the “About Yoga” and “Benefits of Yoga” pages, covering yoga’s history, philosophy, and physical benefits to engage and educate the audience.
Visual and Layout Design​​
​Selected a serene color palette of Deep Forest Green, Warm Ivory, and Earthy Taupe to promote calmness, and utilized typography (Helvetica for body text, Helvetica Bold for headings, and Libra Baskerville for the logo) to ensure readability and brand elegance.
​​
Interactive and Accessible Features
Integrated smooth transitions, interactive buttons, and anchors to enhance user experience and accessibility. The site also includes a contact page for visitor engagement.
Challenges and Approach
Challenges
Creating a visually calming experience while ensuring readability and ease of navigation posed challenges, especially balancing informative content with minimalist design principles.
Approach
We focused on a simple, aesthetically pleasing layout using Gestalt principles and the golden ratio to guide user attention naturally. This approach maintained harmony while keeping the content engaging and accessible.
Design Process
Design Principles & Color Scheme
Used a calming palette and applied asymmetrical balance, contrast, and repetition to create a harmonious visual experience that conveys stability and mindfulness.
Typography
Applied Helvetica for body text and Libra Baskerville for the logo to promote a professional yet approachable feel.
Gestalt Principles & Golden Ratio
Employed principles like similarity, continuation, and symmetry, along with the golden ratio, to establish a balanced, naturally flowing layout.
Interactive Elements
Added graphics, icons, shapes, and textures to enhance the visual appeal, complemented by transitions and user-friendly navigation elements to keep the experience accessible.
Lessons Learned
Color and Design Impact
A carefully selected color scheme and strategic use of design principles can significantly impact user experience by promoting engagement and conveying intended emotions.
Effective Content Structuring
Organizing content thoughtfully for readability and alignment with the overall theme is key to achieving an informative yet peaceful site atmosphere.
Interactive Features Enhance User Experience
Adding buttons, transitions, and intuitive navigation supports user engagement and creates a seamless interaction flow across the website.