Web Development Technologies Introduction


To make it a bit easier to navigate the different web technologies available today, I have written this post. It can be very difficult and frustrating to know which way to go and which technology to learn next. I just found a really good video on YouTube that was just released by Traversy Media called Web Development In 2017 – A Practical Guide. This post is based on the information in that video. If your career path includes web development, this video is a must see. Take note that web application development goes well beyond simple website development. Simple website development can be completed with HTML, CSS and perhaps some JavaScript, or alternatively you can use a Content Management System such as WordPress, Joomla or Drupal. Website application development uses those mentioned technologies and more.

Getting Started with the Basics

  • HTML – is a must – learn it first – there is no alternative when working on the front-end
  • CSS – is a must – learn it second, but you don’t need to be an expert but know it well

Basic Tools

JavaScript

After learning HTML and CSS, move on to JavaScript. Here is a list of some of the basic types of things you will need to know how to do. Over time you will begin to know these inside-out. Here is a list of some of the things you need to know.

  • Data Types – string, number, arrays, objects
  • Functions, conditionals, loops, operators and so on
  • Event Handling
  • JSON
  • jQuery – Only if you feel really comfortable with JavaScript

Deployment of a Basic Website

  • Get a shared hosting account (Hostgator, InMotion etc.)
  • Learn cPanel (your hosting company’s Control Panel) basics (email, FTP setup)
  • Upload your project via FTP
  • Register a domain name and link it to your hosting account

Web Designer

Having done all of this mentioned above, you can call yourself a web designer. You can work for a company or start your own business You are able to build websites for small businesses, build user interfaces for web applications, and convert an image of a web page (in pdf for example) into HTML/CSS. You can develop the front-end.

What’s Next?

Below is a list of options. In the video, he recommends learning front end frameworks before learning the others. The best one to strat with is probably Bootstrap. Don’t worry too much about the others in the list.

  • Front End HTML/CSS Frameworks – Twitter Bootstrap, Zurb Foundation, Skeleton, MUI, Pure…
  • Server-Side Language (PHP, Ruby…)
  • JavaScript Frameworks (Angular 2, React…)
  • Databases (MySQL, PostgreSQL..)

Twitter Bootstrap

Bootstrap may be the best choice. Learning it take a bit of time but it makes you life easier. It has several benefits such as CSS Components (buttons, lists, forms input controls and so on), Helper Classes, Grid System, Responsive Layout and JavaScript Widgets (gives you slide shows, collapsible tabs and so on) .

Server Side Programming

The best idea is to pick one of these choices below and learn that one. The video recommends picking either PHP or Node.js. PHP is solid and used all over the web, including WordPress.

  • PHP – not the best language but is rock solid
  • Node.js – new, exciting and powerful
  • Ruby on Rails – great framework but its popularity has leveled off
  • Python – easy to learn, not as popular, good for scripting

Databases

You can begin learning databases as you are learning these server side programming languages because they work together anyway. There are two main types of databases: Relational databases and NoSQL databases. If you have any experience with Microsoft Access, MS SQL Server or Oracle, then you already know about relational databases.

  • Relational Databases:
  • MySQL – PhpMyAdmin
  • PostreSQL
  • NoSQL Databases:
  • MongoDB – Mongo Shell
  • CouchDB

Pick a Pair of Technologies

Pick a pair of technologies to focus on. To learn first. Either PHP/MySQL or Node.js/MongoDB.

Side Technologies to Learn

  • GIT version control and Github
  • SSH and Basic Command Line
  • CSS PreCompilers – Sass/Less
  • APIs and REST Services
  • HTTPS and SSL

Deploying Apps

  • Dedicated Server / VPS
  • App Hosting – Heroku, Digital Ocean, AWS
  • Deploy Tools
  • Linux Command Line – dedicated servers are likely to be Linux servers
  • Maintenance and Updates

Web Developer

Having all of the above mentioned skills makes you a web developer. As a web developer you can create simple to advanced web applications, build back-end APIs, work with servers and administer databases.

Programming Frameworks

You might want to look at frameworks to speed up your development. There are JavaScript frameworks and PHP frameworks. Most of these frameworks have an MVC (Model-View-Controller) design pattern. The Model works with the database. The View works with what the user sees. The Controller handles the routing and when to call model functions and so on. Each framework uses only certain aspects of MVC. They are not all the same.

  • JavaScript Frameworks:
  • React (Flux, Redux) – powerful at building user interfaces
  • Angular 2 – a powerful full-featured client-side framework
  • Vue.js – similar to React
  • Express (for the back-end for Node.js)
  • PHP Frameworks:
  • Laravel – popular but not easy to learn
  • Codeigniter – easier to learn than Laravel
  • Symfony – powerful but tough to learn
  • Ruby on Rails

My opinion, not necessarily Traversy Media’s: Generally, React is easier to learn than Angular 2. If you doing a very simple website, you will probably be able to develop it faster using React, however if you website is more complicated and larger with more moving parts, you might be better off using Angular 2. Angular 2 is a framework but React is a library. With React, you will find that Redux is not easy to learn. It also depends on the functionality you need and if there is any code available to provide that functionality. This may prove to be the most important factor in decided whether to use Angular 2 or React.

Content Management Systems based on PHP

  • Examples: WordPress, Joomla and Drupal
  • CMS are great for client work and maintenance
  • There are thousands of plugins and addons
  • Fast development
  • Can be limiting and you need to rely on plugins for more advanced features

Mobile App Development

The future is in mobile app development. Java is the official language for Android and Objective-C is the official language of iOS (Apple). You do not need to learn these two languages to develop for mobile phones and tablets. We can use JavaScript. The technologies to do this are React Native, Ionic and Cordova.

Online Courses

There are lots of places you can take courses and watch videos online. One such place is egghead.io. Udemy.com is another place where I have taken a few courses. Another good source of information is www.w3schools.com. Another option is www.coursera.org.

Leave a comment

Your email address will not be published. Required fields are marked *