Connecting Learning to Use

I recently finished the Responsive Web Design certificate and found it pretty easy to work through (took about two weeks).

I started on the Javascript section and I am about 44 lessons into the first section, but I am really struggling with this moreso than the HTML/CSS sections. For my personal learning style, I need to know why what I’m learning is useful and how I might use it for the information to stick. With HTML/CSS, this was easy. I could see an immediate use case for when I would use this and why (easy example - < strong > tag makes things bold - this is how you bold things or add font-weight to a section of text on your website). I don’t feel like FCC builds the why or use case into the Javascript section. I don’t understand why this will be valuable or how I will use this later on, so I don’t retain the information as well and feel more frustrated and like I’m wasting my time.

So far I feel like I’m learning ways to manipulate a variable, which is fine, but it’s meaningless to me because I don’t know how or why it matters. How do I connect value to the Javascript section to make these lessons meaningful and something I will remember?

Roughly speaking, HTML and CSS show things and Javascript does things. If you want to do anything that changes or manipulates data, then you’ll probably want to use Javascript.

But actual programming languages like Javascript are complex and you have to start with the beginnings and learn how to use and manipulate variables before you can work up to more complex tasks.

You can peak ahead to the front end library projects to see the sort of things you need Javascript to do.

be patient and finish the javascript lessons. when you get to the final project section you will understand

IMO, the missing link here is DOM manipulation. This is the part of JS that connects the programming language part, which is similar to all other programming languages, and the web site.

For example. You know how to make a button, right? So let’s make a new HTML page and put a button and a div on it. When we press the button, the current time is going to show up in the div. Here’ we go.

<!DOCTYPE html>
<html lang="en">
<head> 
<title>First DOM Manip</title>
</head>
<body>
<div></div><!--Here's where the date will appear-->
<button>Click me for the time</button>
<script>
const output=document.querySelector("div"); // you use this to "grab" the div
const button =document.querySelector("button"); //you use this to "grab" the button
function getTime() {  //a function to get the time and put it on the page
let now = new Date();
output.innerHTML = now;  //this uses the div you grabbed earlier (called "output" now) and sets its innerHTML (basically the text, to now, which is the current time)
}
button.addEventListener("click", getTime); //this makes the button "listen" for a click, and when you click on it, calls the function getTime(notice no ())
</script>
</body>

If you put this in a text file, save it as index.html, and then double click on it in your Windows Explorer, it will pop up in your browser and (hopefully) will work.

Hopefully this will give you just a tiny idea of how to play around with the DOM.

Other things to check out:
document.getElementById (very helpful)
event listeners
innerHTML and innerText
childNode, appendChild()
setAttribute
classList
classList, add
createElement

With some playing around with these concepts, you’ll quickly be able to do lots of cool stuff on your own site.
MDN docs might help.

I don’t think you are alone in having that reaction to an algorithm based curriculum. It’s an approach that can end up making things very abstract and detached. There is a bunch of hands-on challenges mixed in to make it less abstract which is good though.

It isn’t an uncommon approach to teaching programming and some part of the curriculum definitely has to be algorithmic in nature. But there is a point when the information taught can become too theoretical, which is often the case with science-like knowledge.

I believe the upcoming version of the curriculum will have more hands-on project-based learning.

@CactusWren2020 I agree it would be nice with some plain JS DOM stuff. It’s an easy way to make what you learn more practical. It does however require a lot of knowledge that is not actually JS (as in the core language) but has to do with the Web APIs build into the browsers.

1 Like