Learning web development

A website can be defined as a collection of several webpages that are all related to each
other and can be accessed by visiting a homepage, by using a browser like Internet
Explorer, Mozilla, Google Chrome, or Opera.

A website may be a simple one page site, or it could be an incredibly complex

web application.

Here is a simple explanation of how websites on the internet work:

1. Websites are basically a bunch of files stored on computers called

servers.
2. Servers are computers that are used to host websites, meaning that they
store the website files. These servers are connected to the giant network
called the World Wide Web (to use 90’s lingo), or the Internet.
3. Browsers are programs that you run on your computer. They load the
website files via your internet connection. Your computer is also known as
the client, which connects to the server.
The 3 components that make up every website
HTML or HyperText Markup Language

HTML is the foundation of all websites. It’s the main file type that is loaded in
your browser when you look at a website.

CSS or Cascading Style Sheets

Without CSS, a website will look as aesthetically pleasing as a Word document.

With CSS, you can add colors of all kinds, compelling fonts, and layout the
website in pretty much any way you please.

You can even add animations and draw shapes using more advanced CSS.

JavaScript

JavaScript is a programming language that allows you to interact with elements

on the website and to manipulate them.

While CSS adds style to HTML, JavaScript adds interactivity and makes a
website more dynamic.

For example, you can use JavaScript to scroll to the top of the page when you
click a button, or to build a slideshow with buttons to navigate through the
images.

To work with HTML, CSS and JavaScript files, you’ll need to use a program on
your computer called a code editor.

Code editor programs like Sublime or VS Code come with a lot of features that
just make coding easier.

They allow you to indent multiple lines of text right or left, and can highlight the
text in different ways depending on what language the file is in.

Here are some popular code editors:

VS Code: This lightweight version of Visual Studio, Microsoft’s main IDE, is only
a few years old but it’s gotten incredibly popular, due to its speed, ease of use,
and powerful features. VS Code is my personal editor of choice, so I may be
rather biased 🙂
Atom: Created by GitHub and advertised as a “hackable text editor,” Atom is a
well-loved editor. One of its main strengths is its customizability. You can install
packages and themes that will add features to the program.

Sublime: A hugely popular program that has been around for a while. Like Atom,
you can install packages and themes, and it also has quick performance. Unlike
the other two editors, a Sublime license costs $70 (but it is free to try).

The Front End

The front end (or client-side) refers to what is loaded by the user’s browser,
also called the client.

This would be the HTML and CSS that we started out talking about. JavaScript
was originally just a front-end language, but nowadays you can use JavaScript
as your server-side, or back-end, language also.

Front-end work deals heavily with making the website look good.

In addition, it also involves making the site behave in a way that makes sense to
the user (also called UX or user experience).

The Back End

The back end is all about functionality and making
sure everything works.
While the front end is about the appearance and visual behavior of the website,
the back end is about getting everything to work behind the scenes.

If you’re working in back-end development, you’ll be doing tasks like handling

requests to the server and database.

Some examples of back-end work would be saving the data when someone fills
out a form on the contact page, or retrieving data to display blog posts in a
specific category that the user has requested.

Back-end work also may involve setting up the website on a server, handling
deployment, and setting up SQL databases.
Here are some of the things that you’ll have to work with in order to create a live
website:

Domain name and SSL certificate

Domain names are the address of the website, like Google.com, Wikipedia.org
or Harvard.edu.

In order to get one, you’ll have to choose one that is available, then purchase it
from a domain name registrar like Namecheap.com or Google Domains.

These companies register the domains with ICANN (Internet Corporation for

Assigned Names and Numbers).

ICANN is a centralized organization that oversees and manages the DNS

(domain name system) and IP (internet protocol) areas of the global internet.

In addition to the domain name, you should also get an SSL (Secure Sockets
Layer) certificate for your domain. SSL will encrypt the traffic on your website,
which will help protect it from cyber attacks.

Web host server space

Once you have your domain name to

AwesomeStupendousAmazingWebsite.com, you’ll need to purchase server
space.

There are a few different levels of web hosting plans:

 Shared servers: The cheapest option, can range from a few dollars to
$12-20 per month. Like it sounds, you share your server space with other
website “neighbors.” Upside is the affordability, and downside is slower
speeds and possible downtime if you exceed your usage for the month.
Popular hosts are SiteGround, Bluehost, and WP Engine.

 Cloud servers: Cloud hosting is a relatively new option. It consists of a

system of a large number of physical servers whose resources are all
shared. Each individual “tenant” is then given a virtual server that pulls
resources from the collective pool. This setup allows for more flexibility for
bandwidth and can scale up very quickly. One company, Digital Ocean,
deals exclusively with cloud servers. Pricing depends on your server
 specs, and can range from a few dollars a month all the way up to almost
