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.
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.
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.
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.
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
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.
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.
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.
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.
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.
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.
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.
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.