Khan Academy Clone

First of many static site clones...

I'm a sequential creator, so I started styling my clone of the Khan Academy website from top to bottom, starting with the "Skip To Content" link, which I decided to transition it's top and left position when it was focused.

Next was the alert up top, which of course needed me to first go out and grab the fonts Source Serif Pro and Lato from Google Fonts. After that though, it was pretty straight forward: pick the right blue, font size and weight, position the close X accordingly, and it was done!

Finally came one of the more central components: the navigational header

Now my initial HTML for this was a lovely <ul>, super accessible and semantically accurate, and had I been using modern CSS like display: flex I would have decided to keep this, but after a few minutes trying to figure out how to float all the <li>s individually without resorting to just throwing position: absolute on everything, I decided that I'd make everything accessible after the fact, so broke the <nav> children into two <div>s and the central <a> containing the logo.

After making the <nav> responsive enough for all but mobile screens - something I'd do later - I jumped straight into the courses <detail> dropdown. The actual <summary> wasn't difficult at all, it was all the <ul>s within the dropdown content itself I needed to fight with. After trying to think of a float-only solution, I gave up and manually designed all five layouts - from 5 columns all the way down to 1 - one-by-one.

Was it tedious? Yes, resulted in over 100 lines of CSS to manually adjust the float and negative margin-top at a almost individual level for each <ul>, but at the end of the day it does work.

After that, the rest of the <nav> components should be easy, and they were. Only effort was having to take the logo and embed it directly as a child to the <a> so I could change one of the fill when the anchor was selected.

Flying Planet

The first section had a unique flying planet animation. Now I had no idea as to how this was done, so up my devtools came, and I first found out there this was using some react-based library - saw usages of setState() - and it was using some simulation program, as I saw the hover event triggering an energy increase. Thankfully this did apply the transform location directly to the planet <g>, so I threw together a little script:

const globe = $('._154kzg5 > g:nth-child(9) > g:nth-child(1)')
const styles = []
getStyles = setInterval(() => {
  style = globe.getAttribute('style')
  styles.push(style)
}, 0)

then triggered the animation, and after it settled:

clearInterval(getStyles);
styles.filter((s, i, a) => a[i+1] !== s)

which gave me what I called the frames of the animation.

To animate said frames wouldn't be a difficult challenge, I first dropped them all into my JS file, and attached a mouseover event to the SVG in question. This triggered the animation start, which if the current frame was zero would begin recursively calling Window.requestAnimationFrame() until the frame index was at the last frame.

Remaining Sections

The remaining sections were about equally time consuming, positioning everything as needed, inlining needed SVGs for on-load animation purposes, and the rest to get everything identical at a glance. Eventually I started skipping some animations and flourishes for later - hovering over the links displayed a random SVG in the background, some SVGs had perspective shifts, etc.

Finally after completing everything I had to do it all again, but for a responsive view, which didn't take too long.