Let's Build: With JavaScript - DIY Dropdowns and Responsive Menus

Dropdown menus and responsive menus are all too common components in the web design space. While I'd advocate using dropdown menus sparingly, they do unclutter what could be very complicated navigation. Responsive menus need to be neat and tidy for mobile users. Users want to get where they are going in a hurry as well as still view a sound user experience. The experience if done correctly should be painless and almost pleasant if possible.

My brand new series "Let's Build: With JavaScript" features everyday web design and development problems built using pure JavaScript. You won't find jQuery or any fancy frameworks here just yet. Follow along to understand the JavaScript at its core as we code practical examples!

Some background before we kick things off

I recently posted a vlog about how I suck at JavaScript. I came to the language in the days where jQuery prospered. Even then, I found JavaScript a hard language to wrap my head around. I wanted to understand the language as I did CSS or HTML which felt effortless to code. Sadly, with so many different ways to accomplish one thing, I was in a vicious cycle of what I like to call JavaScript Syndrome.

We've all been there. You're trying to learn things the old-fashioned way yet every article or Stack Overflow post points to jQuery solutions and/or solutions using JavaScript that's before its time. Sigh...

Amazingly, we can now use JavaScript as a full-stack language covering both frontend and backend applications. Combined technologies like Node JS, Express, and MongoDB allow complete apps to be written in JavaScript. This is awesome but as with most "stacks" it comes with a steep learning curve.

Now that the language has grown a bit I feel it is in a better state for newcomers. After a constant struggle, I set out to learn JavaScript once and for all. I took some courses to learn; my favorite being from Brad at Traversy Media called Modern JavaScript From The Beginning. Brad goes deep on the how and why of JavaScript as well as discusses the evolution of the language which was so incredibly helpful to me. You don't need to know the language going in like so many other tutorials.

So why all the videos from me? Well, I find that when I teach, I learn. It's as simple as that. You might know me from my Ruby on Rails tutorials. That was me learning! Don't worry if you're a fan of those, I still plan to contribute but I wanted to switch gears for a bit.

Frameworks

This series won't focus on frameworks at first. If I do explore any, it will certainly be as I learn more. Some frameworks that come to mind are Vue.JS as well as a Node/Express type of stack. Keep this in mind as you watch!

Ok, enough chit-chat.

Some things you'll probably want to reference

Download the source code

Requirements include:

• Node JS
• Yarn

Be sure to initialize your project after installing yarn:

yarn init

Here's my yarn script of which includes all the plugins we use for Gulp.

yarn add gulp gulp-sass gulp-autoprefixer gulp-imagemin gulp-concat gulp-uglify gulp-watch gulp-sourcemaps gulp-connect --dev

You can find my Gulpfile.js in the repo here.

The Videos

Part 1 - Project Setup

Part 2 - Coding the HTML

Part 3 - Coding the SCSS

Part 4 - Coding the JavaScript