article,

 

Web Development in 2018 by a Web Developer

Introduction To Web Development

Hey, guys welcome to my practical guide for web development in 2018 regarding technology and career. I did a 2017 version that was extremely popular, and there’s been some changes in technology and software as well as my own opinions as I’ve grown as a developer, so I think it’s a good idea to do one of these every year.
And if you didn’t see the 2017 version don’t worry about it, we’re going to talk about everything we did in that video and more.

It might even confuse you a little if you watch both. So in this video, we’re going to focus on here and now. All right, so before we start I just want to mention a few things, first of all, this is a guide for web development technologies and the options that you have, and no way do you need to learn everything that I mention here in the fact that may be impossible.
You’ll notice that on a lot of the slides it says to choose one and stick with that. Also, this guide is based on fact and opinion I tried as hard as possible to be unbiased. I don’t have much bias with programming because I do understand that everyone is different and every project is different, and not all needs are the same.

But I will make subtle suggestions along the way. You should also look at other places for guidance, not just this video if this is not the end-all be-all to web development and what you should do, watch on YouTube, read articles, talk to colleagues all that stuff.
Now, this is very important especially when it comes down to how to follow this guide. It depends on the kind of developer you want to be, do you want to be a full-stack developer who works on the front end back end? Do you want to specialise in UI (the user interface)? Do you want to be an HTML web designer that builds just basic brochure websites? Do you want to be a back-end engineer that creates complex APIs as well as manage databases?

You’ll need to make specific choices depending on what kind of developer you want to be. But this guide, in general, is for full-stack web developers, okay. But that doesn’t mean that if you’re going to be a front-end developer, this is no use to you because we’re going to talk about that stuff as well. Alright, so let’s take a look at some tools and software.

Now you’re not going to need all of these at once when you first start you’re really only going to need the first two. The first being a text editor or possibly an IDE which is an integrated development environment. But an IDE is kind of overkill for most web development, so you probably want a text editor, and the three that I would suggest looking at is Visual Studio code, Atom and Sublime Text these are all very customizable, they’re very fast, they have tons of features.
So I would suggest looking at these three, but there are others that you can look at as well. I’d also suggest a good browser, the browser that I would definitely recommend is Chrome but Firefox is also a good browser. I would suggest chrome because it’s fast, it has the best development tools, and it uses the V8 JavaScript engine, the same engine that Node.js uses. It’s just a great browser.

Firefox coming in second and anything other than that I would not recommend for web development.
Now image editing isn’t as necessary as it used to be. We have so many tools now we have UI frameworks that allow us to create things in the browser really quickly rather than creating full mock-ups in Photoshop like I used to do back six-seven years ago when I had my own company I would do that for clients, and it took a long time.

Are You A Web Designer

Now if you’re a web designer and you’re building stunning artistic websites, then that’s a different story you’re probably going to want to create mock-ups then. But if you’re going to be an app developer you’re going to build full-stack applications, you’re probably just going to want to clean UI-UX experience, and you probably end up using some kind of framework or just making a simple layout with flexbox or the grid system or something like that.
So deployment tools this is definitely something you don’t need right now if you’re just starting out, but you will eventually need an FTP client to upload to your host especially if you’re using a shared host an SSH tool if you’re on Windows you probably will work with Putty. If you’re on Mac or Linux you can just use the SSH command it’s merely a way to interact with your server to deploy ( upload ) applications.
Cloud storage, is definitely optional, but something I’d highly recommend because I like to have my code available from everywhere from all my computers if I go on vacation I want it on my laptop and I want it all synchronised up.
So I prefer Dropbox, but Google Drive is another excellent service.
Now that we talked a little bit about tools and software let’s talk about the technologies that you need to learn. So HTML and CSS should be studied and understood first. If you’re striving to be a web developer that builds stuff in the browser, this ( HTML / CSS ) is the most essential code to learn because HTML and CSS are the building blocks of the web.
Every website that you visit uses HTML and CSS regardless of its back-end technologies, irrespective of the languages it uses on its server, the UI is always going to be in HTML and CSS even if it’s generated by JavaScript or JSX something like that the end result is HTML and CSS.

Now, the good news is it’s rapid and easy to learn, it’s not going to take a lot of your time and one thing that I mentioned in the last video, the 2017 version, I said that you need to nap master both over time and I’ve changed my outlook on that. You should master HTML5 semantics and layout but css3 gives you a lot especially when it comes to things like animation and transitions, and you definitely don’t need to learn that stuff especially if you don’t plan on use it building animated interfaces or anything like that.
I would suggest learning Flexbox and the grid system you don’t have to master it at first but learn, but you should know how to align properly without using a framework. And then the last thing responsiveness is crucial do not build layouts or websites or UIs that are not responsive that don’t look good on mobile devices. It used to be a luxury or kind of an added service for clients but now at this time in 2017 – 2018 it’s a necessity, and it’s taken for granted.

