Alright so for web dev there are multiple routes you can take (as in which side of

web dev you start with). Ill add at the end what I did and what I plan to do. You
have the Front-end (client side) of web dev so those are the languages that load
up and function in the persons browser. These are HTML, CSS and Javascript.

HTML = HyperText Markup Language and CSS = Cascading Style Sheets. To get an
idea of what these 3 languages do well compare it to a human body:

HTML = the Bones so it creates the basic structure of your page, CSS = the skin,
hair, eyes etc. so it styles the page however you want, yknow makes it pretty and
finally Javascript = the functionality of the page, so like the nervous system, it
makes things actually happen like when you press a button.

Javascript has nothing to do with Java btw. Brief history: Javascript was first called
ECMAscript and later then they changed it to javascript, but it has nothing to do
with Java.

HTML and CSS are very easy to learn and are pretty basic, for CSS you also have
frameworks (libraries/tools) to help speed up the styling and make it prettier. The
most popular one is Bootstrap (made by Twitter) which is amazing, used it myself
n its easy.

For Javascript you also have frameworks/libraries, the 3 most popular ones are:
Angular 2 (made by Google), React (made by Facebook) and Vue (made by a guy
who formerly worked on Angular 1). There are also a ton of other frameworks
that are less popular but I dont think theres much point focusing on them. Also
you have Jquery which is an older Javascript library that isnt considered that
important/useful anymore (used to be a lot more important/used before) and
although now you can do almost anything with just vanilla/pure Javascript I think
its worth learning some Jquery, its supposed to make JS much faster. One thing
youll see probably a lot is something called ES5 and also ES6 and maybe ES7.
Those just stand for ECMAscript (aka Javascript) and its version. Each new version
brings new syntax and functionality, for example ES6 has some interesting new
syntaxes/functions that make it much more powerful.
Side note: the Javascript world (especially frameworks !) changes a lot, like every
6-12 months you have something new, it changes a lot more compared to the
back-end stuff so keep that in mind.

Then you have the Back-end (server side) of web dev. These are the languages
that work/sit only in the server. The main (most popular) 3 server side languages
are: Python, Ruby and PHP. You can also use Javascript actually by using a
framework (frameworks are like libraries, they can help a ton) called NodeJS, so
then youd have Javascript running on both Front-end and Back-end. With Python,
Ruby and PHP you use frameworks to make it work for server side web dev.
Pythons framework is Django (another popular one is called Flask), Rubys is Rails
(also called Ruby on Rails) and for PHP you have Laravel. (You can actually use
btw other languages like C and C++ from what ive read/heard from other people
but no one actually does that seriously.)

You also have the Server/Database language which stores and handles the data.
You have Relational/SQL databases: MySQL, MariaDB and PostgreSQL. You also
have NoSQL Databases such as: MongoDB and Redis. Dont know that much
about all these yet so cant recommend any atm.

Finally something to mention is that apparently most modern websites dont have
their own servers anymore, they instead use AWS (Amazon Web Services) which
is the most popular cloud based server or Azure (from Microsoft) or Heroku. So
thats nice, no need to worry about having/renting space for servers.

I started with the Front-end and am still improving my vanilla Javascript, but you
can also start with the Back-end if you want to like I said. So far I know HTML, CSS
(including Bootstrap 3, Bootstrap 4 is coming out soon !) and Javascript (only ES5).
Im planning on finishing fully understanding how JS works and fully learn ES5,
then learn ES6, then learn Jquery, then Im gonna learn a little bit of each
framework (Angular2, React, Vue) (btw one of the Udemy courses is 8 hours and
specifically compares in depth and teaches a bit of all 3 frameworks)
 and finally choose and focus on 1 framework (though its most likely going to be
choosing between Angular 2 and React, because VueJS is considered super easy
and very fun and nice/pleasant to use. So more like Vue + 1 of those 2).

