강의

멘토링

로드맵

Programming

/

Web Publishing

The Immortal jQuery Still Alive - From Basics to Practice

jQuery, a JavaScript library used by over 75% of websites worldwide! This course is structured to help you understand the principles and build a strong foundation rather than focusing on flashy effects. Learn jQuery from the basics to advanced applications to complete your own portfolio or use it immediately in the field.

(5.0) 2 reviews

21 learners

  • ezweb
제이쿼리
이론 중심
웹퍼블리싱
HTML/CSS
JavaScript
jQuery
jquery-selector

What you will learn!

  • Basic jQuery Syntax

  • Changing element styles with jQuery

  • Applying Events to Elements with jQuery

  • Quickly Implement Animations with jQuery

  • Practical TABS examples you can use right away.

  • Ready-to-use, practical example: Accordion

  • Ready-to-use, practical example lightbox

  • Ready-to-use, practical examples of Back-to-Top animations.

  • Ready-to-use, Practical Example Slideshow

  • Using the Swiper JS Library in Practice

  • Utilizing a Practical Library - Masonry

  • Practical Library - Utilizing ScrollTrigger

  • Practical Library - Utilizing Fullpage JS

Why You Should Still Learn jQuery

jQuery is a JavaScript library that has been widely used by web developers since it first appeared in 2006. One of the main reasons for this is that it simplifies the selection and manipulation of HTML elements while ensuring compatibility across different web browsers, thus increasing developer productivity.

These advantages of jQuery are reflected in its high usage on websites around the world. For example, as of 2021, about 77.8% of the top 10 million websites were using jQuery.

[ Source: https://w3techs.com/technologies/overview/javascript_library ]

As such, jQuery has been a standard tool for web development for a long time. Therefore, learning jQuery can be a great help in understanding and maintaining existing, massive code bases. Also, since many websites still use jQuery, learning it can be useful for a variety of projects.

Of course, modern frameworks and libraries like React and Vue.js have been gaining attention recently, but jQuery’s simplicity and wide compatibility still remain attractive factors. Therefore, learning jQuery as a web developer will be an important foundation for understanding both past and present technologies.

Example of a website using jQuery

Samsung Electronics https://www.samsung.com/sec/


If you look at the head tag section of the element section with the developer tool on Samsung Electronics Home, you can see that the jQuery library, slick (slideshow) library, swiper library, and masonry library are being used.

Asiana Airlines - https://flyasiana.com/C/KR/KO/index




In the case of Asiana Airlines, we are using jquery and swiper libraries, and because we use dates a lot, we are using moment.js.


BINGGRAE - https://www.bing.co.kr/



In the case of the Binggrae site, masonry, slick, etc. are used, and the commonly applied script is common.js, and the scripts that operate on each page are divided into main, sub, etc.

In addition, many other sites use jQuery to create and maintain websites.

So in this lecture, we will learn the basic grammar of jQuery, representative functions, tabs, accordions, and other basic examples, and additionally learn representative practical libraries such as swiper js, masonry, and fullpage JS.

Introducing the main learning content.

Part A

Learn the basic syntax of jQuery.

Starting with jQuery load, learn the load order. Using jQuery, select elements, change styles for selected elements, and apply events to selected elements.

Easily implement animations with jQuery. Then, set the animation time, speed, and functions in detail.


This is part of the source for learning jquery events.

An example to learn the basics of events and animations.

Part B

In Part B, we will implement the most commonly used UI/UX in web page creation: tabs, accordions, lightboxes, back-to-tops, and slides. We will write the HTML structure for implementing the effects, design the effects in advance with CSS, and implement scripts so that the effects are implemented according to various events.



This is the completed tab screen.

This is the finished accordion.

This is the finished lightbox.

This is the completed version of Back to Top Animation.

This is the finished slideshow.

Part C

In Part C, you will learn how to use libraries that are widely used in practice, such as Swiper, Masonry, and ScrollTrigger.


This is the complete Swiper JS library.

This is the complete Masonry library.

This is the completed ScrollTrigger library.

Part D

In Part B, we will use fullpageJS to implement a webpage that smoothly moves to the next slide when you move the wheel.

Create a graph with SVG and use jQuery to animate the border filling.




This is a completed profile page using fullpage JS.

Sample files and completed workbooks are provided.

Example files can be downloaded from the materials for Lesson 2 (jQuery Grammar - Load Order).


The complete file can be downloaded from the materials for Lesson 17 (Fullpage JS).


Communication window (survey, 1:1 open chat room)

Students can provide their opinions and questions at any time through the Google survey and 1:1 open chat room introduced in the What's New section.


Recommended for
these people

Who is this course right for?

  • Someone who has learned HTML, CSS, and Javascript.

  • Job seeker preparing to become a publisher

  • Someone who is preparing a portfolio.

  • For those preparing for the Web Design Development Technician (formerly Web Design Technician) certification.

Hello
This is

2,541

Learners

50

Reviews

3

Answers

4.9

Rating

8

Courses

■ [현재] 그린컴퓨터아트학원 웹퍼블리싱, 프론트엔드 강의
■ [현재] 웹 퍼블리싱 유튜브 채널 'Rock's Easyweb' 운영
■ 더조은 컴퓨터아카데미 웹 퍼블리싱 강사
■ 한빛 컴퓨터아카데미 웹 퍼블리싱 강사
■ 프론트엔드 퍼블리셔, 프론트엔드 퍼블리싱 전문강사
■ UI/UX 웹 디자인 포트폴리오 강의


[ 도서 ]
2021.07.19 출간 / 웹디자인 & 웹퍼블리싱을 위한 피그마 완벽 활용서 / 비제이퍼블릭

2022.08.25 출간  / 코딩을 처음이라 with 웹 퍼블리싱  / 영진출판사

2023.10 출간 /2024 SD에듀 유선배 웹디자인기능사 실기 과외노트 / 시대고시기획

2024.11 재판 /2025 SD에듀 유선배 웹디자인기능사 실기 과외노트 / 시대고시기획

 

[ 수상경력 ]
2022.08 그린컴퓨터 아트 학원 종로지점 - 우수강사 2021.06 그린컴퓨터 아트 학원 종로지점 - 우수강사 2018.06 그린 컴퓨터아카데미 신촌 지점 - 우수강사 2017.05 그린 컴퓨터아카데미 신촌 지점 - 우수강사 2016.05 그린 컴퓨터아카데미 신촌 지점 - 우수강사 2015.10 그린 컴퓨터아카데미 신촌 지점 - 우수강사 

 

 

 

Curriculum

All

17 lectures ∙ (5hr 30min)

Course Materials:

Lecture resources
Published: 
Last updated: 

Reviews

All

2 reviews

5.0

2 reviews

  • tomomo님의 프로필 이미지
    tomomo

    Reviews 7

    Average Rating 5.0

    5

    35% enrolled

    Cảm ơn bạn vì khóa học tuyệt vời.

    • ezweb
      Instructor

      Cảm ơn bạn vì đánh giá khóa học quý báu.

  • sang416님의 프로필 이미지
    sang416

    Reviews 4

    Average Rating 5.0

    5

    65% enrolled

    Limited time deal ends in 6 days

    $268,844.00

    25%

    $13.20

    ezweb's other courses

    Check out other courses by the instructor!

    Similar courses

    Explore other courses in the same field!