Web Development 2018 - The Must-Know Tech
Key Takeaways
This video teaches the essential technologies and skills required to be a successful web developer in 2018, covering HTML, CSS, JavaScript, Node.js, front-end development, back-end development, and DevOps
Full Transcript
hey everybody this is my absolute favorite video of the year every year it's the video of uh where i really cover what does it take to be a great web developer this year i mean it covers the basics for people getting into web development what do you need to learn in in what order do you need to learn it and it also covers for people who are currently front end or back end engineers or devops engineers what do you need to learn this year to keep your skill set really current so i'm excited about it uh there's three things i want to cover real quick up front one the link to this mind map right here on koggle is in the description so that way everything that's blue is a link to a video that i have or a course that i have or uh some great information on the web so you'll want to click on that once you watch this when you're actually learning all these things because i have a lot of videos covered already as you can see also there's some links in the description to the different areas so you can jump straight to an area of your expertise if you're already say a front-end engineer and lastly all the opinions on here are my own absolutely none of them are bought and paid for i do not recommend anything on here because someone gives me money to do so that's very very important to mention i do have one link that's an affiliate link but it's on there i've been recommending them for a long time anyway and i'll tell you what that link is so let's begin um you want to become a web developer in 2018 what does this landscape look like well you're going to learn basic front end development and then you're going to become either a front-end engineer which is this road up here which i'll show you or you're going to become a back-end engineer and you can actually learn both and become what's called a full-stack engineer if i were to give you my recommendation i would say learn basic front end you have to do this anyway you need to start with learning basic front end then become a javascript slash front end engineer and then become a full stack javascript engineer and then learn other backend languages i'll go into more of that detail later on as we go along but that's my recommended path in 2018 for what's going to be the best for you the best for your job opportunities and all that so if you're learning today you want to become a web developer in 2018 this is what you need to do start off by clicking on this link and learning basic html it's really easy to learn you're going to learn html css and basic javascript so html is content for a web page every webpage you go to is made in html it's basic content without css which is style cascading style sheets which is what that stands for you're just going to be able to create ugly ugly ugly content so then as soon as you learn the real basics of html which you can get comfortable in in just a few hours then you're going to start learning css you want to start making that content look pretty and beautiful so you're going to start by learning the basics of css then you're going to learn how to do layouts you're going to use grid mostly grid and flexbox these days then you want to learn how to do responsive design responsive means that that same html will look different and display different on an iphone than it will on a big old desktop computer that's called responsive and then responsive images and css animation you honestly probably don't have to learn too much in css animation for the basics but that's kind of your basic css skill set and so again you learn basic html then learn css and the rest of html together as you go so once you have those down then you're going to start learning basic javascript now javascript is the function to a web page so say on twitter you go and add a new tweet it shows up in your timeline right away it just appears on the page that's javascript to doing all those smarts let's say you reply to a tweet and then it somehow goes and notifies everybody else's phones well javascript is telling that web page hey send out this new tweet that's the function javascript is also a programming language so this is where you start to learn basic programming and here's kind of the things you'll want to learn on here i won't go through really what they are you can learn them as you go jquery is on here you don't really need to learn jquery anymore but i put it on the list because the skill sets there are jobs for just this skill set here and they tend to know html css and oftentimes those companies will use jquery so it's a decent thing to familiarize yourself with while you're at this stage i call this the website developer stage you can create websites but you can't necessarily create web apps like you couldn't go create twitter but you do know how to create like a brochure site you know it has flat information maybe for a small business or restaurant or something so this is a skill set you can start getting work for you can start making money uh maybe even get a full-time job and then as you go down one of these two paths then you can really become a career web developer so that's basic front end that's what it takes to do basic front end in 2018 so then as you pick a path again i recommend this path first and then back end but as you pick a path you're going to want to learn this to-do list as you go you don't have to learn it all overnight um but you do want to learn them as you're going this is kind of just like a learning list for you so by the time you become a full front end engineer you'll kind of learn these things you want to learn how to use the terminal you don't have to master it but you do want to feel comfortable there if you're not comfortable in the terminal in the console you will start being held back as you go deeper so terminal something you want to lose you'll want to learn it's a little intimidating at first but you pick it up really quickly then you're going to want to learn basic ssh and then how to put files onto a web server with ssh then you're going to learn github github is how the world tends to store their code as a standard professional developers tend to use git and they tend to use github with git then you're going to learn how client which is like a web page and the servers talk to each other there's two videos i put on this link that are really really helpful for people getting into web development it's things that are very difficult to know what you don't know and that took me years to kind of pick up on that i've compiled into two pretty short videos that i really wish someone would have told me when i was starting out learn what a restful web service is that's kind of something that you'll need to learn as you become a front end or back end engineer how you can kind of talk client to server and then you want to learn domain name and dns basics um just a little bit more about what an a record is what a c name record is stuff like that um and then lastly i guess i failed to mention the first time you want to be able to publish your html css and basic javascript to a website that's really important i recommend hostgator for this i've been recommending them for a long time so i finally did get an affiliate coupon code with them so if you do click this link or use this code i may make a buck off of it so that is the one link on here that i will mention is an affiliate link so don't use it if you don't want to there's these drop 25 percent and drop 10 bucks codes but let's make a deal i think can give you somewhere around 30 to 40 lots of the time so that is again that is my coupon code use it to your own peril and so you want to learn basically how to set up a website that's the easiest place to do it when you don't know what you're doing is hostgator they're also one of the cheapest out there and then you want to learn how to put your html css and javascript on that website so that's basic front end um once you've got that and you're becoming a front-end developer uh here's kind of the things you want to learn this looks intimidating this is not very intimidating in reality um just give me about one minute to explain why here so you basically want to learn four things when you're becoming a front-end developer also known as a front-end engineer or a web developer or a javascript engineer or a react developer or view developer those are kind of the job titles you'll be searching for when you know these things you're going to upgrade your css skills you're going to upgrade your javascript skills become a little bit more confident as a programmer you're going to learn some build tools and you're going to learn one or more javascript frameworks things like this you can learn in more or less a day and then master in a week same with a lot of things up here you can learn so many of these things on this list in a day at the most a week this is going to be where most of your learning is going to take place in learning one of these frameworks so it's really not that big of a deal so css tools and skills these have been around for years nothing's really changed here sas lesser stylus are the pre-compilers you want to use they just add extra functionality to css when it comes to a css framework if you know css grid you might not need a framework anymore being that you do need a framework bootstrap or materialize are kind of the two coolest ones these days i've not gotten a lot of chance with the brand new bootstrap before i need to learn that and do a video on that because it does it's based on css grid so it's kind of cool and then css organization is something that that's useful in a lot of arenas basically the methodologies for what you name classes and what you call your css things when you're developing them uh those are kind of the three popular css organization methodologies that you want to learn again super easy to learn and then you'll want to learn a front-end build tool you want to be able to take all your css and compile it up and build it up npm scripts are a great way to do that i cover those in my node.js course webpack is the number one tool to use there used to be grunt and gulp and webpack but honestly you just kind of want to learn webpack these days if you're going to learn one other one you could learn gulp but webpack is really just the one to know and then here's a really good document from i believe mozilla on front end performance and and how to learn the areas to make sure your front end website is performant and put together really smart um so then once you learn that uh let's go to javascript frameworks this is really the biggest thing you want to learn to become a front-end engineer front-end developer is you want to learn how to program well using a framework now the one to know in 2018 is react js if you're going to learn one learn react boom that is it react and vue are the two that i would tell you to learn in 2018 angular and ember are still out there with some jobs but not a lot of new applications are being built in angular and ember so i would say honestly don't even worry about those unless you have some spare time and you want to maybe familiarize yourself with angular because there's a decent bit of angular job still out there react and view are the two things to know and so if i was going to build a brand new web app today if it was small like a single module i'd do it in view just view just drop view on the page you'll have your module done it's going to be fast it's going to be easy view is really great and then as the app grows i'm going to use maybe view with view this right here view or next if it's going to be a larger view app but honestly personal opinion once it starts getting into larger apps i'm going to absolutely use react just because if nothing else the community solutions and help content available react is awesome react or vue can handle big apps really well but react is the one to pick these days um so what do you do with react um if i was doing react relay or apollo if you're gonna use graphql graphql is a really cool alternative to rest that's definitely something you want to familiarize yourself with these days apollo is probably my favorite i prefer apollo over relay and then next js or after js or if you want to do server side rendered apps those are really good to look into and then managing css and react glamorous emotion or styled components are kind of duking it out for who's the best honestly they're all going to get the job done well each has their advantages and disadvantages but anyway no no real preference there overall just kind of take a quick glance at all of them but that's how you're going to manage your css inside of react and then you also want to look into state management so this applies to multiple different frameworks so with react you don't want to keep all your data in the react application you want to keep all your data in mobx or redux and my preference would be use modbx for smaller applications and if they get bigger and complicated and start to to get a little shaky with how complex you're doing things with data use redux at that point but lots of people default to redux these days and you shouldn't you should default to mob x because it's way simpler you're going to get more work done in the day and you're going to enjoy your developer life more because there's a lot of ceremony to building applications with redux and if you don't need that to solve complexity code with mobx if you're in the react ecosystem you'll know what i mean flux is good to know because that's kind of where these two came from but you don't really need to use flux these days i mean rxjs and bacon.js are very fun for learning functional programming kind of up here and you can actually use a lot of those methodologies in your other apps as well and then you want to learn unit testing how do i test my react.js application how do i write tests that can run against that app jest is definitely the one to use these days mocha is also really really good and has been around for quite a while but just is the one i would definitely go to right off the bat so that's kind of your javascript framework ecosystem of 2018 not a lot has changed there's just maturity coming and vue is getting a lot more popular some other fun things you can learn nah really the only one that's required on here is es6 if you do not know es6 you're going to start feeling pretty out of date in 2018 it's definitely something you need to know which is technically es 2015 es 2016 es 2017 those are those the ones you want to know static type checkers are good to know but you don't have to know these they're really really easy to implement and functional programming javascript is definitely something you should kind of walk yourself through at some point as well you don't need to learn it right away so that's the front end skill set your javascript engineer javascript developer at this point um although if you see a job for javascript engineer lots of times that can mean back-end javascript as well so be aware of that all these other jobs are for sure you know this skill set that i laid out here so you've learned basic html you're front end developer front end engineer at this point i would say the next step you should do in your learning process is learn node.js so you're full stack javascript developer so you're going to go to back end now and you're going to start really learning how to build out the server side of those applications you've been building in javascript and absolutely if you're going to pick one back-end language these days pick nodejs it's one of the easiest and fastest to learn if you already know javascript it's going to feel really really natural node.js with express js is totally the thing to do these days you're not going to go wrong with it also i have an ojs course because i absolutely believe in it so much compiled a lot of great knowledge into uh not just node.js but what it means to be a back-end engineer so if you're new to back-end engineering um if you've been in this world for a while this node.js course is going to be really really good for you a lot of key software engineering concepts for the back end are in here the job titles that you're going to end up looking for in the back end maybe backend engineer back in developer they're the same thing full stack engineer full stack developer full stack usually means you know at least react or vue or angular or something uh and then it might just be called a software developer and but honestly most often it's going to be the language you know so you're you're looking for no js developer job node.js engineer job a ruby job or a net job uh they might also be called a platform engineer or a dba if you're just databases what i clicked on something what did that do okay but dbas are people who just love and live and breathe databases and i don't quite understand those people but they're very valuable so dba is something else that's out there so these are all kind of the popular languages and honestly there's many many more so many back-end languages so what i'd say is start with node.js don't learn these ones for now don't learn any of the other scripting languages if you know node.js instead learn a scripting language and then to expand your horizons learn maybe a functional language a high-performance language um notable others we'll get to that in a second so if i were if i were to say what language is plural should i learn node.js first from there i would do golang and then from there i would do closure if i'm just going to give you my opinion learn that first learn that second learn that third there's all sorts of great stuff out there that's that pays well that has lots of job opportunity but these are going to be the ones that i think are going to set you up for success the best in 2018. um java and csharp.net are on here because there's a lot of jobs for that but um these worlds are are interesting java's been around for a long time and i don't recommend people to learn these at n at least not early on because you might get bad practices you might get a bad way of doing things or you might get an amazing way of doing things they're just a really mixed bag in these two ecosystems so i say don't learn those right off um you can look at them later on and then you maybe have more opinion there's there's a lot of bad java out there and there's a lot of bad.net out there and then there's a lot of good as well so that's that's why i don't ever recommend those to people who are learning um one cool thing to learn is serverless and aws lambda that's a really really cool thing to learn these days it's very very useful to know i mean it's a lot of fun to look into serverless architectures so what you do i did it again i zoomed in or something so what you do when you're learning a new language is you're going to say i'm learning node.js you're going to learn basically these things with the language you're going to look up uh what do they use for package management what do they use for unit functional testing so and it's easy to find on google you know functional testing with javascript functional testing with golang unit testing with golang you know unit functional testing with closure you basically can google all of these things here you want to learn how do you build a restful api how do you build a graphql api what are some security best practices all these things these are the things you will want to learn for each language and honestly the most difficult thing when you're learning a new backend programming language is not so much the language itself it's oftentimes the ecosystem it's knowing what is considered standard uh so like what is the most popular node.js package for working with a mysql database uh what's the most popular one for working with another database you know how do node.js engineers tend to set up their projects these are things that just take a while of getting involved in the community to learn how that works so you tend to feel like a fish out of water for the first couple weeks learning a new back-end language but once you kind of learn the standard ways of of doing things it really you really start to feel at home quickly and then you also want to learn these databases you want to learn these databases how to connect to them and interact with them for each language you do you'll also want to know how to set them up so start up here learn my sequel that's totally the easiest and best way to start postgres is in many ways very very similar to mysql so if you know one you in many ways know the other so you want to learn relational databases and then you want to learn a nosql database that's kind of these two lines here redis you tend to use for caching and for you know keeping track of users sessions interacting with your application uh cassandra can also be used for that cassandra also finds its home on this line down here document databases search engine databases elasticsearch and solar are the most popular graph databases are a very cool kind of newer thing they've been around for a little while but they're getting more popular these days neo4j orient db there's there's several others but those are two very cool ones to look at um and then message brokers it's kind of a a different way that applications can communicate with each other aside from making either restful or graphql api requests they can communicate over messaging bus this is especially useful over really large and complex applications so rabbitmq 0mq and kafka are three very popular message brokers so if you know all those things in one or two languages i mean you're doing good if you know all these things in one language you're doing good that's kind of the back end developer skill set for 2018 so if you're really confident as a back-end developer another area you can look into is devops which i've covered in the past as well this is kind of like back end developer 2.0 slash a really niche area of being a back-end developer where you're just really really good at deploying and helping teams deploy applications in a professional way so to be a devops engineer you need to know some infrastructure platforms aws is probably the best one to learn if you're just going to learn one learn aws it's going to put you in the most demand and it's going to pay the best azure google cloud really good digitalocean is great for simpler smaller infrastructures simpler smaller companies then you're going to want to learn how to do server management also called cm or configuration management the number one thing you've got to learn these days is docker and then ansible is a good thing to learn as well there's salt puppet and chef puppet and chef tend to be used on more enterprise level size of things but they're good to know but if you learn docker and ansible you've got a cool skill set as well and those are those are totally the ways to do it so docker's basically going to help you package up an application into a container that you can just put all over the place you can run that same container here or here or here or here or on 20 servers on one server docker is awesome you need to know docker honestly even if you're a back-end engineer you should know docker these days it's very very important um and then ci pipelines continuous integration continuous deployment making apps deploy as you merge code to github really cool solutions for that circle ci and code ship those are ones that are hosted you know you pay monthly and they take care of it all for you or you can install stuff on your own servers and infrastructure jenkins is probably the most popular but the oldest drone ci is a lot of fun but the least feature full it's docker native so it's it's really lightweight in the way it runs i like drone it's a lot of fun get lab is also a very cool solution that's that's very all-encompassing so your whole company either uses git lab or they don't tends to be how it works um and then when you learn docker uh docker's really settled in the last couple years so docker used to have all this change and traction and stuff going on and it's really settled into some stability here uh one i have a course with o'reilly on docker and then if you're building out something small scale you want to use docker swarm maybe docker cloud if you're building out something medium scale what would normally be what say 12 servers if you weren't using docker ranchers a great easy solution for running kubernetes without having to worry about running kubernetes and then docker data center universal control plane are good if you're more enterprise level which is good and then if you're doing stuff big scale kubernetes or mesos are really the two things to use with kubernetes really being the one to use so if you learn docker with kubernetes that's that's a great skill set for devops these days lots of demand at all sorts of companies so huh there's deep breath that's what it takes to be a software engineer web developer these days obviously so much more always you could talk about this stuff for hours but that's what you want to know that you you learn these things you're going to be in demand you're going to get jobs and you're going to have a lot of fun working with fun high-tech solutions so hope you enjoyed this video leave a comment tell me what you any questions you have on any of the stuff that i covered and have yourselves a great day
Original Description
A complete roadmap to being a successful web dev in 2018!
The mindmap with all of the links: http://bit.ly/2p63dS9
Node.js course!: https://gumroad.com/l/iqGFt
Jump to a section:
- Basic Front End: 2:04
- No Matter Which Route You Take: 4:57
- Front End Engineer: 7:29
- Back End Engineer: 14:42
- DevOps: 21:11
This video covers everything it takes to be a web developer in 2018. Beginning web development, learning html and css, learning javascript, becoming a front end developer, becoming a back end developer...and even dev ops and docker!
If you learn these skills, you'll be an in-demand developer with a modern and powerful skillset.
-~-~~-~~~-~~-~-
Also watch: "Tailwind CSS - why CSS utility classes save so much time"
https://www.youtube.com/watch?v=oU5ar0dmQEY
-~-~~-~~~-~~-~-
Watch on YouTube ↗
(saves to browser)
Sign in to unlock AI tutor explanation · ⚡30
Playlist
Uploads from LearnCode.academy · LearnCode.academy · 0 of 60
← Previous
Next →
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
Web Development Tutorial for Beginners (#1) - How to build webpages with HTML, CSS, Javascript
LearnCode.academy
Web Development Tutorial for Beginners (#2) - Basic CSS - How to build a website with HTML & CSS
LearnCode.academy
How to create CSS Layouts - Web Development Tutorial for Beginners (#3) - with HTML & CSS
LearnCode.academy
Bootstrap Tutorial For Beginners - Responsive Design with Bootstrap 3 - Responsive HTML, CSS
LearnCode.academy
Angularjs Tutorial for Beginners - learn Angular.js using UI-Router
LearnCode.academy
CSS Tutorial - Web Development Tutorial for Beginners (#5)
LearnCode.academy
Node.js tutorial for beginners - an introduction to Node.js with Express.js
LearnCode.academy
Github Tutorial For Beginners - Github Basics for Mac or Windows & Source Control Basics
LearnCode.academy
Javascript Tutorial - Programming Tutorial for Beginners Pt 1
LearnCode.academy
Javascript Tutorial - jQuery Tutorial for Beginners Pt 2
LearnCode.academy
AngularJS Directives Tutorial - Part 1 - Demystifying Angular Directives
LearnCode.academy
WATCH THIS IF YOU WANT TO BECOME A WEB DEVELOPER! - Web Development Career advice
LearnCode.academy
YEOMAN TUTORIAL - Master Front-End Workflow with Yeoman, Grunt and Bower
LearnCode.academy
BOWER! - Streamline Web Workflow with Bower Package Manager
LearnCode.academy
Chrome DevTools for CSS - Better CSS Coding & CSS Debugging with Developer Tools
LearnCode.academy
GITHUB ATOM - Why Atom.io will be your favorite Text Editor!
LearnCode.academy
GITHUB PULL REQUEST, Branching, Merging & Team Workflow
LearnCode.academy
Pimp that Terminal - Add shortcuts and functions to your .bash_profile to simplify routine tasks
LearnCode.academy
jQuery Tutorial #3 - Writing Smarter, Better Code - jQuery Tutorial for Beginners
LearnCode.academy
jQuery Tutorial #2 - Event Binding - jQuery Tutorial for Beginners
LearnCode.academy
jQuery Tutorial #1 - jQuery Tutorial for Beginners
LearnCode.academy
Node.js MongoDB Tutorial using Mongoose
LearnCode.academy
Node.js tutorial for beginners 2014 - an introduction to Node.js with Express.js
LearnCode.academy
WEB DEVELOPMENT - SECRETS TO STARTING A CAREER in the Web Development Industry
LearnCode.academy
jQuery Tutorial #4 - DOM Traversal with jQuery
LearnCode.academy
jQuery Tutorial #5 - Building a jQuery Tab Panel Widget
LearnCode.academy
jQuery Tutorial #6 - Building a jQuery Image Slider
LearnCode.academy
jQuery Ajax Tutorial #1 - Using AJAX & API's (jQuery Tutorial #7)
LearnCode.academy
jQuery Ajax Tutorial #2 - Posting data to backend (jQuery tutorial #8)
LearnCode.academy
jQuery Ajax Tutorial #3 - Delegating Events & Mustache.js Templating (jQuery tutorial #9)
LearnCode.academy
jQuery Ajax Tutorial #4 - "Edit" modes & Better Mustache.js Templating (jQuery tutorial #9)
LearnCode.academy
How to put your website online - how to FTP to a domain & upload files to a webhost
LearnCode.academy
Basic Terminal Usage - Cheat Sheet to make the command line EASY
LearnCode.academy
SSH Tutorial - Basic server administration with SSH
LearnCode.academy
Vagrant Tutorial - Running a VM For Your Local Development Environment
LearnCode.academy
Sublime Text Favorite Packages and Workflow
LearnCode.academy
What Makes Javascript Weird...and AWESOME - Pt 1
LearnCode.academy
Javascript is Event-Driven - What makes Javascript Weird...and Awesome Pt 2
LearnCode.academy
Javascript Closures Tutorial - What makes Javascript Weird...and Awesome Pt 3
LearnCode.academy
FREE REST API - Practice Developing Javascript AJAX Apps with this API
LearnCode.academy
Javascript Scope Tutorial - What Makes Javascript Weird...and Awesome Pt 4
LearnCode.academy
Javascript Context Tutorial - What makes Javascript Weird...and Awesome Pt5
LearnCode.academy
Nginx Tutorial - Proxy to Express Application, Load Balancer, Static Cache Files
LearnCode.academy
Live Reload Sublime, Chrome, Anything - Fast and easy with Live-Server
LearnCode.academy
Are you bad, good, better or best with Async JS? JS Tutorial: Callbacks, Promises, Generators
LearnCode.academy
Javascript Generators - THEY CHANGE EVERYTHING - ES6 Generators Harmony Generators
LearnCode.academy
Web Development Advice - Interview with Dev Tips
LearnCode.academy
How the Internet Works for Developers - Pt 2 - Servers & Scaling
LearnCode.academy
How the Internet Works for Developers - Pt 1 - Overview & Frontend
LearnCode.academy
HAPROXY vs NGINX - 10,000 requests while killing servers
LearnCode.academy
Node.js Cluster - Boost Node App Performance & Stability with Clustering
LearnCode.academy
Web Dev Training with Treehouse
LearnCode.academy
What is Node.js Exactly? - a beginners introduction to Nodejs
LearnCode.academy
How to deploy node.js applications #1 - spin up a server
LearnCode.academy
Deploying node.js applications #2 - provision server & setup flightplan
LearnCode.academy
Deploying Node.js Applications - Deploy Node the right way - as an Upstart Service
LearnCode.academy
Mobile Web Design - Coding Workflow For Mobile Websites
LearnCode.academy
WHY YOU NEED A BUILD SYSTEM LIKE GRUNT, GULP, BRUNCH FOR YOUR WEBSITE
LearnCode.academy
GRUNT TUTORIAL - Grunt makes your web development better!
LearnCode.academy
STOP USING FTP! - How to Deploy with Flightplan over SSH
LearnCode.academy
Related Reads
📰
📰
📰
📰
I let an AI write 6 WebGL hero sections — here's the one-CSS-variable reskin trick, and the honest review count
Dev.to · NeroTran
Real-Time Rails Without Turbo: Modern Reactive UIs with Inertia and DexieCable
Dev.to · Stefan Buhrmester
The Frontend Build Wars: Why Webpack’s Architecture Collapsed and How Rust Took Over
Medium · JavaScript
Persisting User Data in a No-Backend HTML App (localStorage Patterns)
Dev.to · PromptMaster
🎓
Tutor Explanation
DeepCamp AI