Grab and learn
Code editor Setup VScode
Top Navigation Sticky Navbar Hamburger Collapse Columns 2D transforms 3D transforms Normal card Flip card Scrollbar Progressbar Skillbar Alert Jumbotron Forms Popover Tooltip Background overlay Breadcrumbs Toast Radio buttons Text input Range sliders Dropdown Pagination Modals Color picker Icons Tables
Curtain menu Mega menu Toggle sidebar Collapsed sidepanel Full screen navigation Hide navbar on scroll Shrink navbar on scroll Page animation Image magnifier
Hover animations Parallax Scroll animation Scroll down animated icon Auto typer Carousel Animated icons Particles Smooth scroll Text animations Cube animations
Online website
Domain name Hosting SEO structure Crawling Indexing Canonical links Sitemap Robots.txt Google Search Console Google Analytics
Beginners Bootstrap Responsive websites Sass CSS grid CSS flexbox
Vanilla JQuery Page animation Async Javascript AJAX Node.js React JS Express

Javascript - JQuery

jQuery is a lightweight, "write less, do more", JavaScript library. The purpose of jQuery is to make it much easier to use JavaScript on your website. jQuery takes a lot of common tasks that require many lines of JavaScript code to accomplish, and wraps them into methods that you can call with a single line of code.


jQuery Tutorial #1 - jQuery Tutorial for Beginners -

This jQuery Tutorial for beginners will help you get jQuery on your page and get up-to-speed with how to use basic jQuery commands.
What is jQuery? As you'll see in this tutorial, even beginners to javascript can write jQuery within minutes. It's also the most universally used javascript library in the world at present, so odds are your next employer will be using it.
The first thing we'll be doing in this jQuery lesson is showing, hiding, fading, & sliding. Next, we'll modify contents of elements and learn to do a better job keeping our code clean.

jQuery Tutorial #2 - Event Binding - jQuery Tutorial for Beginners -

This second part of the jQuery Tutorial for beginners will show you how to do event binding with jQuery. Events happen whenever a user clicks, hovers, drags, types, or does pretty much anything to interact with an HTML element.
jQuery allows the web developer to easily write a program to listen to these javavscript events and modify the webpage in realtime. This is often called a dynamic website.
You can do all of this in plain javascript, but jQuery makes it incredibly easier.

jQuery Tutorial #3 - Writing Smarter, Better Code - jQuery Tutorial for Beginners -

With jQuery is easy to make things happen, but easy doesn't always mean right! In this lesson, we're gonna make our 20 lines of code compact into 4 lines of code...and it will be better code
This will involve selecting HTML elements by classname and getting a custom HTML5 attribute value with jQuery.

jQuery Tutorial #4 - DOM Traversal with jQuery -

Lots of jobs require you to be good at DOM traversal. This jQuery tutorial focuses on using jQuery as a DOM traversal library - which is where jQuery really shines.
The DOM (Document Object Model) is all of the html elements that get generated when your browser reads the html file. DOM traversal is finding elements or groups of elements and manipulating them to change the state of the web page.
You may read job posts looking for a "DOM traversal ninja", or someone who's "skilled at advanced DOM traversal" or "Bends the DOM to your will"...that's what we'll be learning in this jQuery tutorial for beginners.

jQuery Tutorial #5 - Building a jQuery Tab Panel Widget -

In this lesson, we're going to be building a jQuery Tab Panel Widget just like the ones you've undoubtedly seen all over. There's nothing special about what we're going to build, but this lesson will help you get a great understanding of how to build things in jQuery.

jQuery Tutorial #6 - Building a jQuery Image Slider -

In this jQuery Tutorial, we're going to be building a jQuery Image Slider Widget. There are lots of great jQuery slider plugins out there that have way more features and real-world testing, but this lesson on building one will help you understand jQuery programming a lot. We'll also introduce the concept of "DOM caching" - searching the DOM as little as we possibly can and then saving the results for quick-access later. Let's get into this jQuery Tutorial

jQuery Crash Course [1] - Intro & Selectors - Traversy Media

In this video we will cover jQuery selectors in depth. We can select elements by id, class, CSS3 pseudo selectors and the elements themselves.

jQuery Crash Course [2] - Events - Traversy Media

In this video we will be working with jQuery events including mouse, form and input events

jQuery Crash Course [3] - DOM Manipulation - Traversy Media

In this video Ill show you how to add, remove and change things in the DOM using jQuery. We will look at methods like append, prepend, html, and text

jQuery Crash Course [4] - Effects and Animation - Traversy Media

In this video we will look at the jQuery fade and slide methods/effects as well as the animate method


Responsive Landing Page Using HTML & CSS (A Little jQuery) - Traversy Media

In this project we will build a responsive landing page website from scratch without any frameworks. It will be modeled after the iTunes website as far as layout and content. We will use HTML5, CSS3 and a bit of jQuery
Copyright © 2020