Introduction to Web Development Fundamentals for Beginners

Anyone can choose to become a web developer. All you need to have is patience and enough motivation to learn what has to be learned and practice what has to be practiced in order to hold a grip on the least basic stuff of becoming a web developer. Personally, I'd say we start by clarifying a few terminologies.

Introduction to Web Development Fundamentals for Beginners

Photo by Kevin Ku on Pexels

0-Front-End (aka client-side):

It is everyone you see on your screen, the front side of the website you're browsing right now. The bottoms, the colors, the texts and all those animations..

Front-End developers need to know at least the basics of HTML5 which stands for Hyper Text Markup Language 5th version, CSS3 Cascading Style Sheets 3rd version and a little over basic understanding of JavaScript.

  • HTML5 is the core of every website you see today. Its use manifests in structuring the website's skeleton.
  • CSS3 is the flesh of every website. Without it, every website is going to look just ugly.
  • JavaScript is that magical thing that makes it all more lively and more dynamic.

 

This is a basic 'input' HTML tag WITHOUT styling.

This is a basic 'input' HTML tag WITH styling.

1-The difference between a static and a dynamic website:

Static websites or also static pages are mere paper pages. You get to see what you always see and nothing is changing. It is because data isn't moving around and content is not being refreshed based on conditions you set or events made by the user himself. They are usually made to showcase something like someone's achievements or for portfolios. You only need basic understanding of HTML5 and CSS3 in order to create static websites.

On the other hand,

Dynamic websites or also dynamic pages are more lively and are refreshed compared to their counterpart. Everything changes according to the conditions you set. They are made for various reasons and not for simple showcasing. Alongside the basic knowledge of HTML5 and CSS3, you also need to know a bit of JavaScript to achieve that.

2-Back-End (aka server-side) :

Basically, it is everything that is happening behind the shadows right in the background processing the data you type in or the actions you make.

Back-End developers need to have some knowledge with a Back-End oriented language such as Php, JavaScript or Python (Django).

3-Data Storage (database) :

Databases are containers in which we store data after we process it and/or retrieve it later to help process other data we're about to insert to the database.. Databases have to be impenetrable and fully secured. If you have a user system embedded in your website, the database usually contains a table in which various user information is stored such as full names, phone numbers, emails and password.. which are considered private information that has to be encrypted so that in case of a data leak, Private information stay protected. There exists too many types of databases. Each with its own use syntax and the use purpose. The Widely used database is MySQL, MariaDB, PostgreSQL, MangoDB...

4-Frameworks (Toolkits) :

To keep it simple, frameworks are more like a set of tools that help the web developers to do their jobs easily and more efficiently with use of reusable block of codes and elements. They also provide ways to enforce security and privacy. Most if not all jobs require you have some expertise with one of the currently highly rated frameworks which we are going to divide to 2 categories.

5-Frameworks (Front-End) :

When building websites, you need to keep in mind that your website visitors are going to access it from multiple devices that has different screen resolutions. And since the rise of smartphones and iPhones you always have to think about doing the mobile version of the website (mobile-friendly website). Here comes the infamous CSS Bootstrap framework which is the go-to mobile first front-end framework. Furthermore, to add extra dynamicity to the website we can also import the JQuery library which is easy to use compared to pure JavaScript. There is also many other options out there such as React Js, Angular Js and also Vue Js. These last 3 are the highly rated JavaScript Front-End Frameworks which obviously need some JavaScript knowledge in order to exploit their capabilities unlike the CSS boostrap framework.

A note : It is possible to add Bootstrap to all 3 mentioned right above to expand your project.

6-Frameworks (Back-End) :

We already explained what frameworks are so let's just dig in. Right after having the idea, one should also think about the technologies one going to use in order to make that idea true. For making websites in particular, there are generally 2 main approaches. Either you use the same language for both Front & Back end or you use different languages for that. Let me clarify what I just wrote.
JavaScript, itself is a general purpose programming & scripting language, thus one can use it for both front-end and back-end because, it also can interact with DOM which is basically the objects that makes the websites and everything you see.
While PHP is strictly a Back-End Language, Specially after the invention of Node.js which is a runtime environment for JavaScript. So Basically, It is either you go in fully with JavaScript and learn both a JS front-end framework (React,Angular,Vue) & a JS back-end framework (mainly Node.js) 'for the meanwhile'.. Or you go with the (Bootstrap/Php) Combo. JavaScript might seem overwhelming for beginners. Php on the other hand is easier.