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
- 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.
- 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.
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.
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.
- Angular - 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
- 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.
- Flask (Python) - An excellent library to carry out fast and effective back-end development. The equivalent of NodeJS in Python.
Full Stack Frameworks
- 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.