Web Development Fundamentals for Beginners (Part 1: Frontend)
Overview
This post is the first of two chapter series of Web Development Fundamentals for Beginners. The second chapter will be “Part 2 : Backend”.
This guide is split into two parts and today we’ll start with the first one — Frontend development, and introduce you to the most important languages and tools in this area.
At the end of this article, you should be able to:
- Start thinking like a Web Developer.
- Explain what web development is and the roles of HTML, CSS, and JavaScript in creating web content.
- Know about the things you need to know to be a Web Developer.
Quote
“Websites promote you 24/7: No employee will do that.
And Web Developers create those websites.”
What is Web Development?
Web development is a specific field of software engineering that focuses on building web pages. Web pages, or web apps, are codebases that are downloaded and run in our web browser (e.g., Google Chrome) each time a user navigates to the website address. This differs from other software which is usually downloaded once and run as a standalone application on your computer or phone. Web development makes for an exciting career, as a web development cycle is usually much shorter and you get to iterate over your software at a much faster rate.
The major building blocks of the web are HTML, CSS, and JavaScript. We will be talking about all three languages. We can also think of web development as being split into two main categories: front end and back end. We will discuss about Front end in detail.
What is meant by the term Front end?
Everything you have ever seen on the web is considered ‘front end’. Front end is what we see when we open a web page or app. Code is downloaded from a server and is rendered to the screen by a web browser. What happens when we interact with the code is also considered front end. This is often referred to as the ‘Presentation Layer’ or ‘Client’ in software development terms.
Client-side
This is for front-end development. This requires the browser. such as Google Chrome or Firefox. to run the scripts or codes. This is where the user interacts. The client-side scripting languages are HTML, CSS, and JavaScript.
Frontend development languages and tools
We’ll start with a sort of a map of the frontend landscape that depicts the things you should at least know about to orientate in this area.
Frontend development, also known as UI development, refers to creating web user interfaces, the parts of the application that the user sees and interacts with. Frontend development stands firmly on three pillars: HTML for markup, CSS for styling and JavaScript for logic and interactions. Although these three technologies stood the test of time, the underlying tools and frameworks change constantly. This section will give you a starting point to start the exploration of the frontend ecosystem.
Frontend development is also tightly related to web design and user experience and the border between the two can be different in each company. In general frontend developers focus on technical issues, while web designers are concerned with aesthetics and user experience.
HTML
Hyper Text Markup Language (HTML) is a markup language that allows you to structure the information that is displayed to the user. Its an HTML document that consists of elements each represented by an HTML tag, such as a heading, a paragraph of text or a text input field. HTML documents can also link to other documents using hyperlinks. Each tag carries its own type of content, has a certain appearance and attached behavior. Once you get a hang of HTML, you will be able to create very simple static HTML pages.
CSS
Cascading Style Sheets (CSS) is a styling language used to describe the visual appearance of HTML elements. It can be used to controls aspects like the positioning of an element, its dimensions, text style or colors, or almost any other visual aspect of a website. Styles are defined as a set of rules that can be applied to a single element of a subset of elements on the page. Recent CSS features allow you to go way beyond basic styling and control more complex visual aspects, such as animations.
JavaScript
JavaScript (JS) is the most used programming language for developing user interfaces for the web. It allows you to add custom behavior to your websites, such as reacting to user events, loading data from web services and showing or hiding elements on a page. It also allows you to interact with the browser through various APIs. You can use it to both add separate interactive elements to your website or create complex web applications.
Another term that you may encounter related to JavaScript is ECMAScript which is actually a language specification for JavaScript. In most cases, they can be treated as synonyms.
Frameworks
JavaScript is a powerful language, but if your looking to make a complex application, using it without a framework will result in masses of complex boilerplate code. To make it simpler, there are a number of frameworks out there that help with the basic functionality such as HTML manipulation, data loading, overall application architecture and etc. The three most popular frameworks at the moment are React, Angular and Vue.js.
- React is a library for building user interfaces developed by Facebook. React is based around creating components, such as a button or a side menu, that can render HTML based on input parameters. React components are written using an extension to JavaScript called JSX, that allows you to conveniently combine JavaScript code and HTML. Components can be composed together to create complex UI elements and whole applications. React is not a framework per se, it only provides the view layer, however, its rich ecosystem of tools and libraries has everything you’ll need to create complex applications. React is easy to start with, but with time you are expected to learn new libraries to fill the missing gaps.
- Angular — a component-oriented “batteries included” type of framework developed by Google. Angular applications are usually written in TypeScript. It provides most o the things you’ll need to build a web application including a CLI tool to bootstrap, develop and build the project as well as libraries to manage forms, data loading, routing, etc. Although it does provide most of the things out of the box, it has a higher abstraction and complexity levels, and the need to learn TypeScript as a primary development language makes the initial learning curve steeper.
- Vue.js is a framework designed to be modular and incrementally adoptable. You can start using it as a view layer and add additional libraries as you need them. In contrast to other frameworks, the most important libraries are maintained by the core Vue.js team.
You might also encounter other frameworks out there that have a smaller community or are getting superseded, such as Ember.js or AngularJS.
Component Libraries
Component libraries are collections of components that can be used to assemble your application. Some of them implement the most common components such as buttons and drop downs, while others also provide utilities for creating complex responsive layouts. Although each of them has its own distinctive visual style, they can usually be customized to match the design and branding of your project. Most of them are available as plain CSS and JavaScript, however, they are often ported to work with other popular JavaScript frameworks. Some of the more popular libraries are:
- Bootstrap is a powerful framework for creating responsive web applications. It comes with a large set of components as well as utilities for creating layouts and a theming engine. You can add user interactions to components, such as a dropdown, minimal knowledge of JavaScript. There is also a wide selection of ready-made website themes built with Bootstrap.
- Material UI — a popular implementation of Google’s Material Design. It provides a set of components as well as guidelines on how your application should look and feel like according to Google. There are other implementations available for Angular or vanilla JavaScript.
Some other honorable mentions include ant-design, Foundation, Bulma, Pure and Semantic UI.
Frontend tools
The frontend ecosystem is known for its large arsenal of helpful tools each designed for their own purpose. Since there are so many of them, there’s no way we can cover everything in this guide, so instead, we’ll focus on the one that is important to get started with.
NPM
Npm actually means two things:
1. A software registry that contains thousands of open-source libraries and tools that you can install and use in your project.
2. A CLI tool that allows to install, update and remove packages from the registry.
Using npm allows you to install libraries that will be used by your project and document them in a JSON file. Storing this file together with the code base means that you can explicitly declare the dependencies of your project and quickly install them on different environments. You can also use it to publish your own libraries and share them with other developers.
The npm CLI tool also allows you to run scripts that can be used to execute tests, compile code or perform code analysis.
An analog to npm is Yarn, that offers some performance improvements and better support for library development and is compatible with the npm package registry.
Where do we write code (text editors)?
The codes can be written directly in a text editor. Some great free text editors I recommend are VSCode, Atom, Sublime Text 3 etc.
What are unique challenges web developers face?
While there are a lot of pros in developing software for use on the web, there are some cons as well. These can be unique challenges to a web developer.
Load times. Do you ever go to a website and it takes forever to load? What is your reaction? We usually get frustrated and leave. In fact, most users will leave a site if it does not load for them in 15 seconds or less! As mentioned earlier, connection speed is a large hurdle to overcome when dealing with web development. A user’s speed can range from very fast (Fiber optic) to slow (mobile 3G or satellite). It is our job as web developers to take ALL users into account. Therefore, we learn tricks to keep users engaged while our code is being downloaded, and learn to keep our code small so it can be easily downloaded.
Different Browsers. Not only do we have to worry about load times, but also differences in browser technology. Mobile browsers are different than desktop (or laptop) browsers. Older browsers (many computers still use Windows XP and IE9) are extremely different than newer browsers, and developing for each provides a unique challenge. Ultimately you will need to make sacrifices and not support some browsers (which is a call marketing department will make) but you should be able to code for the browser you do support.
Accessibility. If you are not a person that uses an accessibility device to consume software on the web, then you may have no idea these exist. Screen readers, alternative keyboards/navigation devices, devices for the hearing impaired, the color blind, font sizes for visually impaired people, are all concepts that we tend to not think about. As a web developer, you will need to start thinking about these users not only from a human decency perspective, but also because these users make up a non-insignificant market share. There are also legal issues that require accessibility.
This should be enough to get you all started on frontend development track. If you feel that this is something that you want to learn in more detail, then you will have a whole lot of interesting stuff waiting for you.
In the next post, i will do an overview of backend development and discuss what we have on the server-side.
