Nano ASP.NET SaaS Boilerplate
Admin credentials (all tenants): admin@email.com / Password123!
Sample data resets every hour
Nano ASP.NET SaaS Boilerplate
General
Front-End Development
General

Web Development Overview

If you want to learn how to code and are a complete beginner, this is the course for you. It’s also free.

This guide will walk you through the whole world of coding, starting with an overview of how things fit together. We’ll learn coding fundamentals and then build a web application.

This course takes a practical methodology instead of an academic one. Meaning it will move you along quickly and teaching you the most important aspects of programming, to get you building something quickly, instead of focusing on every single tiny detail.

This will be a, ‘we’re on an airplane and the pilot suddenly died and now we have to teach you to land this plane before fuel runs out’, kind of course.

First we will start fundamentals like variables, conditional logic, loops, arrays, and objects. These concepts are the same across all different types of projects and programming languages.

Later in the course we’ll focus on web development – or more accurately, web application development, which is an in demand skill. All kinds of businesses need web applications.

We’ll learn about the tools that developers use to build applications and set them up on your own machine so you can be a pro too! The app that we build will start off simple and we’ll add functionality step by step.

The purpose of this course is so make you a capable developer. And once you achieve that goal, then maybe you’ll consider buying our amazing tool for building web applications, the Nano ASP.NET Boilerplate.

So whether you lost your job, or your current one sucks, or maybe you see an opportunity on the horizon, strap yourself in because things are about to happen.

Business tools like CRMs, accounting software, time tracking apps, are the classic examples. But everyday ‘websites’ like YouTube, Facebook, Amazon, Airbnb, Gmail, are also web applications. In fact, most web sites on the internet today are web applications.

Back in the 90s and early 2000s, most websites were just pages, purely informational. You may still find that kind of thing today, perhaps something like a lawyer’s office website, but that’s certainly not the majority. Put another way, anything that has a sign in feature probably has a system behind it remembering things about you and storing data in a database – which means it’s a web app.

What’s the difference between an app and a web application? An app is just a shortened form of the word application, but of course people commonly refer to ‘apps’ when talking about native apps on Android and iOS devices. Web apps and native apps are different, but only on the presentation side. By that I mean client or the front-end. Everything which powers those clients remains the same.

The back-end, also known as the server-side, is where the real business happens. If you picture an ice berg, the client is like the tip of the ice berg that you see floating above the surface, while the vast majority of code is the back-end floating down below. The front-end is just the presentation; the user interface.

When the user interacts with the front-end, requests are sent to the back-end for updated data. Opening a drop-down menu, or a button changing color on hover are the kind of actions that can be handled purely on the front-end, but typing something into a search field to receive a new list of results would require a response from the server. The front-end and back-end are not connected per say, but they are constantly talking to each other.

front-end versus back-end

When you order a taxi on Uber, the map information, the listing of every single available taxi driver, all the computation happening to determine the fastest route, what the cost will be, etc. etc. is NOT happening on your phone. Its happening in a server somewhere. The app on your phone is just taking that pre-processed information and presenting it to you with colors and animations -the front-end.

The front-end can come in many forms. It could be a web app which runs in a browser, a native iOS or Android app, or niche elements like smart TV apps or infotainment systems. Web apps are by far the most widespread and practical to build for most cases. If you build a web application, anyone on any device can access it via a browser.

Native apps will provide a somewhat better user experience but it means having to build and maintain a whole other project written in a device specific language. Facebook has a web site (web app), an iOS version and an Android version, but they also have massive development teams supporting each of these with billion dollar budgets. So unless your whole idea depends on it being mobile, its probably smart to build a web app.

The first thing we build in this course will be the front-end of a web application. Even though the back-end is more important, the front-end is easier to get started with.

All front-end development consists of three web technologies: HTML, CSS, and JavaScript. These three things work in unison to create a web page or user interface. HTML is what provides the structure, CSS handles the styling, and JavaScript does all the actions. Of these three web technologies, JavaScript is the only one that is an actual programming language.

front-end analogy

HTML, CSS, and JavaScript are ALWAYS what run the front-end. This is because web browsers are standardized. It doesn’t matter if the user has a PC or a Mac, with Chrome or Opera, Edge, etc. the web application will look and function the same. Back-end web technologies can vary widely.

Let’s get started learning some programming basics with JavaScript using an online code editor, runjs.app. Later we’ll set up a real programming environment with Visual Studio Code, but for now an online editor will suffice for learning purposes.