Immersive Path From Total Beginner to Intermediate Web Dev (2 hours)

Stevie Jay
Aug 25, 2017 · 2 min read

Understand the introductory concepts of the web (30 minutes, Difficulty: 2/10)

  • What types of HTTP Requests are there? What are the two most common? (Hint: It’s GET and POST)

Read: https://www.youtube.com/watch?v=IhKteKvOr7k

  • How do I link my HTML file to my CSS file, my Javascript file to my HTML webpage?

Read: http://matthewjamestaylor.com/blog/adding-css-to-html-with-link-embed-inline-and-import

  • What is an API?

Watch: https://www.youtube.com/watch?v=s7wmiS2mSXY

  • What is a SPA (Single page application)? Name 3 SPA’s that you love.

Read: https://medium.com/@NeotericEU/single-page-application-vs-multiple-page-application-2591588efe58

  • What is a callback in Javascript? Why are they so fundamental to JS?

Read: http://javascriptissexy.com/understand-javascript-callback-functions-and-use-them/

  • What is JSON?

Read: http://www.json.org/

  • What is the separation of presentation and content? How does it apply to HTML/CSS/JS?

Sending your first request :) (ETA: 40 mins, Difficulty: 4/10)

Implement:

Create a web page with a button that says “Get Menu” on it. Upon clicking it, it should load all the data at a given endpoint by sending an HTTP Request and display it below the button dynamically (that is without refreshing the page).

Endpoint: http://demo3354820.mockable.io/menu/sushi

Requirements:

This project should be submitted inside a Github repository.

The structure should be as follows:

  • /index.html
  • /script.js
  • /style.css

The button must be colored.

The button must be centered in the middle of the page.

You are limited to the following tools:

  • Vanilla Javascript (no jquery)
  • CSS
  • HTML

Learn The Language API: (20 minutes, difficulty: 3/10)

Memorize each of the following array methods and properties. What arguments do each of these accept? What do each of these return? Submit solutions in a GitHub repository for review.

  1. Array.prototype.push()
  2. Array.prototype.pop()
  3. Array.prototype.slice()
  4. Array.prototype.shift()
  5. Array.prototype.unshift()
  6. Array.prototype.length;

Learn The Concepts of the Language: (~30 minutes, difficulty: 3/10)

  • Some call Javascript a functional language, others call it an imperative language, others an object-oriented language. What do these terms mean and which is it? (~100 word response)
  • The phrase “functions are first class citizens” is thrown around frequently in JS land. What does this mean? (~50 word response)

congrats :o

The motive behind this post: Just publicizing some material I’ve been using to help some students get into javascript engineering. If you finish this assignment send it my way and I’ll review it and hop on a hangout to discuss with you.

)

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade