Just Enought JavaScript To Be Dangerous

I made a series of videos on my youtube channel about the basics of JavaScript. These might not be the best for the total beginner and it’s not meant to be a “learn everything about JavaScript deeply” kind of a course. They might be best suited for someone who has started to learn JavaScript and needs a refresher. It goes pretty quickly and it might gloss over a few things. My goal was to get to doing something more useful quickly. I’m pretty sure nobody ever said “The day I knew web development was for me was the day the computer confirmed for me that racecar spelled backward is in fact racecar”. I wanted to get to making things actually happen on the page ie. DOM manipulation, event listeners, etc. sooner than later.

CSS animation basics and Sass mixins

This was based on something a person was asking about on a facebook group. They were asking if there was a library that would make background animations. I saw their example and said “That looks like the bottom of 3 moving circles. I bet I can make that with just CSS”. Here is the result of what I came up with. I ended up reviewing about SCSS mixins to reduce the amount of code. Below you’ll find my codepen as well as a video where I walk through my process.

Responsive landing page based on client requirements.

Huddle landing page

This was a project from www.frontendmentor.io The site provides practice challenges that users can work through.  They provide a project brief, style guide, and an image of the design and you have to recreate it yourself.  If you’re trying to get out of the tutorial rut but need some inspiration on what to build yourself, this is a great resource.

Event Delegation in JavaScript

You don’t always have to write event listeners for everything. Event delegation lets you add one listener to the parent element and then use the information from the created event object to tell which child element was the target of the event. Here’s how it’s done.

Bootstrap 4 Projects

I’ve done some Bootstrap projects in the past but I felt like I needed a refresher, so I’ve been working through a Brad Traversy class on Bootstrap 4 and posting the finished projects on my github.

LoopLab – The first one was a one-page, responsive site that utilized a sticky navigation bar, a fixed background in the top section for a parallax-type effect, various types of buttons, and a form.  All pretty standard fare but good to freshen up the skills.  Version 4 of Bootstrap does include FlexBox so it was good to see how it is used within this site.

Glozzom – The next one was a multi-page project.  It made use of a carousel in the top section, Cards, another carousel with quotes, an embedded video in a modal window, and some more fixed background parallax effects.  It also uses the accordion feature in a FAQ section as well as some more practice working with forms.  I almost forgot it has a image gallery feature where you enlarge the images into modals.

Mizuxe – Another one pager, this one was mostly more of the same.  Responsive, more forms practice, an accordion to show/hide bios, and smooth scrolling to different parts of the page.