/WebDevStudyResources

(MarkDown) - An ordered list of the courses and info I've found most helpful

Web Development Study Resources

In my experience, learning how to program itself isn't nearly as hard as deciding what to study, and where, and when.

With that in mind, here's a list of the webdev resources I've found most useful so far.

The topics are ordered based on several bootcamp curricula I've gathered, as well as my own experience tackling things in what I feel was the wrong order.

There are some paid resources in this list, but I've only included the ones I've found valuable, and I've tried to mark them clearly. I don't receive any referral benefits from these resources.

Table of Contents

Important Workflow Items

Both Command Line Interface and Git/GitHub are often presented toward the end of online classes, but I learned them beforehand and I'm glad I did.

Basic knowledge of The CLI and Git can do a lot to improve day-to-day quality of life, and they both also have a lot of small tricks to pick up over months and months. For both these reasons, they're good topics to tackle as possible.

Checking in code and deploying real webpages also allows development outside of CodePen, Cloud9, and other online editors. Making sure that all the scripts are integrated properly etc is a lot more difficult at first, but extremely educational.

The Command Line

Typing text commands into the console seems extremely arcane at first, but becomes familiar surprisingly quickly.

It's useful for Git, Node development, and lots of other things, and honestly it also just feels cool and fun and hacker-y.

Git and GitHub

Git helps prevent loss of work, and GitHub makes it easy to collaborate and share work with others.

Front-End Development

Most simply, "front-end" refers to the content that is actually presented on a webpage. The text, the images, the colors.

For example: A portfolio website that contains a bio, links to projects, and photos.

HTML and CSS

HTML builds the structure of a webpage, and CSS dictates its layout and appearance.

I originally tried learning HTML a long time ago, and was pleasantly surprised to see that all the layout is now handled by CSS rules rather than horrible nested tables and frames.

Deploying Front-End Websites

Deployment is putting webpages on the internet where other people can actually see and use them.

Bootstrap

Boostrap is mainly a ton of pre-built CSS classes which can be applied directly to HTML instead of writing custom CSS.

I originally tried to learn Bootstrap before understanding CSS well, which ended up being very confusing and frustrating. Over time I've come to appreciate its usefulness for making quick prototypes etc.

Basic JavaScript

JavaScript is the only programming language that can reach into a webpage and modify the content of the HTML or the styling of the CSS.

This section covers its basic syntax and control structures, which must be learned first.

Functional JavaScript

Using functional programming is one of those weird things in programming that's actually more easily done than described.

Most of what FP means (at least early on) is using functions to iterate through arrays, rather than writing loops all over the place. It's more readable, and less error-prone.

Manipulate the DOM with "Vanilla" JavaScript

The DOM is another concept that sounds scarier than it is.

The Document-Object Model is just the content of a webpage, parsed into an object so that JS can read and manipulate it.

Manipulate the DOM with jQuery

jQuery is a JavaScript library that mainly enables DOM manipulation with more tersely-written code.

Regular Expressions

Regular Expressions (Regex) are a way to easily parse some text and find all the places that match a given pattern.

For example, matching all the email addresses in a string, or all the 5-letter names starting with "Ja".

JavaScript Challenges I

There are all kinds of useful topics that come up on Code Wars exercises.

JavaScript Challenges II

Seeing everyone else's solutions (and discussions about them) is a great way to pick up new concepts and tricks.

JavaScript Challenges III

Code Wars includes support for the newest features in JavaScript, and it's also a great place to learn about writing Test Cases.

Intermediate JavaScript

JS definitely has some interesting and potentially-confusing quirks, but learning about them is very satisfying.

Back-End Development

"Back-end" largely refers to gathering and assembling information on the server side, before sending it to the browser to be displayed.

The archetypical back-end pages are those that users can log into, and which store a lot of information about its users and their activities. For example: Facebook, Reddit, and Yelp.

Deploying Back-End Web Apps

Webpages which require a server are basically too complicated to be deployed the same way as a simpler front-end page.

Heroku and similar services can host server-side projects (also called "apps") and serve them to users.

Node.js and Express.js

JavaScript was originally only usable inside the client of a web browser. Node sets it free for use as a server-side language.

Express is a JS framework that makes it possible to write a server-side Node app more simply and tersely.

MongoDB

MongoDB and other databases are the main way that sites store data permanently, so the data won't be reverted every time the program restarts.

For example: Facebook friends lists, Netflix queues, and Reddit comments.