Web Dev Stoga

Introduction

One of the most difficult parts of learning to code is finding the right resources to learn from.

That's why we created this resource list, to help out anyone wishing to learn to code but confused on where to go. If you want to build a web app, desktop app, website, game, or even an Android and IOS app , then this resource list is for you.

Basic HTML, CSS, JavaScript

Summary

Every single website on the internet is built with these three languages.

1. HTML stands for Hyper Text Markup Language, and is responsible for the words and images of any website.
2. CSS stands for Cascading Style Sheets and is responsible for the styling of most websites- the font family, font size, text color, background-color, button size, etc.
3. JavaScript is responsible for user interaction. For example when you hit enter on the Youtube search bar, JavaScript is what tells Youtube to load videos with the name that you entered in the search bar.

Basic Tutorials

1. Dash.Generalassemb.ly- Great intro to HTML, CSS, and JavaScript by creating different websites. The best tutorial in this basic list in my opinion.
2. Freecodecamp.com- Fantastic community with good tutorials on HTML, CSS, and JS. Also has projects for more intermediate levels of coders.
3. W3Schools.com- Indepth tutorials on the different parts of HTML, CSS, and JS (more like documentation, so if you forget something about HTML, such as the <div> tag, you can look here for help.

Coding Resources

• Codepen.io- An incredible coding playground which allows you to easily test out your skills in HTML CSS and JS. Like Google Drive, your coding projects (called pens) will be saved to your account and can be accessed from any browser.
• Atom.io- Atom is the code editor which I personally use, and is free, open source, and developed by Github. Sublime Text, Brackets, and Visual Studio Code are great choices as well.
• Emmet- An extremely efficient way to write HTML, essentially cutting down your typing by 70%. I highly suggest learning Emmet.
• Github Student Developer Pack- Great developer tools, free trials, credit, and the like provided by Github. To apply just give them your student email.

Intermediate CSS and JavaScript

Summary

Now that you have a basic understanding of HTML, CSS, and JS, it's time to learn some more advanced tools to speed up your coding workflow and allow you to write cleaner code.

CSS

1. Learn a CSS Preprocesser such as Sass or Less which will speed up the way you write CSS. Basically what happens is that you write your styling in sass, and then it is processed into CSS so the webpage can read it. Sass is a little more popular, but both are great. These frameworks will allow you to use CSS variables, functions, and even importing functionality of different sass/less files.
2. I'd strongly suggest learning a CSS framework such as Bootstrap, Semantic-Ui, or Materialize. Basically, you'll import CSS that these websites have already written, so that you won't need to spend so much time adding CSS to your buttons and other elements so that they look presentable.
3. If you really like CSS and the aspects of Web Design, I'd highly suggest checking out DevTips. Travis makes fantastic CSS and Web Dev tutorials.

JavaScript + ES6

1. Practical JavaScript- JavaScript is over 20 years old and has an incredible number of features. But to create web apps you only need to understand a small fraction of JavaScript. This course will teach you what's necessary in JavaScript to make web applications. It's a free and great resource.
2. Now it's time to learn a JavaScript framework to allow you to write complex JavaScript applications quickly, just as CSS Frameworks speed up the way you write CSS. The most popular one right now is made by Facebook and is called React.

• React JS Program- This is a great free course on learning React. At the end he has a practice project, building a Weather App, which reinforces the material he teaches in this course. Don't worry too much about not understanding webpack and npm. They aren't languages, and you'll pickup how they understand over time creating apps.
• React for Everyone- Awesome React tutorial by Scott Tilenski
• Learn Code Academy React- React tutorial well taught by Learncodeacademy
• React guide by the guy who helped build React- Good outline on the steps to learn React

3. Learn EcmaScript 6, also known as es2015 and JavaScript 6. ES6 is the newest version of JavaScript released last year, and adds many features such as the spread operator: ..., arrow function: () => { }, class syntax, destructuring, template literals: ${}, and much more. ES6 introduces many shortcuts which will make you enjoy coding in JavaScript.

• FunFunFunction This guy's youtube channel is great for learning ES6 and JavaScript in general. He's a great teacher and goes over advanced concepts in a very learnable way.

Advanced React

• MobX- MobX is a new state management library for React, and is really awesome. Learning Redux was a nightmare, so if you're not creating an app as complex as Facebook, then MobX may be the state management library for you.
• React Native- If you want to create Android and IOS apps, yet don't know any Swift, Objective C, or Java, then use React Native. React Native is developed by Facebook and allows you to create native phone apps using JavaScript. If you know how to write in React, then you'll feel at home in React Native.

General Tips

A few words of advice when learning Web Development.

• I'd suggest not using codecademy. I used to use codecademy all of the time, believing I was really learning HTML, CSS, and JavaScript, but because they hold your hand so much nothing it's hard for anything to stick. Also, all of the coding is done in a fabricated environment, so trying to code without codecademy's tools is more difficult. I'd suggest using codepen if you want to practice with small projects.
• I'd highly suggest learning how to use Github, which is an incredible way to collaborate, store, and make changes to your code. It's similar to Google Docs, in which multiple people can edit the same project and everything can be backed up to the cloud. Github for Noobs is a great way to learn Github from Travis Nielsen.
• Try to code, even if it's just a tiny bit, every day. Consistent practice every day is much better than bulk coding one day, because all of the information you learn will stick with you, instead of you always having to play catchup.

Contributing

If there are any changes, typos, badly written sentences, resources, or really anything, please feel free to send me a pull request! I'd love for people to collaborate on this repo, sharing knowledge about the best coding resources. Currently this resource list doesn't have any curated resources for backend development or game development, so if you know either it would be appreciated if you could contribute here. I'll try to update this repo in the future as I gain more knowledge as well. Have fun coding!