If you are creating content for the web, you will be by default associated with one of two camps - the Back-End or the Front-End. The latter or Front-End development is often considered to be associated with HTML, CSS and a bit of JavaScript. Well that was then. Nowadays, it is a blend of creativity and logic. It’s got something for everyone. You can get really creative and create one-of-a-kind experiences on the web, work with graphics and animations, or you can build robust applications with complicated build workflows consisting of unit tests and continuous integration/deployment.

Anyone who has done some programming before and are just getting introduced to Front-End web development, often have this preconception that it is a lot easier than traditional programming. These notions will soon evaporate as they delve deeper in to the morass that is Front-End development.

The Real Truth

The most obvious reason for these types of misconceptions, is a lack of knowledge as to what exactly it is that Front-End developers do. You often hear these sarcastic sentiments - apart from making layouts for displaying data, a bit of HTML, coupled with CSS to spice it up and some lines of JavaScript there you go! Websites are too easy to build! If you had to say it in simple terms, yes a glorified electronic brochure. Just like the printed version when done, that is it - static. But nowadays, you would have to concede it is not that glorified electronic brochure anymore whichever way you look at it.

Some fundamentals

JavaScript is a web-based scripting language that has been extensively used in web application development. In particular, it is often used to add a variety of dynamic functions to web pages, providing users with a smoother and more pleasing browsing experience. In fact, all modern HTML pages use JavaScript

• HTML is used to define web content and basic structure
• CSS is used to control the layout of the web page
• JavaScript is used to control the page’s dynamic behaviour

Web pages are not the only place to use JavaScript. Many desktop and server programs use it as well. Node.js, for example, is an extremely popular run-time environment that executes JavaScript outside of a browser. Besides this, some databases such as MongoDB and CouchDB also use JavaScript as a programming language.

Back to the frontend, the layout could be for a personal website showcasing someone's portfolio, an author promoting and selling their books online, or a more complicated app such as an analytics dashboard with multiple components having their own internal state, and dynamic values in each section. Or it could be rendering a map, or a chart, which requires processing a lot of data on the fly. The data itself could be coming from a REST API, or a GraphQL API. The developer needs to know how and when to fetch this data dynamically from different APIs, process it internally, as well as keep a clean and understandable user interface on top of it. The interface itself has to be responsive (optimized for viewports of mobile devices), needs to have complementing color schemes, fonts, typography. Add user authentication, SEO (Search Engine Optimization), testing, build configurations, deployments, performance optimization techniques, and you see, it starts getting a bit overwhelming as you can see. Glorified Elecronic Brochure far from it and we only just getting started.

Some Advice

HTML, CSS, and JavaScript are the three pillars of Front-End web development. These three technologies are different in their definition, but are always used together. People usually tend to neglect HTML and CSS after learning the basics, and jump straight into JavaScript Frameworks because that’s where they think the good stuff is (programming). What most people failed to understand is that programming is not much about the syntax but a way of thinking.

It is not often stressed enough how important it is to solidify the fundamental concepts of Front-End development (i.e. HTML, CSS and JavaScript). If you invest time and energy in learning them properly, you’ll realize that everything else is adding another layer of abstraction over the basic stuff, offering new features or providing you pre-built stuff so that you won’t have to reinvent the wheel so to speak.

My main advice to all Front-End web developers is to read the documentation. This cannot be stressed enough. Make a habit of reading because 90% of the time you have a question about implementation, it’s most likely already documented. Learn about how the web works, the HTTP Protocol, the different HTTP methods and HTTP Status Codes. Write semantic HTML - Semantic HTML is the use of HTML markup to reinforce the semantics, or meaning, of the information in webpages and web applications rather than merely to define its presentation or look. Semantic HTML is processed by traditional web browsers as well as by many other user agents. The benefit of writing semantic HTML stems from what should be the driving goal of any web page - the desire to communicate. By adding semantic tags to your document, you provide additional information about that document, which aids in communication. Specifically, semantic tags make it clear to the browser the meaning of each section of a page and its content. That clarity is also communicated with search engines, ensuring that the right pages are delivered for the right queries.

Focus on CSS!

CSS is like the neglected middle child who comes back to haunt you later on in your development journey. Often we assume there’s no real depth to it, but in reality we realise it’s importance later on, when we just can’t get our web pages to look as good as we want them to. Or when we encounter a CSS bug, and nothing we do seems to fix it. Learn about how CSS works internally, especially topics like specificity, pseudo-classes and responsive design. Learn about different modern CSS layout models like Flexbox and CSS Grid. Flexbox Froggy and Grid Garden are two websites where you can learn these concepts while playing a game!

Learn atleast one CSS framework

A CSS framework is a usually a library containing predefined classes and components that makes the job easier for developers. There are many to choose from but the most popular one is Bootstrap. There are others like SemanticUI, Bulma, TailwindCSS or MaterializeCSS.

Learn a CSS preprocessor

A CSS preprocessor is a CSS-like language which offers more functionality to the developers like nested syntax, variables, mixins, which then compiles to regular CSS. I would recommend learning SASS, but there are others too like less or Stylus.

Learn JavaScript before learning a framework

Another common mistake learners make, is to dive straight into learning a framework without learning about the language first. It’s called a JavaScript framework for a reason, meaning the prerequisite is a sound knowledge of JavaScript. JavaScript is at it’s best as a functional programming language. In computer science, functional programming is a programming paradigm where programs are constructed by applying and composing functions. It is a declarative programming paradigm in which function definitions are trees of expressions that each return a value, rather than a sequence of imperative statements which change the state of the program. JavaScript is a multi-paradigm programming language. It conforms to the philosophies of procedural, functional as well as object-oriented programming.

What Framework Should You Learn?

Front-End frameworks are all the rage right now, and I’m 99% sure that you’ve seen this debate somewhere on the internet, which is:

Angular vs React vs Vue

Angular, React and Vue are all highly popular JavaScript libraries and frameworks that help developers build complex, reactive and modern user interfaces for the web. From my experience, neither one is “better” than the other. All three are component-focused frameworks, and ultimately serve the purpose of creating a presentation layer for your web app. The differences though, are subtle and the choice comes down to you as the developer.

Background

Angular is an open-source web application framework developed and maintained by Google. React is an open-source JavaScript library for building user interfaces, developed and maintained by Facebook. Vue is an open-source JavaScript framework for building user interfaces and single-page applications, created by Evan You, and is maintained by him and the rest of their active core team members.

Syntax

Angular uses TypeScript and splits HTML and TypeScript logic into different parts. React uses JavaScript and a syntax extension to it called “JSX” (basically it combines HTML and JavaScript logic). Vue uses regular JavaScript and splits HTML and JavaScript logic into different parts.

Popularity

All three frameworks are popular but React is a bit more popular than Angular, which in turn is getting used more than Vue.

Built-In Features

Angular offers a lot of built-in features, Vue has some built-in features, while React is very minimalistic. In simple words, If you like Object-Oriented programming, and separation of concerns for your HTML views and your TypeScript logic, learn Angular. If you like Functional programming with JavaScript and are comfortable using it for maintaining your views and logic, learn React. If you like separation of concerns for your HTML views but want to use Vanilla JavaScript for your logic, then learn Vue. There is no downside when learning either one of these frameworks, and once you learn one, you can definitely move forward and learn another one. They’re syntactically different, but similar in their core fundamentals! These three are not the only frameworks in the market, but they’re the more popular ones. There are other frameworks like Ember, Svelte, Preact and Mithril to name a few