So you want to learn about CSS media queries which are really not that hard it’s basically just saying if the browser is or if the device or the layout is at a specific width then apply these styles, okay. So you want to stack elements on top of each other if you have a row of three boxes then you want to make sure when it’s on a small screen those boxes stack on top of each other.
Now that you know HTML and CSS and you’re able to create a decent-looking static website. It’s time to start learning some real programming so that you can create at least somewhat of a dynamic user interface and you can create events, you can play around with the DOM, and for this, you’ll need to learn JavaScript.

Now there are some advanced topics in this slide, and if you don’t plan on being a Node.js developer or using front-end frameworks like React and Angular, then not all of this is needed. For instance, if you’re going to be a PHP or Python developer and only build server-side applications where you render views on the server you’re not going to need to master JavaScript but you should definitely know the basics and without using a framework. And that goes for everybody even JavaScript developers you should definitely learn Vanilla JavaScript before a framework because nowadays people are actually going and learning React before they know how to write a for loop which is just insane!
You should not learn a framework before the language, okay. So some of the things that you want to learn regarding the basics are the datatypes, functions, conditionals, loops, things like that. You’re would want to learn how to manipulate the Dom, learn about the document object model, events things like that and do this without jQuery ok jQuery stopped a lot of people from actual JavaScript and I’m not saying jQuery doesn’t have its place anywhere, but you should learn the language before learning the library.

So Ajax and the Fetch API are used to make HTTP requests, and they’re used for asynchronous JavaScript and all that. This isn’t so important to learn if you’re not going to be a JavaScript developer per se but if you’re going to focus on Python or Ruby or PHP these things are important. I would definitely suggest learning JSON though because JSON is used all around in all languages and API. So JSON is essential, it’s also straightforward to learn. You can check out my JSON crash course if you want it’s very I think it’s 20 minutes long and it teaches you all the basics.

JavaScript Web Developer

If you’re going to be a JavaScript developer you’re going to work with Node.js and React.js, then this is very important. If not, then I would suggest just learning the basics like template strings and literals and things like that.
So now that you know HTML, CSS and some JavaScript now you need to learn how to deploy a primary website, and I’m talking about just a static brochure type site nothing extravagant with really dynamic functionality. So you’re going to need a shared hosting account I would suggest InMotion that’s what I’ve used for years now.
I have a shared hosting account with them, I have a VPS a re-seller account. Hostgator is also another company that I’ve worked with a lot. You want to learn the basics of cPanel which is the most popular hosting control panel. So just things like creating email accounts, creating FTP accounts you’re going to want to learn how to upload a site with FTP, the File Transfer Protocol. FileZilla is the most popular and the simplest client to use to do that, and it’s… FTP, by the way, is very slow but it is straightforward to use so at this point I would suggest FTP.

Later on, you might want to learn how to SSH into your server and use SCP and all that stuff, but right now FTP is the most natural choice. You also want to register a domain name and learn about DNS and name servers. If you have a domain name that is with a different company than your hosting account and you need to connect them, then you need to set up your nameservers within the back-end of your interface there, your domain registrar. To learn about all that stuff, get a website up on the internet own it on a domain name, and you’re now officially a web designer or a basic front-end web developer if you know all the stuff that we’ve talked about so far.

So you should be able to create very simple websites and user interfaces crew, maybe you can take a PSD which is a Photoshop file an image file and create an HTML, CSS template or website from that and that’s something that people actually hire you for is just to do that.
You’ll have a designer on your team that will create the design and then you will take that design and make it into a working website. So you should be able to add at least a few dynamic qualities to your user interface.
So button clicks, maybe like a slide show or something like that all client-side stuff with JavaScript and up at this point you should be able to either choose to be a freelancer and do things on your own or look for an entry-level position.

Now with the skills that we’ve talked about so far you’re not going to get anything spectacular, but it could give you an inroad to an excellent company where you’ll be able to grow, and you’ll be able to one day be a full-stack developer within that company. So it’s entirely up to you what you want to do up to this point. Or you may wish just to keep learning which brings us to what to learn next.
So we have a few different options depending on what you want to do. So like I said this guide is geared more towards Full Stack developers. We’re going to go ahead and look at things in this order, but if you’re planning on being a back-end engineer and creating APIs and not really working with the user interface, then you may want to go right to looking at server-side languages and technologies such as Node.js, Python and stuff like that.

