1. Purpose and Audience
What is this site? Lilac & Logic is an educational site designed to make tricky computer science concepts easier to understand. I plan to cover sorting algorithms, searching methods, and Big-O notation using clear visual diagrams and simple interactive steps.
Why build it? When I first started learning code, textbook algorithms felt super intimidating. I wanted to build a friendly, visual space where high school students and beginner coders can actually see how algorithms work before trying to write them in code.
2. Design Choices and Aesthetics
I chose a soft periwinkle design system inspired by minimalist aesthetic editorial sites. The goal is to create an inviting, calming learning environment for beginner coders:
The background features a light lavender-tinted cream (#F8F6FA) paired with deep periwinkle text (#36304A) for high contrast and readability without harsh pure black. Accent buttons, badges, and focus borders use a soft muted lilac tone (#B8A2CD) to guide the reader naturally across the page. Headings use Playfair Display for a refined feel, while body text uses DM Sans for maximum clarity.
3. Planned 4-Page Architecture
Here is how I plan to break down the full project across 4 separate pages:
1. Home (index.html): A simple landing page introducing what algorithmic thinking is, how to use the site, and quick links to each topic.
2. Sorting Algorithms (sorting.html): Step by step visual breakdowns showing how Bubble Sort, Selection Sort, and Insertion Sort reorder data.
3. Searching Algorithms (searching.html): A visual comparison showing why Binary Search is so much faster than Linear Search on sorted lists.
4. Big-O Guide (big-o.html): A clean cheat sheet explaining basic time complexity like O(1), O(n), and O(n^2) with simple example tables.
4. SEO Keywords and Search Research
I selected these specific meta keywords to help the right audience find the site on search engines.
Sites found during search research:
Searching these keywords brought up two great reference sites that helped inspire my layout.
VisuAlgo is an awesome tool that uses animations to show data structures in action.
Algorithm Visualizer is an open source platform that shows code execution side by side with graphics.
5. Quality Testing and Accessibility
To make sure the site works well for everyone, I am following these quality checks:
I will run all HTML files through the W3C validator at validator.w3.org to keep the code error free. The layout is built mobile first using flexbox so it stays clean on phones down to 320px wide. Finally, I tested color contrast and focus states using the WAVE accessibility tool at wave.webaim.org to ensure a high contrast score for screen readers.