Designing Learn JavaScript’s course portal

Learn JavaScript is my flagship JavaScript course. It helps people go from knowing nothing about JavaScript to becoming a professional JavaScript developer.

Today, I want to share with you how I designed Learn JavaScript’s course portal.

Learn JavaScript login page.

Getting keyboard-focusable elements

If you create JavaScript widgets, one of the key parts to accessibility is managing focus.

To manage focus, you need to find keyboard-focusable elements.

Multi-line gradient links

When I saw the CSS Tricks redesign, I was hooked. I loved the links with gradients. I told myself I’m going to use gradient links for my next project.

That’s what I did for Learn JavaScript’s course portal. The links look like this:

Blue color link with blue underline. When hovered, the text has an orange to yellow gradient; underline becomes solid orange.

I want to share what I learned about creating gradient links

Year-end review: 2019

2019 has ended. Once again, I want to conduct my year-end review in public. This time, in a lot more depth and rawness compared to the previous years.

Mongoose 101: Population

MongoDB documents have a size limit of 16MB. This means you can use subdocuments (or embedded documents) if they are small in number.

For example, Street Fighter characters have a limited number of moves. Ryu only has 4 special moves. In this case, it’s okay to use embed moves directly into Ryu’s character document.

Ryu's document.

But if you have data that can contain an unlimited number of subdocuments, you need to design your database differently.

One way is to create two separate models and combine them with populate.

Mongoose 101

Mongoose is a library that makes MongoDB easier to use. It does two things:

  1. It gives structure to MongoDB Collections
  2. It gives you helpful methods to use

In this article, you’ll learn how to use Mongoose on a basic level.

Hold on while i sign you up…

Woohoo! You’re in!
Now, hold on while I redirect you.