$1000.

 VPS (Virtual Private Servers): VPSs are similar to cloud hosting in that

each tenant has their own virtual server, and all tenants share one physical
server. It’s better than shared hosting because you are allocated your own
slice of the server resources. This option is a bit more expensive, between
$20-60 per month (according to BlueHost).

 Dedicated servers: These servers give you one complete physical server

all to yourself. As you might imagine, this option is the most powerful but
also the most expensive. They often also are managed servers, meaning
the company will run maintenance and do other tasks for you. Dedicated
hosting will generally run you a couple to a few hundred dollars per month,
according to SiteGround pricing.

Deeper dive

Web page

A web page is a simple document displayable by a browser. Such documents

are written in the HTML language (which we look into in more detail in other articles). A
web page can embed a variety of different types of resources such as:

 style information — controlling a page's look-and-feel

 scripts — which add interactivity to the page
 media — images, sounds, and videos.

All web pages available on the web are reachable through a unique address. To access
a page, just type its address in your browser address bar:
Web site

A website is a collection of linked web pages (plus their associated resources) that
share a unique domain name. Each web page of a given website provides explicit links
—most of the time in the form of clickable portion of text—that allow the user to move
from one page of the website to another.
To access a website, type its domain name in your browser address bar, and the
browser will display the website's main web page, or homepage (casually referred as
"the home"):

The ideas of a web page and a website are especially easy to confuse for a website that
contains only one web page. Such a website is sometimes called a single-page website.

Web server

A web server is a computer hosting one or more websites. "Hosting" means that all
the web pages and their supporting files are available on that computer. The web
server will send any web page from the website it is hosting to any user's browser, per
user request.

Don't confuse websites and web servers. For example, if you hear someone say, "My
website is not responding", it actually means that the web server is not responding and
therefore the website is not available. More importantly, since a web server can host
multiple websites, the term web server is never used to designate a website, as it could
cause great confusion. In our previous example, if we said, "My web server is not
responding", it means that no websites on that web server are available.

Search engine

All web pages available on the web are reachable through a unique address. To access
a page, just type its address in your browser address bar:
Web site

A website is a collection of linked web pages (plus their associated resources) that
share a unique domain name. Each web page of a given website provides explicit links
—most of the time in the form of clickable portion of text—that allow the user to move
from one page of the website to another.
To access a website, type its domain name in your browser address bar, and the
browser will display the website's main web page, or homepage (casually referred as
"the home"):

The ideas of a web page and a website are especially easy to confuse for a website that
contains only one web page. Such a website is sometimes called a single-page website.
Web server

A web server is a computer hosting one or more websites. "Hosting" means that all
the web pages and their supporting files are available on that computer. The web
server will send any web page from the website it is hosting to any user's browser, per
user request.
Don't confuse websites and web servers. For example, if you hear someone say, "My
website is not responding", it actually means that the web server is not responding and
therefore the website is not available. More importantly, since a web server can host
multiple websites, the term web server is never used to designate a website, as it could
cause great confusion. In our previous example, if we said, "My web server is not
responding", it means that no websites on that web server are available.

Search engine

Search engines are a common source of confusion on the web. A search engine is a
special kind of website that helps users find web pages from other websites.
There are plenty out there: Google, Bing, Yandex, DuckDuckGo, and many more. Some
are generic, some are specialized about certain topics. Use whichever you prefer.
Many beginners on the web confuse search engines and browsers.
Let's make it clear: A browser is a piece of software that retrieves and displays web
pages; a search engine is a website that helps people find web pages from other
websites. The confusion arises because, the first time someone launches a browser, the
browser displays a search engine's homepage. This makes sense, because, obviously,
the first thing you want to do with a browser is to find a web page to display. Don't
confuse the infrastructure (e.g., the browser) with the service (e.g., the search engine).
The distinction will help you quite a bit, but even some professionals speak loosely, so
don't feel anxious about it.

Here is an instance of Firefox showing a Google search box as its default startup page:
are a common source of confusion on the web. A search engine is a special kind of
website that helps users find web pages from other websites.

There are plenty out there: Google, Bing, Yandex, DuckDuckGo, and many more. Some

are generic, some are specialized about certain topics. Use whichever you prefer.
Many beginners on the web confuse search engines and browsers. Let's make it clear:
A browser is a piece of software that retrieves and displays web pages; a search
engine is a website that helps people find web pages from other websites. The
confusion arises because, the first time someone launches a browser, the browser
displays a search engine's homepage. This makes sense, because, obviously, the first
thing you want to do with a browser is to find a web page to display. Don't confuse the
infrastructure (e.g., the browser) with the service (e.g., the search engine). The
distinction will help you quite a bit, but even some professionals speak loosely, so don't
feel anxious about it.
Here is an instance of Firefox showing a Google search box as its default startup page: