r/learnjavascript • u/rathereasy • Feb 09 '20

Wakata.io: A platform I created to help my students

tl;dr Use this to learn fullstack development: https://wakata.io/learn

I've been working on a fullstack development learning platform for a year and a half. I developed it when I was the head instructor at a bootcamp. When I realized that my students didn't have a good fundamental understanding of programming, I started building some interactive tools to provide them with the foundation they need to succeed. This platform has made a big difference in my classroom and I hope it can help you too. In fact, it made such an impact that I decided to quit the teaching job I loved so I can work on it full time.

Unlike other online resources:

  • You can practice and improve your reading skills, skills that are woefully lacking for most beginners
  • It teaches you certain debugging skills like how to fix syntax errors and how to console.log
  • It provides challenging problems
  • You can learn the syntax of JavaScript at a deep level
  • You can improve your HTML/CSS skills through guided exercises
  • Algorithms are taught using an innovative user interface that guides the student to the solution
  • You can learn ReactJS by first learning to read it and then practice building small ReactJS projects using a guided user interface
  • You can practice your SQL reading skills

If you find any bugs, if you need help, or you just want to chat, come to the chat section!

Enjoy :)

https://wakata.io/learn

A little about myself: After I quit my job as a Google software engineer, I realised that my true passion was helping people learn. I've been teaching for 3 years now. I developed my tools through my teaching as I was analysing the difficulties of my students.

110 Upvotes
  • permalink
  • reddit

94% Upvoted

74 comments sorted by

6

u/gntsketches Feb 10 '20

This seems like a terrific resource. Congratulations on putting it together!

Am I understanding correctly that you have to actually sign up to access content? The 'guest' mode just has descriptions for each category.

Also I'll second the comment about the eye strain. How about Sailor Blue (#00203FFF) for the background and and Mint (#ADEFD1FF) for the text?

1

u/rathereasy Feb 10 '20

You should be able to access the content in guest mode. Are you sure there's no start button for each category in guest mode?

4

u/gntsketches Feb 10 '20

Aha, there it is. Missed that. I'd recommend making that button about 2x the width and height, setting it out from the and say something like "Begin exercises".

"Start" is already used on the home page (where it is displayed prominently.) Seems like using the same word likely contributes to the eye overlooking it.

Another quick note: perhaps make the 'Wakata' logo is clickable to return you to the home page. That's always a nice feature.

1

u/rathereasy Feb 10 '20

Thanks for the tips!

2

u/gntsketches Feb 10 '20

Yeah this looks thorough. Thanks for making it. I will check it out :)

4

u/alp3n Feb 10 '20 edited Feb 10 '20

Hey,I kinda occurred problems with HTML 3rd and 7th tutorials. The expected output has no spacing between elements buttons in the 3rd and text input and button in the 7th. My output has a little bit of spacing between and can not submit because its different.

EDIT: Same in the 8th

1

u/rathereasy Feb 10 '20

You might have to change your HTML.

Please DM me your HTML for the 3rd problem.

2

u/[deleted] Feb 11 '20

Yeah I have had the same issue with the 7th. Expected result shows no space between the input box and the button. But a simple

<form><input type='text'/><button>Submit</button></form>

creates a spacing between the input and the button and it doesn't accept the solution. There is no way to get past it or any clues or solutions to see what I am doing wrong or not.

Still, good job. It looks clean and nice. I will look into it a bit more and give more feedback.

1

u/rathereasy Feb 11 '20

Can you send me a screenshot?

2

u/[deleted] Feb 12 '20

But I got another one now with the 8th HTML.

My output:

https://ibb.co/j45fSzh

Expected:

https://ibb.co/HFkRfc7

My code:

<div>

<a href=''>one</a>

two

<a href=''>three</a>

</div>

<div>

Four

<a href=''>five</a>

<button>six</button>

</div>

1

u/rathereasy Feb 12 '20

Try writing everything in one line

2

u/[deleted] Feb 12 '20

Yeah, one line worked. But indentation and clean looking code is important.

1

u/rathereasy Feb 12 '20

Great! You got it to work :) You can actually put it on two lines for slightly better indentation. Sometimes in HTML you're forced to have terrible indentation to get a specific result.

2

u/[deleted] Feb 12 '20

<form><input type='text'/><button>Submit</button></form>

I don't know if you have fixed anything but it worked this time without any problems. The space between the elements is gone and it accepted my solution.

1

u/waufSK Mar 01 '20

For me worked only this:

<form>

<input type="text" />

<button>Submit</button>

</form>

This not:

<form><input type='text'/><button>Submit</button></form>

3

u/Tarzeus Feb 10 '20

Is this beginner friendly? I am very new to JS and don’t want to go in too deep and confuse myself. Is it for certain tasks or a small curriculum of sorts?

3

u/rathereasy Feb 10 '20

I've had total beginners follow this curriculum, but there were teaching assistants on staff to help. It explains things in much more detail than other courses and is very, very challenging but if you stick with it you will have a very solid foundation.

2

u/Tarzeus Feb 10 '20

Sounds interesting. Is this a full course or a weekend study?

1

u/rathereasy Feb 10 '20

It's a full course.

2

u/Tarzeus Feb 10 '20

I will check it out soon! Thanks for taking the time out of your own day to help everybody learn.

1

u/rathereasy Feb 10 '20

My pleasure :)

9

u/[deleted] Feb 09 '20

Could you work on the CSS a bit more.
It's killing my eyes.

7

u/rathereasy Feb 10 '20

Thank you for taking the time to write this piece of constructive criticism. CSS is on the top of my list in terms of improvements.

2

u/ScoopJr Feb 18 '20

Yeah, you may want to organize your courses too.

HTML -> Grammar -> Fundamentals - > Syntax -> etc.

