Web Development

From Grundy
Jump to: navigation, search

Yes we all love the web. Google, Facebook, Amazon all started as websites before growing to what they are now. We have all dreamed about having our own huge website. This page will help you get there. If you are looking for particular tutorials, have a look at Web Development Guides.

Front-end vs Back-end

Most people agree that front-end and back-end web development are poles apart, and yet one cannot exist without the other. Their context in web development is pretty evident given their name. More precisely,

  • Front-end - Everything that is visible to you when you open a webpage is a piece of code (HTML file) sent to your browser which is interpreted real-time by your browser. This includes rendering all your styles, displaying text in an organised manner, animations, responsiveness and contacting the server for data.
  • Back-end - The code running on the server which you cannot see as a user. This code is used to generate HTML files, send files and JSON data when requested by front-end.
  • Full Stack - The combination of front-end and back-end development.

As an example, the search bar on Google is the front-end, and the algorithm which searches for results is the back-end.

I know you might be tempted to just do back-end, but trust me, front-end is a lot harder and that's where the real challenge comes.

3 Pillars of Front-end

Front-end works on three types of languages, with the most popular ones being HTML, JavaScript and CSS.

  • Markup Language - Here you specify an organized list of static text and elements you wish to have on your page. Each element is marked by an id and class which is used to refer to that element. HTML is the most popular markup language.
  • Scripting Language - The true "code" of your front-end application which is used to manipulate elements, talk to the back-end, give functionality to buttons, forms etc. JavaScript is the most widely used scripting language. More recently, AngularJS and ReactJS (both are JS libraries) have replaced vanilla JavaScript.
  • Styling Language - The artistic element of your website, giving it color, design and looks. You don't need to be a great coder to know styling. CSS (Cascading Style Sheets) make up most of all modern web styling.

We recommend you to first learn HTML, since both JavaScript and CSS need you to know basic HTML. Luckily, basic HTML is easy to learn within a couple of days.

If you are familiar with programming, the next step would be JavaScript. You should be able to grasp JavaScript easily as JavaScript is similar to many other modern languages. However, if you haven't programmed earlier, be sure you study JS well to understand programming elements.

CSS programming is a whole new ball game and requires a very different skill set. Most of us don't understand it very well and rely heavily on StackOverflow. Truth be told, learning CSS well requires a lot of patience, dedication and love for design.

That being said, it's advisable not to spend too much time learning JavaScript (unless it's your first language) or CSS. Modern web development prefers to use certain libraries built on top of vanilla JavaScript and CSS as we describe in the next section.

Never Use Vanilla CSS and JS

Why? It's slow, inefficient, leads to dirty code, old fashioned and worst of all not cool. After learning the basics, you should seriously consider learning one of these languages if you want to stay in web development.

  • JQuery - a much better way to write JS code, makes animation seamless.
  • AngularJS - Google's own framework for web development. Very clean code, gets several common scripting jobs done with barely any code. Easy to extend and modify existing templates.
  • ReactJS - Hailing from Facebook's labs, this is the modern web developer's paradise. Very fast rendering, easy to write JS / JSX code.
  • Sass - A language in itself which translates to CSS. It makes styling a lot easier and a lot more fun!

Monsters of Back-end

Back-end coding can be done in a variety of languages such as Python, PHP, Ruby and even JavaScript! Some common frameworks used in the back-end are

  • PHP- is a server-side scripting language which can be embedded within HTML as well. Even though this language is thoroughly criticized today, it still powers most of the web.
  • Node.js (JavaScript)- is a server-side implementation of the JavaScript language. It is becoming increasingly popular lately. We have a tutorial on Node.js.
  • Flask (Python) - An excellent library to carry out fast and effective back-end development. The equivalent of NodeJS in Python.

REST APIs

In your experience, you would come across applications offering a service known as a REST API. To get a hands-on experience to this concept, see our article on RESTful method.

Full Stack Frameworks

  • MEAN Stack - A collection of JavaScript-based technologies — MongoDB, Express.js, AngularJS and Node.js — used to develop web applications. From the client and server sides to databases, MEAN is a full-stack development toolkit. Here is a great tutorial to get you started.
  • Django (Python)- is a high-level Python Web framework that encourages rapid development and clean, pragmatic design. It takes care of much of the hassle of Web development, so you can focus on writing your app without needing to reinvent the wheel.

We have a Django tutorial to get you started.