I’m completing the units fairly well, able to find resources and answers to the tasks on here and the chat room.
However I feel like the JavaScript sections and the CSS sections haven’t been fully explained in regards to how to actually combine them together.
I can do the CSS parts and I can do the JavaScript parts. Now how do I combine the two together to complete the intermediate projects like the random quote generator? I don’t even know where to start, how do I structure it? where do I put the JavaScript? how do I use JavaScript to affect HTML/CSS items?.
How did everyone else figure out or learn where to begin?
in a general sense, jQuery is your friend. I’d also review the jQuery and JSON lessons from the FCC map. These should specifically address your questions.
If you use CodePen you just write HTML, CSS and JS in respective windows and it will be combined automagically (good in the beginning, but I recommend to switch to some external editor as soon as you feel comfortable).
If you use additional libraries (Bootstrap, jQuery etc.) you add them in Codepen Settings.
You try to break the project in smaller pieces and then google, google and google again.
I usually start with basic HTML/CSS skeleton, just to have elements to attach JS to.
Then I think what I need to accomplish and if I have no idea how to do it I just google in plain English.
For example “get random quotes from internet”. Click through first couple of results (I finally used this). Now I know that I need to use API, JSON and callback. Try example API requests (paste in browser http://api.icndb.com/jokes/random), see what I get. Read on MDN about JSON, callback etc.
I restarted my Random Quote Generator three times (completely deleted the code and started from scratch) before I got more or less satisfactory result (although now I look at my code and it looks like crap to me).
P.S. Some campers do this project using a fixed array of quotes, but I think the goal of this project is to learn to use APIs.
I disagree: I believe it’s all about creating a dynamic interactive site, the first front-end project of that sort. The next project and all the ones following do require use of a web API, and provide a little more guidance (even if they recommend the wrong service). There’s nothing wrong with “reading ahead in the book” and using an API for the quotes machine if you prefer, but I wouldn’t want anyone to feel like that’s a requirement.
I know it’s frustrating, but the process of making something from start to finish is, I think, the prime lesson to be learned from doing these projects. What you’re feeling is entirely normal, even an expected part of the process.
I’m working on the quote generator right now and I had a really hard time starting it, primarily because I don’t feel like FCC really goes into and explains javascript very well at all. I looked at the JS code of other quote machines so I had an idea what to start with since the stuff I’d done so far left me with no idea.
I think that for JS, if you’re not already familiar, you really do have to use another learning source as well to get an idea of how it works.
So it’s been almost a month since I posted this. Looking back, my main issue was not knowing how to integrate HTML, JavaScript, and CSS all together, super basic concept in hindsight but I think FCC glanced over this too quickly assuming everyone would know how to do it by the time they reached the projects. Like someone mentioned, Codepen does this automatically, however working offline and with an editor like Brackets or Notepad++, I had no clue how to do this.
I could write basic javascript, html and css, but doing it for real I had no idea how to bring the 3 together. I finally learned that I can either use tags such as within my html to write javascript code, or I could write my javascript in another file, for example, called script.js and then in my html file call it using .
This felt like a mountain I had to climb to get passed, but looking back it is such a simple concept, however I hope anyone else who got stuck at this point will now know how to bring there javascript into their html files.