Hello dear reader, I assume that you’re interested in learning Web Design and Development, or you’re just curious and want to know the how about or the mechanisms of the web, or maybe you just have an idea about a cool project, and you want to learn coding to create it. Well this guide is for you. In this guide I will explain this amazing domain from A to Z, and when you finish reading and follow my instructions you’ll have a basic idea of this domain PLUS you will have a functioning online Website.  

You are just about to start in an amazing journey, I’d like to call it the journey of “despair and self-loathing” but at the end you’ll be rewarded by being happy with your accomplishment. The work process of a programmer is perfectly summed in the below meme

If you’re interested in understanding the Internet and the web I HIGHLY recommend you  read these three MDN (Mozilla Developer Network) articles. Each of them will take about 5 minutes to read, and help you understand this article better. Here they are:

1. What is the Internet and how does it work?
2. How does the web work?
3. What is the difference between webpage, website, web server, and search engine?

Now that you’ve read the above articles you know now that the Internet is the backbone of the Web, the technical infrastructure that makes the Web possible and that it’s a large network of computers which communicate all together. You also know that the World Wide Web, or simply the Web, is a way of accessing information over the medium of the Internet. It is an information-sharing model that is built on top of the Internet.

With time, if you give enough of your time and dedication to learn and research this domain you will become a web programmer, and be able to program web applications (Websites, Apps, etc..) which will help you immensely in your future, because to be honest and plain this domain IS the future.

Why is this domain very important nowadays (title to expand)

What is Web Design and Development?

Introduction

We usually use the terms Web Design and Development together even though the terms reference two fundamentally different aspects of the website building process requiring two unique skill sets.

Now let us talk about the first skill set which is web design. In essence, web design refers to both the aesthetic portion of the website and it’s usability. Web designers use various design programs such as Adobe Photoshop (10$/month), or GIMP (Free) and many other tools, to create the layout and other visual elements of the website.

After that front-end developers implement their design through Front-End web development which takes us to the second skills set (web development). Now you might ask what is front-end programming, to put it in a simple way it’s the visual front-end element of a software (or a website, app)

That is viewable and accessible by the end user. Most popular front-end languages are (HTML, CSS, JS). If you're already interested in joining this domain which is obvious since you beared with me and reached at this point of the article, then first thing you should do is to learn basic HTML and CSS, we will discuss this further in our learning and tutorial sources section of this article.

However, the second part of the second skill set is Back-End web development. Web development refers to building, creating, and maintaining websites. Web Developers usually, take a website design done by a web designer and actually make a functioning website from it through the means of writing web scripts in languages such as PHP, ASP, Python, Ruby, Perl, etc...Moreover, the back-end of a web application is an enabler for a front-end experience... Backend code is run on the server, as opposed to the client. This means that backend developers not only need to understand programming languages and databases, but they must have an understanding of server architecture as well.

Now you may wonder what is a database, to put it in a simple way, it is a system for storing and taking care of data (any kind of information). Most popular databases are: MySQL (the most used), MongoDB, SQLite, Postgres, etc…

You also have different types of databases like SQL (relational) and noSQL (non relational), you can check this simple article to understand the differences between both of SQL and noSQL databases.

Now we’ve talked about front-end and back-end development, but we shouldn't forget that we also have Full-Stack development which is simply the combination of both. Most full-stack developers are freelancers or professional developers in a company with years of experience. To become a full-stack web developer you should at least learn the following languages: HTML, CSS, JS, PHP, SQL (A database language).

Most Important and Essential Languages to Start Working

You need to learn HTML CSS and basic JS for front-end, and basic PHP and MySQL for the back-end.

Frameworks

Now you might’ve heard the word ‘framework’ before and if you didn’t i’ll try to put it in a simple way, a framework simply makes the life of the developer much easier, because you don’t have to write your code from scratch. In the world of web design, to give a more straightforward definition, a framework is defined as a package made up of a structure of files and folders of standardized code (HTML, CSS, JS documents etc.) which can be used to support the development of websites, as a basis to start building a site.

CMS

Difference between shared, VPS, dedicated and cloud hosting plans

A brief explanation of server management

Determine my learning style and how should i learn!

Where should the startpoint of my learning journey be?

Index of important and helpful learning resources

Important tools that can help me with this field of work

Index of the tools with explanation

codeanywhere.com - A FREE platform that helps you code anywhere

Creating your first website

Choose your best domain registrar and buy your domain

Helpful links:

1. Freenom - a domain registrar where you can buy FREE domains (Free*)
2. Namesilo - a domain registrar that has cheap domains with free Whois* privacy (Paid, cheap and straightforward with it’s pricing)
3. Domainsbot - a very useful domains search engine (Free service)
4. NearlyFreeSpeech.NET - they are privacy fanatics, also it is designed to allow experienced webmasters to set up low-cost hosting by only paying for services they actually use. (Paid, requires registration - For experts)
5. Gandi - Popular and well reviewed registrar
6. Dynadot - Another popular and clean from marketing scams registrar

Notes:

*The TLDs that you can buy for free are (.tk .ml .ga .cf .gq)

A TLD is the abbreviation of Top-level domain which refers to the last segment of a domain name, or the part that follows immediately after the "dot" symbol (www.example.com)

*Whois is simply a service that has a very large database with a list of most of the registered domains, it might contain information of your name, phone number, ip, and even your location. So if you care about your privacy you should buy a Whois privacy for your newly registered domain.

Choose a web hosting company that best suits your project

Best Managed Shared Hosting

Best Managed VPS Hosting

Best Self-Managed VPS Hosting

Configure your server

Install WordPress on your server

Install a Localhost on your computer

Install WordPress on the Localhost

Setup WordPress

Themes

What are pages, posts, and categories

Essential Plugins

Upload your WordPress website to your server

Congratulation you just made your first Website

Helpful WordPress related links.

Good WordPress tutorial Websites:

1. codex.wordpress.org - Official WordPress documentation Wiki
2. learn.wordpress.com - Official organized and well documented WordPress tutorial Website
3. WPBeginner - Beginner's Guide for WordPress (A simple and free tutorial Website)

Good Websites to install free and premium WordPress templates:

1. A huge index with free, modern, and responsive WordPress templates (Free)
2. Most popular and clean WordPress premium themes provider (Paid)

Tips:

1. Always sort with number of sales and 4+ stars rating
2. Try to find a theme that has the most similar features that your client requests
3. Make sure that the template is not outdated (Check WordPress version, last updated, etc…)