Frontend Web Development
What it is
Web apps work by sending code from a central server to be run by your browser. Backend web development is writing the code that runs on the server, and frontend web development is writing the code that gets sent over the internet to be run by the client, the web browser.
Learning frontend development is a combination of learning the infrastructure that makes the internet work and learning how to write software on top of that infrastructure.
Websites vs Web apps
When the world wide web first started, web pages were just plain text. Take a look: this is the first website ever, written in 1991. Websites are written in HTML, a markup language that lets you annotate (mark up) text to denote extra formatting like headings and links.
A webpage back then was just a newspaper-like document. As it evolved, the web gained new functionality, such as the ability to embed images and style the documents using CSS. With CSS, now you could change your background colors and fonts to give it a custom design, but webpages still couldn’t do anything.
Beginning in 1995, the early web browsers added support for Javascript. Unlike HTML & CSS, which solely exist to define the document, Javascript is a bona fide programing language that can make previously static pages interactive.
With breakthrough uses like Google Maps, which used Javascript to magically pull in maps piece by piece from the server as you panned around, developers gradually realized that the web was becoming a powerful platform not just for content, but full-fledged software.
This is roughy the difference between a website and a web app: a website is primarily about delivering static content, like a blog or news site. A web app is an interactive javascript program that leverages HTML & CSS to build its UI. In 2017, the line between the two can be a bit blurry. Developer Atlas, for instance, is primarily a static, content-driven site, but it uses javascript to provide some dynamic features like clicking around the visualization.
Start with websites
So, frontend development is tricky because not only do you need to learn how to program apps in Javascript, you also need to understand all of the tools and technologies to build static websites, even though doing so is not “programming” in the strictest sense.
Making websites requires learning to lay out pages in HTML & CSS and learning enough web design to make them pretty and usable. Beyond that, you must learn a host of secondary skills such as how to make your site accessible to disabled people, how to show up in search engine results, and how to put your site on the internet and optimize it to load quickly. You’ll also need to learn how the internet itself works, such as how HTTP requests work and how to set up browser caching.
Move on to Web Apps
Once you have a foundation in making websites, you can graduate to making web apps. That means, on top of everything you've learned, figuring out how to use Javascript to request data from the server and dynamically generate the HTML & CSS needed to power your app. UI programming can be quite complex, which has led to a quickly evolving ecosystem of Javascript libraries and frameworks like JQuery and React, which exist to make the process easier.
Why it matters
Frontend Web Development is one of the most popular types of software development. It isn’t for everyone, and it is such a broad topic that it is hard to be an expert in everything. The sheer complexity of modern tooling puts a bad taste in many people’s mouths.
Still, given the popularity of web apps, even if you don’t opt to become an expert frontend developer and get a job working with the popular frontend web framework de jour, knowing the fundamentals is unavoidable. Plus, it’s fun!
Related guides
How to learn it
Frontend Web development can be intimidating because it has evolved extremely quickly over the last ten years. Layers have built one atop another, making learning the cutting edge from scratch overwhelming. Trying to figure out how React’s JSX transpiler works or why it exists is challenging if you don’t have years of writing plain javascript apps to learn from.
Instead of trying to learn everything at once, start from the basics and work your way up. Before even bothering with javascript, learn to make simple websites with HTML & CSS. See making websites for more details. Once you are comfortable building a website and getting it online, you’ll be prepared to see how javascript fits in.
Start with using plain old javascript to make your first apps. Once you can work with Javascript (and maybe some JQuery) do do DOM manipulation and event handling, you can graduate to progressively more complex tools and frameworks. There’s lots more details in frontend UI programming.
My favorite resource for taking a broad look at frontend web development is the Front-End Developer Handbook.
To start learning, check out Free Code Camp and the Developer Atlas Curriculum.