Web Development Frameworks

As well as databases and in managing data structures stuff like that but again we’re focusing on full stack developers. So the next thing I would suggest to do after learning HTML, CSS and JavaScript are looking at HTML, CSS frameworks or UI frameworks. Let’s look at some of these CSS-HTML frameworks, Twitter Bootstrap version 4 is out that’s the most popular framework it’s a general framework meaning that it’s used for all different types of things. It’s used for just basic websites. It’s also used for applications things like that.

You also have Materialize CSS which is a pretty new framework, and this is great and geared more towards UI and UX over website theming and it has a very sleek look. I actually prefer the look of materialising over bootstrap, but bootstrap is more popular which makes it a little more beneficial to learn. Alright, you also have the Bulma framework which I think is an excellent framework, it’s easy to learn, it has a common sense syntax one difference with Bulma is it’s natural CSS components, there’s no need for JavaScript. And it doesn’t depend on jQuery or anything else like the previous two frameworks do.
You also have the Zurb foundation framework which was a director is a direct competitor of bootstrap, and it has been for a long time, but I think that frameworks like Materialize and Bulma some of these newer frameworks are much better. Foundation seems to be very heavy to me, and frankly, I think that the design the default look of it is pretty ugly.

So I wouldn’t suggest foundation but who knows you might like it. And then we also have Skeleton CSS which is not really a framework it’s more of a boilerplate, it’s very light. I really like it for prototyping so for basic applications where you’re just building out the functionality you don’t really care with the front end looks like that’s what skeleton is really great for in my opinion.

I wouldn’t necessarily use it on a real application. So front-end JavaScript frameworks now like I said if you’re not going to be doing this if you’re not going to be using Reactor or Angular or anything then this really isn’t that important to you. But if you’re going to be a full-stack developer you’re probably going to want to look at start learning a JavaScript framework. So React is an excellent framework very popular especially for startups. It’s super fast, it’s super light. It uses a state manager called Redux which is separate from React, but it’s often used with it.
It uses JSX to render HTML which is the Java what is a JavaScript syntax or no JavaScript extension something like that. And it uses that instead of templates which is a little different than some of the other frameworks. So we also have Angular which is also very popular especially in the world of enterprise and business Angular is much more bloated than React but it also includes a lot more in the core framework. And by the way, React is technically a library I know that before you guys start leaving comments, but you can quickly add stuff onto it to make it a full framework so you can add the router, you can add the HTTP client whatever.

Back to Angular it’s very full-featured has everything included, it even has a state manager called NgRx which I don’t have much experience with but from what I’ve read it’s very similar to Redux. So Vue.js is one of my favourite frameworks. I would say it’s the easiest to learn and there’s no bullcrap surrounding it. It’s very straightforward. The syntax is clear. It also has a state manager called Voeux.
And then the last framework I’m going to mention is Aurelia and it’s not as popular as the other three, but I really like it because it’s very natural and it’s very close to Vanilla.js. The way that we write classes seems like you’re just writing regular JavaScript and you have the option to use next which basically means the latest features of ECMA Script or TypeScript which is also, it’s a superset of JavaScript and also used with Angular. Alright, so there’s plenty of others I didn’t mention Ember.js is one of them which is really great and it’s a really full-featured framework.

I think the learning curve is a bit steeper at least in my opinion. But you’ll also want to check out Ember and some of the others in your research. We’ve talked about some of the front-end the popular front-end technologies now while you’re learning that stuff you should also be learning these things. These are basically side technologies that you should be learning. So one is GIT which is a version control system, and it is used by just about every software development team on the planet! It can be used with many different services, but Github is the most popular. It can be complicated but just knowing the basics will help you out a lot. And just knowing how to create a Github repository and push your code to that repository and pull from it and make updates this will really up your game as a developer.

So it gives you version control, it gives you backup, it provides you collaboration with other developers the advantages of using get our endless. So I would definitely suggest that, and I actually have a crash course on GIT if you want to check that out. So at this point, you should be dabbling in the command line. If you’re using frameworks like Angular or React chances are you’re using the command line interfaces that come with them to set up your applications so, and you should also be using NPM which is no Node Package Manager.

And you should know how to navigate between folders, how to create files things like that. Okay, you don’t need to be a pro with the command line, but you should know that some of the basic commands.