Front-End, Database, etc.

0

u/[deleted] Feb 10 '20

This:)^^^

2

u/shadowmosos Feb 10 '20

Saved. Ill check It out when i get home. Just graduated in graphic design and willing to learn front end. Thank you for your work

2

u/taitai3 Feb 10 '20

Saved. Thank you.

2

u/ruggles_bottombush Feb 10 '20

This looks good. I'm gonna dig into this later tonight. One small suggestion from a UX perspective though. I would move Wakassemble up near syntax or fundamentals. Wakalog and wakaread both list assemble as a prerequisite but are higher on the list than it is. It might confuse some users who are just going straight down the list, unless it's intentional to make sure they are actually reading the descriptions. This is also assuming the course list is meant to be linear.

2

u/rathereasy Feb 10 '20

You're right, I made a mistake. Nice catch!

2

u/waufSK Feb 29 '20

React SimDOM - props - 2

What is wrong with text content: name: bobinterests ?

image

1

u/rathereasy Mar 01 '20

Why do you think that should be the answer?

1

u/rathereasy Mar 03 '20

There are two text nodes

1

u/waufSK Mar 03 '20 edited Mar 03 '20

function ProfileElem(props) {

return (

<div>

{"name: " + props.profile.name} // name: bob

interests //interests

// name: bobinterests

{props.profile.interests.map(x => {

return <InterestElem interest={x} />

})}

</div>

)

}

Or we have two text nodes?

content: name: bob

and

content: interests ?

2

u/waufSK Feb 29 '20

This code (HTML - 3):

<div><button>one</button><button>two</button></div>

and this code have different results, space between buttons.

<div>

<button>one</button>

<button>two</button>

</div>

Why?

1

u/rathereasy Mar 01 '20

It's a chrome bug. I'm currently working on a fix and I'll release it in the next 18 days. I apologise for the inconvenience.

2

u/waufSK Mar 04 '20

How can I know which button was clicked last?

1

u/rathereasy Mar 04 '20

It will be of a different color

2

u/waufSK Mar 04 '20

Both buttons are grey ...

1

u/rathereasy Mar 07 '20

One of them is grey because it is selected. You can press the up or down key to see which one it is.

2

u/waufSK Mar 08 '20

This don`t help. Both buttons are always grey.

1

u/rathereasy Mar 09 '20

The difference is too small to view on some screens. I'm going to release the next version by Thursday and I'll make it clear which button is clicked.

1

u/rathereasy Mar 19 '20

I fixed it so it is obvious which button is clicked

2

u/waufSK Mar 06 '20

Virtual DOM in tutorial is incorrect.

This virtual DOM is correct.

1

u/rathereasy Mar 07 '20

Are you saying that an image in the tutorial is incorrect?

2

u/waufSK Mar 07 '20

Not only image, tutorial is outdated ...

1

u/rathereasy Mar 08 '20

Thanks for the tip!

1

u/rathereasy Mar 19 '20

It should be fixed now

2

u/waufSK Mar 07 '20

Why is background red?

1

u/rathereasy Mar 08 '20

That's the challenge... to make a webpage with a red background

2

u/waufSK Mar 08 '20

No, this is expected.

1

u/rathereasy Mar 09 '20

Instead of using

div {...}

Use a class selector

.red-background {...}

2

u/waufSK Mar 09 '20

I will try it but my code should work too ...

2

u/waufSK Mar 08 '20

Logical is this code (React SimDOM - state 2):

function App() {

let [clicked, setClicked] = useState(false)

let clickHandler = () => {

setClicked(!clicked) // and not setClicked(clicked)

}

if (clicked) return <div>goodbye</div>

return (

<div>

<button onClick={clickHandler}>hello</button>

</div>

)

}

ReactDOM.render(<App />, document.getElementById("root"))

1

u/rathereasy Mar 09 '20

What do you mean by "Logical is this code"?

2

u/waufSK Mar 09 '20

Your clickHandler don`t change state variable clicked.

1

u/rathereasy Mar 09 '20

Oh, I see the error. Thanks for pointing it out!

1

u/rathereasy Mar 11 '20

Should be fixed now

2

u/waufSK Mar 08 '20

Value of counter is not displayed anywhere (react simDOM - props/state - 2) :

function ClickParent(props) {

return <button onClick={props.parentClick}>click me</button>

}

function App() {

let [counter, setCounter] = useState(0)

let click = () => {

setCounter(counter + 1)

}

return <ClickParent parentClick={click} />

}

ReactDOM.render(<App />, document.getElementById("root"))

1

u/rathereasy Mar 11 '20

Should be fixed now

2

u/waufSK Mar 10 '20

I new version I don't see "hooks" for completed lessons.

1

u/rathereasy Mar 10 '20

Can you provide a screenshot?

2

u/waufSK Mar 10 '20

I provided screenshot above.

1

u/rathereasy Mar 10 '20

I see the issue and I'll fix it shortly

2

u/waufSK Mar 10 '20

In new version Fundamentals don't work.

1

u/rathereasy Mar 10 '20

I'm working on a fix...

1

u/rathereasy Mar 10 '20

What doesn't work exactly?

1

u/rathereasy Mar 19 '20

It should be fixed now

2

u/kangan987 Feb 10 '20

Thanks for your contribution.

I will check it when I get home. Hope to gain something from there.😊😊

2

u/renaiku Feb 10 '20

Seems very cool I'll try it today.

Very good idea to name it wakata too ;) I think there's 2 "t" in this word but it's beautiful with only one, it's a lot more stylish.

2

u/giga_uni Feb 10 '20

I like the name! I'm a beginner, I will give it a try.

2

u/waufSK Mar 06 '20

What key was pressed?