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.
Copyright ©2023 Howard County Hour of Code