You also want to start to learn about APIs and REST, you want to know what a REST APIs is, how it works. Even if you are a front-end developer, you need to know how to make HTTP calls to a back-end API whether you’re doing it with the JavaScript fetch API or if you’re doing it through a framework like Angular which has its own HTTP library. This is something that is the future, and you definitely want to look into. You also want to see the different types of requests you can make with HTTP. So get request, post request, put, patch, delete and know what each one of those requests is meant for.
And also do some reading up on SSL and security and HTTPS. Okay, so these are just some of the side technologies that you want to learn. Now you also may want to learn about CSS Pre-Processors such as Sass and Less. I would definitely recommend Sass over Less it seems to be getting much more traction these days and what a CSS preprocessor does is it allows you to use things like variables and functions or mix-ins inside of your CSS, okay.

And you can do things like logic and just stuff that you know core CSS does not do, and that’s something that you may want to look into as well. Now if you are a JavaScript developer, you’re going to want to learn Webpack and Babel. Webpack is a module loader so you can use for instance NPM modules on the client side. There’s also presets to integrate Babel which is a JavaScript compiler. And Babel is used to taking newer features of JavaScript from more modern standards like ES6, ES7 and compile them down to older ES5 code which is the version of JavaScript that runs on all older browsers.
And if you plan on being a Python or C# developer, this-this isn’t as important, but if you’re going to be a JavaScript developer, then you should definitely learn Webpack and Babel.
So now we’re into server-side technologies and server-side languages Node.js isn’t a language, but it is a server-side technology, it’s a runtime, and it uses the JavaScript language, so it’s basically JavaScript on the server.
And this would be my recommendation for most developers, it’s popular, it’s fast, it’s scalable, it’s powerful, it’s asynchronous, it’s a language you already know because you’ve already learned some JavaScript, hopefully. It runs on the server instead of a browser environment that’s the most significant difference, but it’s the same language. You also get NPM which is the Node Package Manager, and you can install unlimited packages to achieve whatever kind of functionality you want.

Phython or PHP Development

So my next recommendation would be Python at this point which is a significant change from last year where I would recommend PHP. Python, I’ve worked with a lot more for them in the past I’d say six or seven months, and it’s just a fantastic language. It’s very popular, it’s great for rapid development, you can create things very quickly, it has excellent integration with just about everything. So it’s definitely something that I would recommend for your server-side technology.
Now PHP is not the best language, it’s not the prettiest language by far, but it is efficient.
It’s easy to deploy, you can quickly deploy it to shared hosting accounts, it’s the language of WordPress which is the most popular content management system. It also uses the Laravel framework which is very popular even for people that don’t like PHP tend to like Laravel it’s just a very elegant framework.

And you also have Ruby which you know Ruby on Rails which is an excellent framework great MVC framework. It provides rapid development, it has a helping community, but I do think that Ruby has fallen off a little bit and that may just be my opinion only from the stuff that I’ve looked at and that I’ve read. And I said this last year too I believe, but I think that with Node.js since Node.js has been introduced, I believe that it’s kind of stolen some of the glory from Ruby. But I don’t know you can make your own conclusions about that.

And then you also have C# and Asp.net which is something that I’m just getting into I actually didn’t even mention C# last year, but it is something that is very powerful, it’s backed by Microsoft, and I really liked the C# language. But again I don’t have much experience in it, so I can’t say too much about it. So those are some of the leading choices for your back-end server-side programming.
Now you’ll also need to learn a database, and you have different types of databases. MongoDB is an incredible NoSQL database which is schema-less as far as the data layer goes. It’s very scalable, it’s, and it pairs fantastically with Node.js, so if you choose Node as your server-side technology, I would recommend MongoDB over anything else.

MYSQL Database

Next, we have MySQL which is a traditional relational database that uses tables and rows MySQL is very popular and can be used with virtually any language. It’s popular with Python, PHP, Ruby on Rails and you can even use it with Node.js. PostgreSQL is similar to MySQL, but it’s a little more challenging to work with. It’s a bit more feature-full, and it’s also a bit more powerful.
Ok, I don’t think it’s as popular though. Then we have SQL Server which is Microsoft’s implementation of an SQL database. I haven’t used this too much so I can’t say too much about it. As you can see I haven’t, although I use Windows to develop on a lot I don’t really use Microsoft technologies when it comes to web development.

