Useful Chrome Extensions (with video overview)


With this extension you’ll be able to hover over any element and immediately see the applied styling nicely organized like this:


Sometimes it can help you to find out what your favorite (or inspirational) websites are using! With this extension you get a nice glimpse into the types of libraries/frameworks the website is using:

Web Developer Toolbar

One of the oldest, but still helpful, extensions around. It does a huge variety of different things like:

  • Outlining different types of elements
  • Managing CSS (like changing the CSS on the page)
  • Resizing the page
  • Validating your HTML/CSS
  • and a lot more!

Web Developer Checklist

A great list of items you should make sure your website does or has. And if you missed something it has a link that explains how to add it.


Not necessarily web development focused, but a good extension to ensure your personal and work life have a higher level of language comprehension (or at least to make it appear so!). This extension will automatically make some quite advanced suggestions how to improve the text (emails, comments, etc) you write!

Even more!

Final Exam List of Items to Remember

There is a small list of the things that you need to memorize to do well on the Final Exam:

  • Header
    • SVG logo is simply an img tag with a src and a width attribute
    • Apply flex, justify-content (space-between), and align-items (center)
    • Add padding to the top and bottom (20px 0)
    • The buttons in the right navigation need
      • To be selected directly with CSS (not the wrapping div) .menu a
      • Use display: inline-block (proper way to apply padding)
      • Add padding
      • Remove the text-decoration (set to none)
      • Border needs 3 property definitions:
        • Width = 1px
        • Style = solid
        • Color = green (or black or any color)
        • Resulting in: border: 1px solid green;
  • Hero requires a background image, background-size cover, and padding (90px 90px 60% 90px)
    • background: url( no-repeat;
    • background-size: cover;
  • The left column needs a width of about 30% and will contain a form which needs 3 tags
    • Open close form tag
    • Input tag (can be empty, and it’s a self-close tag like img)
    • Button tag (with text Go inside)
  • In the left column, the list with fontawesome icons needs you to  copy the code from the fontawesome page I provide but also needs you to add the link tag from the fontawesome Getting Started page from the header navigation in their website!
  • The footer should have two immediate children (logo and footer-nav)
    • The footer-nav also has two immediate children nav-left and nav-right
    • The anchor buttons inside the left and right nav need to be display: block; with a border-bottom

If you remember these instructions you should do quite well!

jQuery for Beginners

The 6 Line Starter Template

<script src=""></script>  
    // jQuery Code Here  

Paste these lines right above the </body> of your page and you have access to all of jQueries abilities!


The jQuery syntax is tailor-made for selecting HTML elements and performing some action on the element(s).

Basic syntax is: $(selector).action()

  • A $ sign to define/access jQuery
  • A (selector) to “query (or find)” HTML elements (same as a CSS selector)
  • A jQuery action() to be performed on the element(s) (like hiding)


$(this).hide() //- hides the current element.

$("p").hide() //- hides all <p> elements.

$(".test").hide() //- hides all elements with class="test".

$("#test").hide() //- hides the element with id="test".

jQuery selectors allow you to select and manipulate HTML element(s).

jQuery selectors are used to “find” (or select) HTML elements based on their name, id, classes, types, attributes, values of attributes and much more. It’s based on the existing CSS Selectors.

All selectors in jQuery start with the dollar sign and parentheses: $().


Let’s hide all paragraphs on a page:


What are Events?

All the different user’s actions that a web page can respond to are called events.

An event represents the precise moment when something happens.


  • moving a mouse over an element
  • scrolling the page
  • resizing the browser
  • clicking on an element

The term “fires/fired” is often used with events. Example: “The click event is fired, the moment you click with the mouse”.

Here are some common DOM events:

Mouse Events Keyboard Events Form Events Document/Window Events
click keypress submit load
dblclick keydown change resize
mouseenter keyup focus scroll
mouseleave blur unload

jQuery Syntax For Event Methods

In jQuery, most DOM events have an equivalent jQuery method.

To assign a click event to all paragraphs on a page, you can do this:


The next step is to define what should happen when the event fires. You must pass a function to the event:

  // action goes here!!

Common Events and Actions


The click() method attaches an event handler function to an HTML element.

The function is executed when the user clicks on the HTML element.

The following example says: When a click event fires on a <p> element; hide the current <p> element:



jQuery hide() and show()

With jQuery, you can hide and show HTML elements with the hide() and show() methods:




jQuery toggle()

With jQuery, you can toggle between the hide() and show() methods with the toggle() method.

Shown elements are hidden and hidden elements are shown:



See the Pen backToBasics by Angel Grablev (@agrublev) on CodePen.32466

Full list of actions

Traversing the dom

Often you need to get creative with selecting the right element. jQuery offers a huge selection of actions to traverse (navigate the dom) from the current selector.

For example, if we want to click on a dropdown button and activate the closest dropdown content element we can:


Other useful traverse actions:

  • parents(“selector of parent to find”)
  • find(“selector of ethe lement to find inside currently selected element)
  • parent() // selects immediate parent element
  • siblings() // selects all of the siblings of the selected element (like all other list items)
  • children() // selects all immediate children of the element

Full list with examples

Checking things (filtering)

We can also filter the results from our selector. For example if we want to get all .button elements but only get the ones with a class .email.


Some other filters:

  • first() // get the first matched
  • last() // get the last
  • not(“selector to ignore”)

Full list of filters

Manipulating the dom

Sometimes we want to remove or add new elements to the page.

For example, after the user registers we may want to add a profile image in the header:

See the Pen appendMe by Angel Grablev (@agrublev) on CodePen.32466

Append adds the new element right before the closing of the selected element. There are other methods like:

It can be a nightmare to write HTML inside of the append(“STRING”). Especially because you have to constantly remember to use double or single quotes depending on what you use to wrap the entire html element with. But we do have some options! First, let’s review the issues:

  • Need to use single quotes around the element and double quotes inside where you add attributes
  • To write the HTML on multiple lines so it’s legible we need to use the string concatenation ‘+’
  • To add any variables from javascript we need to also use string concatenation ‘+variable+’
  • It’s hard to edit the HTML

Advanced variable usage:

We can use some JavaScript hacks to make it easier to support multiple lines and easier to work with code. But it’s not ideal!

See the Pen templates by Angel Grablev (@agrublev) on CodePen.32466

Using a script tag:

One option is to use a script tag with a special type so the page doesn’t try to run the code. Then select the script tag and get its HTML content with jQuery. Then we can go about changing text or attributes.

See the Pen templates by Angel Grablev (@agrublev) on CodePen.32466

We can achieve a similar effect by adding an html element with our template, hiding it, then using jQuery to duplicate it and append it everytime we need to use the template.


We can use the special ` slanted quote to define the HTML and even add multiple lines, it’s called Template Literals and of course, Internet Explorer does not support it!

There are hundreds of plugins/libraries that actually make working with templates into a fun experience.

And of course it comes built into Angular/Vue/React and other libraries.

Examples of using what we learned


jQuery plugins allow us to do a lot of amazing things without having to write almost any code!

Voting time



Many ways to find them!

Popular jQuery Plugins List Directory (A-Z)


  • 1
  • 2
  • 5