Intro to Web Development
A (very) simplified guide to web development and how to continue
learning it
Web development can be divided into frontend and backend
development:
- Frontend - what the user sees
-
Backend - the server-side application. Not all websites require
a backend: a static (doesn’t change) website can be built
without a server.
Frontend
There are three front end languages:
-
HTML - used to define the content on the website (e.g., text,
images, links)
-
CSS - used to style the content and make it look good (e.g.,
changing colors, rounding button corners, shifting image
locations, modifying font size)
-
JavaScript - used to add advanced functionality to the website
(e.g., button presses, complex animations, communicating with
the backend servers)
There are also front-end
frameworks, which are pieces of code
that make developing a website with complex features much more
effortless. Examples include:
-
JS Frameworks
- React.js (Redux, MobX)
- AngularJS (RxJS, NgRx)
- Vue.js (VueX)
-
CSS Frameworks
-
JS Based (Better for applications involving JS because they
come with JS components)
- Reactstrap
- Material UI
-
Tailwind CSS (a customized variation of Tailwind CSS was
used to style this website)
- Chakra UI
-
CSS First (Don’t come with JS)
- Bootstrap
- Materialize CSS
- Bulma
Frontend development is a vast domain with tens of frameworks used
by billions of websites. It’s impossible to use them all
proficiently. In fact, you don’t need CSS or JS to view or host a
website. A simple and free website hoster is
Github Pages.
Backend
Backend languages are much more varied. The most popular examples
are:
- Java
- Ruby
- Python
- PHP
- JavaScript
- C#
And backend frameworks include:
- Django (Python)
- Flask (Python)
- Node.js (JavaScript)
- Express.js (JavaScript)
- Spring (Java)
- Ruby on Rails (Ruby)
A backend engineer primarily works with databases, massive
clusters of data that store information critical to the overall
application (e.g., product information, user data, advertisement
click-through rates, etc.). For example, this website’s database
stores your HCPSS Gmail and the points you’ve earned.
Databases can be broadly divided into two main classes:
SQL and NoSQL. SQL databases are
relational databases that store data in a table format with a
fixed structure, where data is usually related to each other (hence
relational). This means they are very intuitive to use,
extraordinarily quick at performing certain database operations, and
are currently the most popular type of database. NoSQL databases do
not store data in a fixed structure. The result is more flexibility
in its operations and horizontal scalability, but at the cost of
being more difficult to use.
Warning: This is a very generalized comparison of SQL vs.
NoSQL. Please do additional preliminary research before using either
type of database.
A couple of popular database examples are:
- Oracle (SQL)
- MySQL (SQL)
- PostgreSQL (SQL)
- SQLite (SQL)
- MongoDB (NoSQL)
Web development is an incredibly vast field that no single article
will ever cover (no single textbook, either). We recommend aspiring
web developers following a
developer roadmap.