Next, you have Oracle which is heavily used in the enterprise world. Again this is something I don’t have much experience with but it is a relational database. Now we also have Firebase which is a real-time cloud database maintained by Google, and it is fantastic! I really like Firebase. Now I wouldn’t recommend just learning Firebase I would say learn it in addition to one of these other ones. It is a cloud database, so it doesn’t run on your local machine you actually create an account. You can create a database it also has authentication and storage, and you can even use it as a hosting platform so firebase is definitely something that I would suggest looking at and it pairs really well with frameworks like Angular and React View.
So now that we have looked at server-side languages and technologies, databases now we want to look at server-side frameworks, okay. Just like we have front-end frameworks, we have server-side frameworks so let’s first look at some of the JavaScript ones. So we have Express which is the most popular by far we have Hapi.js, Adonis which is a hardcore MVC framework that feels a lot like Laravel. And then we have new frameworks like Loopback and Swagger which are frameworks that were built for creating REST APIs and back-end services for Full Stack applications.

OK, I do have a course on Node.js Express in MongoDB on Udemy where we build and deploy two applications. So I’ll put the link in the description for that course if you’re interested. Alright, next Python has quite a few frameworks, but the two top ones are Django and Flask; these are very different from each other. Django is a very high-level framework meaning that it does a lot for you. It does things the Django way where Flask is very low level, and you can basically give the freedom to do things however you want.
You can put your whole program in one file if you want, OK. So there’s very little convention both are different, but both are excellent frameworks. And then you have other ones like Web2py and Pylons which I’ve never used so I can’t say too much. So for PHP Laravel is extremely popular like I told people that tend not to like PHP still like Laravel because it’s a very elegant framework.

You also have Symfony which Laravel is actually built off of. CodeIgniter which is really easy to use MVC framework. And then Yii2 which I’ve used very little off. Ruby, of course, we have Ruby on Rails which is an excellent MVC framework you also have Sinatra, Nitro which isn’t as popular but are also pretty powerful. And then, of course, we have C# which has the DotNet framework, Asp.net MVC which is an excellent model view controller framework and of course is backed by Microsoft and very powerful.

Content Management Systems eg. WordPress

So now what I want to do is just take a look at some content management systems because this is part of web development especially for smaller firms that don’t want to create content management systems from the ground up this gives them a really nice option for their clients.
Now the most popular content management systems are WordPress, Drupal and Joomla. Although Drupal and Joomla have fallen off a little bit or Joomla had fallen off quite a bit from back when I was using it about seven or eight years ago, but WordPress is still thriving, and all of these are built in PHP which again is not the prettiest language, but again it’s efficient.

WordPress, you can actually install WordPress on shared hosting accounts with one or two clicks. So like I said these are great for clients because they can log in and they can edit their content if they want to update their about page or something like that, they can do that very quickly. And there are also thousands of plugins and add-ons and themes so you can customise it, you can create your own plugins which is pretty easy to create a WordPress plugin, promotes rapid development because again you’re not building it from the ground up you’re using something that’s pre-made.
Now since it’s pre-made, it can be kind of limiting. Apparently, if you’re going to create something from scratch, you can do it however you want so you have a lot of freedom when you use something that’s pre-made like WordPress. Even though you can create custom plugins, it can still be limiting to you. Building apps are great but there’s going to have, there’s going to be a time when you’re going to have to make them live on the internet and to do that you’re going to have to learn about Dev Ops and deployment.

In Closing

By no means do you need to know everything that I mentioned on this page? These are just some of the things that you’ll run into as a developer looking to deploy applications. As I said, PHP applications are straightforward to use onto shared hosting accounts. Then you have apps built with Node.js and Python and Ruby. It’s a bit more complicated, so you’ll need either a dedicated server which is your own computer either local or from a hosting company or a VPS which is a Virtual Private Server, it’s basically a virtualized server so it’s built in a virtual machine and these are usually much cheaper than dedicated servers.

But what I would suggest is cloud hosting which is much cheaper using something like Digital Ocean which is fantastic. Digital Ocean actually has pre-made environments for Python applications and MEAN Stack applications. Then you have services like Heroku and Amazon Web Services that are built for dynamic applications written in languages like Ruby and Python and Node.
You might also want to look into cloud storage with services like Amazon S3 especially if you’re using a service like Heroku which doesn’t allow local file uploads. You’ll need to use some kind of third-party service like S3. By this time you’re going to want to be working with the command line quite a bit, and you’re going to want to work with SSH and secure sockets. It’s a very reliable way to connect to your server and do updates and maintain it which is an essential part of application deployment and maintenance.
So that’s something you’re going to want to learn about as well. Now all of this is very overwhelming usually if you work with a team this kind of stuff will probably be handled by someone else, but it doesn’t hurt for you to have a basic understanding.

So just know that you don’t have to master all of this, and this goes for everything that I’ve mentioned in this video. You do not have to master everything here. I’m just trying to take you through kind of a map or a guide of some of the things that you’re going to run into and some of the choices you’re going to have to make as a developer.