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.