After having become good/mastering all that front-end stuff Ill learn a little bit of
all the server-side languages (Python, Ruby ,PHP and NodeJS which should be
relatively easy since its just Javascript), just you know to have them all in my
arsenal. But Ill finally end up focusing on Python (Django) because besides being
great for web dev its also the main language used in Data
science/Finance/Quantitative Trading and AI/Machine Learning. A main
difference between Python and Ruby is that Python is supposed to be easily
readable/understandable and also easier to learn and maintain, whereas Ruby on
Rails is harder to learn but is also more magical because it works somehow
more interesting idk lol. Ruby on Rails was specifically designed for programmers
to have fun while programming and is also used a lot by hipsters so yeah idk.
Wont hurt to know a bit.

As for the Database Languages Im just gonna choose the most popular SQL
language and the most popular No SQL language and learn both.

Then gonna learn how to use/operate AWS. Finally gonna have to learn
security/hacking obviously to protect everything , for example against an SQL
injection attack.

So youre either a Front-end web dev, Back-end web dev or a Full stack web dev
(both + should have some basic knowledge of security/hacking). In a nutshell
heres how I see my personal web dev arsenal to become finally: HTML, CSS (w/
Bootstrap), Javascript (w/ Jquery, VueJS, ReactJS, NodeJS), Python (Django),
MySQL, MongoDB.

Resources:

Front-end roadmap: https://goo.gl/xiFFhd

Back-end roadmap: https://goo.gl/BVHDYk

DevOps/SysAdmin roadmap: https://goo.gl/D88xRq

Which programming language to choose infographic: https://goo.gl/L64kSz

Playlist on youtube from which I started learning: https://goo.gl/aAkCZV

note: I only watched/learned till the 4th Javascript tutorial, so after video 10 of the
playlist I stopped because I didnt understand very well and I just thought the
quality was poor of the javascript videos.

If you already understand objects, functions, classes and programming in general

and understand Javascript then no need to watch these 2 videos but if you dont
like i did then these will help tremendously imo:
https://youtu.be/zf_cb_Nw5zY?t=1s and https://youtu.be/JC_d9QG6Y6U?t=1s

2 other videos about Javascript that I absolutely loved:

https://youtu.be/zPHerhks2Vg?t=1s and https://youtu.be/rlLuL3jYLvA?t=1s

After all that what I did was I started learning from the Mozilla Developer
Network which is a fantastic resource:

https://developer.mozilla.org/en-US/docs/Web/JavaScript

I recommend going through all the complete beginners sections, youll learn some
extra details/things. Shouldnt be hard and its a very credible source.

Now finally where Im at is learning Javascript from a Udemy course by Anthony

Alicea titled Javascript understanding the weird parts which teaches you How
and Why Javascript works, like the fundamentals of the language. Dont immitate
code, understand it. Its a more intermediate/advanced course so definitely
recommend it, its gonna be in the Udemy courses folder. Also I watch it at 1.5x
speed otherwise its too slow tbh.

There are also other coursera/udemy courses on all other languages (including
databases, security/hacking and AWS) and frameworks (eg. bootstrap, Angular 2
etc.) and even mobile app languages if youd ever like to learn (eventually Ill learn
to develop for android and iOS). There are also 2 Full Stack web dev bootcamps
from udemy (also 1 from coursera) which are 30-40 hours long each, covering a
lot of things from web dev and they are very popular. My plan is to binge watch
everyday for a month as many courses as i can and really advance my knowledge
:). I have about 200-300 hours worth of courses. Since uploading the courses
takes a while Ill gradually keep adding them to the Google Drive folders, in a few
weeks I should have them all uploaded there.

Google any question/syntaxes you have, youll find usually answers on

https://stackoverflow.com/ or you can write your own question/ask for help
there

also a great site to look at and learn about various syntaxes/properties:

https://www.w3schools.com/ , I usually find here things about specific syntaxes

If you want to send someone to check your code easily or just write some code
without a text editor then use : https://jsfiddle.net/

just press save after you wrote your code and send the link. Also the tidy button is
neat to make it look clean. You can also work with multiple people live at the
same time in jsfiddle.

Heres all the bootstrap components you can use:

https://getbootstrap.com/components/

Heres an app which I havent really used yet but its like w3schools.com but even
more in depth and with more stuff, so you can look up syntaxes/properties etc. It
shows stuff from all languages and even frameworks (Like React or VueJS)

https://devdocs.io/

For debugging Javascript/front end you can just use the Google Chrome
console/dev tools by hitting F12

