Random Quote Machine- where to start?

Hello, ive recently finished the Front End Libraries curriculum and about to start the projects, namely the Random Quote Machine, but its so overwhelming. Ive been given a general idea of all those ‘resources’- Bootstrap, jQuery, React etc., on which im yet to gain any experience and it seems there are hundred ways to do even the most basic tasks(like set a font color, or add an element) and its hard for me to set on one way, or the best way, to do different parts of the page. Im even uncertain how to implement the respective libraries into the pen. I see them being added as scripts on the html code, or directly called in the pen settings.

So im just looking for some general recommendations and guidelines, or input by other newbies that recently finished the challenges, on how should i proceed with the project(s), where to start from etc. I really want to put all the available techniques into action, be it Bootstrap, Font Awesome, SASS etc, but im uncertain where there could be of good use.

2 Likes

but its so overwhelming

Yup, absolutely. That is a big step, most people feel the same way.

and its hard for me to set on one way

I would say to just take a deep breath and don’t worry about it. Pick a way and don’t worry about it being perfect. You’re still learning and you’re going to make mistakes - that’s OK.

Im even uncertain how to implement the respective libraries into the pen.

Right, it’s a little weird with codepen. You can go into settings and either JavaScript or CSS and add the libraries there. But yeah, that confuses people at first.

how should i proceed with the project(s), where to start from etc

I would suggest to keep it simple. Read through the user stories and just tick them off one by one. Once you meet them, spend a little time making it pretty, and then you’re done.

I really want to put all the available techniques into action, be it Bootstrap, Font Awesome, SASS etc, but im uncertain where there could be of good use.

Don’t worry about using every tool in your tool belt, just use the right ones. Just figure out what you need.

This is difficult stuff. Cut yourself some slack and just dive in and make some mistakes. It’s part of the process.

3 Likes

thanks for the swift reply. Would you please recommend me to a set of 2-3 tools from the listed in the Front End, which will be sufficient to complete the objectives, preferably the most basic ones and id proceed with the more advanced for my next project. I assume either jQuery or React is a must?

Whatever you want. Neither jQuery nor React are a “must”. I don’t think that is says you must, but it would be good practice.

Just choose React or jQ - can’t really use them together - whichever is most comfortable. (I think React is a more marketable skill, but there’s plenty of time for that.) If you want to use Sass, use it. If you want to use Bootstrap, use it.

My advice would be to keep things as simple as possible for the first few projects. Sometimes people get a little too enthusiastic and bog themselves down with confusion, trying to use everything they can think of. Just keep it simple for now.

thanks for the response! And one last question, on the few Quote Machine projects i found, they retrieve the quotes from external source via methods im totally unfamiliar with, fetch for React and .ajax for jQuery. Should i simply copy those methods in my project(ive checked some sources on them and they doesnt seem so hard to grasp), or are there other more basic ways to do that(beside using those built in functions)?

Yes, you can choose. Do you want to encode the list of quotes in your app, or do you want to hit an external service. Clearly the first one is easier, but the second way is more fun. I might suggest just getting it to work with encoded data and then see if you can get it to work with a service.

fetch for React and .ajax for jQuery. Should i simply copy those methods in my project(ive checked some sources on them and they doesnt seem so hard to grasp), or are there other more basic ways to do that(beside using those built in functions)?

Yes, there is a “more basic” (ugly) way to do it in JS, but that has been replaced by fetch. (It is just JS, not specific to React.) This is standard JS and is a completely normal way to hit an API. jQuery has its own AJAX. That was invented before JS had fetch, back when it was really ugly to do API calls. It is less relevant now that we have fetch.

On making API calls, here are some of the methods.
It’d say avoid XMLHttpRequest like the plague. Use fetch as your default. You’ll see AJAX in jQuery projects and see axios sometimes - but they all work fairly similarly.

1 Like

by encode the list of quotes in my app, do you mean write it directly in the form of strings into my JS code? I was worried this would make my JS very long, so id definitely prefer to call an external source

Right, probably an array of objects that contain strings for author and quote.

I was worried this would make my JS very long,

That depends on how many you put in.

I completed this a few weeks ago so my experience is quite recent.

It is quite overwhelming but I would suggest picking a framework to start with, either React or JS & JQ. I did mine in React but for this it may be worth trying JQuery simply because you need React for the following challenge.

In terms of editing everyone has there preferences, personally I like to do my project locally using VS Code and then copy it all across to either codepen or codesandbox when I have finished (a few tweeks are normally needed mind you).

My approach is normally to get a fairly basic looking version up and running, then make sure I have passed all the user stories, and then finally try and pretty up with extra CSS, Bootstrap, Fontawesome etc.

Hope this helps,
Craig.

1 Like

thanks for your input Craig, its certainly helpful, and as you pointed out, im definitely gonna put JQ into action and keep React for later.
Using VS to write the whole thing and then upload online would definitely be more thorough experience, but the reason i wouldnt do it is that my PC is slow and running VS usually means mnts of loading.
I will certainly follow your advises, thanks!

Just to clarify one thing, I was suggesting VS Code rather than Visual Studio. I’m not sure if you where referring to this as well, but VS Code is a lot smaller and still runs quite well on older machines, it is fine on my 10 year old Linux laptop.

Regards,
Craig.

I have mixed feelings about whether people should do the first projects in codepen or locally. Granted, codepen is a “fake” environment, but it is a lot easier, certainly for the first, small projects. Developing locally is more work but is also more realistic. But you also have the issue of hosting the final app, in order to pass.

If you’re going to work locally, you may want to find a youtube video of someone building a basic app in jQ or React, or whatever, just to get you started.

And a +1 for VS Code. It is one of the most popular code editors and is free. But there are other popular options. And technically any text editor will work - as long as it isn’t a word processor. But VS Code is a good place to start.

ok i gotta admit i was thinking about Visual Studio, im not very familiar with the code environments . VS Code sounds like something i could try.
I can see Codepen is very simplified version of what one needs to go thru in order to host a working app and i definitely dont feel comfortable to go that route just yet :wink:

I would get the basic structure and the functionality working first, then worry about making it look pretty with CSS.

Yeah, too many beginners get all caught up in making it pretty and then they get stumped on the functionality and can’t debug it because too much is going on with messy code.

Hi, I was in the same spot as you a couple weeks ago. I made it through responsive web design, algorithms, and to the end of front-end libraries. The first two courses were impeccable IMO. But the way they transitioned from the lessons to the projects for front end libraries was pathetic. I’d recommend a paid course for react.

Anyone experiencing trouble in FCC’s front-end-libraries is not the learners fault whatsoever.

You clearly have an opinion on this.

Of course, this is open source software - you can contribute any time you want, along with all the other people who have volunteered their time. When I did the curriculum, none of that even existed. Since then it has been added and slowly improved.

But if you have some suggestions, please find the appropriate venue (the repo, the Contributors room) and share them.

Calling it “pathetic” is taking it way too far.

Personally, I think the jump to no handholding is what really pushes you in the right direction. It takes way more effort doing a project on your own than it does watching videos (free or not). Tutorials and videos are great and all, but there is a real chance that you can get stuck just doing tutorials.

When you first try to do projects on your own it can be pretty overwhelming. There are so many things you now have to figure out on your own, including how to even get started. You will learn things no tutorial or video can teach. After that, tutorials become guides to help you with your own problems, not just finished project recipes you follow step by step. Soon enough you can’t watch a video without stopping and trying things before you even see the next part.

But I would always suggest using various learning resources no matter what. Especially for learning modern React code, the current curriculum is showing its age (you should still know how to work with older code though).

1 Like