5
$\begingroup$

I teach Web Foundations at a local code school. I give the students a final project where they have to develop some sort of website of their choosing. They have to have 5 pages of content, and they have to include a bit of JavaScript or jQuery. They know with jQuery how to add and remove and toggle a class. We've discussed much more than that, but that is what they have mainly absorbed. The projects are not required to be mobile ready, so they usually will not do a hamburger menu.

I try giving my students ideas on what they can do to put jQuery in their site, but many times I run dry of ideas. A carousel seems like a lot of code and something that would be hard for them to do without simply copying the code from an article or page. I have suggested to someone to have a fake submit with an HTML form. But I'm trying to get more ideas.

Does anyone know of a resource (web page, book, etc.) that specifically focuses on short jQuery scripts that can be added to a web page for a variety of purposes or effects? I would like to show my students such a resource so they could review it and maybe get ideas for things they could do themselves with not a lot of jQuery. Maybe take something from the ideas and morph it into their own thing.

I know Codepen has many examples of things involving a bit but not a ton of jQuery. The problem with Codepen is that there is no way to do any sort of focused filter or search for such types of projects (which would have to filter out things such as SCSS since they are just learning basics). I'm just hoping maybe someone has put out a resource specifically about short jQuery scripts.

Thanks!

Improve this question
$\endgroup$

3 Answers 3

Reset to default
2
$\begingroup$

I guess my first thought would be jQuery UI, which is possibly exactly what you are looking for.

A secondary approach (which you should be probably doing in any case) is to make sure that you save past student projects. You can choose to make these "visible" to current students, because over time they will create their own "library" of sorts, with internet search eventually being the lookup for snippets for the behaviors the students see.

Improve this answer
$\endgroup$
4
  • $\begingroup$ But it is in in maintenance-only mode, check here openjsf.org/blog/2021/10/07/… So not sure if that is a good idea. $\endgroup$
    – Qiulang 邱朗
    May 16 at 3:48
  • $\begingroup$ @Qiulang邱朗 Interesting! Even so, I don't think that negates its value for students trying to wrap their heads around jQuery for the first time. It's still a very useful resource. $\endgroup$
    – Ben I. ♦
    May 16 at 8:10
  • $\begingroup$ But you may further check my answer for "that negates its value for students trying to wrap their heads around jQuery for the first time." $\endgroup$
    – Qiulang 邱朗
    May 16 at 9:26
  • $\begingroup$ @Qiulang邱朗 Interesting articles! I'm not enough into the webdev space to comment on whether their journey negates the value of jQuery entirely. I answered the question as asked, but you may we'll be right. $\endgroup$
    – Ben I. ♦
    May 16 at 10:45
2
$\begingroup$

One possibility is a kind of tabbed layout. It can be implemented with only a few basic tools like hide, show and toggle. To make it fancier, you can ask your student to add animations like fadeIn or changing the background color.

Here's a codepen example I found.

a tab layout

Improve this answer
$\endgroup$
1
$\begingroup$

I would rather suggest you think twice about using jQuery. But instead of listing my reasons for not using it, you may check this github article published in 2018, Removing jQuery from GitHub.com frontend and its updated version How we use Web Components at GitHub

Gitlab did the same as, Remove jQuery from GitLabs Frontend code

So unless you have a specific need to jQuery (then we better discuss it, e.g The WordPress Factor), do not. For example, for learning purposes, I would rather suggest using vanilla modern JS to do it.

Improve this answer
$\endgroup$
1
  • $\begingroup$ Thanks for your input. It's not my decision to use jQuery. That belongs to the higher-ups. Nevertheless, I'll check out those links, and if I can put together a good argument for going away from jQuery I'll present it to the higher-ups and see if I can get buy in. $\endgroup$
    – apex2022
    May 18 at 15:41

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.