Also imo MUST have is LiveReload, its an app that reloads the page automatically
when you save your file in your text editor so you can quickly see changes (Also
CSS changes happen automatically without having to reload, only Javascript and
HTML reload the entire page)

http://livereload.com/ youll also need the Chrome LiveReload extension from

the google extension store, just open the livereload app on ur desktop and then
activate the extension on the page ur working

Heres all the different web dev tech logos/icons (languages n frameworks) incase
you dont recognize which one it is:

https://konpa.github.io/devicon/

Funny post about how it feels to learn Javascript in 2016/2017:

https://goo.gl/gpFcGs

Text editors:

Atom = free but is known to be kinda laggy/crash , dont like it personally, crashed
for me once.

Sublime text 3 = paid but you can get it via torrents (torrentsmd.com), great text
editor (need Emmet plugin tho for autocompletion), gonna switch from it tho.
Used it for a long while.

Microsoft Visual Studio Code = Free and is supposed to be amazing now, it has a
debugging console built in so no need for the google chrome one, has Emmet
built in already (for autocompletion, example in HTML write this: div>ul>li*5 and
press TAB and its gonna automatically make it for ya) , is supposed to work very
well for python unlike sublime text 3, has a lot of functionability and
customization features and you can even get the same Color Themes like in
sublime (I use Dark Korokai, very nice imo). So ye Im gonna switch from sublime
to VSC. Other extensions I have for VSC atm are: Beautify, Code Runner, Docker,
Debugger for Chrome, ESLint, HTML Snippets, IntelliSense for CSS class names,
Javascript (ES6) code snippets, One Dark Pro, Project Manager and vscode-icons.
All of these can be easily installed from VSC.

Other great youtube channels Im subscribed to:

https://www.youtube.com/user/derekbanas

https://www.youtube.com/user/TechGuyWeb

https://www.youtube.com/user/Computerphile (This one isnt

coding/programming specifically, its just all about computers n IT, tho it also has
videos about security/hacking which are great, eg.
https://youtu.be/ciNHn38EyRc?t=1s , videos with Dr. Mike Pound are amazing).

https://www.youtube.com/channel/UCaSM4GqhbaVmRT7fmmFmR1w (Again not

specifically programming but they have Top 10, Top 5 type of videos related to
tech and web such as Top 10 Useful websites or Chrome Extensions you wish you
knew before, I found like 8 of the extensions I use from their vids).

Actual resources I promised:

Books: https://drive.google.com/open?id=0B7srTtII3_sLUzJ5Q0tzZEN4Wms

The last 5 books You Dont Know Javascript are apparently considered the Holy
Bible/Holy Grail of all Javascript books, from what Ive heard theyre really really
good.

Udemy Courses:

https://drive.google.com/open?id=0B7srTtII3_sLM01PaVpHQkIzY0E

Coursera Courses:

https://drive.google.com/drive/folders/0B7srTtII3_sLM0VPVUJpbzlLTzQ?usp=sha
ring

Also something else you might enjoy is HBOs show called Silicon Valley which is
a funny and great series (and is actually accurate on the technical stuff unlike all
the other stupid TV/Hollywood stuff that thinks hacking/programming is just
mashing the keyboard buttons as fast as you can), its around the whole Start-Up
vibe in California and about programming/engineers. Personally I love it, binge
watched the first 2 seasons in 2 days ! Each episode is 30 mins so its not too long
and it has some comic stuff, gets you a bit into that whole start-up/programmer
mindset i guess.

Also something else which you might want to know about is Bulletproof coffee ,
which is coffee blended with Grass fed butter (Kerrygold) and MCT oil (specifically
Octane oil which is pure C8 MCT). Ive tried it and it works great for your brain,
youre much faster and awake so once Im sorta done with my current diet Im
gonna have BPC everyday while coding.

Sorry that its so long ! I didnt expect to write so much, hope it didnt bore you, I
tried to summarize/cram up as much info in as I could. There just a lot of web dev
technology out there and its changing at a rapid pace. If you have any questions
ask !

Good luck and have fun ! Hope well get to work on some project soon or at least
work together at the start-up/company I wanna make :). Its gonna be really fun.