How Front-End Works

When everybody involved in a project understands front-end concepts, the better the chance of a project becoming a success. That's why we created How Front-End Works: to move the web forward.
Scroll

Design

Design is the process of determining how a website should work and look. An idea for a website is transformed by a designer into a visual layout and corresponding usability concept. Developers can use this design to build a website.

A design should incorporate many aspects of a new website. This includes the information architecture (how information is organized on the page and between pages), which functionality is provided, how it looks, how the user can interact with it, and how the website looks on different screen sizes and devices (for example on a smartphone or laptop).

Design for the web can be divided into interaction design and visual design. Interaction design is the determining how users can achieve their goal using the website as efficient as possible. Visual design creates the look and feel of the website.

Sometimes one designer will create both designs, but usually both an interaction designer and a visual designer are involved in the design process.

Relevant topics

Development

Development is the process of building a website. When the design is available, front-end developers will convert that design into a front-end, the part of the website that the user interacts with. Back-end developers will create the back-end, the part that is hidden from the user, like the server or CMS. The distinction between front-end and back-end work is not always clear-cut, as front-end developers can also develop parts of the back-end.

Developers use different tools during development. This collection of tools is called the stack. A stack can consists of development servers, task runners, linters and frameworks, amongst other tools.

During development a developer will keep many things in mind, like browser compatibility, responsive behaviour, performance and accessibility.

Relevant topics

Code

Code is a human readable representation of an application or website. Developers write code when developing a website. A website is usually developed using three languages: HTML, CSS and JavaScript. The code of these three languages is interpreted by a web browser, after which it will render a web page on the screen.

HTML defines the content of a web page. It is a static representation of the content that is presented to the user of your website. Furthermore, it gives structure and meaning to web content, using headings, paragraphs, lists, images, etc.

CSS is used to style and layout a web page. In other words, using CSS you can visually format information stored in the HTML. For example, you can lay out elements on a page and style typography.

Using JavaScript you can add interactivity to a web page. Every website that does more than just display static information makes use of JavaScript. Examples are dropdown navigation menus, data validation and making animations.

Relevant topics

Architecture

The architecture of a website consists of all the tools and services you need to set up, build and deploy your website.

When creating the architecture it is important to determine which functionalities a website must support. This functionality dictates what kind of tools and services are needed. For example, for a website in which users upload a lot of photos it is crucial to decide how to process those photos and where to store them. After all, your architecture must be able to handle this stream of photos without a hitch.

A big part of creating the architecture is setting up the hosting. Here you determine where the website will be hosted. You will also decide how to get the code of your website running on this hosting, in other words, how to deploy your website.

You can completely manage your own architecture, or outsource (parts of) your architecture. An efficient way to outsource your architecture is using cloud services.

Relevant topics

Cloud

Cloud computing, or the cloud, is an on-demand platform that can consist of hosting, data storage, application services and other resources. The platform is usually served via internet and can scale with the needs of the application that uses the cloud platform.

When you use the cloud, you essentially outsource part of the resources you need to get your application or website running. For example, you can host your website at a cloud provider; the cloud provider will then manage all issues related to the hosting, so that you don’t have to spend time on these issues anymore. Other examples of services cloud providers can provide are database services, image manipulation services or authentication services.

Relevant topics

Configuration

When developing a website a lot of separate parts, like the front-end, back-end and cloud services, need to be connected and work together. Configuring these parts is an important part of front-end development.

For example, the front-end needs to get data from the CMS in order to display the website correctly to the user. The configuration is usually done by the front-end developer during development.

Relevant topics

Version control

Version control is used to record changes to code, enable collaboration between multiple developers and improve the workflow of developers. One of the most popular version control systems is Git.

Using version control, a complete history of all changes to the code is recorded in a repository. This functions as a single source of truth of the code for all developers. It is also possible to go back in time, to restore code after an accident or when errors are made and bugs are found.

When working in teams, multiple people work on the same code at the same time. To enable efficient combining, or merging, of code and thus preventing conflicts in the code during development, you can use version control.

Version control can also help with setting up a workflow. For example, using branches developers can develop, test and debug new functionality or features separate from the workflow of other developers. It can also help with releasing new features, by creating a release branch.

Relevant topics