Practical JS skills and knowledge

1

I am now hitting the “bottleneck” of only knowing how to code through the HTML and CSS part of one page and do not know how to use JS to make animations, pop-ups, how to register user action (whether they clicked the mouse or not) , and how to deal with the data users keyed into the form.

What part of freecodecamp curriculum I can look into?
Or which course I should do online to help me with this?

I have read the 1st 4 books of YDKJS series, but those are mainly theory.
On freecodecamp I am now doing basic algorithm. But I don’t think I can use those things in my website.

What kind of skills do I need to have in order to make a fully functional site like this (just an example)

http://niteshkumarniranjan.me/

2

@owel (20 character thingy)

3

I’m sure you’re going to get some chatter here. There definitely is an “algorithms are lame” crowd. I am not one of them. I think they teach you how to think and make sure you really know how to use the language. Understanding how to put a click handler on something is much easier than knowing how to do a complex sort or your complex data, imho. It may not seem important now as you’re building a tribute page, etc, but manipulating data, takes a lot of work and is harder to learn. Things like click handlers, once you get them they’re easy and are easy to google.

Nothing really jumps out at me about the web site you list. A look at the sources shows that he’s using jQuery, which is covered in FCC. You should cover a lot of this stuff in “Front End Libraries Certification”. Don’t be in a rush. Don’t try and fly too high until you’re ready - you don’t want to turn out like Icarus.

4

Was there something specific about the site that interested you?

5

haha I think you misunderstood me. I am gonna work on those algos that’s for sure. ANd I find them challenging but nonetheless interesting. And doing those makes me realise that I am still not really familiar with js’s syntax cos I have the logic in my mind but I cannot translate those correctly using js’s syntax. ANd it is refreshing whenever I can solve the problems.

But I just want some practical stuff as well so that I can put up a fully functional site. Instead of a HTML and CSS page. I think I will relearn jquery then.

Thanks!!!

@kevinSmith

6

just that it is a fully functional site and you can click the sidebar then there is a menu popped out, unlike the bootstrap default hamburger button…

Also the design of the site, mainly the color scheme.

7

Yeah, that is a combination of jQuery (javascript) and CSS:

const close_button = $('.close');
const sidebar = $('.sidebar');

close_button.click(toggleSidebar);

$('.nav-link').click(toggleSidebar);

function toggleSidebar(e) {
    close_button.toggleClass('active');
    sidebar.toggleClass('inactive');
}

Those are jQuery functions toggling the CSS attributes. You’ll learn how to do this kind of stuff later. When you get done with FCC, this sort of stuff will be pretty easy.

8

As @kevinSmith said, adding UI animation to your site is a matter of using CSS animation/keyframes and being able to add/remove those classes to specific html elements programmatically.

In your free time, check out the jQuery API for documentation and interactive demos.
http://api.jquery.com/
The JS knowledge required is pretty basic and you can easily follow it, and make very useful UI interactions.

I think the challenge will be more in coming up with a unique UI/UX idea and then trying to implement it with JS/jQuery and HTML/CSS — and making it all look pretty and smooth.

Some practical applications:
Lazyloading of photos/divs/content
Endless page (loading/scrolling)
Accordion menus
sliding side menus
tab navigation
dynamically populating sections of a page

These techniques can then be practically applied to for example, to optimize your page and increase your Google Pagespeed Insight score, resulting in optimized and fast loading pages, etc.

For example: Using the above techniques, you can quickly load and render the FCL (First Contentful Load) in mobile and desktop browsers to give a user impression that the page has already finished loading. Meanwhile, you’re loading the rest of the page contents only when needed (i.e. when user is about to scroll down to that position).

or using JS/jQuery, you can intercept all a href calls on a page, and instead call those pages via ajax/axios and then replace the relevant div contents of your current page. Result: the content section on your page is updated while the rest of the pages remain static, giving it that Single Page Application effect. i.e. no reloading of html pages, just sections on the page being udpated dynamically.

Just some few practical/application ideas…

2 Likes